Center logo in navbar

front/packages/ui/src/errors/setup.tsx

@@ -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 }) => (
-	<>
-		<Navbar left={null} right={<NavbarProfile />} />
-		{page}
-	</>
-);
+SetupPage.getLayout = ({ page }) => {
+	const { css } = useYoshiki();
+
+	return (
+		<>
+			<Navbar left={<KyooLongLogo {...css({ marginX: ts(2) })} />} right={<NavbarProfile />} />
+			{page}
+		</>
+	);
+};

front/packages/ui/src/navbar/index.tsx

@@ -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,21 +205,23 @@ 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
 				) : (
-					<A
-						href="/browse"
-						{...css({
-							textTransform: "uppercase",
-							fontWeight: "bold",
-							color: (theme) => theme.contrast,
-						})}
-					>
-						{t("navbar.browse")}
-					</A>
+					<>
+						<NavbarTitle {...css({ marginX: ts(2) })} />
+						<A
+							href="/browse"
+							{...css({
+								textTransform: "uppercase",
+								fontWeight: "bold",
+								color: (theme) => theme.contrast,
+							})}
+						>
+							{t("navbar.browse")}
+						</A>
+					</>
 				)}
 			</View>
 			<View