frontend: apply sidebar improvements

Author: malinskibeniamin

frontend/src/components/layout/sidebar.tsx

@@ -29,7 +29,6 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
-  SidebarRail,
   useSidebar,
 } from 'components/redpanda-ui/components/sidebar';
 import { ChevronsLeft, ChevronsRight, ChevronUp, LogOut, Settings } from 'lucide-react';
@@ -268,8 +267,6 @@ export function AppSidebar() {
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarFooter>
-
-      <SidebarRail />
     </Sidebar>
   );
 }

frontend/src/components/redpanda-ui/components/motion-highlight.tsx

@@ -102,7 +102,7 @@ function MotionHighlight<T extends string>(props: MotionHighlightProps<T>) {
     defaultValue,
     onValueChange,
     className,
-    transition = { type: 'spring', stiffness: 350, damping: 35 },
+    transition = { type: 'tween', ease: 'easeOut', duration: 0.2 },
     hover = false,
     enabled = true,
     controlledItems,

frontend/src/components/redpanda-ui/components/sidebar.tsx

@@ -251,7 +251,7 @@ function Sidebar({
       {/* This is what handles the sidebar gap on desktop */}
       <div
         className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-400 ease-[cubic-bezier(0.7,-0.15,0.25,1.15)]',
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-out',
           'group-data-[collapsible=offcanvas]:w-0',
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'
@@ -262,7 +262,7 @@ function Sidebar({
       />
       <div
         className={cn(
-          'fixed inset-y-0 z-10 flex max-md:hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-400 ease-[cubic-bezier(0.75,0,0.25,1)]',
+          'fixed inset-y-0 z-10 flex max-md:hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-out',
           side === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
@@ -723,7 +723,7 @@ function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {
   return (
     <ul
       className={cn(
-        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-1 py-0.5',
         'group-data-[collapsible=icon]:hidden',
         className
       )}
@@ -764,7 +764,7 @@ const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarMenuSubB
         <Comp
           aria-disabled={props['aria-disabled']}
           className={cn(
-            'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-0.5 text-sidebar-foreground outline-hidden ring-sidebar-ring focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+            'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
             'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
             size === 'sm' && 'text-xs',
             size === 'md' && 'text-sm',

frontend/src/components/redpanda-ui/components/tooltip.tsx

@@ -81,7 +81,7 @@ function TooltipContent({
   className,
   side = 'top',
   sideOffset = 4,
-  transition = { type: 'spring', stiffness: 300, damping: 25 },
+  transition = { type: 'tween', ease: 'easeOut', duration: 0.15 },
   arrow = true,
   children,
   testId,
@@ -104,7 +104,7 @@ function TooltipContent({
               exit={{ opacity: 0, scale: 0, ...initialPosition }}
               transition={transition}
               className={cn(
-                'relative bg-primary text-primary-foreground shadow-md w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-sm text-balance',
+                'relative bg-base-800 dark:bg-base-700 text-white shadow-md w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-sm text-balance',
                 className,
               )}
             >
@@ -113,7 +113,7 @@ function TooltipContent({
               {arrow && (
                 <TooltipPrimitive.Arrow
                   data-slot="tooltip-content-arrow"
-                  className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]"
+                  className="bg-base-800 fill-base-800 dark:bg-base-700 dark:fill-base-700 z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]"
                 />
               )}
             </motion.div>

frontend/src/components/redpanda-ui/style/theme.css

@@ -76,7 +76,7 @@
   --color-sidebar-accent: oklch(1 0 0 / 8%);
   --color-sidebar-accent-foreground: var(--color-base-100);
   --color-sidebar-border: var(--color-base-600);
-  --color-sidebar-ring: var(--color-primary-500);
+  --color-sidebar-ring: var(--color-secondary-400);
   --color-selection: oklch(0.8462 0.027 262.33);
   --color-selection-foreground: var(--color-base-800);
   --color-sidebar-selection: oklch(0.5547 0.087 264.14);
@@ -127,7 +127,7 @@
   --color-sidebar-accent: oklch(0 0 0 / 24%);
   --color-sidebar-accent-foreground: var(--color-base-100);
   --color-sidebar-border: var(--color-base-500);
-  --color-sidebar-ring: var(--color-primary-500);
+  --color-sidebar-ring: var(--color-secondary-400);
   --color-selection: oklch(0.8462 0.027 262.33);
   --color-selection-foreground: var(--color-base-200);
   --color-sidebar-selection: oklch(0.5547 0.087 264.14);