Cleanup safe area colors

front/apps/mobile/app/(app)/(tabs)/_layout.tsx

@@ -21,8 +21,8 @@
 import { Icon } from "@kyoo/primitives";
 import { Tabs } from "expo-router";
 import { useTheme } from "yoshiki/native";
-import Home from "@material-symbols/svg-400/rounded/home.svg";
+import Home from "@material-symbols/svg-400/rounded/home-fill.svg";
-import Browse from "@material-symbols/svg-400/rounded/browse.svg";
+import Browse from "@material-symbols/svg-400/rounded/browse-fill.svg";
 
 export default function TabsLayout() {
 	return (

front/apps/mobile/app/(app)/_layout.tsx

@@ -41,6 +41,7 @@ export default function SignGuard() {
 	return (
 		<Stack
 			screenOptions={{
+				navigationBarColor: theme.variant.background,
 				headerTitle: () => <NavbarTitle />,
 				headerRight: () => <NavbarRight />,
 				contentStyle: {

front/apps/mobile/app/_layout.tsx

@@ -34,9 +34,10 @@ import {
 	Poppins_400Regular,
 	Poppins_900Black,
 } from "@expo-google-fonts/poppins";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { useColorScheme } from "react-native";
 import { initReactI18next } from "react-i18next";
+import { ThemeProvider as RNThemeProvider } from "@react-navigation/native";
 import "intl-pluralrules";
 import "@formatjs/intl-locale/polyfill";
 import "@formatjs/intl-displaynames/polyfill";
@@ -46,6 +47,7 @@ import "@formatjs/intl-displaynames/locale-data/fr";
 // TODO: use a backend to load jsons.
 import en from "../../../translations/en.json";
 import fr from "../../../translations/fr.json";
+import { useTheme } from "yoshiki/native";
 
 i18next.use(initReactI18next).init({
 	interpolation: {
@@ -61,6 +63,27 @@ i18next.use(initReactI18next).init({
 
 SplashScreen.preventAutoHideAsync();
 
+const NavigationThemeProvider = ({ children }: { children: ReactNode }) => {
+	const theme = useTheme();
+	return (
+		<RNThemeProvider
+			value={{
+				dark: theme.mode === "dark",
+				colors: {
+					primary: theme.accent,
+					card: theme.variant.background,
+					text: theme.paragraph,
+					border: theme.background,
+					notification: theme.background,
+					background: theme.background,
+				},
+			}}
+		>
+			{children}
+		</RNThemeProvider>
+	);
+};
+
 export default function Root() {
 	const [queryClient] = useState(() => createQueryClient());
 	const theme = useColorScheme();
@@ -84,7 +107,9 @@ export default function Root() {
 			>
 				<PortalProvider>
 					<AccountProvider>
-						<Slot />
+						<NavigationThemeProvider>
+							<Slot />
+						</NavigationThemeProvider>
 					</AccountProvider>
 				</PortalProvider>
 			</ThemeSelector>

front/packages/ui/src/browse/list.tsx

@@ -25,9 +25,7 @@ import {
 	Skeleton,
 	ts,
 	ImageBackground,
-	Poster,
 	Heading,
-	Icon,
 	PosterBackground,
 	imageBorderRadius,
 } from "@kyoo/primitives";
@@ -35,7 +33,6 @@ import { useState } from "react";
 import { View } from "react-native";
 import { percent, px, rem, useYoshiki } from "yoshiki/native";
 import { Layout, WithLoading } from "../fetch";
-import Done from "@material-symbols/svg-400/rounded/done-fill.svg";
 import { ItemWatchStatus } from "./grid";
 
 export const ItemList = ({
@@ -84,6 +81,7 @@ export const ItemList = ({
 					flexDirection: "row",
 					height: ItemList.layout.size,
 					borderRadius: px(imageBorderRadius),
+					overflow: "hidden",
 					marginX: ItemList.layout.gap,
 				},
 				props,

front/packages/ui/src/home/vertical.tsx

@@ -33,7 +33,7 @@ export const VerticalRecommanded = () => {
 	const { css } = useYoshiki();
 
 	return (
-		<View {...css({ marginTop: ItemGrid.layout.gap })}>
+		<View {...css({ marginY: ItemGrid.layout.gap })}>
 			<H3 {...css({ mX: ItemGrid.layout.gap })}>{t("home.recommanded")}</H3>
 			<InfiniteFetch
 				query={VerticalRecommanded.query()}