enhance: replace ugly user dropdown menu with Shadcn UI DropdownMenu

Signed-off-by: Ryan Hopper-Lowe <[email protected]>
obot-platform · Dec 4, 2024 · 8b5afdd · 8b5afdd
1 parent 13e341a
commit 8b5afdd
Showing 1 changed file with 25 additions and 26 deletions.
diff --git a/ui/admin/app/components/user/UserMenu.tsx b/ui/admin/app/components/user/UserMenu.tsx
@@ -7,12 +7,14 @@ import { cn } from "~/lib/utils";
 
 import { useAuth } from "~/components/auth/AuthContext";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
-import { Button } from "~/components/ui/button";
+import { ClickableDiv } from "~/components/ui/clickable-div";
 import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "~/components/ui/popover";
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
 
 interface UserMenuProps {
     className?: string;
@@ -30,14 +32,9 @@ export const UserMenu: React.FC<UserMenuProps> = ({
     }
 
     return (
-        <Popover>
-            <PopoverTrigger asChild>
-                <div
-                    className={cn(
-                        "flex items-center cursor-pointer",
-                        className
-                    )}
-                >
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <ClickableDiv className={cn("flex items-center", className)}>
                     <Avatar className={cn("mr-4", { "w-full": avatarOnly })}>
                         <AvatarImage src={me?.iconURL} />
                         <AvatarFallback>
@@ -54,18 +51,20 @@ export const UserMenu: React.FC<UserMenuProps> = ({
                             </p>
                         </div>
                     )}
-                </div>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto" side="bottom" align="center">
-                <Button
-                    variant="destructive"
-                    onClick={() => {
-                        window.location.href = "/oauth2/sign_out?rd=/admin/";
-                    }}
-                >
-                    Sign Out
-                </Button>
-            </PopoverContent>
-        </Popover>
+                </ClickableDiv>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-auto" side="bottom" align="start">
+                <DropdownMenuGroup>
+                    <DropdownMenuItem
+                        onClick={() => {
+                            window.location.href =
+                                "/oauth2/sign_out?rd=/admin/";
+                        }}
+                    >
+                        Sign Out
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
     );
 };