Front: Add Gradient behind navabar if transparent

front/apps/web/src/pages/_app.tsx

@@ -201,7 +201,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 												{...props}
 											/>
 										</ConnectionErrorVerifier>
-										<Tooltip id="tooltip" positionStrategy={"fixed"} />
+										<Tooltip id="tooltip" style={{ zIndex: 10 }} positionStrategy={"fixed"} />
 										<SetupChecker />
 									</SnackbarProvider>
 								</PortalProvider>

front/packages/ui/src/layout.tsx

@@ -19,6 +19,7 @@
  */
 
 import { Main } from "@kyoo/primitives";
+import { LinearGradient } from "expo-linear-gradient";
 import type { ReactElement } from "react";
 import { useYoshiki, vw } from "yoshiki/native";
 import { Navbar } from "./navbar";
@@ -30,8 +31,7 @@ export const DefaultLayout = ({
 	page: ReactElement;
 	transparent?: boolean;
 }) => {
-	const { css } = useYoshiki();
-
+	const { css, theme } = useYoshiki();
 	return (
 		<>
 			<Navbar
@@ -45,6 +45,22 @@ export const DefaultLayout = ({
 						shadowOpacity: 0,
 					},
 				)}
+				background={
+					transparent ? (
+						<LinearGradient
+							start={{ x: 0, y: 0.25 }}
+							end={{ x: 0, y: 1 }}
+							colors={[theme.themeOverlay, "transparent"]}
+							{...css({
+								height: "100%",
+								position: "absolute",
+								top: 0,
+								left: 0,
+								right: 0,
+							})}
+						/>
+					) : undefined
+				}
 			/>
 			<Main
 				{...css({

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

@@ -85,8 +85,8 @@ const SearchBar = forwardRef<TextInput, Stylable>(function SearchBar(props, ref)
 				setQuery(q);
 			}}
 			placeholder={t("navbar.search")}
-			placeholderTextColor={theme.colors.white}
-			containerStyle={{ height: ts(4), flexShrink: 1, borderColor: (theme) => theme.colors.white }}
+			placeholderTextColor={theme.contrast}
+			containerStyle={{ height: ts(4), flexShrink: 1, borderColor: (theme) => theme.contrast }}
 			{...tooltip(t("navbar.search"))}
 			{...props}
 		/>
@@ -177,9 +177,14 @@ export const NavbarRight = () => {
 export const Navbar = ({
 	left,
 	right,
+	background,
 	...props
-}: { left?: ReactElement | null; right?: ReactElement | null } & Stylable) => {
-	const { css } = useYoshiki();
+}: {
+	left?: ReactElement | null;
+	right?: ReactElement | null;
+	background?: ReactElement;
+} & Stylable) => {
+	const { css, theme } = useYoshiki();
 	const { t } = useTranslation();
 
 	return (
@@ -205,6 +210,7 @@ export const Navbar = ({
 				props,
 			)}
 		>
+			{background}
 			<View {...css({ flexDirection: "row", alignItems: "center", height: percent(100) })}>
 				{left !== undefined ? (
 					left