feat(mobile): apply mono font for numbers (#182)

apps/mobile/app/(app)/(tabs)/budgets.tsx

@@ -7,7 +7,7 @@ import { Text } from '@/components/ui/text'
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { theme } from '@/lib/theme'
 import { useBudgetList } from '@/stores/budget/hooks'
-import type { BudgetPopulated } from '@6pm/validation'
+import type { Budget, BudgetPeriodConfig } from '@6pm/validation'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { LinearGradient } from 'expo-linear-gradient'
@@ -27,6 +27,10 @@ const { height } = Dimensions.get('screen')
 const chartHeight = 187
 const spacing = 16
 
+type BudgetPopulated = Budget & {
+  periodConfigs: BudgetPeriodConfig[]
+}
+
 const AnimatedSectionList = Animated.createAnimatedComponent(
   SectionList<BudgetPopulated>,
 )
@@ -176,7 +180,7 @@ export default function BudgetsScreen() {
         )}
         ListFooterComponent={
           (isLoading || isRefetching) && !sections.length ? (
-            <View className="gap-4">
+            <View className="gap-4 px-6">
               <Skeleton className="h-20 w-full" />
               <Skeleton className="h-20 w-full" />
               <Skeleton className="h-20 w-full" />

apps/mobile/app/(app)/(tabs)/settings.tsx

@@ -192,15 +192,15 @@ export default function SettingsScreen() {
               className="justify-start gap-6 !px-6"
             >
               <LogOutIcon className="w-5 h-5 text-red-500" />
-              <Text className="text-red-500 font-regular group-active:text-red-500">
+              <Text className="text-red-500 font-normal group-active:text-red-500">
                 {t(i18n)`Sign out`}
               </Text>
             </Button>
           </View>
         </View>
         <View className="items-center gap-3">
           <Logo className="w-16 h-16 mx-auto" />
-          <Text className="font-medium text-muted-foreground text-sm">
+          <Text className="font-mono text-muted-foreground text-sm">
             {t(i18n)`ver.`}
             {Application.nativeApplicationVersion}
           </Text>

apps/mobile/app/_layout.tsx

@@ -10,6 +10,10 @@ import {
   BeVietnamPro_700Bold,
   useFonts,
 } from '@expo-google-fonts/be-vietnam-pro'
+import {
+  SpaceMono_400Regular,
+  SpaceMono_700Bold,
+} from '@expo-google-fonts/space-mono'
 import { SplashScreen, Stack } from 'expo-router'
 import * as WebBrowser from 'expo-web-browser'
 
@@ -87,8 +91,8 @@ export default function RootLayout() {
     BeVietnamPro_500Medium,
     BeVietnamPro_600SemiBold,
     BeVietnamPro_700Bold,
-    // biome-ignore lint/style/useNamingConvention: <explanation>
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+    SpaceMono_400Regular,
+    SpaceMono_700Bold,
   })
 
   useEffect(() => {

apps/mobile/components/budget/budget-form.tsx

@@ -17,15 +17,13 @@ import {
   useForm,
   useWatch,
 } from 'react-hook-form'
-import { ScrollView, View } from 'react-native'
+import { ScrollView } from 'react-native'
 import type { TextInput } from 'react-native'
 import { CurrencyField } from '../form-fields/currency-field'
 import { InputField } from '../form-fields/input-field'
 import { SubmitButton } from '../form-fields/submit-button'
-import { Label } from '../ui/label'
 import { Text } from '../ui/text'
 import { PeriodRangeField } from './period-range-field'
-import { SelectPeriodTypeField } from './select-period-type-field'
 
 type BudgetFormProps = {
   onSubmit: (data: BudgetFormValues) => void
@@ -57,7 +55,7 @@ function BudgetSubmitButton({
 export const BudgetForm = ({
   onSubmit,
   defaultValues,
-  sideOffset,
+  // sideOffset,
 }: BudgetFormProps) => {
   const { i18n } = useLingui()
   const nameInputRef = useRef<TextInput>(null)
@@ -138,7 +136,7 @@ export const BudgetForm = ({
             />
           }
         />
-        <Controller
+        {/* <Controller
           name="period.type"
           control={budgetForm.control}
           disabled
@@ -155,7 +153,7 @@ export const BudgetForm = ({
               />
             </View>
           )}
-        />
+        /> */}
 
         <PeriodRangeField />
 

apps/mobile/components/budget/budget-statistic.tsx

@@ -19,9 +19,9 @@ export function BudgetStatistic({
   return (
     <View className="flex-row items-center gap-6 justify-between">
       <View className="gap-1">
-        <Text className="font-semibold text-2xl">
+        <Text className="font-bold font-mono text-2xl">
           {totalRemaining?.toLocaleString() || '0.00'}{' '}
-          <Text className="text-muted-foreground font-normal text-sm">
+          <Text className="text-muted-foreground font-normal font-mono text-sm">
             {defaultCurrency}
           </Text>
         </Text>
@@ -30,9 +30,9 @@ export function BudgetStatistic({
         </Text>
       </View>
       <View className="gap-1">
-        <Text className="font-semibold text-2xl text-right">
+        <Text className="font-bold font-mono text-2xl text-right">
           {remainingPerDay?.toLocaleString() || '0.00'}{' '}
-          <Text className="text-muted-foreground font-normal text-sm">
+          <Text className="text-muted-foreground font-normal font-mono text-sm">
             {defaultCurrency}
           </Text>
         </Text>

apps/mobile/components/budget/burndown-chart.tsx

@@ -4,6 +4,7 @@ import { useBudgetList } from '@/stores/budget/hooks'
 import { useDefaultCurrency } from '@/stores/user-settings/hooks'
 import { nFormatter } from '@6pm/currency'
 import { dayjsExtended } from '@6pm/utilities'
+import { SpaceMono_700Bold } from '@expo-google-fonts/space-mono'
 import {
   DashPathEffect,
   Group,
@@ -47,7 +48,7 @@ function UsageLine({
 }: { points: PointsArray; diffAmount: number }) {
   const { colorScheme } = useColorScheme()
   const { path } = useLinePath(points, { curveType: 'cardinal' })
-  const font = useFont(require('../../assets/fonts/SpaceMono-Regular.ttf'), 16)
+  const font = useFont(SpaceMono_700Bold, 16)
 
   const lastPoint = points.filter((i) => !!i.y).pop()
 
@@ -171,7 +172,7 @@ export function BurndownChart() {
 
   return (
     <View className="bg-muted rounded-lg h-[187px] w-full">
-      <Text className="text-sm font-medium text-end self-end m-3 mb-0 text-muted-foreground">
+      <Text className="text-sm font-medium font-mono text-end self-end m-3 mb-0 text-muted-foreground">
         {totalBudget.toNumber().toLocaleString()} {defaultCurrency}
       </Text>
       <CartesianChart
@@ -192,7 +193,7 @@ export function BurndownChart() {
           </>
         )}
       </CartesianChart>
-      <Text className="text-sm font-medium m-3 mt-0 text-muted-foreground">
+      <Text className="text-sm font-medium font-mono m-3 mt-0 text-muted-foreground">
         {'0.00'} {defaultCurrency}
       </Text>
     </View>

apps/mobile/components/common/amount-format.tsx

@@ -3,21 +3,21 @@ import { useDefaultCurrency } from '@/stores/user-settings/hooks'
 import { type VariantProps, cva } from 'class-variance-authority'
 import { Text } from '../ui/text'
 
-const amountVariants = cva('font-semibold shrink-0', {
+const amountVariants = cva('font-bold font-mono shrink-0', {
   variants: {
     size: {
       xl: 'text-4xl',
       lg: 'text-3xl',
       md: 'text-2xl',
-      sm: 'text-base',
+      sm: 'text-lg',
     },
   },
   defaultVariants: {
     size: 'md',
   },
 })
 
-const currencyVariants = cva('text-muted-foreground font-normal', {
+const currencyVariants = cva('text-muted-foreground font-mono', {
   variants: {
     size: {
       xl: 'text-base',

apps/mobile/components/common/circular-progress.tsx

@@ -127,7 +127,9 @@ export function CircularProgress({
           },
         ]}
       >
-        <Text className="text-sm font-semibold">{Math.round(progress)}%</Text>
+        <Text className="text-sm font-bold font-mono">
+          {Math.round(progress)}%
+        </Text>
       </View>
     </View>
   )

apps/mobile/components/common/toast.tsx

@@ -6,7 +6,7 @@ export function ToastRoot() {
       extraInsets={{ top: -12 }}
       defaultStyle={{
         text: {
-          fontFamily: 'Be Vietnam Pro',
+          fontFamily: 'Be Vietnam Pro Medium',
         },
       }}
     />

apps/mobile/components/numeric-pad/numeric-pad.tsx

@@ -70,7 +70,7 @@ export function NumericPad({
             size="lg"
             onPressIn={Haptics.selectionAsync}
           >
-            <Text className="!text-2xl">{buttonKey}</Text>
+            <Text className="!text-2xl font-mono font-bold">{buttonKey}</Text>
           </Button>
         </View>
       ))}

apps/mobile/components/transaction/transaction-form.tsx

@@ -39,9 +39,9 @@ function TransactionAmount() {
   return (
     <TextTicker
       value={amount}
-      className="font-semibold text-6xl text-foreground leading-tight text-center"
+      className="font-bold font-mono text-6xl text-foreground leading-tight text-center"
       suffix={currency}
-      suffixClassName="font-semibold ml-2 text-muted-foreground overflow-visible"
+      suffixClassName="font-bold font-mono ml-2 text-muted-foreground overflow-visible"
     />
   )
 }

apps/mobile/package.json

@@ -23,6 +23,7 @@
     "@backpackapp-io/react-native-toast": "^0.11.0",
     "@clerk/clerk-expo": "^2.0.0",
     "@expo-google-fonts/be-vietnam-pro": "^0.2.3",
+    "@expo-google-fonts/space-mono": "^0.2.3",
     "@expo/vector-icons": "^14.0.0",
     "@formatjs/intl-locale": "^4.0.0",
     "@formatjs/intl-pluralrules": "^5.2.14",

apps/mobile/tailwind.config.js

@@ -1,57 +1,57 @@
-const colors = require("tailwindcss/colors");
-const { hairlineWidth } = require("nativewind/theme");
+const colors = require('tailwindcss/colors')
+const { hairlineWidth } = require('nativewind/theme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "class",
-  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
-  presets: [require("nativewind/preset")],
+  darkMode: 'class',
+  content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       fontFamily: {
-        sans: ["Be Vietnam Pro"],
-        mono: ["Space Mono"],
+        sans: ['Be Vietnam Pro'],
+        mono: ['Space Mono'],
       },
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
         amount: {
           positive: colors.green[600],
@@ -62,20 +62,20 @@ module.exports = {
         hairline: hairlineWidth(),
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
-};
+  plugins: [require('tailwindcss-animate')],
+}