From 9051de027ed5550bf3f5748389a93755b7c22995 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <khanh@quocs.com>
Date: Sun, 9 Jun 2024 14:29:50 +0700
Subject: [PATCH] feat(mobile): setup font

---
 .github/workflows/api_build.yaml         |  1 -
 apps/mobile/app/(app)/(tabs)/_layout.tsx |  4 ++--
 apps/mobile/app/(app)/(tabs)/explore.tsx |  2 +-
 apps/mobile/app/(app)/(tabs)/index.tsx   |  2 +-
 apps/mobile/app/(auth)/login.tsx         |  8 +++++---
 apps/mobile/app/_layout.tsx              | 22 +++++++++++++++++-----
 apps/mobile/components/Button.tsx        |  4 ++--
 apps/mobile/components/Input.tsx         |  2 +-
 apps/mobile/package.json                 |  1 +
 apps/mobile/tailwind.config.js           |  4 ++++
 package.json                             |  3 ++-
 pnpm-lock.yaml                           |  8 ++++++++
 12 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/.github/workflows/api_build.yaml b/.github/workflows/api_build.yaml
index 8449368a..697ebeab 100644
--- a/.github/workflows/api_build.yaml
+++ b/.github/workflows/api_build.yaml
@@ -22,7 +22,6 @@ jobs:
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 8
           run_install: false
 
       - name: Get pnpm store directory
diff --git a/apps/mobile/app/(app)/(tabs)/_layout.tsx b/apps/mobile/app/(app)/(tabs)/_layout.tsx
index db19c68d..a5cbb77a 100644
--- a/apps/mobile/app/(app)/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(app)/(tabs)/_layout.tsx
@@ -13,7 +13,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
+          tabBarShowLabel: false,
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
           ),
