feat(Labels): change the styles of the component

src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Labels.svelte

@@ -6,6 +6,7 @@
 import {
     FontVirtualList,
     type UnifiedFont,
+    unifiedFontStore,
 } from '$entities/Font';
 import FontApplicator from '$entities/Font/ui/FontApplicator/FontApplicator.svelte';
 import { displayedFontsStore } from '$features/DisplayFont';
@@ -35,19 +36,18 @@ interface Props<T> {
 let { fontA, fontB, sliderPos }: Props<T> = $props();
 
 const fontList = $derived(
-    displayedFontsStore.fonts.filter(font => font.name !== fontA.name && font.name !== fontB.name),
+    // displayedFontsStore.fonts.filter(font => font.name !== fontA.name && font.name !== fontB.name),
+    unifiedFontStore.fonts,
 );
 
-function selectFontA(fontId: string) {
+function selectFontA(font: UnifiedFont) {
-    const newFontA = displayedFontsStore.getById(fontId);
+    if (!font) return;
-    if (!newFontA) return;
+    displayedFontsStore.fontA = font;
-    displayedFontsStore.fontA = newFontA;
 }
 
-function selectFontB(fontId: string) {
+function selectFontB(font: UnifiedFont) {
-    const newFontB = displayedFontsStore.getById(fontId);
+    if (!font) return;
-    if (!newFontB) return;
+    displayedFontsStore.fontB = font;
-    displayedFontsStore.fontB = newFontB;
 }
 </script>
 
@@ -55,58 +55,84 @@ function selectFontB(fontId: string) {
     name: string,
     id: string,
     fonts: UnifiedFont[],
-    handleChange: (value: string) => void,
+    selectFont: (font: UnifiedFont) => void,
+    align: 'start' | 'end',
 )}
-    <div
+    <div class="z-50 pointer-events-auto" onpointerdown={(e => e.stopPropagation())}>
-        class="z-50 pointer-events-auto **:bg-transparent"
+        <SelectRoot type="single" disabled={!fontList.length}>
-        onpointerdown={(e => e.stopPropagation())}
-    >
-        <SelectRoot type="single" onValueChange={handleChange}>
             <SelectTrigger
-                class={cn(buttonVariants({ variant: 'ghost' }), 'border-none, hover:bg-indigo-100')}
+                class={cn(
-                disabled={!fontList.length}
+                    'w-44 sm:w-52 h-9 border border-gray-300/40 bg-white/60 backdrop-blur-sm',
+                    'px-3 rounded-lg transition-all flex items-center justify-between gap-2',
+                    'font-mono text-[11px] tracking-tight font-medium text-gray-900',
+                    'hover:bg-white/80 hover:border-gray-400/60 hover:shadow-sm',
+                )}
             >
-                <FontApplicator name={name} id={id}>
+                <div class="text-left flex-1 min-w-0">
-                    {name}
+                    <FontApplicator name={name} id={id}>
-                </FontApplicator>
+                        {name}
+                    </FontApplicator>
+                </div>
             </SelectTrigger>
             <SelectContent
-                class="h-60 bg-transparent **:bg-transparent backdrop-blur-0 data-[state=open]:backdrop-blur-lg transition-[backdrop-filter] duration-200"
+                class={cn(
-                scrollYThreshold={100}
+                    'bg-white/95 backdrop-blur-xl border border-gray-300/50 shadow-xl',
+                    'w-52 max-h-[280px] overflow-hidden rounded-lg',
+                )}
                 side="top"
+                align={align}
+                sideOffset={8}
+                size="small"
             >
-                <FontVirtualList items={fonts}>
+                <div class="p-1.5">
-                    {#snippet children({ item: font })}
+                    <FontVirtualList items={fonts}>
-                        <SelectItem value={font.id} class="data-[highlighted]:bg-indigo-100">
+                        {#snippet children({ item: font })}
-                            <FontApplicator name={font.name} id={font.id}>
+                            {@const handleClick = () => selectFont(font)}
-                                {font.name}
+                            <SelectItem
-                            </FontApplicator>
+                                value={font.id}
-                        </SelectItem>
+                                class="data-[highlighted]:bg-gray-100 font-mono text-[11px] px-3 py-2.5 rounded-md cursor-pointer transition-colors"
-                    {/snippet}
+                                onclick={handleClick}
-                </FontVirtualList>
+                            >
+                                <FontApplicator name={font.name} id={font.id}>
+                                    {font.name}
+                                </FontApplicator>
+                            </SelectItem>
+                        {/snippet}
+                    </FontVirtualList>
+                </div>
             </SelectContent>
         </SelectRoot>
     </div>
 {/snippet}
 
-<div class="absolute bottom-6 inset-x-6 sm:inset-x-6 flex justify-between items-end pointer-events-none z-20">
+<div class="absolute bottom-8 inset-x-6 sm:inset-x-12 flex justify-between items-end pointer-events-none z-20">
     <div
-        class="flex flex-col gap-0.5 transition-opacity duration-300 items-start"
+        class="flex flex-col gap-2 transition-all duration-500 items-start"
-        style:opacity={sliderPos < 15 ? 0 : 1}
+        style:opacity={sliderPos < 20 ? 0 : 1}
+        style:transform="translateY({sliderPos < 20 ? '8px' : '0px'})"
     >
-        <span class="text-[0.5rem] font-mono uppercase tracking-widest text-indigo-400">
+        <div class="flex items-center gap-2.5 px-1">
-            Baseline
+            <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_6px_rgba(99,102,241,0.6)]"></div>
-        </span>
+            <div class="w-px h-2.5 bg-gray-300/60"></div>
-        {@render fontSelector(fontB.name, fontB.id, fontList, selectFontB)}
+            <span class="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
+                ch_01
+            </span>
+        </div>
+        {@render fontSelector(fontB.name, fontB.id, fontList, selectFontB, 'start')}
     </div>
 
     <div
-        class="flex flex-col items-end text-right gap-1 transition-opacity duration-300"
+        class="flex flex-col items-end text-right gap-2 transition-all duration-500"
-        style:opacity={sliderPos > 85 ? 0 : 1}
+        style:opacity={sliderPos > 80 ? 0 : 1}
+        style:transform="translateY({sliderPos > 80 ? '8px' : '0px'})"
     >
-        <span class="text-[0.5rem] font-mono uppercase tracking-widest text-slate-400">
+        <div class="flex items-center gap-2.5 px-1">
-            Comparison
+            <span class="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
-        </span>
+                ch_02
-        {@render fontSelector(fontA.name, fontA.id, fontList, selectFontA)}
+            </span>
+            <div class="w-px h-2.5 bg-gray-300/60"></div>
+            <div class="w-1.5 h-1.5 rounded-full bg-gray-900 shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
+        </div>
+        {@render fontSelector(fontA.name, fontA.id, fontList, selectFontA, 'end')}
     </div>
 </div>