Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-17 00:30:04 +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"> <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" /> <method v="2" />
</configuration> </configuration>
</component> </component>
frontend/App.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function App() {
return ( return (
<StrictMode> <StrictMode>
<NextUIProvider className="size-full"> <NextUIProvider className="size-full">
<NextThemesProvider attribute="class" defaultTheme="gameyfin-blue-light" themes={themeNames()}> <NextThemesProvider attribute="class" themes={themeNames()} defaultTheme="gameyfin-violet-dark" >
<AuthProvider> <AuthProvider>
<IconContext.Provider value={{size: 20}}> <IconContext.Provider value={{size: 20}}>
<RouterProvider router={router}/> <RouterProvider router={router}/>
frontend/components/theming/ThemePreview.tsx
+5 -6
View File
@@ -9,12 +9,11 @@ export default function ThemePreview({theme, mode, isSelected}: {
}) { }) {
return ( return (
<Tooltip content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom"> <Tooltip content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom">
<Card <div className={`
shadow="none" ${theme.name}-${mode}
className={`${theme.name}-${mode} flex-row justify-center p-6 border-2 ${isSelected ? "border-focus" : "border-foreground-200 hover:border-focus"}`} bg-primary p-6 border-2 rounded-md
> ${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}
<GameyfinLogo className="w-1/2 fill-primary"/> />
</Card>
</Tooltip> </Tooltip>
); );
} }
frontend/components/wizard/Wizard.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ const Wizard = ({children, initialValues, onSubmit}: {
<div className="flex grow"> <div className="flex grow">
{step} {step}
</div> </div>
<div className="bottom-0 w-full"> <div className="left-8 right-8 absolute bottom-8 -z-1">
<div className="flex justify-between"> <div className="flex justify-between">
<Button color="primary" onClick={() => previous(formik.values)} disabled={isFirstStep}> <Button color="primary" onClick={() => previous(formik.values)} disabled={isFirstStep}>
<ArrowLeft/> <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) --> <!-- index.ts is included here automatically (either by the dev server or during the build) -->
</head> </head>
<body class="text-foreground bg-background"> <body>
<div id="outlet"></div> <div id="outlet"></div>
</body> </body>
</html> </html>
frontend/views/LoginView.tsx
+9 -7
View File
@@ -1,5 +1,5 @@
import {useAuth} from "Frontend/util/auth"; import {useAuth} from "Frontend/util/auth";
import {useState} from "react"; import {useEffect, useLayoutEffect, useState} from "react";
import {Link, useNavigate} from "react-router-dom"; import {Link, useNavigate} from "react-router-dom";
import {XCircle} from "@phosphor-icons/react"; import {XCircle} from "@phosphor-icons/react";
import {Button, Card, CardBody, CardHeader, Input} from "@nextui-org/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 [url, setUrl] = useState<string>();
const navigate = useNavigate(); const navigate = useNavigate();
if (state.user && url) { useLayoutEffect(() => {
const path = new URL(url, document.baseURI).pathname; if (state.user) {
navigate(path, {replace: true}); const path = url ? new URL(url, document.baseURI).pathname : '/'
} navigate(path, {replace: true});
}
}, [state.user]);
return ( 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"> <Card className="m-auto p-12">
<CardHeader> <CardHeader>
<img <img
@@ -84,7 +86,7 @@ export default function LoginView() {
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<Link to="#">Forgot password?</Link> <Link to="#">Forgot password?</Link>
<Button color="primary" type="submit" isLoading={loading}> <Button color="primary" type="submit" isLoading={loading}>
Log in {loading ? "" : "Log in"}
</Button> </Button>
</div> </div>
</form> </form>
frontend/views/SetupView.tsx
+5 -4
View File
@@ -39,12 +39,12 @@ function WelcomeStep() {
function ThemeStep() { function ThemeStep() {
const {theme, setTheme} = useTheme(); const {theme, setTheme} = useTheme();
const [isSelected, setIsSelected] = useState(theme ? theme.includes("light") : false); 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]); useLayoutEffect(() => setTheme(`${currentTheme}-${mode()}`), [isSelected]);
function mode(): "light" | "dark" { function mode(): "light" | "dark" {
return !isSelected ? "dark" : "light" return isSelected ? "light" : "dark";
} }
return ( return (
@@ -61,8 +61,9 @@ function ThemeStep() {
/> />
</div> </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) => ( themes.map(((t: Theme) => (
<div <div
key={t.name} key={t.name}
@@ -122,7 +123,7 @@ function SettingsStep() {
} }
const SetupView = () => ( 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"> <Card className="w-3/4 h-3/4 min-w-[500px] m-auto p-8">
<Wizard <Wizard
initialValues={{username: '', password: '', passwordRepeat: ''}} initialValues={{username: '', password: '', passwordRepeat: ''}}