Layout updates

Added more themed components
Refactored Superadmin creation

frontend/components/ProfileMenu.tsx

@@ -1,11 +1,9 @@
 import {useAuth} from "Frontend/util/auth";
-import {useNavigate} from "react-router-dom";
 import {GearFine, Question, SignOut, User} from "@phosphor-icons/react";
 import {Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger} from "@nextui-org/react";
 
 export default function ProfileMenu() {
     const {state, logout} = useAuth();
-    const navigate = useNavigate();
 
     const profileMenuItems = [
         {
@@ -17,7 +15,7 @@ export default function ProfileMenu() {
             label: "Administration",
             icon: <GearFine/>,
             onClick: () => alert("Administration"),
-            showIf: state.user?.authorities?.some(a => a?.includes("ADMIN"))
+            showIf: state.user?.roles?.some(a => a?.includes("ADMIN"))
         },
         {
             label: "Help",
@@ -35,7 +33,15 @@ export default function ProfileMenu() {
     return (
         <Dropdown placement="bottom-end">
             <DropdownTrigger>
-                <Avatar showFallback radius="full" as="button" className="transition-transform"/>
+                <Avatar showFallback
+                        radius="full"
+                        as="button"
+                        className="transition-transform size-8"
+                        classNames={{
+                            base: "bg-gradient-to-br from-primary-400 to-primary-700",
+                            icon: "text-background/80"
+                        }}
+                />
             </DropdownTrigger>
             <DropdownMenu>
                 {/* @ts-ignore */}
@@ -48,7 +54,7 @@ export default function ProfileMenu() {
                                 startContent={<div color={color}>{icon}</div>}
                                 /* @ts-ignore */
                                 color={color ? color : ""}
-                                className={`text-${color}`}
+                                className={`text-${color} hover:bg-primary/20`}
                             >
                                 {label}
                             </DropdownItem> : null