src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte

@@ -13,6 +13,7 @@ import {
 import { springySlideFade } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
+    Button,
     Footnote,
     IconButton,
     SearchBar,
@@ -66,62 +67,39 @@ function toggleFilters() {
 }
 </script>
 
-<div class="flex flex-col gap-3 relative">
-    <div class="relative">
+<div class="flex flex-col gap-3 border-b border-t border-[#1a1a1a]/5 dark:border-white/10">
+    <div class="relative w-full flex border-b border-[#1a1a1a]/5 dark:border-white/10 py-4 md:py-6">
         <SearchBar
             id="font-search"
             class="w-full"
-            placeholder="search_typefaces..."
+            placeholder="Typeface Search"
             bind:value={filterManager.queryValue}
+            fullWidth
         />
 
-        <div class="absolute right-4 top-1/2 translate-y-[-50%] z-10">
-            <div class="flex items-center gap-2">
-                <div class="w-px h-5 bg-border-subtle"></div>
-                <div style:transform="scale({transform.current.scale})">
-                    <IconButton onclick={toggleFilters}>
+        <Button
+            class="md:ml-8 w-full md:w-auto"
+            onclick={toggleFilters}
+            iconPosition="left"
+            variant={showFilters ? 'secondary' : 'ghost'}
+        >
+            Parameters
             {#snippet icon()}
-                            <SlidersHorizontalIcon
-                                class={cn(
-                                    showFilters ? 'stroke-foreground stroke-3' : 'stroke-text-muted',
-                                )}
-                            />
+                <SlidersHorizontalIcon class="size-4" />
             {/snippet}
-                    </IconButton>
-                </div>
-            </div>
-        </div>
+        </Button>
     </div>
 
     {#if showFilters}
         <div
             transition:springySlideFade|local={slideConfig}
-            class="will-change-[height,opacity] contain-layout overflow-hidden"
+            class="will-change-[height,opacity] contain-layout overflow-hidden py-6 md:py-8"
         >
-            <div
-                class="
-                    p-3 sm:p-4 md:p-5 rounded-xl
-                    backdrop-blur-md bg-background-80
-                    border border-border-muted
-                    shadow-[0_1px_3px_rgba(0,0,0,0.04)]
-                "
-            >
-                <div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4">
-                    <div class="w-1 h-1 rounded-full bg-foreground opacity-70"></div>
-                    <div class="w-px h-2.5 bg-border-subtle"></div>
-                    <Footnote>
-                        filter_params
-                    </Footnote>
-                </div>
-
-                <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
                 <Filters />
             </div>
 
-                <div class="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t border-border-subtle">
-                    <FilterControls class="m-auto w-fit" />
-                </div>
-            </div>
+            <FilterControls />
         </div>
     {/if}
 </div>