Fixed various Unsplash design bugs (#19806)

ref DES-167

- fixed visibility of Unsplash button in publication cover setting
- fixed gallery image ratio
- fixed search input border style
- fixed icon fill color issue of the download button
- fixed insert image alignment
- fixed author thumbnail pixelation

apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx

@@ -129,7 +129,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
                                 })
                             }
                         }
-                        unsplashButtonClassName='!top-1 !right-1'
+                        unsplashButtonClassName='!top-1 !right-1 z-50'
                         unsplashEnabled={unsplashEnabled}
                         onDelete={() => updateSetting('cover_image', null)}
                         onUpload={async (file) => {

apps/admin-x-settings/src/unsplash/ui/UnsplashButton.tsx

@@ -24,11 +24,11 @@ const UnsplashButton: React.FC<UnsplashButtonProps> = ({icon, label, ...props})
 
     return (
         <a
-            className="flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white px-3 py-2 font-sans text-sm font-medium leading-6 text-grey-700 opacity-90 transition-all ease-in-out first-of-type:mr-3 hover:opacity-100"
+            className="flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white px-3 py-2 font-sans text-sm font-medium leading-6 text-grey-700 opacity-90 transition-all ease-in-out hover:opacity-100"
             onClick={e => e.stopPropagation()}
             {...props}
         >
-            {icon && Icon && <Icon className={`h-4 w-4 fill-red stroke-[3px] ${label && 'mr-1'}`} />}
+            {icon && Icon && <Icon className={`h-4 w-4 ${icon === 'heart' ? 'fill-red' : ''} stroke-[3px] ${label && 'mr-1'}`} />}
             {label && <span>{label}</span>}
         </a>
     );

apps/admin-x-settings/src/unsplash/ui/UnsplashImage.tsx

@@ -31,38 +31,38 @@ const UnsplashImage: FC<UnsplashImageProps> = ({payload, srcUrl, links, likes, u
     };
 
     return (
-        <div 
+        <div
             className={`relative mb-6 block bg-grey-100 ${zoomed ? 'h-full w-[max-content] cursor-zoom-out' : 'w-full cursor-zoom-in'}`}
-            data-kg-unsplash-gallery-item 
+            data-kg-unsplash-gallery-item
             onClick={handleClick}>
             <img
                 alt={alt}
-                className={`${zoomed ? 'h-full w-auto object-contain' : ''}`}
+                className={`${zoomed ? 'h-full w-auto object-contain' : 'block h-auto'}`}
                 height={height}
                 loading='lazy'
                 src={srcUrl}
                 width={width}
-                data-kg-unsplash-gallery-img 
+                data-kg-unsplash-gallery-img
             />
             <div className="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-black/5 via-black/5 to-black/30 p-5 opacity-0 transition-all ease-in-out hover:opacity-100">
-                <div className="flex items-center justify-end">
+                <div className="flex items-center justify-end gap-3">
                     <UnsplashButton
                         data-kg-button="unsplash-like"
-                        href={`${links.html}/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit`} 
-                        icon="heart" 
-                        label={likes.toString()} 
-                        rel="noopener noreferrer" 
-                        target="_blank" 
+                        href={`${links.html}/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit`}
+                        icon="heart"
+                        label={likes.toString()}
+                        rel="noopener noreferrer"
+                        target="_blank"
                     />
                     <UnsplashButton
                         data-kg-button="unsplash-download"
-                        href={`${links.download}/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit&amp;force=true`} 
-                        icon="download" 
+                        href={`${links.download}/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit&amp;force=true`}
+                        icon="download"
                     />
                 </div>
                 <div className="flex items-center justify-between">
                     <div className="flex items-center">
-                        <img alt="author" className="mr-2 h-8 w-8 rounded-full" src={user.profile_image.small} />
+                        <img alt="author" className="mr-2 h-8 w-8 rounded-full" src={user.profile_image.medium} />
                         <div className="mr-2 truncate font-sans text-sm font-medium text-white">{user.name}</div>
                     </div>
                     <UnsplashButton label="Insert image" data-kg-unsplash-insert-button onClick={(e) => {

apps/admin-x-settings/src/unsplash/ui/UnsplashSelector.tsx

@@ -29,7 +29,7 @@ const UnsplashSelector: FunctionComponent<UnsplashSelectorProps> = ({closeModal,
                         </h1>
                         <div className="relative w-full max-w-sm">
                             <SearchIcon className="absolute left-4 top-1/2 h-4 w-4 -translate-y-2 text-grey-700" />
-                            <input className="h-10 w-full rounded-full border border-grey-300 pl-10 pr-8 font-sans text-md font-normal text-black focus:border-grey-400 focus-visible:outline-none" placeholder="Search free high-resolution photos" autoFocus data-kg-unsplash-search onChange={handleSearch} />
+                            <input className="h-10 w-full rounded-full border border-solid border-grey-300 pl-10 pr-8 font-sans text-md font-normal text-black focus:border-grey-400 focus-visible:outline-none" placeholder="Search free high-resolution photos" autoFocus data-kg-unsplash-search onChange={handleSearch} />
                         </div>
                     </header>
                     {children}