fix theme selector not working, add input styling

apps/expo/src/components/ui/Input.tsx

@@ -0,0 +1,25 @@
+import { Input, styled } from "tamagui";
+
+export const MWInput = styled(Input, {
+  variants: {
+    type: {
+      default: {
+        backgroundColor: "$inputBackground",
+        color: "$inputText",
+        placeholderTextColor: "$placeHolderText",
+        borderColor: "$inputBorder",
+        outlineStyle: "none",
+      },
+      search: {
+        backgroundColor: "$searchBackground",
+        borderColor: "$colorTransparent",
+        placeholderTextColor: "$searchPlaceholder",
+        outlineStyle: "none",
+        focusStyle: {
+          borderColor: "$colorTransparent",
+          backgroundColor: "$searchFocused",
+        },
+      },
+    },
+  },
+});

apps/expo/src/components/ui/Searchbar.tsx

@@ -1,19 +1,11 @@
+import type { Input } from "tamagui";
 import { useEffect, useRef, useState } from "react";
 import { Keyboard } from "react-native";
 import { FontAwesome5 } from "@expo/vector-icons";
 import { useIsFocused } from "@react-navigation/native";
-import { Input, styled, useTheme, View } from "tamagui";
+import { useTheme, View } from "tamagui";
 
-const SearchInput = styled(Input, {
-  backgroundColor: "$searchBackground",
-  borderColor: "$colorTransparent",
-  placeholderTextColor: "$searchPlaceholder",
-  outlineStyle: "none",
-  focusStyle: {
-    borderColor: "$colorTransparent",
-    backgroundColor: "$searchFocused",
-  },
-});
+import { MWInput } from "./Input";
 
 export function SearchBar({
   onSearchChange,
@@ -69,7 +61,8 @@ export function SearchBar({
       <View width={48} alignItems="center" justifyContent="center">
         <FontAwesome5 name="search" size={18} color={theme.searchIcon.val} />
       </View>
-      <SearchInput
+      <MWInput
+        type="search"
         value={keyword}
         onChangeText={handleChange}
         ref={inputRef}

apps/expo/src/components/ui/Select.tsx

@@ -0,0 +1,38 @@
+import { Select, styled, withStaticProperties } from "tamagui";
+
+const MWSelectFrame = styled(Select, {
+  variants: {
+    type: {
+      default: {
+        backgroundColor: "$inputBackground",
+        color: "$inputText",
+        borderColor: "$inputBorder",
+      },
+    },
+  },
+  defaultVariants: {
+    type: "default",
+  },
+});
+
+const MWSelectTrigger = styled(Select.Trigger, {
+  variants: {
+    type: {
+      default: {
+        backgroundColor: "$inputBackground",
+        color: "$inputText",
+        placeholderTextColor: "$inputPlaceholderText",
+        borderColor: "$inputBorder",
+      },
+    },
+  },
+  defaultVariants: {
+    type: "default",
+  },
+});
+
+const MWSelect = withStaticProperties(MWSelectFrame, {
+  Trigger: MWSelectTrigger,
+});
+
+export { MWSelect };

apps/expo/src/components/ui/Switch.tsx

@@ -1,4 +1,4 @@
-import type { SwitchProps } from "tamagui";
+import type { SwitchProps, SwitchThumbProps } from "tamagui";
 import { Switch, useTheme } from "tamagui";
 
 const MWSwitch = (props: SwitchProps) => {
@@ -18,7 +18,7 @@ const MWSwitch = (props: SwitchProps) => {
   );
 };
 
-const MWSwitchThumb = (props: any) => {
+const MWSwitchThumb = (props: SwitchThumbProps) => {
   return <Switch.Thumb animation="quicker" {...props} />;
 };