feat(mobile): setup font (#54)

get6pm · Jun 9, 2024 · 7e9aa01 · 7e9aa01
1 parent c330acc
commit 7e9aa01
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -24,5 +24,6 @@
         "typescript"
       ]
     }
-  }
+  },
+  "packageManager": "pnpm@9.2.0+sha512.98a80fd11c2e7096747762304106432b3ddc67dcf54b5a8c01c93f68a2cd5e05e6821849522a06fb76284d41a2660d5e334f2ee3bbf29183bf2e739b1dafa771"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml