Finish theming implementation (finally...)

frontend/views/LoginView.tsx

@@ -1,11 +1,9 @@
 import {useAuth} from "Frontend/util/auth";
 import {useState} from "react";
 import {Link, useNavigate} from "react-router-dom";
-import {SpinnerGap, XCircle} from "@phosphor-icons/react";
-import {Card} from "Frontend/@/components/ui/card";
+import {XCircle} from "@phosphor-icons/react";
+import {Button, Card, CardBody, CardHeader, Input} from "@nextui-org/react";
 import {Alert, AlertDescription, AlertTitle} from "Frontend/@/components/ui/alert";
-import {Button} from "Frontend/@/components/ui/button";
-import {Input} from "Frontend/@/components/ui/input";
 
 export default function LoginView() {
     const {state, login} = useAuth();
@@ -24,11 +22,14 @@ export default function LoginView() {
     return (
         <div className="flex size-full bg-gradient-to-br from-gf-primary to-gf-secondary">
             <Card className="m-auto p-12">
-                <img
-                    className="h-28 w-full content-center"
-                    src="/images/Logo.svg"
-                />
-                <div className="mt-8 mb-2 w-80 max-w-screen-lg sm:w-96">
+                <CardHeader>
+                    <img
+                        className="h-28 w-full content-center"
+                        src="/images/Logo.svg"
+                        alt="Gameyfin Logo"
+                    />
+                </CardHeader>
+                <CardBody className="mt-8 mb-2 w-80 max-w-screen-lg sm:w-96">
                     {hasError &&
                         <Alert className="mb-4" variant="destructive">
                             <XCircle weight="fill" className="size-4"/>
@@ -82,17 +83,12 @@ export default function LoginView() {
                         />
                         <div className="flex justify-between items-center">
                             <Link to="#">Forgot password?</Link>
-                            <Button
-                                type="submit"
-                                size="lg"
-                                className="w-28 h-12 flex justify-center"
-                                disabled={loading}
-                            >
-                                {loading ? <SpinnerGap className="size-6 animate-spin"/> : "Log in"}
+                            <Button color="primary" type="submit" isLoading={loading}>
+                                Log in
                             </Button>
                         </div>
                     </form>
-                </div>
+                </CardBody>
             </Card>
         </div>
     );

frontend/views/MainLayout.tsx

@@ -2,7 +2,7 @@ import {useRouteMetadata} from 'Frontend/util/routing.js';
 import {useEffect} from 'react';
 import ProfileMenu from "Frontend/components/ProfileMenu";
 import {Outlet} from "react-router-dom";
-import {Card} from "Frontend/@/components/ui/card";
+import {Card} from "@nextui-org/react";
 
 export default function MainLayout() {
     const currentTitle = `Gameyfin - ${useRouteMetadata()?.title}` ?? 'Gameyfin';

frontend/views/SetupView.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, {useLayoutEffect, useState} from 'react';
 import * as Yup from 'yup';
 import Wizard from "Frontend/components/wizard/Wizard";
 import WizardStep from "Frontend/components/wizard/WizardStep";
 import Input from "Frontend/components/Input";
 import {GearFine, HandWaving, Moon, Palette, SunDim, User} from "@phosphor-icons/react";
 import ThemePreview from "Frontend/components/theming/ThemePreview";
-import {Theme, themes} from "Frontend/@/registry/themes";
-import {Card} from "Frontend/@/components/ui/card";
-import {Switch} from "Frontend/@/components/ui/switch";
+import {themes} from "Frontend/theming/themes";
+import {Card, Switch} from "@nextui-org/react";
 import {useTheme} from "next-themes";
+import {Theme} from "Frontend/theming/theme";
 
 const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
@@ -37,23 +37,46 @@ function WelcomeStep() {
 }
 
 function ThemeStep() {
-    const {setTheme, theme} = useTheme();
+    const {theme, setTheme} = useTheme();
+    const [isSelected, setIsSelected] = useState(theme ? theme.includes("light") : false);
+    const [currentTheme, setCurrentTheme] = useState(theme?.split('-')[0]);
 
-    function toggleMode() {
-        setTheme(theme === "light" ? "dark" : "light");
+    useLayoutEffect(() => setTheme(`${currentTheme}-${mode()}`), [isSelected]);
+
+    function mode(): "light" | "dark" {
+        return !isSelected ? "dark" : "light"
     }
 
     return (
         <div className="flex flex-col size-full items-center">
             <div className="w-full flex flex-row items-center justify-center gap-4 mb-16">
-                <SunDim size={32}/>
-                <Switch checked={theme === "dark"} onCheckedChange={() => toggleMode()}></Switch>
-                <Moon size={32}/>
+                <Switch
+                    size="lg"
+                    startContent={<SunDim size={32}/>}
+                    endContent={<Moon size={32}/>}
+                    isSelected={isSelected}
+                    onValueChange={() => {
+                        setIsSelected(!isSelected);
+                    }}
+                />
+
             </div>
-            <div className="grid grid-cols-3 w-1/2 min-w-[468px] gap-12">
-                {themes.map(((theme: Theme) => (
-                    <ThemePreview key={theme.name} theme={theme}/>
-                )))}
+            <div className="grid grid-cols-4 w-3/4 min-w-[468px] gap-12">
+                {
+                    themes.map(((t: Theme) => (
+                        <div
+                            key={t.name}
+                            onClick={() => {
+                                setCurrentTheme(t.name);
+                                setTheme(`${t.name}-${mode()}`);
+                            }}>
+                            <ThemePreview
+                                theme={t}
+                                mode={mode()}
+                                isSelected={currentTheme === t.name}/>
+                        </div>
+                    )))
+                }
             </div>
         </div>
     )

frontend/views/TestView.tsx

@@ -1,5 +1,9 @@
+import {Link} from "react-router-dom";
+
 export default function TestView() {
     return (
-        <h1>Hello Gameyfin!</h1>
+        <div className="size-full flex justify-center">
+            <Link to="/setup">Setup</Link>
+        </div>
     );
 }