fix(mobile): fix header font to Inter (#224)

also adjust incorrect font weight
get6pm · Aug 20, 2024 · 53fd963 · 53fd963
1 parent 0481d1c
commit 53fd963
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 27 deletions.
diff --git a/apps/mobile/app/(app)/(tabs)/_layout.tsx b/apps/mobile/app/(app)/(tabs)/_layout.tsx
@@ -44,7 +44,7 @@ export default function TabLayout() {
           backgroundColor: theme[colorScheme ?? 'light'].background,
         },
         headerTitleStyle: {
-          fontFamily: 'Be Vietnam Pro Medium',
+          fontFamily: 'Inter Medium',
           fontSize: 16,
           color: theme[colorScheme ?? 'light'].primary,
         },
@@ -66,7 +66,7 @@ export default function TabLayout() {
         options={{
           headerTitle: t(i18n)`Budgets`,
           headerTitleStyle: {
-            fontFamily: 'Be Vietnam Pro Medium',
+            fontFamily: 'Inter Medium',
             fontSize: 16,
             color: theme[colorScheme ?? 'light'].primary,
             marginLeft: 5,

diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
@@ -32,7 +32,7 @@ export default function AuthenticatedLayout() {
         headerTintColor: theme[colorScheme ?? 'light'].primary,
         headerShadowVisible: false,
         headerTitleStyle: {
-          fontFamily: 'Be Vietnam Pro Medium',
+          fontFamily: 'Inter Medium',
           fontSize: 16,
           color: theme[colorScheme ?? 'light'].primary,
         },

diff --git a/apps/mobile/app/(aux)/_layout.tsx b/apps/mobile/app/(aux)/_layout.tsx
@@ -16,7 +16,7 @@ export default function AuxiliaryLayout() {
         headerTintColor: theme[colorScheme ?? 'light'].primary,
         headerShadowVisible: false,
         headerTitleStyle: {
-          fontFamily: 'Be Vietnam Pro Medium',
+          fontFamily: 'Inter Medium',
           fontSize: 16,
           color: theme[colorScheme ?? 'light'].primary,
         },

diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
@@ -15,6 +15,7 @@ import {
   Inter_300Light,
   Inter_400Regular,
   Inter_500Medium,
+  Inter_600SemiBold,
   useFonts,
 } from '@expo-google-fonts/inter'
 import {
@@ -115,6 +116,7 @@ function RootLayout() {
     Inter_300Light,
     Inter_400Regular,
     Inter_500Medium,
+    Inter_600SemiBold,
   })
   const ref = useNavigationContainerRef()
 

diff --git a/apps/mobile/components/budget/budget-statistic.tsx b/apps/mobile/components/budget/budget-statistic.tsx
@@ -1,7 +1,7 @@
-import { useDefaultCurrency } from '@/stores/user-settings/hooks'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { View } from 'react-native'
+import { AmountFormat } from '../common/amount-format'
 import { Text } from '../ui/text'
 
 type BudgetStatisticProps = {
@@ -14,28 +14,17 @@ export function BudgetStatistic({
   remainingPerDay,
 }: BudgetStatisticProps) {
   const { i18n } = useLingui()
-  const defaultCurrency = useDefaultCurrency()
 
   return (
     <View className="flex-row items-center justify-between gap-6">
       <View className="gap-1">
-        <Text className="font-bold text-2xl">
-          {totalRemaining?.toLocaleString() || '0.00'}{' '}
-          <Text className="font-normal text-muted-foreground text-sm">
-            {defaultCurrency}
-          </Text>
-        </Text>
+        <AmountFormat amount={totalRemaining} />
         <Text className="text-muted-foreground">
           {t(i18n)`Left this month`}
         </Text>
       </View>
       <View className="gap-1">
-        <Text className="text-right font-bold text-2xl">
-          {remainingPerDay?.toLocaleString() || '0.00'}{' '}
-          <Text className="font-normal text-muted-foreground text-sm">
-            {defaultCurrency}
-          </Text>
-        </Text>
+        <AmountFormat amount={remainingPerDay} />
         <Text className="text-right text-muted-foreground">
           {t(i18n)`Left per day`}
         </Text>

diff --git a/apps/mobile/components/common/amount-format.tsx b/apps/mobile/components/common/amount-format.tsx
@@ -4,21 +4,21 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { useMemo } from 'react'
 import { Text } from '../ui/text'
 
-const amountVariants = cva('shrink-0 font-bold', {
+const amountVariants = cva('shrink-0 font-semibold', {
   variants: {
     size: {
       xl: 'text-4xl',
       lg: 'text-3xl',
       md: 'text-2xl',
-      sm: 'text-lg',
+      sm: 'text-base',
     },
   },
   defaultVariants: {
     size: 'md',
   },
 })
 
-const currencyVariants = cva('text-muted-foreground', {
+const currencyVariants = cva('font-medium text-muted-foreground', {
   variants: {
     size: {
       xl: 'text-base',

diff --git a/apps/mobile/components/common/toast.tsx b/apps/mobile/components/common/toast.tsx
@@ -6,7 +6,7 @@ export function ToastRoot() {
       extraInsets={{ top: -12 }}
       defaultStyle={{
         text: {
-          fontFamily: 'Be Vietnam Pro Medium',
+          fontFamily: 'Inter Medium',
         },
       }}
     />

diff --git a/apps/mobile/components/numeric-pad/numeric-pad.tsx b/apps/mobile/components/numeric-pad/numeric-pad.tsx
@@ -70,7 +70,7 @@ export function NumericPad({
             size="lg"
             onPressIn={Haptics.selectionAsync}
           >
-            <Text className="!text-2xl font-bold">{buttonKey}</Text>
+            <Text className="!text-2xl font-semibold">{buttonKey}</Text>
           </Button>
         </View>
       ))}

diff --git a/apps/mobile/components/text-ticker/text-ticker.tsx b/apps/mobile/components/text-ticker/text-ticker.tsx
@@ -105,7 +105,7 @@ export function TextTicker({
             >
               <Animated.Text
                 style={[style, { fontSize }]}
-                className={className}
+                className={cn(className, 'font-semibold')}
               >
                 {formattedNumber.value}
               </Animated.Text>
@@ -120,7 +120,10 @@ export function TextTicker({
             <TouchableOpacity activeOpacity={0.8} onPress={onPressSuffix}>
               <Animated.Text
                 style={{ fontSize: fontSize / 3 }}
-                className={suffixClassName}
+                className={cn(
+                  suffixClassName,
+                  'font-medium text-muted-foreground',
+                )}
               >
                 {suffix}
               </Animated.Text>

diff --git a/apps/mobile/components/transaction/transaction-form.tsx b/apps/mobile/components/transaction/transaction-form.tsx
@@ -54,9 +54,9 @@ function TransactionAmount() {
     <>
       <TextTicker
         value={amount}
-        className="text-center font-bold text-6xl text-foreground leading-tight"
+        className="text-center text-6xl text-foreground leading-tight"
         suffix={currency}
-        suffixClassName="font-bold ml-2 text-muted-foreground overflow-visible"
+        suffixClassName="ml-2 text-muted-foreground overflow-visible"
         onPressSuffix={() => {
           Haptics.selectionAsync()
           sheetRef.current?.present()