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

apps/mobile/components/EditScreenInfo.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { ExternalLink } from './ExternalLink';
-import { MonoText } from './StyledText';
-import { Text, View } from './Themed';
-import Colors from '../constants/Colors';
-
-export default function EditScreenInfo({ path }: { path: string }) {
-  return <View />;
-}
-
-const styles = StyleSheet.create({
-  getStartedContainer: {
-    alignItems: 'center',
-    marginHorizontal: 50,
-  },
-  homeScreenFilename: {
-    marginVertical: 7,
-  },
-  codeHighlightContainer: {
-    borderRadius: 3,
-    paddingHorizontal: 4,
-  },
-  getStartedText: {
-    fontSize: 17,
-    lineHeight: 24,
-    textAlign: 'center',
-  },
-  helpContainer: {
-    marginTop: 15,
-    marginHorizontal: 20,
-    alignItems: 'center',
-  },
-  helpLink: {
-    paddingVertical: 15,
-  },
-  helpLinkText: {
-    textAlign: 'center',
-  },
-});

apps/mobile/components/Styled.tsx

@@ -0,0 +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>
+  );
+};

apps/mobile/components/StyledText.tsx

@@ -1,5 +0,0 @@
-import { Text, TextProps } from './Themed';
-
-export function MonoText(props: TextProps) {
-  return <Text {...props} style={[props.style, { fontFamily: 'SpaceMono' }]} />;
-}

apps/mobile/components/Themed.tsx

@@ -1,50 +0,0 @@
-/**
- * Learn more about Light and Dark modes:
- * https://docs.expo.io/guides/color-schemes/
- */
-
-import {
-  Text as DefaultText,
-  View as DefaultView,
-  useColorScheme,
-} from 'react-native';
-
-import Colors from '../constants/Colors';
-
-type ThemeProps = {
-  lightColor?: string;
-  darkColor?: string;
-};
-
-export type TextProps = ThemeProps & DefaultText['props'];
-export type ViewProps = ThemeProps & DefaultView['props'];
-
-export function useThemeColor(
-  props: { light?: string; dark?: string },
-  colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
-) {
-  const theme = useColorScheme() ?? 'light';
-  const colorFromProps = props[theme];
-
-  if (colorFromProps) {
-    return colorFromProps;
-  }
-  return Colors[theme][colorName];
-}
-
-export function Text(props: TextProps) {
-  const { style, lightColor, darkColor, ...otherProps } = props;
-  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
-
-  return <DefaultText style={[{ color }, style]} {...otherProps} />;
-}
-
-export function View(props: ViewProps) {
-  const { style, lightColor, darkColor, ...otherProps } = props;
-  const backgroundColor = useThemeColor(
-    { light: lightColor, dark: darkColor },
-    'background',
-  );
-
-  return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
-}

apps/mobile/components/item/item.tsx

@@ -0,0 +1,30 @@
+import { globalStyles } from '../../styles/global';
+import { Image, Text, View } from 'react-native';
+import styles from './styles';
+import { BoldText, RegularText } from '../Styled';
+
+export default function Item() {
+  return (
+    <View style={styles.wrapper}>
+      <View style={styles.imageWrapper}>
+        <Image
+          source={{
+            uri: 'https://image.tmdb.org/t/p/w342//gdIrmf2DdY5mgN6ycVP0XlzKzbE.jpg',
+            width: 200,
+          }}
+          style={styles.image}
+        />
+      </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>
+      </View>
+    </View>
+  );
+}

apps/mobile/components/item/styles.tsx

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

@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+import { globalStyles } from '../../styles/global';
+import { styles } from './styles';
+import { BoldText, RegularText } from '../Styled';
+
+type Props = {
+  title?: React.ReactNode | string;
+  subtitle?: string;
+  children?: React.ReactNode;
+};
+
+export default function ScreenLayout({ title, subtitle, children }: Props) {
+  return (
+    <View
+      style={[
+        globalStyles.pageContainer,
+        globalStyles.container,
+        styles.container,
+      ]}
+    >
+      {typeof title === 'string' && (
+        <BoldText style={globalStyles.sectionTitle}>{title}</BoldText>
+      )}
+      {typeof title !== 'string' && title}
+      <RegularText style={[{ marginTop: 4 }, globalStyles.sectionSubtitle]}>
+        {subtitle}
+      </RegularText>
+      <View style={styles.children}>{children}</View>
+    </View>
+  );
+}

apps/mobile/components/layout/styles.tsx

@@ -0,0 +1,10 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    minHeight: Dimensions.get('window').height,
+  },
+  children: {
+    paddingVertical: 12,
+  },
+});