16 Replaced all fonts with Montserrat

frontend/App.tsx

@@ -1,9 +1,17 @@
+import {
+  useFonts,
+  Montserrat_400Regular,
+  Montserrat_500Medium,
+  Montserrat_700Bold,
+} from "@expo-google-fonts/montserrat";
 import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import React, { useState } from "react";
-import { StyleSheet, Image, Text } from "react-native";
+import { StyleSheet, Image } from "react-native";
 
 import BackButton from "./src/components/Button/BackButton";
+import { LoadingScreen } from "./src/components/LoadingScreen";
+import MediumText from "./src/components/Text/MediumText";
 import FirebaseInteractor from "./src/firebase/firebaseInteractor";
 import { UID } from "./src/models/types";
 import ConsentScreen from "./src/screens/ConsentScreen";
@@ -64,6 +72,16 @@ export default function App() {
     setCurrentSessionId(newSessionId);
   }
 
+  const [fontsLoaded] = useFonts({
+    Montserrat_400Regular,
+    Montserrat_500Medium,
+    Montserrat_700Bold,
+  });
+
+  if (!fontsLoaded) {
+    return <LoadingScreen />;
+  }
+
   return (
     <GameStateContext.Provider
       value={{
@@ -112,7 +130,9 @@ export default function App() {
             component={SettingsScreen}
             options={{
               headerTitle: () => (
-                <Text style={{ color: "#5eafdf", fontSize: 20 }}>Settings</Text>
+                <MediumText style={{ color: "#5eafdf", fontSize: 20 }}>
+                  Settings
+                </MediumText>
               ),
               headerLeft: () => <BackButton onPress={() => {}} />,
               headerShadowVisible: true,
@@ -125,7 +145,9 @@ export default function App() {
             component={ChangePasswordScreen}
             options={{
               headerTitle: () => (
-                <Text style={{ color: "#5eafdf", fontSize: 20 }}>Settings</Text>
+                <MediumText style={{ color: "#5eafdf", fontSize: 20 }}>
+                  Settings
+                </MediumText>
               ),
               headerLeft: () => (
                 <BackButton onPress={() => {}} isHome={false} />
@@ -141,9 +163,9 @@ export default function App() {
             options={{
               headerTitle: () => {
                 return (
-                  <Text style={{ color: "#5eafdf", fontSize: 20 }}>
+                  <MediumText style={{ color: "#5eafdf", fontSize: 20 }}>
                     Vocabulary Practice
-                  </Text>
+                  </MediumText>
                 );
               },
               headerTintColor: "#000",
@@ -170,7 +192,9 @@ export default function App() {
             component={AdminScreen}
             options={{
               headerTitle: () => (
-                <Text style={{ color: "#5eafdf", fontSize: 20 }}>Admin</Text>
+                <MediumText style={{ color: "#5eafdf", fontSize: 20 }}>
+                  Admin
+                </MediumText>
               ),
               headerLeft: () => <BackButton onPress={() => {}} />,
               headerShadowVisible: true,

frontend/package.json

@@ -13,6 +13,7 @@
     "fix-hooks": "chmod +x .husky/pre-commit"
   },
   "dependencies": {
+    "@expo-google-fonts/montserrat": "^0.2.2",
     "@gorhom/bottom-sheet": "^4",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/drawer": "^6.1.8",
@@ -21,6 +22,7 @@
     "expo": "^45.0.4",
     "expo-cli": "^5.4.7",
     "expo-file-system": "~14.0.0",
+    "expo-font": "~10.1.0",
     "expo-intent-launcher": "~10.2.0",
     "expo-mail-composer": "~11.2.0",
     "expo-status-bar": "~1.3.0",

frontend/src/components/Button/BackButton.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
-import { Text, Image, View, TouchableOpacity } from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
+import { Image, View, TouchableOpacity } from "react-native";
+
 interface BackButtonProps {
   onPress: () => void;
   isHome?: boolean;

frontend/src/components/Button/CustomButton.tsx

@@ -1,23 +1,33 @@
-import React, { ReactNode } from "react";
-import { TouchableOpacity, Text, StyleSheet, View, StyleSheetProperties, StyleProp, ViewStyle } from "react-native";
+import React from "react";
+import { TouchableOpacity, Text, StyleProp, ViewStyle } from "react-native";
 
 interface CustomButtonProps {
-    onPress: () => void;
-    disabled: boolean;
-    enabledStyle: StyleProp<ViewStyle>;
-    disabledStyle: StyleProp<ViewStyle>;
-    enabledTextStyle: StyleProp<ViewStyle>;
-    disabledTextStyle: StyleProp<ViewStyle>;
-    text: String
+  onPress: () => void;
+  disabled: boolean;
+  enabledStyle: StyleProp<ViewStyle>;
+  disabledStyle: StyleProp<ViewStyle>;
+  enabledTextStyle: StyleProp<ViewStyle>;
+  disabledTextStyle: StyleProp<ViewStyle>;
+  text: string;
+}
+export default function CustomButton({
+  onPress,
+  disabled,
+  enabledStyle,
+  disabledStyle,
+  enabledTextStyle,
+  disabledTextStyle,
+  text,
+}: CustomButtonProps) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      style={disabled ? disabledStyle : enabledStyle}
+    >
+      <Text style={disabled ? disabledTextStyle : enabledTextStyle}>
+        {text}
+      </Text>
+    </TouchableOpacity>
+  );
 }
-export default function CustomButton({ onPress, disabled, enabledStyle, disabledStyle,
-    enabledTextStyle, disabledTextStyle, text }: CustomButtonProps) {
-    return (
-        <TouchableOpacity
-            onPress={onPress}
-            disabled={disabled}
-            style={disabled ? disabledStyle : enabledStyle}
-        >
-            <Text style={disabled ? disabledTextStyle : enabledTextStyle}>{text}</Text>
-        </TouchableOpacity>)
-}

frontend/src/components/Button/PrimaryButton.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet, StyleProp, ViewStyle } from "react-native";
 
+import { BOLD_FONT } from "../../constants/fonts";
 import CustomButton from "./CustomButton";
 
 interface PrimaryButtonProps {
@@ -8,6 +9,7 @@ interface PrimaryButtonProps {
   text: string;
   style?: StyleProp<ViewStyle>;
 }
+
 export default function PrimaryButton(props: PrimaryButtonProps) {
   const overrideStyles = typeof props.style === "object" ? props.style : {};
   return CustomButton({
@@ -47,5 +49,6 @@ const styles = StyleSheet.create({
   enabledTextStyle: {
     color: "white",
     backgroundColor: "transparent",
+    fontFamily: BOLD_FONT,
   },
 });

frontend/src/components/Button/SecondaryButton.tsx

@@ -1,46 +1,50 @@
-import React, { ReactNode } from "react";
-import { TouchableOpacity, Text, StyleSheet, View, StyleSheetProperties, StyleProp, ViewStyle } from "react-native";
+import { StyleSheet } from "react-native";
+
+import { BOLD_FONT } from "../../constants/fonts";
 import CustomButton from "./CustomButton";
 
 interface SecondaryButtonProps {
-    onPress: () => void;
-    disabled: boolean;
-    text: String;
+  onPress: () => void;
+  disabled: boolean;
+  text: string;
 }
+
 export default function SecondaryButton(props: SecondaryButtonProps) {
-    return CustomButton({
-        ...props,
-        enabledStyle: styles.enabledStyle,
-        disabledStyle: {
-            ...styles.enabledStyle,
-            ...styles.additionalDisabledStyle
-        },
-        enabledTextStyle: styles.enabledTextStyle,
-        disabledTextStyle: styles.disabledTextStyle
-    })
+  return CustomButton({
+    ...props,
+    enabledStyle: styles.enabledStyle,
+    disabledStyle: {
+      ...styles.enabledStyle,
+      ...styles.additionalDisabledStyle,
+    },
+    enabledTextStyle: styles.enabledTextStyle,
+    disabledTextStyle: styles.disabledTextStyle,
+  });
 }
 
 const styles = StyleSheet.create({
-    enabledStyle: {
-        backgroundColor: 'white',
-        borderColor: "#6E81E7",
-        borderWidth: 2,
-        borderRadius: 12,
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '40%',
-        paddingHorizontal: "5%",
-        marginHorizontal: '3%',
-        marginVertical: "1%",
-        paddingVertical: 10
-    },
-    additionalDisabledStyle: { borderColor: "#6E81E7" },
-    enabledTextStyle: {
-        color: "#6E81E7",
-        backgroundColor: "transparent"
-    },
-    disabledTextStyle: {
-        color: "#6E81E7",
-        backgroundColor: "transparent"
-    }
-});
+  enabledStyle: {
+    backgroundColor: "white",
+    borderColor: "#6E81E7",
+    borderWidth: 2,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+    width: "40%",
+    paddingHorizontal: "5%",
+    marginHorizontal: "3%",
+    marginVertical: "1%",
+    paddingVertical: 10,
+  },
+  additionalDisabledStyle: { borderColor: "#6E81E7" },
+  enabledTextStyle: {
+    color: "#6E81E7",
+    backgroundColor: "transparent",
+    fontFamily: BOLD_FONT,
+  },
+  disabledTextStyle: {
+    color: "#6E81E7",
+    backgroundColor: "transparent",
+    fontFamily: BOLD_FONT,
+  },
+});

frontend/src/components/Button/SmallTextIconButton.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { TouchableOpacity, Text, Image, StyleSheet, View } from "react-native";
+import { TouchableOpacity, Image, StyleSheet, View } from "react-native";
+import MediumText from "../Text/MediumText";
 
 interface SmallTextIconButtonProps {
     text: string;
@@ -9,23 +10,23 @@ interface SmallTextIconButtonProps {
 export default function TextIconButton({ text, icon, onPress }: SmallTextIconButtonProps) {
     return (
         <View style={styles.container}>
-        <TouchableOpacity onPress={onPress}>
-            <View style={styles.main}>
-                <Text style={styles.text}>{text}</Text>
-                <Image source={icon} style={styles.image} />
-            </View>
-        </TouchableOpacity>
+            <TouchableOpacity onPress={onPress}>
+                <View style={styles.main}>
+                    <MediumText style={styles.text}>{text}</MediumText>
+                    <Image source={icon} style={styles.image} />
+                </View>
+            </TouchableOpacity>
         </View>)
 }
 
 const styles = StyleSheet.create({
     container: {
-      paddingHorizontal: 8  
+        paddingHorizontal: 7
     },
     main: {
         backgroundColor: "#d16b50",
         borderRadius: 20,
-        width: 150,
+        width: 160,
         flexDirection: "row",
         paddingHorizontal: 5,
         paddingVertical: "4%",
@@ -47,4 +48,4 @@ const styles = StyleSheet.create({
         maxHeight: 60,
         marginRight: 5
     }
-});
+});

frontend/src/components/Button/TextIconButton.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { TouchableOpacity, Text, Image, StyleSheet, View } from "react-native";
+import { TouchableOpacity, Image, StyleSheet, View } from "react-native";
+
+import MediumText from "../Text/MediumText";
 
 interface TextIconButtonProps {
   text: string;
@@ -23,7 +25,7 @@ export default function TextIconButton({
         }
       >
         <Image source={icon} style={styles.image} />
-        <Text style={styles.text}>{text}</Text>
+        <MediumText style={styles.text}>{text}</MediumText>
       </View>
     </TouchableOpacity>
   );