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, 52 insertions, 0 deletions

diff --git a/apps/mobile/components/ui/Text.tsx b/apps/mobile/components/ui/Text.tsx
new file mode 100644
index 00000000..e5590c75
--- /dev/null
+++ b/apps/mobile/components/ui/Text.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Text as RNText } from "react-native";
+import { cn } from "@/lib/utils";
+import { cva, VariantProps } from "class-variance-authority";
+
+const textVariants = cva("text-foreground", {
+  variants: {
+    variant: {
+      largeTitle: "text-4xl",
+      title1: "text-2xl",
+      title2: "text-[22px] leading-7",
+      title3: "text-xl",
+      heading: "text-[17px] font-semibold leading-6",
+      body: "text-[17px] leading-6",
+      callout: "text-base",
+      subhead: "text-[15px] leading-6",
+      footnote: "text-[13px] leading-5",
+      caption1: "text-xs",
+      caption2: "text-[11px] leading-4",
+    },
+    color: {
+      primary: "",
+      secondary: "text-secondary-foreground/90",
+      tertiary: "text-muted-foreground/90",
+      quarternary: "text-muted-foreground/50",
+    },
+  },
+  defaultVariants: {
+    variant: "body",
+    color: "primary",
+  },
+});
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+function Text({
+  className,
+  variant,
+  color,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RNText> &
+  VariantProps<typeof textVariants>) {
+  const textClassName = React.useContext(TextClassContext);
+  return (
+    <RNText
+      className={cn(textVariants({ variant, color }), textClassName, className)}
+      {...props}
+    />
+  );
+}
+
+export { Text, TextClassContext, textVariants };