Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 12:14:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Center logo in navbar

Browse Source
This commit is contained in:
Zoe Roux 2024-05-26 17:44:42 +02:00
parent d178b78e86
commit cc3f6f611e
No known key found for this signature in database
2 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ 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 { useEffect } from "react";
import { useRouter } from "solito/router"; import { useRouter } from "solito/router";
import { KyooLongLogo } from "../navbar/icon";
export const SetupPage: QueryPage<{ step: SetupStep }> = ({ step }) => { export const SetupPage: QueryPage<{ step: SetupStep }> = ({ step }) => {
const { css } = useYoshiki(); const { css } = useYoshiki();
@ -35,9 +36,13 @@ export const SetupPage: QueryPage<{ step: SetupStep }> = ({ step }) => {
); );
}; };
SetupPage.getLayout = ({ page }) => ( SetupPage.getLayout = ({ page }) => {
const { css } = useYoshiki();
return (
<> <>
<Navbar left={null} right={<NavbarProfile />} /> <Navbar left={<KyooLongLogo {...css({ marginX: ts(2) })} />} right={<NavbarProfile />} />
{page} {page}
</> </>
); );
};

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

@ -42,15 +42,21 @@ import { ReactElement, forwardRef, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Platform, type TextInput, View, type ViewProps } from "react-native"; import { Platform, type TextInput, View, type ViewProps } from "react-native";
import { useRouter } from "solito/router"; import { useRouter } from "solito/router";
import { type Stylable, useYoshiki } from "yoshiki/native"; import { type Stylable, useYoshiki, percent } from "yoshiki/native";
import { AdminPage } from "../admin"; import { AdminPage } from "../admin";
import { KyooLongLogo } from "./icon"; import { KyooLongLogo } from "./icon";
export const NavbarTitle = (props: Stylable & { onLayout?: ViewProps["onLayout"] }) => { export const NavbarTitle = (props: Stylable & { onLayout?: ViewProps["onLayout"] }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { css } = useYoshiki();
return ( return (
<A href="/" aria-label={t("navbar.home")} {...tooltip(t("navbar.home"))} {...props}> <A
href="/"
aria-label={t("navbar.home")}
{...tooltip(t("navbar.home"))}
{...css({ fontSize: 0 }, props)}
>
<KyooLongLogo /> <KyooLongLogo />
</A> </A>
); );
@ -199,11 +205,12 @@ export const Navbar = ({
props, props,
)} )}
> >
<View {...css({ flexDirection: "row", alignItems: "center" })}> <View {...css({ flexDirection: "row", alignItems: "center", height: percent(100) })}>
<NavbarTitle {...css({ marginX: ts(2) })} />
{left !== undefined ? ( {left !== undefined ? (
left left
) : ( ) : (
<>
<NavbarTitle {...css({ marginX: ts(2) })} />
<A <A
href="/browse" href="/browse"
{...css({ {...css({
@ -214,6 +221,7 @@ export const Navbar = ({
> >
{t("navbar.browse")} {t("navbar.browse")}
</A> </A>
</>
)} )}
</View> </View>
<View <View