feat: beautiful scroll-area

unnoq · Feb 18, 2024 · 64632d7 · 64632d7
1 parent 3b819bd
commit 64632d7
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/@web/components/ui/scroll-area.tsx b/@web/components/ui/scroll-area.tsx
@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollBar className="w-1.5 @2xl:w-2 @6xl:w-2.5 z-[999]" />
+    <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ))
@@ -29,13 +29,15 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       'flex touch-none select-none transition-colors',
-      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      orientation === 'vertical' &&
+        'h-full w-1.5 @2xl:hover:w-2 @6xl:hover:w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-1.5 @2xl:hover:h-2 @6xl:hover:h-2.5 flex-col border-t border-t-transparent p-[1px]',
       className,
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-foreground/40" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName