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

frontend/components/theming/ThemePreview.tsx

@@ -1,6 +1,5 @@
 import {Theme} from "Frontend/theming/theme";
-import {Card, Tooltip} from "@nextui-org/react";
-import GameyfinLogo from "Frontend/components/theming/GameyfinLogo";
+import {Tooltip} from "@nextui-org/react";
 
 export default function ThemePreview({theme, mode, isSelected}: {
     theme: Theme,
@@ -11,26 +10,9 @@ export default function ThemePreview({theme, mode, isSelected}: {
         <Tooltip content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom">
             <div className={`
                 ${theme.name}-${mode}
-                bg-primary p-6 border-2 rounded-md
+                bg-primary p-6 border-2 rounded-full
                 ${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}
             />
         </Tooltip>
     );
-}
-
-/*
-<svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path id="background" d="M0 0H228V120H0V0Z" fill={theme.cssVars[resolvedTheme].background}/>
-    <rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2" fill="#30363D"/>
-    <rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
-    <rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
-    <path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
-    <rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-    <rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
-    <rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
-    <rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
-    <rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
-    <rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-    <rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-</svg>
-*/
+}

frontend/components/wizard/Wizard.tsx

@@ -7,7 +7,7 @@ import {Step, Stepper} from "@material-tailwind/react";
 const Wizard = ({children, initialValues, onSubmit}: {
     children: ReactNode,
     initialValues: any,
-    onSubmit: (values: any, bag: FormikHelpers<any> | FormikBag<any, any>) => Promise<void>
+    onSubmit: (values: any, bag: FormikHelpers<any> | FormikBag<any, any>) => Promise<any>
 }) => {
     const [stepNumber, setStepNumber] = useState(0);
     const steps = React.Children.toArray(children);