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

Refine theme preview (currently placeholder from GitHub)

Browse Source
This commit is contained in:
grimsi
2024-03-19 15:11:25 +01:00
parent 87a4d50190
commit ce9351f56b
4 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/theming/Theme.tsx
+1
View File
@@ -1,6 +1,7 @@
export class Theme { export class Theme {
constructor( constructor(
public readonly name: string, public readonly name: string,
public readonly background: string,
public readonly primary: string, public readonly primary: string,
public readonly secondary?: string, public readonly secondary?: string,
public readonly tertiary?: string public readonly tertiary?: string
frontend/components/theming/ThemePreview.tsx
+33 -12
View File
@@ -3,17 +3,38 @@ import {Typography} from "@material-tailwind/react";
export default function ThemePreview({theme}: { theme: Theme }) { export default function ThemePreview({theme}: { theme: Theme }) {
return ( return (
<div className={` <div className="flex flex-col items-center">
size-full bg-background <svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
grid grid-rows-3 <path id="background" d="M0 0H228V120H0V0Z" fill={theme.background}/>
rounded-lg <rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2" fill="#30363D"/>
border-2 border-on-background <rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
p-4 gap-4 <rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
`}> <path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
<div className="bg-primary flex grow rounded-lg"></div> <rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
<div className="bg-secondary flex grow rounded-lg"></div> <rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
<div className="bg-tertiary flex grow rounded-lg"></div> <rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
<Typography variant="paragraph" className="text-center">{theme.name}</Typography> <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>
<Typography variant="paragraph">{theme.name}</Typography>
</div> </div>
); );
} }
/*
<svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H228V120H0V0Z" fill="#161B22"/>
<rect 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/theming/Themes.tsx
+2
View File
@@ -3,11 +3,13 @@ import {Theme} from "Frontend/components/theming/Theme";
export class Themes { export class Themes {
public static LIGHT_DEFAULT = new Theme( public static LIGHT_DEFAULT = new Theme(
"Light default", "Light default",
"#ffffff",
"#000000" "#000000"
) )
public static DARK_DEFAULT = new Theme( public static DARK_DEFAULT = new Theme(
"Dark default", "Dark default",
"#161B22",
"#ffffff" "#ffffff"
) )
frontend/components/wizard/Wizard.tsx
-1
View File
@@ -45,7 +45,6 @@ const Wizard = ({children, initialValues, onSubmit}: {
<Formik <Formik
initialValues={snapshot} initialValues={snapshot}
onSubmit={handleSubmit} onSubmit={handleSubmit}
isInitialValid={false}
/*// @ts-ignore*/ /*// @ts-ignore*/
validationSchema={step.props.validationSchema} validationSchema={step.props.validationSchema}
> >