add images

app.json

@@ -6,8 +6,8 @@
 		"orientation": "portrait",
 		"icon": "./assets/images/icon.png",
 		"scheme": "zipline",
-		"userInterfaceStyle": "automatic",
 		"newArchEnabled": true,
+		"userInterfaceStyle": "automatic",
 		"ios": {
 			"supportsTablet": true,
 			"bundleIdentifier": "com.stefdp.zipline"
@@ -15,10 +15,15 @@
 		"android": {
 			"adaptiveIcon": {
 				"foregroundImage": "./assets/images/adaptive-icon.png",
-				"backgroundColor": "#ffffff"
+				"monochromeImage": "./assets/images/monochromatic-adaptive-icon.png",
+				"backgroundColor": "#121317"
 			},
 			"package": "com.stefdp.zipline"
 		},
+		"androidStatusBar.barStyle": {
+			"backgroundColor": "#0c101c",
+			"barStyle": "light-content"
+		},
 		"web": {
 			"bundler": "metro",
 			"output": "static",
@@ -26,13 +31,19 @@
 		},
 		"plugins": [
 			"expo-router",
+			[
+				"expo-secure-store",
+				{
+					"faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data."
+				}
+			],
 			[
 				"expo-splash-screen",
 				{
 					"image": "./assets/images/splash-icon.png",
-					"imageWidth": 200,
+					"imageWidth": 300,
 					"resizeMode": "contain",
-					"backgroundColor": "#ffffff"
+					"backgroundColor": "#121317"
 				}
 			],
 			[

app/+not-found.tsx

@@ -19,7 +19,7 @@ export default function NotFoundScreen() {
 					});
 				}}
 			>
-				<Text styles={styles.buttonText}>Head to the Dashboard</Text>
+				<Text style={styles.buttonText}>Head to the Dashboard</Text>
 			</Pressable>
 		</View>
 	);

app/_layout.tsx

@@ -1,7 +1,7 @@
-import { Slot, useRouter } from "expo-router";
-import Header from "@/components/Header";
-
 import { ShareIntentProvider } from "expo-share-intent";
+import { Slot, useRouter } from "expo-router";
+import { StatusBar } from 'expo-status-bar';
+import Header from "@/components/Header";
 
 export default function Layout() {
 	const router = useRouter();
@@ -18,6 +18,11 @@ export default function Layout() {
 					}),
 			}}
 		>
+			<StatusBar
+				style="light"
+				backgroundColor="#0c101c"
+			/>
+			
 			<Header/>
 			<Slot />
 		</ShareIntentProvider>

components/Header.tsx

@@ -1,11 +1,11 @@
+import { getCurrentUser, getCurrentUserAvatar } from "@/functions/zipline/user";
 import { Stack, IconButton } from "@react-native-material/core";
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import { View, Text, Pressable, Image } from "react-native";
-import type React from "react";
-import { styles } from "@/styles/header";
-import { useEffect, useState } from "react";
-import { getCurrentUser, getCurrentUserAvatar } from "@/functions/zipline/user";
 import type { APISelfUser } from "@/types/zipline";
+import { useEffect, useState } from "react";
+import { styles } from "@/styles/header";
+import type React from "react";
 
 export default function Header() {
 	const [avatar, setAvatar] = useState<string | null>(null);
@@ -19,7 +19,7 @@ export default function Header() {
 			setAvatar(avatar);
 			setUser(user);
 		})();
-	}, []);
+	});
 
 	return (
 		<View>

styles/home.ts

@@ -21,7 +21,7 @@ export const styles = StyleSheet.create({
     loginContainer: {
         display: "flex",
         flex: 1,
-        backgroundColor: "#181c28",
+        backgroundColor: "#0c101c",
         justifyContent: "center",
         alignContent: "center",
     },