Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-11-04 03:27:14 -05: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 { useEffect } from "react";
import { useRouter } from "solito/router";
import { KyooLongLogo } from "../navbar/icon";
export const SetupPage: QueryPage<{ step: SetupStep }> = ({ step }) => {
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}
</>
);
};

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 { Platform, type TextInput, View, type ViewProps } from "react-native";
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 { KyooLongLogo } from "./icon";
export const NavbarTitle = (props: Stylable & { onLayout?: ViewProps["onLayout"] }) => {
const { t } = useTranslation();
const { css } = useYoshiki();
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 />
</A>
);
@ -199,11 +205,12 @@ export const Navbar = ({
props,
)}
>
<View {...css({ flexDirection: "row", alignItems: "center" })}>
<NavbarTitle {...css({ marginX: ts(2) })} />
<View {...css({ flexDirection: "row", alignItems: "center", height: percent(100) })}>
{left !== undefined ? (
left
) : (
<>
<NavbarTitle {...css({ marginX: ts(2) })} />
<A
href="/browse"
{...css({
@ -214,6 +221,7 @@ export const Navbar = ({
>
{t("navbar.browse")}
</A>
</>
)}
</View>
<View