Fix account button size

front/packages/primitives/src/avatar.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { View } from "react-native";
+import { TextStyle, View } from "react-native";
 import { Image } from "./image";
 import { useYoshiki, px, Stylable } from "yoshiki/native";
 import { Icon } from "./icons";
@@ -26,6 +26,7 @@ import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill
 import { YoshikiStyle } from "yoshiki/dist/type";
 import { P } from "@expo/html-elements";
 import { forwardRef } from "react";
+import { ts } from "./utils";
 
 const stringToColor = (string: string) => {
 	let hash = 0;
@@ -41,7 +42,7 @@ const stringToColor = (string: string) => {
 		color += `00${value.toString(16)}`.slice(-2);
 	}
 	return color;
-}
+};
 
 export const Avatar = forwardRef<
 	View,
@@ -67,7 +68,11 @@ export const Avatar = forwardRef<
 			ref={ref}
 			{...css(
 				[
-					{ borderRadius: 999999, width: size, height: size, overflow: "hidden" },
+					{
+						borderRadius: 999999,
+						overflow: "hidden",
+						p: ts(1),
+					},
 					fill && {
 						bg: col,
 					},
@@ -75,8 +80,6 @@ export const Avatar = forwardRef<
 					!src &&
 					!isLoading && {
 						bg: stringToColor(placeholder),
-						justifyContent: "center",
-						alignItems: "center",
 					},
 				],
 				props,
@@ -85,7 +88,17 @@ export const Avatar = forwardRef<
 			{src || isLoading ? (
 				<Image src={src} alt={alt} layout={{ width: size, height: size }} />
 			) : placeholder ? (
-				<P {...css({})}>{placeholder[0]}</P>
+				<P
+					{...css({
+						marginVertical: 0,
+						height: size,
+						width: size,
+						lineHeight: size,
+						textAlign: "center",
+					})}
+				>
+					{placeholder[0]}
+				</P>
 			) : (
 				<Icon icon={AccountCircle} size={size} color={fill ? col : theme.colors.white} />
 			)}

front/packages/ui/src/login/form.tsx

@@ -43,7 +43,7 @@ export const FormPage = ({ children, ...props }: { children: ReactNode } & Styla
 	const { css } = useYoshiki();
 
 	// TODO: Replace the hardcoded 1 to a random show/movie thumbnail.
-	const src = `${Platform.OS === "web" ? "/api/" : process.env.PUBLIC_BACK_URL}/shows/1/thumbnail`;
+	const src = `${Platform.OS === "web" ? "/api" : process.env.PUBLIC_BACK_URL}/shows/1/thumbnail`;
 	const nativeProps = Platform.select<Partial<ImageProps>>({
 		web: {
 			defaultSource: typeof src === "string" ? { uri: src! } : Array.isArray(src) ? src[0] : src!,

front/packages/ui/src/login/login.tsx

@@ -32,6 +32,7 @@ import { PasswordInput } from "./password-input";
 import { useQueryClient } from "@tanstack/react-query";
 
 export const cleanApiUrl = (apiUrl: string) => {
+	if (Platform.OS === "web") return undefined;
 	if (!/https?:\/\//.test(apiUrl)) apiUrl = "http://" + apiUrl;
 	apiUrl = apiUrl.replace(/\/$/, "");
 	return apiUrl + "/api";

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

@@ -34,7 +34,7 @@ import { Platform, TextInput, View, ViewProps } from "react-native";
 import { useTranslation } from "react-i18next";
 import { createParam } from "solito";
 import { useRouter } from "solito/router";
-import { rem, Stylable, useYoshiki } from "yoshiki/native";
+import { px, rem, Stylable, useYoshiki } from "yoshiki/native";
 import MenuIcon from "@material-symbols/svg-400/rounded/menu-fill.svg";
 import Search from "@material-symbols/svg-400/rounded/search-fill.svg";
 import { Fetch, FetchNE } from "../fetch";
@@ -78,7 +78,7 @@ const SearchBar = forwardRef<
 			placeholder={t("navbar.search")}
 			placeholderTextColor={theme.light.overlay0}
 			{...tooltip(t("navbar.search"))}
-			{...css({ borderColor: (theme) => theme.colors.white }, props)}
+			{...css({ borderColor: (theme) => theme.colors.white, height: ts(4) }, props)}
 		/>
 	);
 });
@@ -100,9 +100,9 @@ export const NavbarProfile = () => {
 					Trigger={Avatar}
 					placeholder={username}
 					alt={t("navbar.login")}
-					size={30}
+					size={24}
 					color={theme.colors.white}
-					{...css({ marginLeft: ts(1), marginVertical: "auto", justifyContent: "center" })}
+					{...css({ marginLeft: ts(1), justifyContent: "center" })}
 					{...tooltip(username ?? t("navbar.login"))}
 				>
 					{isGuest ? (
@@ -136,7 +136,7 @@ export const NavbarRight = () => {
 	const searchExpanded = isSearching || query;
 
 	return (
-		<View {...css({ flexDirection: "row" })}>
+		<View {...css({ flexDirection: "row", alignItems: "center" })}>
 			{Platform.OS === "web" && (
 				<SearchBar
 					ref={ref}