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, 8 insertions, 6 deletions

diff --git a/apps/mobile/app/sharing.tsx b/apps/mobile/app/sharing.tsx
index 506b5100..1e5df4b8 100644
--- a/apps/mobile/app/sharing.tsx
+++ b/apps/mobile/app/sharing.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { ActivityIndicator, Pressable, View } from "react-native";
 import { useRouter } from "expo-router";
 import { useShareIntentContext } from "expo-share-intent";
 import { Button } from "@/components/ui/Button";
+import { Text } from "@/components/ui/Text";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
 import { useUploadAsset } from "@/lib/upload";
@@ -73,7 +74,7 @@ function SaveBookmark({ setMode }: { setMode: (mode: Mode) => void }) {
 
   return (
     <View className="flex flex-row gap-3">
-      <Text className="text-4xl text-foreground">Hoarding</Text>
+      <Text variant="largeTitle">Hoarding</Text>
       <ActivityIndicator />
     </View>
   );
@@ -95,18 +96,19 @@ export default function Sharing() {
     case "success": {
       comp = (
         <View className="items-center gap-4">
-          <Text className="text-4xl text-foreground">
+          <Text variant="largeTitle">
             {mode.type === "alreadyExists" ? "Already Hoarded!" : "Hoarded!"}
           </Text>
           <Button
-            label="Manage"
             onPress={() => {
               router.replace(`/dashboard/bookmarks/${mode.bookmarkId}/info`);
               if (autoCloseTimeoutId.current) {
                 clearTimeout(autoCloseTimeoutId.current);
               }
             }}
-          />
+          >
+            <Text>Manage</Text>
+          </Button>
           <Pressable onPress={() => router.replace("dashboard")}>
             <Text className="text-muted-foreground">Dismiss</Text>
           </Pressable>
@@ -115,7 +117,7 @@ export default function Sharing() {
       break;
     }
     case "error": {
-      comp = <Text className="text-4xl text-foreground">Error!</Text>;
+      comp = <Text variant="largeTitle">Error!</Text>;
       break;
     }
   }