Update Navbar & Fix Shadows

v3xlabs · Dec 17, 2024 · 86d4d04 · 86d4d04
1 parent 686c02c
commit 86d4d04
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
@@ -133,7 +133,9 @@ export const Navbar = () => {
                     <DropdownMenu.Root>
                         <DropdownMenu.Trigger asChild>
                             <button
-                                className="flex flex-col md:flex-row md:gap-1 items-center justify-center hover:bg-black/5"
+                                className={
+                                    'flex flex-col md:flex-row md:gap-1 items-center justify-center hover:bg-black/5 aria-expanded:bg-black/5'
+                                }
                                 data-testid="more-dropdown-trigger"
                             >
                                 <FiMoreHorizontal className="block md:hidden" />
@@ -143,29 +145,29 @@ export const Navbar = () => {
                                 <FiChevronDown className="hidden md:block" />
                             </button>
                         </DropdownMenu.Trigger>
-                        <DropdownMenu.Content sideOffset={5}>
+                        <DropdownMenu.Content>
                             {navLinks2.map(({ path, name, icon, slug }) => (
                                 <DropdownMenu.Item asChild key={path}>
                                     <Link
                                         to={path}
                                         data-testid={slug}
-                                        className="flex items-center justify-start py-2 hover:bg-black/5 rounded-md"
+                                        className="flex items-center justify-start py-2.5 cursor-pointer hover:bg-black/5 rounded-md"
                                     >
                                         {icon}
-                                        <span className="text-xs">{name}</span>
+                                        <span className="text-sm">{name}</span>
                                     </Link>
                                 </DropdownMenu.Item>
                             ))}
-                            <DropdownMenu.Separator />
+                            <DropdownMenu.Separator className="md:hidden" />
                             {meData ? (
                                 <DropdownMenu.Item asChild>
                                     <Button
                                         onClick={() => clearAuthToken()}
-                                        className="flex items-center justify-center py-2 hover:bg-black/5"
+                                        className="flex items-center justify-start py-2 hover:bg-black/5 w-full md:hidden"
                                         variant="ghost"
                                     >
                                         <FiLogOut />
-                                        <span className="text-xs">Logout</span>
+                                        <span className="text-sm">Logout</span>
                                     </Button>
                                 </DropdownMenu.Item>
                             ) : (
@@ -176,7 +178,7 @@ export const Navbar = () => {
                                             className="flex items-center justify-center py-2 hover:bg-black/5"
                                         >
                                             <FiLogIn />
-                                            <span className="text-xs">
+                                            <span className="text-sm">
                                                 Login
                                             </span>
                                         </Link>
@@ -208,7 +210,7 @@ export const Navbar = () => {
                                     </button>
                                 </DropdownMenu.Trigger>
 
-                                <DropdownMenu.Content sideOffset={5}>
+                                <DropdownMenu.Content>
                                     <DropdownMenu.Item asChild>
                                         <Link to="/sessions">Sessions</Link>
                                     </DropdownMenu.Item>

diff --git a/web/src/components/ui/Dropdown.tsx b/web/src/components/ui/Dropdown.tsx
@@ -108,7 +108,7 @@ const DropdownMenuContent = forwardRef<
                 'min-w-[8rem] p-1',
 
                 // Visual & Borders
-                'overflow-hidden rounded-md border shadow-md',
+                'overflow-hidden rounded-md border',
 
                 // Colors & Background
                 'bg-popover text-popover-foreground',

diff --git a/web/src/components/ui/Popover.tsx b/web/src/components/ui/Popover.tsx
@@ -12,7 +12,7 @@ const PopoverContent = React.forwardRef<
     React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(
     (
-        { className, align = 'center', sideOffset = 4, ...properties },
+        { className, align = 'center', sideOffset = 2, ...properties },
         reference
     ) => (
         <PopoverPrimitive.Portal>
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
                 align={align}
                 sideOffset={sideOffset}
                 className={cn(
-                    'z-50 w-96 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                    'z-50 w-96 rounded-md border bg-popover p-4 text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                     className
                 )}
                 {...properties}