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, 15 insertions, 13 deletions

diff --git a/apps/mobile/app/signin.tsx b/apps/mobile/app/signin.tsx
index 0d160398..215b6a67 100644
--- a/apps/mobile/app/signin.tsx
+++ b/apps/mobile/app/signin.tsx
@@ -4,18 +4,17 @@ import {
   KeyboardAvoidingView,
   Platform,
   Pressable,
-  Text,
   TouchableWithoutFeedback,
   View,
 } from "react-native";
 import { Redirect, useRouter } from "expo-router";
 import Logo from "@/components/Logo";
 import { TailwindResolver } from "@/components/TailwindResolver";
-import { Button, buttonVariants } from "@/components/ui/Button";
+import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
+import { Text } from "@/components/ui/Text";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
-import { cn } from "@/lib/utils";
 import { Bug } from "lucide-react-native";
 
 enum LoginType {
@@ -134,6 +133,7 @@ export default function Signin() {
             <Text className="font-bold">Server Address</Text>
             <Input
               className="w-full"
+              inputClasses="bg-card"
               placeholder="Server Address"
               value={formState.serverAddress}
               autoCapitalize="none"
@@ -150,6 +150,7 @@ export default function Signin() {
                 <Text className="font-bold">Email</Text>
                 <Input
                   className="w-full"
+                  inputClasses="bg-card"
                   placeholder="Email"
                   keyboardType="email-address"
                   autoCapitalize="none"
@@ -163,6 +164,7 @@ export default function Signin() {
                 <Text className="font-bold">Password</Text>
                 <Input
                   className="w-full"
+                  inputClasses="bg-card"
                   placeholder="Password"
                   secureTextEntry
                   value={formState.password}
@@ -181,6 +183,7 @@ export default function Signin() {
               <Text className="font-bold">API Key</Text>
               <Input
                 className="w-full"
+                inputClasses="bg-card"
                 placeholder="API Key"
                 secureTextEntry
                 value={formState.apiKey}
@@ -193,18 +196,17 @@ export default function Signin() {
 
           <View className="flex flex-row items-center justify-between gap-2">
             <Button
-              className="flex-1"
-              label="Sign In"
+              size="lg"
+              androidRootClassName="flex-1"
               onPress={onSignin}
               disabled={
                 userNamePasswordRequestIsPending || apiKeyValueRequestIsPending
               }
-            />
-            <Pressable
-              className={cn(
-                buttonVariants({ variant: "default" }),
-                !settings.address && "bg-gray-500",
-              )}
+            >
+              <Text>Sign In</Text>
+            </Button>
+            <Button
+              size="icon"
               onPress={() => router.push("/test-connection")}
               disabled={!settings.address}
             >
@@ -212,9 +214,9 @@ export default function Signin() {
                 comp={(styles) => (
                   <Bug size={20} color={styles?.color?.toString()} />
                 )}
-                className="text-background"
+                className="text-white"
               />
-            </Pressable>
+            </Button>
           </View>
           <Pressable onPress={toggleLoginType}>
             <Text className="mt-2 text-center text-gray-500">