Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-13 16:40:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix theme selection bug

Browse Source 
Fix bug with login view redirection
This commit is contained in:
Simon Grimme
2024-05-14 16:15:25 +02:00
parent 56d4c1480e
commit 215a01606f
7 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.run/UI debug.run.xml
+1 -1
View File
@@ -1,5 +1,5 @@
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="UI debug" type="JavascriptDebugType" engineId="37cae5b9-e8b2-4949-9172-aafa37fbc09c" uri="http://localhost:8080" useFirstLineBreakpoints="true">
<configuration default="false" name="UI debug" type="JavascriptDebugType" uri="http://localhost:8080" useFirstLineBreakpoints="true">
<method v="2" />
</configuration>
</component>
frontend/App.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function App() {
return (
<StrictMode>
<NextUIProvider className="size-full">
<NextThemesProvider attribute="class" defaultTheme="gameyfin-blue-light" themes={themeNames()}>
<NextThemesProvider attribute="class" themes={themeNames()} defaultTheme="gameyfin-violet-dark" >
<AuthProvider>
<IconContext.Provider value={{size: 20}}>
<RouterProvider router={router}/>
frontend/components/theming/ThemePreview.tsx
+5 -6
View File
@@ -9,12 +9,11 @@ export default function ThemePreview({theme, mode, isSelected}: {
}) {
return (
<Tooltip content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom">
<Card
shadow="none"
className={`${theme.name}-${mode} flex-row justify-center p-6 border-2 ${isSelected ? "border-focus" : "border-foreground-200 hover:border-focus"}`}
>
<GameyfinLogo className="w-1/2 fill-primary"/>
</Card>
<div className={`
${theme.name}-${mode}
bg-primary p-6 border-2 rounded-md
${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}
/>
</Tooltip>
);
}
frontend/components/wizard/Wizard.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ const Wizard = ({children, initialValues, onSubmit}: {
<div className="flex grow">
{step}
</div>
<div className="bottom-0 w-full">
<div className="left-8 right-8 absolute bottom-8 -z-1">
<div className="flex justify-between">
<Button color="primary" onClick={() => previous(formik.values)} disabled={isFirstStep}>
<ArrowLeft/>
frontend/index.html
+1 -1
View File
@@ -19,7 +19,7 @@
<!-- index.ts is included here automatically (either by the dev server or during the build) -->
</head>
<body class="text-foreground bg-background">
<body>
<div id="outlet"></div>
</body>
</html>
frontend/views/LoginView.tsx
+9 -7
View File
@@ -1,5 +1,5 @@
import {useAuth} from "Frontend/util/auth";
import {useState} from "react";
import {useEffect, useLayoutEffect, useState} from "react";
import {Link, useNavigate} from "react-router-dom";
import {XCircle} from "@phosphor-icons/react";
import {Button, Card, CardBody, CardHeader, Input} from "@nextui-org/react";
@@ -14,13 +14,15 @@ export default function LoginView() {
const [url, setUrl] = useState<string>();
const navigate = useNavigate();
if (state.user && url) {
const path = new URL(url, document.baseURI).pathname;
navigate(path, {replace: true});
}
useLayoutEffect(() => {
if (state.user) {
const path = url ? new URL(url, document.baseURI).pathname : '/'
navigate(path, {replace: true});
}
}, [state.user]);
return (
<div className="flex size-full bg-gradient-to-br from-gf-primary to-gf-secondary">
<div className="flex size-full bg-gradient-to-br from-primary-400 to-primary-700">
<Card className="m-auto p-12">
<CardHeader>
<img
@@ -84,7 +86,7 @@ export default function LoginView() {
<div className="flex justify-between items-center">
<Link to="#">Forgot password?</Link>
<Button color="primary" type="submit" isLoading={loading}>
Log in
{loading ? "" : "Log in"}
</Button>
</div>
</form>
frontend/views/SetupView.tsx
+5 -4
View File
@@ -39,12 +39,12 @@ function WelcomeStep() {
function ThemeStep() {
const {theme, setTheme} = useTheme();
const [isSelected, setIsSelected] = useState(theme ? theme.includes("light") : false);
const [currentTheme, setCurrentTheme] = useState(theme?.split('-')[0]);
const [currentTheme, setCurrentTheme] = useState(theme?.substring(0, theme?.lastIndexOf("-")));
useLayoutEffect(() => setTheme(`${currentTheme}-${mode()}`), [isSelected]);
function mode(): "light" | "dark" {
return !isSelected ? "dark" : "light"
return isSelected ? "light" : "dark";
}
return (
@@ -61,8 +61,9 @@ function ThemeStep() {
/>
</div>
<div className="grid grid-cols-4 w-3/4 min-w-[468px] gap-12">
<div className="grid grid-flow-col auto-cols-auto auto-cols-max-4 gap-8">
{
//min-w-[468px]
themes.map(((t: Theme) => (
<div
key={t.name}
@@ -122,7 +123,7 @@ function SettingsStep() {
}
const SetupView = () => (
<div className="flex size-full bg-gradient-to-br from-gf-primary to-gf-secondary">
<div className="flex size-full bg-gradient-to-br from-primary-400 to-primary-700">
<Card className="w-3/4 h-3/4 min-w-[500px] m-auto p-8">
<Wizard
initialValues={{username: '', password: '', passwordRepeat: ''}}