feature(mobile): Add settings page for configuring the theme

1 files changed, 27 insertions, 6 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index 18d3d243..db118df8 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from "react";
-import { Text, View } from "react-native";
+import { Pressable, Text, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import { useSharedValue } from "react-native-reanimated";
+import { Link } from "expo-router";
 import { Button } from "@/components/ui/Button";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import { Divider } from "@/components/ui/Divider";
@@ -9,6 +10,7 @@ import PageTitle from "@/components/ui/PageTitle";
 import { useSession } from "@/lib/session";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
+import { ChevronRight } from "lucide-react-native";
 
 export default function Dashboard() {
   const { logout } = useSession();
@@ -36,18 +38,35 @@ export default function Dashboard() {
     <CustomSafeAreaView>
       <PageTitle title="Settings" />
       <View className="flex h-full w-full items-center gap-3 px-4 py-2">
-        <View className="w-full rounded-lg bg-white px-4 py-2 dark:bg-accent">
+        <View className="flex w-full gap-3 rounded-lg bg-white px-4 py-2 dark:bg-accent">
           <Text className="text-lg text-accent-foreground">
             {isSettingsLoading ? "Loading ..." : settings.address}
           </Text>
-        </View>
-        <View className="w-full rounded-lg bg-white px-4 py-2 dark:bg-accent">
+          <Divider orientation="horizontal" />
           <Text className="text-lg text-accent-foreground">
             {isLoading ? "Loading ..." : data?.email}
           </Text>
         </View>
-        <Button className="w-full" label="Log Out" onPress={logout} />
-        <Divider orientation="horizontal" />
+        <Text className="w-full p-1 text-2xl font-bold text-foreground">
+          App Settings
+        </Text>
+        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 dark:bg-accent">
+          <Link asChild href="/dashboard/settings/theme" className="flex-1">
+            <Pressable className="flex flex-row justify-between">
+              <Text className="text-lg text-accent-foreground">Theme</Text>
+              <View className="flex flex-row items-center gap-2">
+                <Text className="text-lg text-muted-foreground">
+                  {
+                    { light: "Light", dark: "Dark", system: "System" }[
+                      settings.theme
+                    ]
+                  }
+                </Text>
+                <ChevronRight color="rgb(0, 122, 255)" />
+              </View>
+            </Pressable>
+          </Link>
+        </View>
         <Text className="w-full p-1 text-2xl font-bold text-foreground">
           Upload Settings
         </Text>
@@ -70,6 +89,8 @@ export default function Dashboard() {
             />
           </View>
         </View>
+        <Divider orientation="horizontal" />
+        <Button className="w-full" label="Log Out" onPress={logout} />
       </View>
     </CustomSafeAreaView>
   );