style: add dm sans font and clean up styling (#18)

* Added DM Sans font.

* Added color palette.

* Updated all styling to use custom colors and typography.

App.tsx

@@ -1,9 +1,26 @@
 import React from 'react';
+import { Text } from 'react-native';
+import { useFonts } from 'expo-font';
+import { DMSans_400Regular, DMSans_700Bold } from '@expo-google-fonts/dm-sans';
 import { DefaultTheme } from '@react-navigation/native';
 import AppNavigator from '@/navigation/AppNavigator';
+import colors from '@/styles/colors';
 
-DefaultTheme.colors.background = '#FFFFFF';
+DefaultTheme.colors.background = colors.white;
 
 export default function App() {
+  const [fontsLoaded] = useFonts({
+    DMSans_400Regular,
+    DMSans_700Bold,
+  });
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
+  const defaultFontFamily = 'DMSans_400Regular';
+  (Text as any).defaultProps = (Text as any).defaultProps || {};
+  (Text as any).defaultProps.style = { fontFamily: defaultFontFamily };
+
   return <AppNavigator />;
 }

package.json

@@ -14,6 +14,7 @@
     "pre-commit": "(npx tsc --noEmit || true) && (npm run lint:check || true) && npm run prettier:check"
   },
   "dependencies": {
+    "@expo-google-fonts/dm-sans": "^0.2.3",
     "@expo/metro-runtime": "~4.0.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-navigation/bottom-tabs": "^6.6.1",
@@ -34,6 +35,7 @@
     "expo-crypto": "~14.0.1",
     "expo-dev-client": "~5.0.5",
     "expo-device": "~7.0.1",
+    "expo-font": "^13.0.1",
     "expo-linking": "~7.0.3",
     "expo-status-bar": "~2.0.0",
     "expo-web-browser": "~14.0.1",
@@ -44,7 +46,7 @@
     "qs": "^6.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-native": "^0.76.2",
+    "react-native": "^0.76.3",
     "react-native-config": "^1.5.3",
     "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "~2.20.2",

src/components/GoogleSignInButton/styles.ts

@@ -1,61 +1,11 @@
 import { StyleSheet } from 'react-native';
+import colors from '@/styles/colors';
+import typography from '@/styles/typography';
 
 export const styles = StyleSheet.create({
-  loginContainer: {
-    padding: 40,
-    flex: 1,
-    justifyContent: 'center',
-  },
-
-  loginText: {
-    fontSize: 40,
-    fontWeight: 'bold',
-    color: '#446127',
-  },
-
-  logoContainer: {
-    alignItems: 'center',
-    paddingTop: 20,
-    paddingBottom: 70,
-  },
-
-  logo: {
-    height: 200,
-    marginTop: 20,
-    marginBottom: 70,
-  },
-
-  button: {
-    backgroundColor: '#446127',
-    padding: 15,
-    borderRadius: 5,
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-
-  buttonText: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
-  },
-
-  adminLoginContainer: {
-    flex: 0,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    paddingTop: 10,
-  },
-
-  adminLoginText: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: '#828282',
-  },
-
   adminLoginLinkText: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: '#446127',
+    ...typography.smallBold,
+    color: colors.primary,
     textDecorationLine: 'underline',
   },
 });

src/components/GoogleSignOutButton/styles.ts

@@ -1,61 +1,18 @@
 import { StyleSheet } from 'react-native';
+import colors from '@/styles/colors';
+import typography from '@/styles/typography';
 
 export const styles = StyleSheet.create({
-  loginContainer: {
-    padding: 40,
-    flex: 1,
-    justifyContent: 'center',
-  },
-
-  loginText: {
-    fontSize: 40,
-    fontWeight: 'bold',
-    color: '#446127',
-  },
-
-  logoContainer: {
-    alignItems: 'center',
-    paddingTop: 20,
-    paddingBottom: 70,
-  },
-
-  logo: {
-    height: 200,
-    marginTop: 20,
-    marginBottom: 70,
-  },
-
   button: {
-    backgroundColor: '#446127',
+    backgroundColor: colors.primary,
     padding: 15,
     borderRadius: 5,
     alignItems: 'center',
     marginBottom: 10,
   },
 
   buttonText: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
-  },
-
-  adminLoginContainer: {
-    flex: 0,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    paddingTop: 10,
-  },
-
-  adminLoginText: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: '#828282',
-  },
-
-  adminLoginLinkText: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: '#446127',
-    textDecorationLine: 'underline',
+    ...typography.largeBold,
+    color: colors.white,
   },
 });

src/components/QRCodeScanner/styles.ts

@@ -1,13 +1,14 @@
 import { StyleSheet } from 'react-native';
 import colors from '@/styles/colors';
