[ui] font added, movie item added, pages layout

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

@@ -3,6 +3,7 @@ import { Tabs } from 'expo-router';
 import { StyleProp, TextStyle } from 'react-native';
 
 import Colors from '../../constants/Colors';
+import { globalStyles } from '../../styles/global';
 
 /**
  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
@@ -45,9 +46,12 @@ export default function TabLayout() {
           paddingVertical: 18,
           height: 82,
         },
-        tabBarLabelStyle: {
-          marginTop: 2,
-        },
+        tabBarLabelStyle: [
+          {
+            marginTop: 2,
+          },
+          globalStyles.fOpenSansMedium,
+        ],
       }}
     >
       <Tabs.Screen
@@ -72,7 +76,7 @@ export default function TabLayout() {
         name="search"
         options={{
           title: 'Search',
-          tabBarLabel: 'test',
+          tabBarLabel: '',
           tabBarShowLabel: false,
           tabBarLabelStyle: {
             display: 'none',

apps/mobile/app/(tabs)/about.tsx

@@ -1,19 +1,20 @@
 import { StyleSheet } from 'react-native';
 
-import EditScreenInfo from '../../components/EditScreenInfo';
-import { Text, View } from '../../components/Themed';
+import ScreenLayout from '../../components/layout/screenLayout';
+import { globalStyles } from '../../styles/global';
+import { RegularText } from '../../components/Styled';
 
 export default function TabTwoScreen() {
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Tab Two</Text>
-      <View
-        style={styles.separator}
-        lightColor="#eee"
-        darkColor="rgba(255,255,255,0.1)"
-      />
-      <EditScreenInfo path="app/(tabs)/two.tsx" />
-    </View>
+    <ScreenLayout
+      title="About"
+      subtitle="What is movie-web and how content is served?"
+    >
+      <RegularText style={globalStyles.textWhite}>
+        No content is served from movie-web directly and movie web does not host
+        anything.
+      </RegularText>
+    </ScreenLayout>
   );
 }
 

apps/mobile/app/(tabs)/account.tsx

@@ -1,30 +1,18 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 
-import EditScreenInfo from '../../components/EditScreenInfo';
-import { Text, View } from '../../components/Themed';
+import { globalStyles } from '../../styles/global';
+import ScreenLayout from '../../components/layout/screenLayout';
+import { RegularText } from '../../components/Styled';
 
 export default function AccountScreen() {
   return (
-    <View style={styles.container}>
-      <Text>Home</Text>
-      <EditScreenInfo path="app/(tabs)/two.tsx" />
-    </View>
+    <ScreenLayout
+      title="Account"
+      subtitle="Manage your movie web account from here"
+    >
+      <RegularText style={globalStyles.textWhite}>
+        Hey Bro! what are you up to?
+      </RegularText>
+    </ScreenLayout>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

apps/mobile/app/(tabs)/index.tsx

@@ -1,31 +1,13 @@
-import { StyleSheet } from 'react-native';
+import { RegularText } from '../../components/Styled';
+import ScreenLayout from '../../components/layout/screenLayout';
+import { globalStyles } from '../../styles/global';
 
-import EditScreenInfo from '../../components/EditScreenInfo';
-import { Text, View } from '../../components/Themed';
-import Colors from '../../constants/Colors';
-
-export default function TabOneScreen() {
+export default function HomeScreen() {
   return (
-    <View style={styles.container}>
-      <Text>Home</Text>
-    </View>
+    <ScreenLayout title="Home" subtitle="This is where all magic happens">
+      <RegularText style={globalStyles.textWhite}>
+        Movies will be listed here
+      </RegularText>
+    </ScreenLayout>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    backgroundColor: Colors.dark.shade900,
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

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

@@ -1,35 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import EditScreenInfo from '../../components/EditScreenInfo';
-import { Text, View } from '../../components/Themed';
-
-export default function SearchScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Tab Two</Text>
-      <View
-        style={styles.separator}
-        lightColor="#eee"
-        darkColor="rgba(255,255,255,0.1)"
-      />
-      <EditScreenInfo path="app/(tabs)/two.tsx" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

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

@@ -0,0 +1,64 @@
+import { FontAwesome5 } from '@expo/vector-icons';
+import { useCallback, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { TextInput } from 'react-native-gesture-handler';
+import { globalStyles } from '../../../styles/global';
+import Colors from '../../../constants/Colors';
+import { useFocusEffect } from 'expo-router';
+
+export default function Searchbar() {
+  const [keyword, setKeyword] = useState('');
+  const inputRef = useRef<TextInput>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      // When the screen is focused
+      const focus = () => {
+        setTimeout(() => {
+          inputRef?.current?.focus();
+        }, 20);
+      };
+      focus();
+      return focus; // cleanup
+    }, []),
+  );
+
+  return (
+    <View
+      style={{
+        ...globalStyles.flexRow,
+        ...globalStyles.itemsCenter,
+        ...globalStyles.border,
+        ...globalStyles.roundedFull,
+        marginTop: 14,
+        marginBottom: 24,
+      }}
+    >
+      <View
+        style={{
+          ...globalStyles.justifyCenter,
+          ...globalStyles.itemsCenter,
+          width: 48,
+          marginLeft: 4,
+        }}
+      >
+        <FontAwesome5 name="search" size={18} color={Colors.dark.shade200} />
+      </View>
+      <TextInput
+        value={keyword}
+        autoFocus={true}
+        onChangeText={(text) => setKeyword(text)}
+        ref={inputRef}
+        placeholder="What are you looking for?"
+        placeholderTextColor={Colors.dark.shade200}
+        style={[
+          globalStyles.input,
+          globalStyles.fOpenSansRegular,
+          {
+            width: '100%',
+          },
+        ]}
+      ></TextInput>
+    </View>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { Dimensions, ScrollView, View } from 'react-native';
+
+import { globalStyles } from '../../../styles/global';
+import ScreenLayout from '../../../components/layout/screenLayout';
+import { TextInput } from 'react-native-gesture-handler';
+import styles from './styles';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useFocusEffect } from 'expo-router';
+import { BoldText } from '../../../components/Styled';
+import Item from '../../../components/item/item';
+import Searchbar from './Searchbar';
+
+export default function SearchScreen() {
+  return (
+    <ScrollView>
+      <ScreenLayout
+        title={
+          <View
+            style={{ ...globalStyles.flexRow, ...globalStyles.itemsCenter }}
+          >
+            <BoldText style={globalStyles.sectionTitle}>Search</BoldText>
+          </View>
+        }
+        subtitle="Looking for something?"
+      >
+        <Searchbar />
+        <View style={styles.items}>
+          <View style={styles.itemOuter}>
+            <Item />
+          </View>
+          <View style={styles.itemOuter}>
+            <Item />
+          </View>
+          <View style={styles.itemOuter}>
+            <Item />
+          </View>
+        </View>
+      </ScreenLayout>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,19 @@
+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;

apps/mobile/app/(tabs)/settings.tsx

@@ -1,35 +1,14 @@
-import { StyleSheet } from 'react-native';
-
-import EditScreenInfo from '../../components/EditScreenInfo';
-import { Text, View } from '../../components/Themed';
+import { RegularText } from '../../components/Styled';
+import ScreenLayout from '../../components/layout/screenLayout';
+import { globalStyles } from '../../styles/global';
+import { StyleSheet, Text } from 'react-native';
 
 export default function SettingsScreen() {
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Tab Two</Text>
-      <View
-        style={styles.separator}
-        lightColor="#eee"
-        darkColor="rgba(255,255,255,0.1)"
-      />
-      <EditScreenInfo path="app/(tabs)/two.tsx" />
-    </View>
+    <ScreenLayout title="Settings" subtitle="Need to change something?">
+      <RegularText style={globalStyles.textWhite}>
+        Settings would be listed in here. Coming soon
+      </RegularText>
+    </ScreenLayout>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

apps/mobile/app/[...missing].tsx

@@ -1,17 +1,18 @@
 import { Link, Stack } from 'expo-router';
-import { StyleSheet } from 'react-native';
-
-import { Text, View } from '../components/Themed';
+import { StyleSheet, View } from 'react-native';
+import { BoldText, RegularText } from '../components/Styled';
 
 export default function NotFoundScreen() {
   return (
     <>
       <Stack.Screen options={{ title: 'Oops!' }} />
       <View style={styles.container}>
-        <Text style={styles.title}>This screen doesn&apos;t exist.</Text>
+        <BoldText style={styles.title}>
+          This screen doesn&apos;t exist.
+        </BoldText>
 
         <Link href="/" style={styles.link}>
-          <Text style={styles.linkText}>Go to home screen!</Text>
+          <RegularText style={styles.linkText}>Go to home screen!</RegularText>
         </Link>
       </View>
     </>

apps/mobile/app/_layout.tsx

@@ -28,7 +28,12 @@ SplashScreen.preventAutoHideAsync();
 export default function RootLayout() {
   const [loaded, error] = useFonts({
     // eslint-disable-next-line global-require
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+    OpenSansRegular: require('../assets/fonts/OpenSans-Regular.ttf'),
+    OpenSansLight: require('../assets/fonts/OpenSans-Light.ttf'),
+    OpenSansMedium: require('../assets/fonts/OpenSans-Medium.ttf'),
+    OpenSansBold: require('../assets/fonts/OpenSans-Bold.ttf'),
+    OpenSansSemiBold: require('../assets/fonts/OpenSans-SemiBold.ttf'),
+    OpenSansExtra: require('../assets/fonts/OpenSans-ExtraBold.ttf'),
     ...FontAwesome.font,
   });
 

apps/mobile/app/modal.tsx

@@ -1,19 +1,13 @@
 import { StatusBar } from 'expo-status-bar';
-import { Platform, StyleSheet } from 'react-native';
-
-import EditScreenInfo from '../components/EditScreenInfo';
-import { Text, View } from '../components/Themed';
+import { Platform, StyleSheet, View } from 'react-native';
+import { BoldText, RegularText } from '../components/Styled';
 
 export default function ModalScreen() {
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Modal</Text>
-      <View
-        style={styles.separator}
-        lightColor="#eee"
-        darkColor="rgba(255,255,255,0.1)"
-      />
-      <EditScreenInfo path="app/modal.tsx" />
+      <BoldText style={styles.title}>Modal</BoldText>
+      <View style={styles.separator} />
+      <RegularText>Modal?!</RegularText>
 
       {/* Use a light status bar on iOS to account for the black space above the modal */}
       <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />