mirror of
https://github.com/BrenBroZAYT/gameyfin.git
synced 2026-06-13 16:40:01 +00:00
Added colorblind theme
Refactored other themes & theming in general
This commit is contained in:
grimsi
@@ -1,18 +1,23 @@
|
||||
import {Theme} from "Frontend/theming/theme";
|
||||
import {Tooltip} from "@nextui-org/react";
|
||||
|
||||
export default function ThemePreview({theme, mode, isSelected}: {
|
||||
export default function ThemePreview({theme, isSelected}: {
|
||||
theme: Theme,
|
||||
mode: "light" | "dark",
|
||||
isSelected?: boolean
|
||||
}) {
|
||||
return (
|
||||
<Tooltip content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom">
|
||||
<div className={`
|
||||
${theme.name}-${mode}
|
||||
bg-primary p-6 border-2 rounded-full
|
||||
${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}
|
||||
/>
|
||||
<div className={`flex flex-col flex-grow aspect-square border-2 rounded-large overflow-hidden
|
||||
${theme.name}-dark
|
||||
${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}>
|
||||
<div className="flex-1 bg-primary"/>
|
||||
<div className="basis-1/4 flex flex-row">
|
||||
<div className="flex-1 bg-secondary"/>
|
||||
<div className="flex-1 bg-success"/>
|
||||
<div className="flex-1 bg-warning"/>
|
||||
<div className="flex-1 bg-danger"/>
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import {useTheme} from "next-themes";
|
||||
import React, {useLayoutEffect, useState} from "react";
|
||||
import {Switch} from "@nextui-org/react";
|
||||
import {Moon, SunDim} from "@phosphor-icons/react";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Card, Divider, Select, Selection, SelectItem} from "@nextui-org/react";
|
||||
import {themes} from "Frontend/theming/themes";
|
||||
import {Theme} from "Frontend/theming/theme";
|
||||
import ThemePreview from "Frontend/components/theming/ThemePreview";
|
||||
@@ -9,47 +8,68 @@ import ThemePreview from "Frontend/components/theming/ThemePreview";
|
||||
export function ThemeSelector() {
|
||||
|
||||
const {theme, setTheme} = useTheme();
|
||||
const [isSelected, setIsSelected] = useState(theme ? theme.includes("light") : false);
|
||||
const [currentTheme, setCurrentTheme] = useState(theme?.substring(0, theme?.lastIndexOf("-")));
|
||||
const [selectedTheme, setSelectedTheme] = useState(theme?.substring(0, theme?.lastIndexOf("-")));
|
||||
const [selectedMode, setSelectedMode] = useState<Selection>();
|
||||
|
||||
useLayoutEffect(() => setTheme(`${currentTheme}-${mode()}`), [isSelected]);
|
||||
useEffect(() => {
|
||||
if (!selectedMode)
|
||||
setSelectedMode(new Set([theme?.split('-').pop() ?? "dark"]));
|
||||
}, [theme]);
|
||||
|
||||
function mode(): "light" | "dark" {
|
||||
return isSelected ? "light" : "dark";
|
||||
useEffect(updateTheme, [selectedTheme, selectedMode]);
|
||||
|
||||
function updateTheme() {
|
||||
if (selectedMode instanceof Set)
|
||||
setTheme(`${selectedTheme}-${selectedMode.values().next().value}`)
|
||||
}
|
||||
|
||||
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">
|
||||
<Switch
|
||||
size="lg"
|
||||
startContent={<SunDim size={32}/>}
|
||||
endContent={<Moon size={32}/>}
|
||||
isSelected={isSelected}
|
||||
onValueChange={() => {
|
||||
setIsSelected(!isSelected);
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div className="grid grid-flow-col auto-cols-auto auto-cols-max-4 gap-8">
|
||||
<div className="flex flex-col items-center gap-8">
|
||||
<Select label="Theme mode" className="max-w-xs"
|
||||
disallowEmptySelection
|
||||
selectionMode={"single"}
|
||||
defaultSelectedKeys={selectedMode}
|
||||
onSelectionChange={setSelectedMode}
|
||||
selectedKeys={selectedMode}>
|
||||
<SelectItem key="light">
|
||||
Light
|
||||
</SelectItem>
|
||||
<SelectItem key="dark">
|
||||
Dark
|
||||
</SelectItem>
|
||||
</Select>
|
||||
<div className="grid grid-flow-row grid-cols-8 gap-8">
|
||||
{
|
||||
//min-w-[468px]
|
||||
themes.map(((t: Theme) => (
|
||||
<div
|
||||
key={t.name}
|
||||
onClick={() => {
|
||||
setCurrentTheme(t.name);
|
||||
setTheme(`${t.name}-${mode()}`);
|
||||
}}>
|
||||
<div className="size-[10vh] min-h-[50px] min-w-[50px]"
|
||||
key={t.name}
|
||||
onClick={() => setSelectedTheme(t.name)}>
|
||||
<ThemePreview
|
||||
theme={t}
|
||||
mode={mode()}
|
||||
isSelected={currentTheme === t.name}/>
|
||||
isSelected={selectedTheme === t.name}/>
|
||||
</div>
|
||||
)))
|
||||
}
|
||||
</div>
|
||||
<p className="text-2xl font-semibold mt-8">Preview</p>
|
||||
<Divider/>
|
||||
<div className="flex flex-row gap-8 items-baseline">
|
||||
<div className="flex flex-row gap-4">
|
||||
<Button color="primary">Primary</Button>
|
||||
<Button color="secondary">Secondary</Button>
|
||||
<Button color="success">Success</Button>
|
||||
<Button color="warning">Warning</Button>
|
||||
<Button color="danger">Danger</Button>
|
||||
</div>
|
||||
<Card className="flex flex-row gap-4 p-4">
|
||||
<Button color="primary">Primary</Button>
|
||||
<Button color="secondary">Secondary</Button>
|
||||
<Button color="success">Success</Button>
|
||||
<Button color="warning">Warning</Button>
|
||||
<Button color="danger">Danger</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,21 +1,26 @@
|
||||
type ColorPalette = {
|
||||
100: string,
|
||||
200: string,
|
||||
300: string,
|
||||
400: string,
|
||||
500: string,
|
||||
600: string,
|
||||
700: string,
|
||||
800: string,
|
||||
900: string,
|
||||
DEFAULT: string
|
||||
}
|
||||
|
||||
export type Theme = {
|
||||
name?: string,
|
||||
colors: {
|
||||
background?: string,
|
||||
foreground?: string,
|
||||
primary: {
|
||||
50: string,
|
||||
100: string,
|
||||
200: string,
|
||||
300: string,
|
||||
400: string,
|
||||
500: string,
|
||||
600: string,
|
||||
700: string,
|
||||
800: string,
|
||||
900: string,
|
||||
DEFAULT: string
|
||||
},
|
||||
primary: ColorPalette,
|
||||
secondary?: ColorPalette,
|
||||
success?: ColorPalette,
|
||||
warning?: ColorPalette,
|
||||
danger?: ColorPalette,
|
||||
focus?: string,
|
||||
}
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import {Blue} from "./themes/blue";
|
||||
import {Yellow} from "./themes/yellow";
|
||||
import {Violet} from "./themes/violet";
|
||||
import {Orange} from "./themes/orange";
|
||||
import {Colorblind} from "./themes/colorblind";
|
||||
import {Theme} from "./theme";
|
||||
import {ConfigTheme, ConfigThemes} from "@nextui-org/react";
|
||||
|
||||
@@ -43,4 +44,4 @@ export function themeNames(): string[] {
|
||||
return Object.keys(compileThemes(themes));
|
||||
}
|
||||
|
||||
export const themes: Theme[] = [GameyfinBlue, GameyfinViolet, GameyfinClassic, Neutral, Slate, Red, Rose, Orange, Purple, Blue, Yellow, Violet];
|
||||
export const themes: Theme[] = [GameyfinBlue, GameyfinViolet, GameyfinClassic, Neutral, Slate, Red, Rose, Orange, Purple, Blue, Yellow, Violet, Colorblind];
|
||||
|
||||
@@ -4,7 +4,7 @@ export const Blue: Theme = {
|
||||
name: 'blue',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#e3eeff',
|
||||
DEFAULT: '#2563EB',
|
||||
100: '#b6cdfe',
|
||||
200: '#88abf7',
|
||||
300: '#5b8af1',
|
||||
@@ -13,8 +13,19 @@ export const Blue: Theme = {
|
||||
600: '#0b3da4',
|
||||
700: '#052c77',
|
||||
800: '#001a4a',
|
||||
900: '#00091e',
|
||||
DEFAULT: '#2563EB'
|
||||
900: '#00091e'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#d29613',
|
||||
100: '#faebcc',
|
||||
200: '#f5d898',
|
||||
300: '#f1c465',
|
||||
400: '#ecb132',
|
||||
500: '#d29613',
|
||||
600: '#a87810',
|
||||
700: '#7e5a0c',
|
||||
800: '#543c08',
|
||||
900: '#2a1e04'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,67 @@
|
||||
import {Theme} from '../theme';
|
||||
|
||||
export const Colorblind: Theme = {
|
||||
name: 'colorblind',
|
||||
colors: {
|
||||
primary: {
|
||||
DEFAULT: '#cc79a7',
|
||||
900: '#2f1222',
|
||||
800: '#5f2444',
|
||||
700: '#8e3666',
|
||||
600: '#bb4b88',
|
||||
500: '#cc79a7',
|
||||
400: '#d795b9',
|
||||
300: '#e1afca',
|
||||
200: '#ebcadc',
|
||||
100: '#f5e4ed'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#0072b2',
|
||||
900: '#001724',
|
||||
800: '#002d47',
|
||||
700: '#00446b',
|
||||
600: '#005a8f',
|
||||
500: '#0072b2',
|
||||
400: '#009bf5',
|
||||
300: '#38b6ff',
|
||||
200: '#7aceff',
|
||||
100: '#bde7ff'
|
||||
},
|
||||
success: {
|
||||
DEFAULT: '#009e73',
|
||||
900: '#002017',
|
||||
800: '#003f2e',
|
||||
700: '#005f46',
|
||||
600: '#007e5d',
|
||||
500: '#009e73',
|
||||
400: '#00e4a8',
|
||||
300: '#2cffc7',
|
||||
200: '#72ffd9',
|
||||
100: '#b9ffec'
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: '#e69f00',
|
||||
900: '#2e1f00',
|
||||
800: '#5c3f00',
|
||||
700: '#8a5e00',
|
||||
600: '#b87d00',
|
||||
500: '#e69f00',
|
||||
400: '#ffb81f',
|
||||
300: '#ffca57',
|
||||
200: '#ffdb8f',
|
||||
100: '#ffedc7'
|
||||
},
|
||||
danger: {
|
||||
DEFAULT: '#d55e00',
|
||||
900: '#2b1300',
|
||||
800: '#562500',
|
||||
700: '#813800',
|
||||
600: '#ab4a00',
|
||||
500: '#d55e00',
|
||||
400: '#ff7912',
|
||||
300: '#ff9a4e',
|
||||
200: '#ffbc89',
|
||||
100: '#ffddc4'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const GameyfinBlue: Theme = {
|
||||
name: 'gameyfin-blue',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#e7eaff',
|
||||
DEFAULT: '#2332c8',
|
||||
100: '#bdc3f9',
|
||||
200: '#919bee',
|
||||
300: '#6672e5',
|
||||
@@ -13,8 +13,19 @@ export const GameyfinBlue: Theme = {
|
||||
600: '#1a2699',
|
||||
700: '#101b6f',
|
||||
800: '#070f45',
|
||||
900: '#02041d',
|
||||
DEFAULT: '#2332c8'
|
||||
900: '#02041d'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#c3b422',
|
||||
100: '#f7f3cf',
|
||||
200: '#eee6a0',
|
||||
300: '#e6da70',
|
||||
400: '#ddce40',
|
||||
500: '#c3b422',
|
||||
600: '#9c8f1c',
|
||||
700: '#756b15',
|
||||
800: '#4e480e',
|
||||
900: '#272407',
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const GameyfinClassic: Theme = {
|
||||
name: 'gameyfin-classic',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#e1ffec',
|
||||
DEFAULT: '#16A34A',
|
||||
100: '#b8f7cf',
|
||||
200: '#8ef0b2',
|
||||
300: '#62ea94',
|
||||
@@ -13,8 +13,19 @@ export const GameyfinClassic: Theme = {
|
||||
600: '#159d47',
|
||||
700: '#0b7032',
|
||||
800: '#02431d',
|
||||
900: '#001804',
|
||||
DEFAULT: '#16A34A'
|
||||
900: '#001804'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#ca208d',
|
||||
100: '#f8cfe9',
|
||||
200: '#f0a0d3',
|
||||
300: '#e970bc',
|
||||
400: '#e140a6',
|
||||
500: '#ca208d',
|
||||
600: '#a21970',
|
||||
700: '#7a1354',
|
||||
800: '#510d38',
|
||||
900: '#29061c'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const GameyfinViolet: Theme = {
|
||||
name: 'gameyfin-violet',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#f3ebff',
|
||||
DEFAULT: '#6441a5',
|
||||
100: '#d5c7ed',
|
||||
200: '#b7a4dd',
|
||||
300: '#9a7fce',
|
||||
@@ -13,8 +13,19 @@ export const GameyfinViolet: Theme = {
|
||||
600: '#4e3281',
|
||||
700: '#37235d',
|
||||
800: '#21153a',
|
||||
900: '#0d0519',
|
||||
DEFAULT: '#6441a5'
|
||||
900: '#0d0519'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#82a541',
|
||||
100: '#e7efd7',
|
||||
200: '#cedfaf',
|
||||
300: '#b6cf87',
|
||||
400: '#9dbf5f',
|
||||
500: '#82a541',
|
||||
600: '#688334',
|
||||
700: '#4e6227',
|
||||
800: '#34421a',
|
||||
900: '#1a210d'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const Neutral: Theme = {
|
||||
name: 'neutral',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#fceff2',
|
||||
DEFAULT: '#525252',
|
||||
100: '#ddd7d9',
|
||||
200: '#c1bfbf',
|
||||
300: '#a6a6a6',
|
||||
@@ -13,8 +13,19 @@ export const Neutral: Theme = {
|
||||
600: '#595959',
|
||||
700: '#413f40',
|
||||
800: '#292526',
|
||||
900: '#16090d',
|
||||
DEFAULT: '#525252'
|
||||
900: '#16090d'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#8d8d8d',
|
||||
100: '#e8e8e8',
|
||||
200: '#d1d1d1',
|
||||
300: '#bababa',
|
||||
400: '#a3a3a3',
|
||||
500: '#8d8d8d',
|
||||
600: '#707070',
|
||||
700: '#545454',
|
||||
800: '#383838',
|
||||
900: '#1c1c1c'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const Orange: Theme = {
|
||||
name: 'orange',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#ffedde',
|
||||
DEFAULT: '#EA580C',
|
||||
100: '#ffcdb2',
|
||||
200: '#fbac84',
|
||||
300: '#f78c54',
|
||||
@@ -13,8 +13,19 @@ export const Orange: Theme = {
|
||||
600: '#ab3f07',
|
||||
700: '#7a2d03',
|
||||
800: '#4b1900',
|
||||
900: '#1f0600',
|
||||
DEFAULT: '#EA580C'
|
||||
900: '#1f0600'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#0b93da',
|
||||
100: '#caebfc',
|
||||
200: '#94d6f9',
|
||||
300: '#5fc2f7',
|
||||
400: '#2aadf4',
|
||||
500: '#0b93da',
|
||||
600: '#0975ae',
|
||||
700: '#075783',
|
||||
800: '#053a57',
|
||||
900: '#021d2c'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const Purple: Theme = {
|
||||
name: 'purple',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#ffe6ff',
|
||||
DEFAULT: '#DD62ED',
|
||||
100: '#f2b9f9',
|
||||
200: '#e78df3',
|
||||
300: '#dc5fed',
|
||||
@@ -13,8 +13,19 @@ export const Purple: Theme = {
|
||||
600: '#9012a0',
|
||||
700: '#670b73',
|
||||
800: '#3f0547',
|
||||
900: '#19001b',
|
||||
DEFAULT: '#DD62ED'
|
||||
900: '#19001b'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#2ecd1a',
|
||||
100: '#d2f9cd',
|
||||
200: '#a6f29c',
|
||||
300: '#79ec6a',
|
||||
400: '#4de538',
|
||||
500: '#2ecd1a',
|
||||
600: '#26a215',
|
||||
700: '#1c7a10',
|
||||
800: '#13510b',
|
||||
900: '#092905'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const Red: Theme = {
|
||||
name: 'red',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#ffe5e5',
|
||||
DEFAULT: '#DC2626',
|
||||
100: '#f9bbbb',
|
||||
200: '#ef9090',
|
||||
300: '#e76464',
|
||||
@@ -13,8 +13,19 @@ export const Red: Theme = {
|
||||
600: '#9b1718',
|
||||
700: '#6f0f11',
|
||||
800: '#450708',
|
||||
900: '#1e0000',
|
||||
DEFAULT: '#DC2626'
|
||||
900: '#1e0000'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#20c6c6',
|
||||
100: '#cff7f7',
|
||||
200: '#9fefef',
|
||||
300: '#6ee7e7',
|
||||
400: '#3ee0e0',
|
||||
500: '#20c6c6',
|
||||
600: '#1a9e9e',
|
||||
700: '#137676',
|
||||
800: '#0d4f4f',
|
||||
900: '#062727'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const Rose: Theme = {
|
||||
name: 'rose',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#ffe4ed',
|
||||
DEFAULT: '#E11D48',
|
||||
100: '#fbb9c8',
|
||||
200: '#f28da4',
|
||||
300: '#ec607f',
|
||||
@@ -13,8 +13,19 @@ export const Rose: Theme = {
|
||||
600: '#9f1233',
|
||||
700: '#730b23',
|
||||
800: '#470415',
|
||||
900: '#1e0006',
|
||||
DEFAULT: '#E11D48'
|
||||
900: '#1e0006'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#1acba4',
|
||||
100: '#cdf9ef',
|
||||
200: '#9cf2df',
|
||||
300: '#6aecd0',
|
||||
400: '#38e5c0',
|
||||
500: '#1acba4',
|
||||
600: '#15a284',
|
||||
700: '#107a63',
|
||||
800: '#0b5142',
|
||||
900: '#052921'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const Slate: Theme = {
|
||||
name: 'slate',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#eaf3ff',
|
||||
DEFAULT: '#475569',
|
||||
100: '#cfd7e4',
|
||||
200: '#b2bdcd',
|
||||
300: '#95a3b7',
|
||||
@@ -13,8 +13,19 @@ export const Slate: Theme = {
|
||||
600: '#48566a',
|
||||
700: '#323e4d',
|
||||
800: '#1d2531',
|
||||
900: '#040d17',
|
||||
DEFAULT: '#475569'
|
||||
900: '#040d17'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#88775e',
|
||||
100: '#e8e4de',
|
||||
200: '#d1c9bd',
|
||||
300: '#baae9c',
|
||||
400: '#a3937b',
|
||||
500: '#88775e',
|
||||
600: '#6c5f4b',
|
||||
700: '#514738',
|
||||
800: '#363026',
|
||||
900: '#1b1813'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const Violet: Theme = {
|
||||
name: 'violet',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#f2e7ff',
|
||||
DEFAULT: '#6D28D9',
|
||||
100: '#d4bdf8',
|
||||
200: '#b592ee',
|
||||
300: '#9867e5',
|
||||
@@ -13,8 +13,19 @@ export const Violet: Theme = {
|
||||
600: '#4b1a99',
|
||||
700: '#36126e',
|
||||
800: '#200944',
|
||||
900: '#0d021c',
|
||||
DEFAULT: '#6D28D9'
|
||||
900: '#0d021c'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#84c322',
|
||||
100: '#e8f7cf',
|
||||
200: '#d0eea0',
|
||||
300: '#b9e670',
|
||||
400: '#a1dd40',
|
||||
500: '#84c322',
|
||||
600: '#6b9c1c',
|
||||
700: '#507515',
|
||||
800: '#354e0e',
|
||||
900: '#1b2707'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -4,7 +4,7 @@ export const Yellow: Theme = {
|
||||
name: 'yellow',
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#fffadb',
|
||||
DEFAULT: '#FACC15',
|
||||
100: '#feefae',
|
||||
200: '#fce47f',
|
||||
300: '#fbd94e',
|
||||
@@ -13,8 +13,19 @@ export const Yellow: Theme = {
|
||||
600: '#af8c00',
|
||||
700: '#7d6400',
|
||||
800: '#4c3c00',
|
||||
900: '#1c1400',
|
||||
DEFAULT: '#FACC15'
|
||||
900: '#1c1400'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#0531e1',
|
||||
100: '#c8d3fe',
|
||||
200: '#91a7fd',
|
||||
300: '#5a7afc',
|
||||
400: '#234efb',
|
||||
500: '#0531e1',
|
||||
600: '#0427b4',
|
||||
700: '#031d87',
|
||||
800: '#02135a',
|
||||
900: '#010a2d'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -36,7 +36,10 @@ function WelcomeStep() {
|
||||
|
||||
function ThemeStep() {
|
||||
return (
|
||||
<ThemeSelector/>
|
||||
<div className="flex flex-col flex-grow gap-6 items-center">
|
||||
<p className="text-2xl font-bold">Choose your style</p>
|
||||
<ThemeSelector/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -88,7 +91,7 @@ function SetupView() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="flex flex-row flex-grow items-center justify-center gradient-primary">
|
||||
<div className="flex flex-row size-full items-center justify-center gradient-primary">
|
||||
<Card className="w-3/4 h-3/4 min-w-[500px] p-8">
|
||||
<Wizard
|
||||
initialValues={{username: '', email: '', password: '', passwordRepeat: ''}}
|
||||
|
||||
Reference in New Issue
Block a user