Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-30 19:54:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup setup page layout

Browse Source
This commit is contained in:
Zoe Roux 2024-05-26 15:49:10 +02:00
parent 97e3257aee
commit cdf482ac4a
No known key found for this signature in database
2 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
front/packages/ui/src/errors/setup.tsx
View File

@ -5,27 +5,39 @@ import { Main } from "@expo/html-elements";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import Register from "@material-symbols/svg-400/rounded/app_registration.svg"; import Register from "@material-symbols/svg-400/rounded/app_registration.svg";
import { Navbar, NavbarProfile } from "../navbar"; import { Navbar, NavbarProfile } from "../navbar";
import { useEffect } from "react";
import { useRouter } from "solito/router";
export const SetupPage: QueryPage<{ step: Exclude<SetupStep, SetupStep.Done> }> = ({ step }) => { export const SetupPage: QueryPage<{ step: SetupStep }> = ({ step }) => {
const { css } = useYoshiki(); const { css } = useYoshiki();
const { t } = useTranslation(); const { t } = useTranslation();
const router = useRouter();
const isValid = Object.values(SetupStep).includes(step) && step !== SetupStep.Done;
useEffect(() => {
if (!isValid) router.replace("/");
}, [isValid, router]);
if (!isValid) return <P>Loading...</P>;
return ( return (
<> <Main {...css({ flexGrow: 1, flexShrink: 1, justifyContent: "center", alignItems: "center" })}>
<Navbar left={null} right={<NavbarProfile />} /> <P>{t(`errors.setup.${step}`)}</P>
<Main {step === SetupStep.MissingAdminAccount && (
{...css({ flexGrow: 1, flexShrink: 1, justifyContent: "center", alignItems: "center" })} <Button
> as={Link}
<P>{t(`errors.setup.${step}`)}</P> href={"/register"}
{step === SetupStep.MissingAdminAccount && ( text={t("login.register")}
<Button licon={<Icon icon={Register} {...css({ marginRight: ts(2) })} />}
as={Link} />
href={"/register"} )}
text={t("login.register")} </Main>
licon={<Icon icon={Register} {...css({ marginRight: ts(2) })} />}
/>
)}
</Main>
</>
); );
}; };
SetupPage.getLayout = ({ page }) => (
<>
<Navbar left={null} right={<NavbarProfile />} />
{page}
</>
);

2
front/packages/ui/src/navbar/index.tsx
View File

@ -172,7 +172,7 @@ export const Navbar = ({
left, left,
right, right,
...props ...props
}: { left?: ReactElement | null; right?: ReactElement | null }) => { }: { left?: ReactElement | null; right?: ReactElement | null } & Stylable) => {
const { css } = useYoshiki(); const { css } = useYoshiki();
const { t } = useTranslation(); const { t } = useTranslation();