feat(mobile): Retheme the mobile app (#1872)

* Add nativewindui

* migrate to nativewindui text

* Replace buttons with nativewindui buttons

* Use nativewindui search input

* fix the divider color

* More changes

* fix manage tag icon

* fix styling of bookmark card

* fix ios compilation

* fix search clear

* fix tag pill border color

* Store theme setting in app settings

* fix setting color appearance

* fix coloring of search input

* fix following system theme

* add a save button to info

* fix the grey colors on android

* fix icon active tint color

* drop the use of TextField

1 files changed, 23 insertions, 22 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index 7b3dab4f..6d76308d 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -1,16 +1,17 @@
 import { useEffect } from "react";
-import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { ActivityIndicator, Pressable, 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 ChevronRight from "@/components/ui/ChevronRight";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import { Divider } from "@/components/ui/Divider";
 import PageTitle from "@/components/ui/PageTitle";
+import { Text } from "@/components/ui/Text";
 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();
@@ -38,56 +39,50 @@ 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="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 className="flex w-full gap-3 rounded-lg bg-card px-4 py-2">
+          <Text>{isSettingsLoading ? "Loading ..." : settings.address}</Text>
           <Divider orientation="horizontal" />
-          <Text className="text-lg text-accent-foreground">
-            {isLoading ? "Loading ..." : data?.email}
-          </Text>
+          <Text>{isLoading ? "Loading ..." : data?.email}</Text>
         </View>
         <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">
+        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-card px-4 py-2">
           <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>
+              <Text>Theme</Text>
               <View className="flex flex-row items-center gap-2">
-                <Text className="text-lg text-muted-foreground">
+                <Text className="text-muted-foreground">
                   {
                     { light: "Light", dark: "Dark", system: "System" }[
                       settings.theme
                     ]
                   }
                 </Text>
-                <ChevronRight color="rgb(0, 122, 255)" />
+                <ChevronRight />
               </View>
             </Pressable>
           </Link>
         </View>
-        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 dark:bg-accent">
+        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-card px-4 py-2">
           <Link
             asChild
             href="/dashboard/settings/bookmark-default-view"
             className="flex-1"
           >
             <Pressable className="flex flex-row justify-between">
-              <Text className="text-lg text-accent-foreground">
-                Default Bookmark View
-              </Text>
+              <Text>Default Bookmark View</Text>
               <View className="flex flex-row items-center gap-2">
                 {isSettingsLoading ? (
                   <ActivityIndicator size="small" />
                 ) : (
-                  <Text className="text-lg text-muted-foreground">
+                  <Text className="text-muted-foreground">
                     {settings.defaultBookmarkView === "reader"
                       ? "Reader"
                       : "Browser"}
                   </Text>
                 )}
-                <ChevronRight color="rgb(0, 122, 255)" />
+                <ChevronRight />
               </View>
             </Pressable>
           </Link>
@@ -95,8 +90,8 @@ export default function Dashboard() {
         <Text className="w-full p-1 text-2xl font-bold text-foreground">
           Upload 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">
-          <Text className="text-lg text-accent-foreground">Image Quality</Text>
+        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-card px-4 py-2">
+          <Text>Image Quality</Text>
           <View className="flex flex-1 flex-row items-center justify-center gap-2">
             <Text className="text-foreground">
               {Math.round(settings.imageQuality * 100)}%
@@ -115,7 +110,13 @@ export default function Dashboard() {
           </View>
         </View>
         <Divider orientation="horizontal" />
-        <Button className="w-full" label="Log Out" onPress={logout} />
+        <Button
+          androidRootClassName="w-full"
+          onPress={logout}
+          variant="destructive"
+        >
+          <Text>Log Out</Text>
+        </Button>
       </View>
     </CustomSafeAreaView>
   );