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, 24 insertions, 28 deletions

diff --git a/apps/mobile/app/dashboard/search.tsx b/apps/mobile/app/dashboard/search.tsx
index 5cc97575..66423870 100644
--- a/apps/mobile/app/dashboard/search.tsx
+++ b/apps/mobile/app/dashboard/search.tsx
@@ -1,18 +1,12 @@
 import { useMemo, useRef, useState } from "react";
-import {
-  FlatList,
-  Keyboard,
-  Pressable,
-  Text,
-  TextInput,
-  View,
-} from "react-native";
-import { router } from "expo-router";
+import { FlatList, Keyboard, Pressable, TextInput, View } from "react-native";
+import { router, Stack } from "expo-router";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
-import { Input } from "@/components/ui/Input";
+import { SearchInput } from "@/components/ui/SearchInput";
+import { Text } from "@/components/ui/Text";
 import { api } from "@/lib/trpc";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { keepPreviousData } from "@tanstack/react-query";
@@ -102,24 +96,26 @@ export default function Search() {
 
   return (
     <CustomSafeAreaView>
-      <View className="flex flex-row items-center gap-3 p-3">
-        <Input
-          ref={inputRef}
-          placeholder="Search"
-          className="flex-1"
-          value={search}
-          onChangeText={setSearch}
-          onFocus={handleOnFocus}
-          onBlur={handleOnBlur}
-          onSubmitEditing={() => handleSearchSubmit(search)}
-          returnKeyType="search"
-          autoFocus
-          autoCapitalize="none"
-        />
-        <Pressable onPress={() => router.back()}>
-          <Text className="text-foreground">Cancel</Text>
-        </Pressable>
-      </View>
+      <Stack.Screen
+        options={{
+          headerShown: true,
+        }}
+      />
+      <SearchInput
+        containerClassName="m-3"
+        ref={inputRef}
+        placeholder="Search"
+        className="flex-1"
+        value={search}
+        onChangeText={setSearch}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        onSubmitEditing={() => handleSearchSubmit(search)}
+        returnKeyType="search"
+        autoFocus
+        autoCapitalize="none"
+        onCancel={router.back}
+      />
 
       {isInputFocused ? (
         <FlatList