Add a (rudimentary) splash screen

front/apps/mobile/app.config.js

@@ -20,21 +20,29 @@
 
 const IS_DEV = process.env.APP_VARIANT === "development";
 
+// Defined outside the config because dark splashscreen needs to be platform specific.
+const splash = {
+	image: "./assets/icon.png",
+	resizeMode: "contain",
+	backgroundColor: "#eff1f5",
+	dark: {
+		image: "./assets/icon.png",
+		resizeMode: "contain",
+		backgroundColor: "#1e1e2e",
+	},
+};
+
 const config = {
 	expo: {
-		name: "kyoo",
+		name: IS_DEV ? "Kyoo Development" : "Kyoo",
 		slug: "kyoo",
 		scheme: "kyoo",
 		version: "1.0.0",
 		orientation: "default",
 		icon: "./assets/icon.png",
 		entryPoint: "./index.tsx",
-		userInterfaceStyle: "light",
-		splash: {
-			image: "./assets/splash.png",
-			resizeMode: "contain",
-			backgroundColor: "#ffffff",
-		},
+		userInterfaceStyle: "automatic",
+		splash,
 		updates: {
 			fallbackToCacheTimeout: 0,
 		},
@@ -45,12 +53,10 @@ const config = {
 		android: {
 			package: IS_DEV ? "moe.sdg.kyoo.dev" : "moe.sdg.kyoo",
 			adaptiveIcon: {
-				foregroundImage: "./assets/adaptive-icon.png",
-				backgroundColor: "#FFFFFF",
+				foregroundImage: "./assets/icon.png",
+				backgroundColor: "#eff1f5",
 			},
-		},
-		web: {
-			favicon: "./assets/favicon.png",
+			splash,
 		},
 		extra: {
 			eas: {

front/apps/mobile/app/_layout.tsx

@@ -20,7 +20,7 @@
 
 import { PortalProvider } from "@gorhom/portal";
 import { ThemeSelector } from "@kyoo/primitives";
-import { NavbarProfile, NavbarRight, NavbarTitle } from "@kyoo/ui";
+import { NavbarRight, NavbarTitle } from "@kyoo/ui";
 import { createQueryClient } from "@kyoo/models";
 import { QueryClientProvider } from "@tanstack/react-query";
 import i18next from "i18next";
@@ -35,7 +35,7 @@ import {
 } from "@expo-google-fonts/poppins";
 import { useCallback, useState } from "react";
 import { useColorScheme } from "react-native";
-import { initReactI18next, useTranslation } from "react-i18next";
+import { initReactI18next } from "react-i18next";
 import { useTheme } from "yoshiki/native";
 import "intl-pluralrules";
 
@@ -63,6 +63,9 @@ const ThemedStack = ({ onLayout }: { onLayout?: () => void }) => {
 			screenOptions={{
 				headerTitle: () => <NavbarTitle onLayout={onLayout} />,
 				headerRight: () => <NavbarRight />,
+				contentStyle: {
+					backgroundColor: theme.background,
+				},
 				headerStyle: {
 					backgroundColor: theme.appbar,
 				},

front/apps/web/babel.config.js

@@ -22,6 +22,6 @@ module.exports = function (api) {
 	api.cache(true);
 	return {
 		presets: ["babel-preset-expo"],
-		/* plugins: ["react-native-reanimated/plugin"], */
+		plugins: ["react-native-reanimated/plugin"],
 	};
 };

front/packages/models/src/query.tsx

@@ -37,12 +37,11 @@ const queryFn = async <Data,>(
 	context: QueryFunctionContext,
 ): Promise<Data> => {
 	const kyooUrl =
-		(Platform.OS !== "web"
+		Platform.OS !== "web"
 			? process.env.PUBLIC_BACK_URL
 			: typeof window === "undefined"
 			? process.env.KYOO_URL ?? "http://localhost:5000"
-			: // TODO remove the hardcoded fallback. This is just for testing purposes
-			  "/api") ?? "https://beta.sdg.moe";
+			: "/api";
 	if (!kyooUrl) console.error("Kyoo's url is not defined.");
 
 	let resp;

front/packages/primitives/src/icons.tsx

@@ -40,7 +40,7 @@ type IconProps = {
 export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => {
 	const { css, theme } = useYoshiki();
 	const computed = css(
-		{ width: size, height: size, fill: color ?? theme.colors.white } as ViewStyle,
+		{ width: size, height: size, fill: color ?? theme.contrast } as ViewStyle,
 		props,
 	);
 	return (

front/packages/primitives/src/links.tsx

@@ -74,8 +74,12 @@ export const PressableFeedback = forwardRef<
 	const pressProps = { onBlur, onFocus, onPressIn, onPressOut, onPress };
 	const wrapperProps = Platform.select<ViewProps & { ref?: any }>({
 		android: {
-			...props,
-			style: { ...StyleSheet.flatten(props?.style), overflow: "hidden" },
+			style: {
+				borderRadius: StyleSheet.flatten(props?.style)?.borderRadius,
+				alignContent: "center",
+				justifyContent: "center",
+				overflow: "hidden",
+			},
 			ref,
 		},
 		default: {},

front/packages/primitives/src/themes/catppuccin.ts

@@ -55,7 +55,7 @@ export const catppuccin: ThemeBuilder = {
 	},
 	dark: {
 		// Catppuccin mocha
-		appbar: "#94e2d5",
+		appbar: "#89b4fa",
 		overlay0: "#6c7086",
 		overlay1: "#9399b2",
 		link: "#89b4fa",

front/packages/primitives/src/themes/theme.tsx

@@ -38,6 +38,7 @@ type Mode = {
 	overlay0: Property.Color;
 	overlay1: Property.Color;
 	link: Property.Color;
+	contrast: Property.Color;
 	variant: Variant;
 	colors: {
 		red: Property.Color;
@@ -67,26 +68,17 @@ declare module "yoshiki" {
 		font: FontList;
 	}
 }
-declare module "yoshiki/native" {
-	export interface Theme extends Mode, Variant {
-		light: Mode & Variant;
-		dark: Mode & Variant;
-		user: Mode & Variant;
-		alternate: Mode & Variant;
-		font: FontList;
-	}
-}
 
 export type { Theme } from "yoshiki";
 export type ThemeBuilder = {
-	light: Mode & { default: Variant };
-	dark: Mode & { default: Variant };
+	light: Omit<Mode, "contrast"> & { default: Variant };
+	dark: Omit<Mode, "contrast"> & { default: Variant };
 };
 
 const selectMode = (theme: ThemeBuilder & { font: FontList }, mode: "light" | "dark"): Theme => {
 	const { light: lightBuilder, dark: darkBuilder, ...options } = theme;
-	const light = { ...lightBuilder, ...lightBuilder.default };
-	const dark = { ...darkBuilder, ...darkBuilder.default };
+	const light = { ...lightBuilder, ...lightBuilder.default, contrast: lightBuilder.colors.black };
+	const dark = { ...darkBuilder, ...darkBuilder.default, contrast: darkBuilder.colors.white };
 	const value = mode === "light" ? light : dark;
 	const alternate = mode === "light" ? dark : light;
 	return {

front/packages/ui/src/details/header.tsx

@@ -165,7 +165,7 @@ const TitleLine = ({
 						/>
 						<IconButton
 							icon={Theaters}
-							color={{ xs: theme.user.colors.black, md: theme.colors.white }}
+							color={{ xs: theme.user.contrast, md: theme.colors.white }}
 							{...tooltip(t("show.trailer"))}
 						/>
 					</View>