redesign take 1

apps/mobile/src/app/_layout.tsx

@@ -3,7 +3,9 @@ import { Stack } from "expo-router";
 import * as SecureStore from "expo-secure-store";
 import { View, Text } from "react-native";
 import { useEffect, useState } from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { validateEnv } from "../utils/env";
+import { ThemeProvider } from "../contexts/ThemeContext";
 import { StatisticsProvider } from "../contexts/StatisticsContext";
 import { FitnessGoalsProvider } from "../contexts/FitnessGoalsContext";
 import { RecommendationsProvider } from "../contexts/RecommendationsContext";
@@ -169,18 +171,22 @@ export default function RootLayout() {
   });
 
   return (
-    <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
-      <ClerkLoaded>
-        <NotificationsProvider>
-          <StatisticsProvider>
-            <FitnessGoalsProvider>
-              <RecommendationsProvider>
-                <AppContent />
-              </RecommendationsProvider>
-            </FitnessGoalsProvider>
-          </StatisticsProvider>
-        </NotificationsProvider>
-      </ClerkLoaded>
-    </ClerkProvider>
+    <SafeAreaProvider>
+      <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+        <ClerkLoaded>
+          <ThemeProvider>
+            <NotificationsProvider>
+              <StatisticsProvider>
+                <FitnessGoalsProvider>
+                  <RecommendationsProvider>
+                    <AppContent />
+                  </RecommendationsProvider>
+                </FitnessGoalsProvider>
+              </StatisticsProvider>
+            </NotificationsProvider>
+          </ThemeProvider>
+        </ClerkLoaded>
+      </ClerkProvider>
+    </SafeAreaProvider>
   );
 }