replace all stylesheets with tailwind classes

apps/mobile/app/(tabs)/search/Searchbar.tsx

@@ -1,13 +1,13 @@
 import { FontAwesome5 } from '@expo/vector-icons';
 import { useFocusEffect } from 'expo-router';
 import { useCallback, useRef, useState } from 'react';
-import { View } from 'react-native';
 import { TextInput } from 'react-native-gesture-handler';
 
-import Colors from '../../../constants/Colors.js';
-import { globalStyles } from '../../../styles/global';
+import { StyledView } from '../../../components/ui/Styled';
+import useTailwind from '../../hooks/useTailwind';
 
 export default function Searchbar() {
+  const { colors } = useTailwind();
   const [keyword, setKeyword] = useState('');
   const inputRef = useRef<TextInput>(null);
 
@@ -25,19 +25,19 @@ export default function Searchbar() {
   );
 
   return (
-    <View className="mb-6 mt-4 flex-row items-center rounded-full border">
-      <View className="ml-1 w-12 items-center justify-center">
-        <FontAwesome5 name="search" size={18} color={Colors.shade[200]} />
-      </View>
+    <StyledView className="mb-6 mt-4 flex-row items-center rounded-full border">
+      <StyledView className="ml-1 w-12 items-center justify-center">
+        <FontAwesome5 name="search" size={18} color={colors.shade[200]} />
+      </StyledView>
       <TextInput
         value={keyword}
         autoFocus
         onChangeText={(text) => setKeyword(text)}
         ref={inputRef}
         placeholder="What are you looking for?"
-        placeholderTextColor={Colors.shade[200]}
-        className="rounded-3xl py-3 pr-5 text-white"
+        placeholderTextColor={colors.shade[200]}
+        className="w-full rounded-3xl py-3 pr-5 text-white"
       />
-    </View>
+    </StyledView>
   );
 }

apps/mobile/app/(tabs)/search/_layout.tsx

@@ -1,40 +1,33 @@
-import { useFocusEffect } from 'expo-router';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Dimensions, ScrollView, View } from 'react-native';
-import { TextInput } from 'react-native-gesture-handler';
+import { ScrollView } from 'react-native';
 
 import Searchbar from './Searchbar';
-import styles from './styles';
 import Item from '../../../components/item/item';
 import ScreenLayout from '../../../components/layout/ScreenLayout';
-import { BoldText } from '../../../components/ui/Text';
-import { globalStyles } from '../../../styles/global';
+import { StyledText, StyledView } from '../../../components/ui/Styled';
 
 export default function SearchScreen() {
   return (
     <ScrollView>
       <ScreenLayout
         title={
-          <View className="flex-row items-center">
-            <BoldText className="text-2xl font-bold text-white">
-              Search
-            </BoldText>
-          </View>
+          <StyledView className="flex-row items-center">
+            <StyledText className="text-2xl font-bold">Search</StyledText>
+          </StyledView>
         }
         subtitle="Looking for something?"
       >
         <Searchbar />
-        <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
-          <View className="basis-1/2 px-3 pb-3">
+        <StyledView className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          <StyledView className="basis-1/2 px-3 pb-3">
             <Item />
-          </View>
-          <View className="basis-1/2 px-3 pb-3">
+          </StyledView>
+          <StyledView className="basis-1/2 px-3 pb-3">
             <Item />
-          </View>
-          <View className="basis-1/2 px-3 pb-3">
+          </StyledView>
+          <StyledView className="basis-1/2 px-3 pb-3">
             <Item />
-          </View>
-        </View>
+          </StyledView>
+        </StyledView>
       </ScreenLayout>
     </ScrollView>
   );

apps/mobile/app/(tabs)/search/styles.tsx

@@ -1,19 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  items: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
-    width: '100%',
-    flexDirection: 'row',
-    flex: 1,
-  },
-  itemOuter: {
-    flexBasis: '50%',
-    paddingHorizontal: 12,
-    paddingBottom: 12,
-  },
-});
-
-export default styles;