@@ -22,7 +22,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="explore"
         options={{
-          title: 'Explore',
+          tabBarShowLabel: false,
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
           ),
diff --git a/apps/mobile/app/(app)/(tabs)/explore.tsx b/apps/mobile/app/(app)/(tabs)/explore.tsx
index ef9531b5..54875a39 100644
--- a/apps/mobile/app/(app)/(tabs)/explore.tsx
+++ b/apps/mobile/app/(app)/(tabs)/explore.tsx
@@ -40,7 +40,7 @@ export default function TabTwoScreen() {
           <AvatarFallback>SS</AvatarFallback>
         </Avatar>
       </View>
-      <Text>{data?.email ? `Logged as ${data.email}` : 'loading...'}</Text>
+      <Text className="font-sans">{data?.email ? `Logged as ${data.email}` : 'loading...'}</Text>
       <Button label="Sign Out" onPress={() => signOut()} />
     </ScrollView>
   );
diff --git a/apps/mobile/app/(app)/(tabs)/index.tsx b/apps/mobile/app/(app)/(tabs)/index.tsx
index d54f877e..047cff7a 100644
--- a/apps/mobile/app/(app)/(tabs)/index.tsx
+++ b/apps/mobile/app/(app)/(tabs)/index.tsx
@@ -2,6 +2,6 @@ import { Text } from 'react-native';
 
 export default function HomeScreen() {
   return (
-    <Text>Home Screen</Text>
+    <Text className="font-sans">Home Screen</Text>
   );
 }
diff --git a/apps/mobile/app/(auth)/login.tsx b/apps/mobile/app/(auth)/login.tsx
index 237ac83e..7e2b489f 100644
--- a/apps/mobile/app/(auth)/login.tsx
+++ b/apps/mobile/app/(auth)/login.tsx
@@ -3,9 +3,11 @@ import { ScrollView, Text } from "react-native";
 
 export default function LoginScreen() {
   return (
-    <ScrollView className="bg-card p-4" contentContainerClassName="gap-4">
-      <Text className="text-3xl font-semibold">Manage your expense seamlessly</Text>
-      <Text className="text-muted-foreground">Let 6pm a good time to spend</Text>
+    <ScrollView className="bg-card p-6" contentContainerClassName="gap-4">
+      <Text className="text-3xl font-semibold font-sans">Manage your expense seamlessly</Text>
+      <Text className="text-muted-foreground font-sans">
+        Let <Text className="text-primary">6pm</Text> a good time to spend
+      </Text>
       <AuthEmail />
     </ScrollView>
   )
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index fbdbe6e8..2f4ab3f1 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -1,4 +1,11 @@
-import { useFonts } from 'expo-font';
+import {
+  useFonts,
+  BeVietnamPro_300Light,
+  BeVietnamPro_400Regular,
+  BeVietnamPro_500Medium,
+  BeVietnamPro_600SemiBold,
+  BeVietnamPro_700Bold,
+} from '@expo-google-fonts/be-vietnam-pro';
 import { Slot } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import { useEffect } from 'react';
@@ -22,17 +29,22 @@ export const unstable_settings = {
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
-  const [fontLoaded] = useFonts({
+  const [fontsLoaded] = useFonts({
+    BeVietnamPro_300Light,
+    BeVietnamPro_400Regular,
+    BeVietnamPro_500Medium,
+    BeVietnamPro_600SemiBold,
+    BeVietnamPro_700Bold,
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
   });
 
   useEffect(() => {
-    if (fontLoaded) {
+    if (fontsLoaded) {
       SplashScreen.hideAsync();
     }
-  }, [fontLoaded]);
+  }, [fontsLoaded]);
 
-  if (!fontLoaded) {
+  if (!fontsLoaded) {
     return null;
   }
 
diff --git a/apps/mobile/components/Button.tsx b/apps/mobile/components/Button.tsx
index 55e7e189..fd4a98eb 100644
--- a/apps/mobile/components/Button.tsx
+++ b/apps/mobile/components/Button.tsx
@@ -27,7 +27,7 @@ const buttonVariants = cva(
   }
 );
 
-const buttonTextVariants = cva('text-center font-medium', {
+const buttonTextVariants = cva('text-center font-medium font-sans', {
   variants: {
     variant: {
       default: 'text-primary-foreground',
@@ -50,7 +50,7 @@ const buttonTextVariants = cva('text-center font-medium', {
 
 interface ButtonProps
   extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   label: string;
   labelClasses?: string;
 }
diff --git a/apps/mobile/components/Input.tsx b/apps/mobile/components/Input.tsx
index 13265403..0255b2a5 100644
--- a/apps/mobile/components/Input.tsx
+++ b/apps/mobile/components/Input.tsx
@@ -16,7 +16,7 @@ const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
       <TextInput
         className={cn(
           inputClasses,
-          'border border-input py-2.5 px-4 rounded-lg'
+          'border border-input py-2.5 px-4 rounded-lg font-sans'
         )}
         {...props}
       />
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index b127c790..6b72f854 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@6pm/api": "workspace:^",
     "@clerk/clerk-expo": "^1.2.0",
+    "@expo-google-fonts/be-vietnam-pro": "^0.2.3",
     "@expo/vector-icons": "^14.0.0",
     "@react-navigation/native": "^6.0.2",
     "@tanstack/react-query": "^5.40.1",
diff --git a/apps/mobile/tailwind.config.js b/apps/mobile/tailwind.config.js
index cc137e19..1f33ef3e 100644
--- a/apps/mobile/tailwind.config.js
+++ b/apps/mobile/tailwind.config.js
@@ -14,6 +14,10 @@ module.exports = {
       },
     },
     extend: {
+      fontFamily: {
+        sans: ['Be Vietnam Pro'],
+        mono: ['Space Mono']
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
diff --git a/package.json b/package.json
index 667e0e8c..a9fb3d7b 100644
--- a/package.json
+++ b/package.json
@@ -24,5 +24,6 @@
         "typescript"
       ]
     }
-  }
+  },
+  "packageManager": "pnpm@9.2.0+sha512.98a80fd11c2e7096747762304106432b3ddc67dcf54b5a8c01c93f68a2cd5e05e6821849522a06fb76284d41a2660d5e334f2ee3bbf29183bf2e739b1dafa771"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cdb05256..8ccf3fc9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,6 +81,9 @@ importers:
       '@clerk/clerk-expo':
         specifier: ^1.2.0
         version: 1.2.0(@types/react@18.2.79)(expo-auth-session@5.5.2(expo@51.0.11(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(expo-web-browser@13.0.3(expo@51.0.11(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1)
+      '@expo-google-fonts/be-vietnam-pro':
+        specifier: ^0.2.3
+        version: 0.2.3
       '@expo/vector-icons':
         specifier: ^14.0.0
         version: 14.0.2
@@ -1116,6 +1119,9 @@ packages:
   '@emotion/weak-memoize@0.3.1':
     resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
 
+  '@expo-google-fonts/be-vietnam-pro@0.2.3':
+    resolution: {integrity: sha512-Iz2nrIX+Zp6efrs1TyLyarugVDEnYYmcjepD2VDclELLmU2AyQWndyutae7pcjlECJKBlGcgNJnsXuIsU+bT2Q==}
+
   '@expo/bunyan@4.0.0':
     resolution: {integrity: sha512-Ydf4LidRB/EBI+YrB+cVLqIseiRfjUI/AeHBgjGMtq3GroraDu81OV7zqophRgupngoL3iS3JUMDMnxO7g39qA==}
     engines: {'0': node >=0.10.0}
@@ -6947,6 +6953,8 @@ snapshots:
 
   '@emotion/weak-memoize@0.3.1': {}
 
+  '@expo-google-fonts/be-vietnam-pro@0.2.3': {}
+
   '@expo/bunyan@4.0.0':
     dependencies:
       uuid: 8.3.2