first setup

apps/mobile/components/ExternalLink.tsx

@@ -13,7 +13,6 @@ export function ExternalLink(
         target: '_blank',
       }}
       {...props}
-      // @ts-expect-error: External URLs are not typed.
       href={props.href}
       onPress={(e) => {
         if (Platform.OS !== 'web') {

apps/mobile/components/TabBarIcon.tsx

@@ -1,5 +1,6 @@
 import { FontAwesome } from '@expo/vector-icons';
-import Colors from '../constants/Colors';
+
+import Colors from '../constants/Colors.js';
 
 type Props = {
   focused?: boolean;
@@ -7,13 +8,13 @@ type Props = {
 } & React.ComponentProps<typeof FontAwesome>;
 
 export default function TabBarIcon({
-  color = Colors.dark.shade300,
+  color = Colors.shade[300],
   focused,
   ...rest
 }: Props) {
   return (
     <FontAwesome
-      color={color || (focused ? Colors.dark.purple300 : Colors.dark.shade300)}
+      color={color || (focused ? Colors.purple[300] : Colors.shade[300])}
       size={24}
       {...rest}
     />

apps/mobile/components/item/item.tsx

@@ -1,30 +1,25 @@
-import { globalStyles } from '../../styles/global';
-import { Image, Text, View } from 'react-native';
-import styles from './styles';
-import { BoldText, RegularText } from '../Styled';
+import { Image, View } from 'react-native';
+
 import { TMDB_POSTER_PATH } from '../../constants/General';
+import { BoldText, RegularText } from '../ui/Text';
 
 export default function Item() {
   return (
-    <View style={styles.wrapper}>
-      <View style={styles.imageWrapper}>
+    <View className="w-full">
+      <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
         <Image
           source={{
             uri: `${TMDB_POSTER_PATH}/w342//gdIrmf2DdY5mgN6ycVP0XlzKzbE.jpg`,
             width: 200,
           }}
-          style={styles.image}
+          className="h-full w-full object-cover"
         />
       </View>
-      <BoldText style={globalStyles.textWhite}>Hamilton</BoldText>
-      <View style={styles.meta}>
-        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
-          Movie
-        </RegularText>
-        <View style={[globalStyles.dotSeperator]}></View>
-        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
-          2023
-        </RegularText>
+      <BoldText className="text-white">Hamilton</BoldText>
+      <View className="flex-row items-center gap-3">
+        <RegularText className="text-xs text-gray-600">Movie</RegularText>
+        <View className="h-1 w-1 rounded-3xl bg-gray-600" />
+        <RegularText className="text-sm text-gray-600">2023</RegularText>
       </View>
     </View>
   );

apps/mobile/components/item/styles.tsx

@@ -1,31 +0,0 @@
-import Colors from '../../constants/Colors';
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  wrapper: {
-    width: '100%',
-  },
-  imageWrapper: {
-    borderRadius: 16,
-    aspectRatio: 9 / 14,
-    width: '100%',
-    overflow: 'hidden',
-    position: 'relative',
-    marginBottom: 6,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-  },
-  meta: {
-    flexDirection: 'row',
-    gap: 6,
-    alignItems: 'center',
-  },
-  smallText: {
-    fontSize: 12,
-  },
-});
-
-export default styles;

apps/mobile/components/layout/screenLayout.tsx

@@ -1,7 +1,6 @@
 import { View } from 'react-native';
-import { globalStyles } from '../../styles/global';
-import { styles } from './styles';
-import { BoldText, RegularText } from '../Styled';
+
+import { BoldText, RegularText } from '../ui/Text';
 
 type Props = {
   title?: React.ReactNode | string;
@@ -11,21 +10,15 @@ type Props = {
 
 export default function ScreenLayout({ title, subtitle, children }: Props) {
   return (
-    <View
-      style={[
-        globalStyles.pageContainer,
-        globalStyles.container,
-        styles.container,
-      ]}
-    >
+    <View className="bg-shade-900 flex-1 py-12">
       {typeof title === 'string' && (
-        <BoldText style={globalStyles.sectionTitle}>{title}</BoldText>
+        <BoldText className="text-2xl font-bold text-white">{title}</BoldText>
       )}
       {typeof title !== 'string' && title}
-      <RegularText style={[{ marginTop: 4 }, globalStyles.sectionSubtitle]}>
+      <RegularText className="text-shade-200 mt-1 text-sm">
         {subtitle}
       </RegularText>
-      <View style={styles.children}>{children}</View>
+      <View className="py-3">{children}</View>
     </View>
   );
 }

apps/mobile/components/ui/Text.tsx

@@ -1,44 +1,44 @@
-import { Text } from 'react-native';
-
-export const RegularText = ({ style, children, ...rest }: Text['props']) => {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansRegular' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-};
-export const BoldText = ({ style, children, ...rest }: Text['props']) => {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansBold' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-};
-export const SemiBoldText = ({ style, children, ...rest }: Text['props']) => {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansSemiBold' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-};
-export const MediumText = ({ style, children, ...rest }: Text['props']) => {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansMedium' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-};
-export const ExtraBoldText = ({ style, children, ...rest }: Text['props']) => {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansExtraBold' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-};
-export const LightText = ({ style, children, ...rest }: Text['props']) => {
-  return (
-    <Text style={[{ fontFamily: 'OpenSansLight' }, style]} {...rest}>
-      {children}
-    </Text>
-  );
-};
+import { Text } from 'react-native';
+
+export function RegularText({ style, children, ...rest }: Text['props']) {
+  return (
+    <Text style={[{ fontFamily: 'OpenSansRegular' }, style]} {...rest}>
+      {children}
+    </Text>
+  );
+}
+export function BoldText({ style, children, ...rest }: Text['props']) {
+  return (
+    <Text style={[{ fontFamily: 'OpenSansBold' }, style]} {...rest}>
+      {children}
+    </Text>
+  );
+}
+export function SemiBoldText({ style, children, ...rest }: Text['props']) {
+  return (
+    <Text style={[{ fontFamily: 'OpenSansSemiBold' }, style]} {...rest}>
+      {children}
+    </Text>
+  );
+}
+export function MediumText({ style, children, ...rest }: Text['props']) {
+  return (
+    <Text style={[{ fontFamily: 'OpenSansMedium' }, style]} {...rest}>
+      {children}
+    </Text>
+  );
+}
+export function ExtraBoldText({ style, children, ...rest }: Text['props']) {
+  return (
+    <Text style={[{ fontFamily: 'OpenSansExtraBold' }, style]} {...rest}>
+      {children}
+    </Text>
+  );
+}
+export function LightText({ style, children, ...rest }: Text['props']) {
+  return (
+    <Text style={[{ fontFamily: 'OpenSansLight' }, style]} {...rest}>
+      {children}
+    </Text>
+  );
+}