+import typography from '@/styles/typography';
 
 export default StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'space-between',
     paddingHorizontal: 44,
-    backgroundColor: colors.primary_green,
+    backgroundColor: colors.primary,
   },
 
   iconFlex: {
@@ -19,7 +20,7 @@ export default StyleSheet.create({
   },
 
   icon: {
-    backgroundColor: colors.white1,
+    backgroundColor: colors.white,
     padding: 8,
   },
 
@@ -36,33 +37,37 @@ export default StyleSheet.create({
     flexDirection: 'column',
     gap: 8,
   },
+
   header: {
     textAlign: 'center',
-    fontSize: 24,
-    color: colors.white1,
+    ...typography.heading5,
+    color: colors.white,
   },
+
   subtext: {
     textAlign: 'center',
-    fontSize: 20,
-    color: colors.white1,
+    ...typography.normalRegular,
+    color: colors.white,
   },
 
   cameraView: {
     alignSelf: 'center',
     width: 285,
     height: 248,
     borderWidth: 2,
-    borderColor: colors.primary_green_2,
+    borderColor: colors.secondary,
     borderRadius: 12,
     zIndex: 1,
   },
+
   camera: {
     flex: 1,
     borderRadius: 12,
     overflow: 'hidden',
   },
+
   qrCodeFoundCamera: {
-    borderColor: colors.primary_yellow,
+    borderColor: colors.tertiary,
   },
 
   buttonContainer: {
@@ -71,6 +76,7 @@ export default StyleSheet.create({
     backgroundColor: 'transparent',
     margin: 64,
   },
+
   scanButton: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -85,17 +91,11 @@ export default StyleSheet.create({
     backgroundColor: colors.gray4,
   },
   scanButtonEnabled: {
-    backgroundColor: colors.primary_yellow,
+    backgroundColor: colors.tertiary,
   },
 
   scanButtonText: {
-    fontSize: 18,
-    color: colors.white1,
-  },
-
-  text: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: 'white',
+    ...typography.mediumBold,
+    color: colors.white,
   },
 });

src/navigation/AppNavigator.tsx

@@ -27,7 +27,10 @@ const RootStack = createStackNavigator<RootStackParamList>();
 // Login Stack Navigator
 function LoginStackNavigator() {
   return (
-    <LoginStack.Navigator initialRouteName="Login">
+    <LoginStack.Navigator
+      initialRouteName="Login"
+      screenOptions={{ headerShown: false }}
+    >
       <LoginStack.Screen name="Login" component={LoginScreen} />
     </LoginStack.Navigator>
   );
@@ -36,7 +39,10 @@ function LoginStackNavigator() {
 // Home Stack Navigator
 function HomeStackNavigator() {
   return (
-    <HomeStack.Navigator initialRouteName="TreeSearch">
+    <HomeStack.Navigator
+      initialRouteName="TreeSearch"
+      screenOptions={{ headerShown: false }}
+    >
       <HomeStack.Screen name="TreeSearch" component={TreeSearchScreen} />
       <HomeStack.Screen name="QRCodeScanner" component={QRCodeScanner} />
       <HomeStack.Screen name="TreeInfo" component={TreeInfoScreen} />
@@ -48,7 +54,10 @@ function HomeStackNavigator() {
 // Contact Stack Navigator
 function ContactStackNavigator() {
   return (
-    <ContactStack.Navigator initialRouteName="Contact">
+    <ContactStack.Navigator
+      initialRouteName="Contact"
+      screenOptions={{ headerShown: false }}
+    >
       <ContactStack.Screen name="Contact" component={ContactScreen} />
       <ContactStack.Screen name="Directory" component={DirectoryScreen} />
     </ContactStack.Navigator>
@@ -58,7 +67,10 @@ function ContactStackNavigator() {
 // Tab Navigator
 function BottomTabNavigator() {
   return (
-    <BottomTab.Navigator initialRouteName="Home">
+    <BottomTab.Navigator
+      initialRouteName="Home"
+      screenOptions={{ headerShown: false }}
+    >
       <BottomTab.Screen name="Home" component={HomeStackNavigator} />
       <BottomTab.Screen name="Contact" component={ContactStackNavigator} />
     </BottomTab.Navigator>

src/screens/Contact/Contact.tsx

@@ -18,7 +18,7 @@ export default function App() {
 
       <View style={styles.contactInfo}>
         <View>
-          <Text style={styles.Heading4Contact}>Contact Us</Text>
+          <Text style={styles.contactHeader}>Contact Us</Text>
         </View>
         <View>
           <Text style={styles.contactboldText}>Location</Text>