Added dark/light mode (next: custom themes)

frontend/components/ProfileMenu.tsx

@@ -1,9 +1,14 @@
 import {useState} from "react";
-import {Button, Menu, MenuHandler, MenuItem, MenuList} from "@material-tailwind/react";
 import {useAuth} from "Frontend/util/auth";
-import {Avatar} from "@hilla/react-components/Avatar";
 import {useNavigate} from "react-router-dom";
-import {CaretDown, CaretUp, GearFine, IconContext, Question, SignOut, User} from "@phosphor-icons/react";
+import {GearFine, Question, SignOut, User} from "@phosphor-icons/react";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "Frontend/@/components/ui/dropdown-menu";
+import {Avatar, AvatarFallback} from "Frontend/@/components/ui/avatar";
 
 export default function ProfileMenu() {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -36,38 +41,23 @@ export default function ProfileMenu() {
     ];
 
     return (
-        <Menu open={isMenuOpen} handler={setIsMenuOpen} placement="bottom-end">
-            <MenuHandler>
-                <Button
-                    variant="text"
-                    className="flex items-center gap-1 rounded-full py-0.5 pr-2 pl-0.5 lg:ml-auto"
-                >
-                    <Avatar
-                        name={state.user?.name}
-                        abbr={state.user?.name?.substring(0, 2)}
-                    />
-                    <IconContext.Provider value={{size: 12}}>
-                        {isMenuOpen ? <CaretUp/> : <CaretDown/>}
-                    </IconContext.Provider>
-                </Button>
-            </MenuHandler>
-            <MenuList className="p-1">
+        <DropdownMenu open={isMenuOpen}>
+            <DropdownMenuTrigger>
+                <Avatar>
+                    <AvatarFallback>{state.user?.name?.substring(0, 2).toUpperCase()}</AvatarFallback>
+                </Avatar>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
                 {profileMenuItems.map(({label, icon, onClick, showIf, color}) => {
                     return (
                         (showIf === undefined || showIf === true) ?
-                            <MenuItem
-                                key={label}
-                                onClick={onClick}
-                                className={`flex items-center gap-2 rounded ${
-                                    color ? `hover:${color}/10 focus:${color}/10 active:${color}/10` : ""
-                                }`}
-                            >
+                            <DropdownMenuItem key={label} onClick={onClick}>
                                 {icon}
                                 <p color={color ? color : ""}>{label}</p>
-                            </MenuItem> : null
+                            </DropdownMenuItem> : null
                     );
                 })}
-            </MenuList>
-        </Menu>
+            </DropdownMenuContent>
+        </DropdownMenu>
     );
 }