feat(web): ✨ Rounded corners on selected assets (#3524)

* feat(web): ✨ Rounded corners on selected assets

Add rounded corner on selected items and fix circle icon transparent background on selection

* refactor: Ran prettier to fix formatting issues

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -30,7 +30,7 @@
   class="object-cover transition duration-300 {border
     ? 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary'
     : ''}"
-  class:rounded-lg={curve}
+  class:rounded-xl={curve}
   class:shadow-lg={shadow}
   class:rounded-full={circle}
   class:opacity-0={!thumbhash && !complete}
@@ -52,7 +52,7 @@
     src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
     alt={altText}
     class="absolute top-0 object-cover"
-    class:rounded-lg={curve}
+    class:rounded-xl={curve}
     class:shadow-lg={shadow}
     class:rounded-full={circle}
     draggable="false"

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -96,7 +96,9 @@
             {#if disabled}
               <CheckCircle size="24" class="text-zinc-800" />
             {:else if selected}
+              <div class="rounded-full bg-[#D9DCEF] dark:bg-[#232932]">
                 <CheckCircle size="24" class="text-immich-primary" />
+              </div>
             {:else}
               <CheckCircle size="24" class="text-white/80 hover:text-white" />
             {/if}
@@ -107,10 +109,12 @@
       <div
         class="absolute h-full w-full select-none bg-gray-100 transition-transform dark:bg-immich-dark-gray"
         class:scale-[0.85]={selected}
+        class:rounded-xl={selected}
       >
         <!-- Gradient overlay on hover -->
         <div
           class="absolute z-10 h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100"
+          class:rounded-xl={selected}
         />
 
         <!-- Favorite asset star -->
@@ -141,6 +145,7 @@
             widthStyle="{width}px"
             heightStyle="{height}px"
             thumbhash={asset.thumbhash}
+            curve={selected}
           />
         {:else}
           <div class="flex h-full w-full items-center justify-center p-4">
@@ -153,6 +158,7 @@
             <VideoThumbnail
               url={api.getAssetFileUrl(asset.id, false, true, publicSharedKey)}
               enablePlayback={mouseOver}
+              curve={selected}
               durationInSeconds={timeToSeconds(asset.duration)}
             />
           </div>
@@ -165,6 +171,7 @@
               pauseIcon={MotionPauseOutline}
               playIcon={MotionPlayOutline}
               showTime={false}
+              curve={selected}
               playbackOnIconHover
             />
           </div>

web/src/lib/components/assets/thumbnail/video-thumbnail.svelte

@@ -10,6 +10,7 @@
   export let enablePlayback = false;
   export let playbackOnIconHover = false;
   export let showTime = true;
+  export let curve = false;
   export let playIcon = PlayCircleOutline;
   export let pauseIcon = PauseCircleOutline;
 
@@ -68,6 +69,7 @@
   <video
     bind:this={player}
     class="h-full w-full object-cover"
+    class:rounded-xl={curve}
     muted
     autoplay
     src={url}