feat(mobile): minor adjust ui (#278)

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

@@ -76,9 +76,6 @@ export default function TabLayout() {
         options={{
           headerTitle: t(i18n)`Budgets`,
           headerTitleStyle: {
-            fontFamily: 'Inter Medium',
-            fontSize: 16,
-            color: theme[colorScheme ?? 'light'].primary,
             marginLeft: 5,
           },
           headerRight: () => (

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

@@ -99,12 +99,12 @@ export default function SettingsScreen() {
         <ProfileCard />
         {!isPro && (
           <Link href="/paywall" asChild>
-            <Button className="!px-4 !h-14 mx-6 justify-between">
+            <Button className="!px-4 !h-16 mx-6 justify-between border border-muted-foreground/20 bg-muted">
               <View>
-                <Text className="!text-base font-semibold">
+                <Text className="!text-lg font-semibold text-foreground">
                   {t(i18n)`Get 6pm Pro`}
                 </Text>
-                <Text className="!text-xs font-medium opacity-65">
+                <Text className="!text-sm text-muted-foreground">
                   {t(i18n)`Unlocks full AI power and more!`}
                 </Text>
               </View>

apps/mobile/app/(app)/app-icon.tsx

@@ -7,7 +7,7 @@ import { useLingui } from '@lingui/react'
 import { getAppIcon, setAppIcon } from 'expo-dynamic-app-icon'
 import * as Haptics from 'expo-haptics'
 import { useRouter } from 'expo-router'
-import { CheckIcon, LockIcon } from 'lucide-react-native'
+import { CheckIcon, LockKeyholeIcon } from 'lucide-react-native'
 import { useState } from 'react'
 import { FlatList, Image, Pressable, View } from 'react-native'
 
@@ -56,7 +56,7 @@ export default function AppearanceScreen() {
           setSelected(item.name)
           toast.success(t(i18n)`App icon updated!`)
         }}
-        className="flex-1 flex-row items-center justify-center gap-4 rounded-lg bg-card px-6 py-2 active:bg-muted/50"
+        className="flex-1 flex-row items-center justify-center gap-4 bg-card px-6 py-2 active:bg-muted/50"
       >
         <View className="flex-1 flex-row items-center gap-4">
           <Image
@@ -71,7 +71,7 @@ export default function AppearanceScreen() {
           <CheckIcon className="size-6 text-amount-positive" />
         ) : item.pro && !isPro ? (
           <Badge variant="secondary" className="py-1.5">
-            <LockIcon className="size-4 text-primary" />
+            <LockKeyholeIcon className="size-4 text-primary" />
           </Badge>
         ) : null}
       </Pressable>

apps/mobile/app/(app)/language.tsx

@@ -3,7 +3,7 @@ import { useLocale } from '@/locales/provider'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { useRouter } from 'expo-router'
-import { CheckCircleIcon } from 'lucide-react-native'
+import { CheckIcon } from 'lucide-react-native'
 import { ScrollView } from 'react-native'
 
 export default function LanguageScreen() {
@@ -17,7 +17,7 @@ export default function LanguageScreen() {
         label={t(i18n)`English`}
         rightSection={
           language === 'en' && (
-            <CheckCircleIcon className="h-5 w-5 text-primary" />
+            <CheckIcon className="size-6 text-amount-positive" />
           )
         }
         onPress={() => {
@@ -29,7 +29,7 @@ export default function LanguageScreen() {
         label={t(i18n)`Vietnamese`}
         rightSection={
           language === 'vi' && (
-            <CheckCircleIcon className="h-5 w-5 text-primary" />
+            <CheckIcon className="size-6 text-amount-positive" />
           )
         }
         onPress={() => {

apps/mobile/app/(app)/paywall.tsx

@@ -125,6 +125,9 @@ export default function PaywallScreen() {
       router.back()
       toast.success(t(i18n)`Thank you! You have unlocked 6pm Pro!`)
     },
+    onError() {
+      //
+    },
   })
   const { mutateAsync: mutateRestore, isPending: isRestoring } = useMutation({
     mutationFn: Purchases.restorePurchases,
@@ -193,6 +196,7 @@ export default function PaywallScreen() {
         contentContainerClassName="gap-3"
         automaticallyAdjustKeyboardInsets
         keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
       >
         <Text className="mx-8 my-2 font-sans font-semibold text-3xl text-primary">
           {t(i18n)`Complete control over your finances`}
@@ -272,12 +276,11 @@ export default function PaywallScreen() {
         </View>
         <PaywallIllustration className="mx-auto h-[566px] w-[200px] text-primary" />
       </ScrollView>
-      {isPending ||
-        (isRestoring && (
-          <View className="absolute top-0 right-0 bottom-0 left-0 z-50 items-center justify-center bg-background/50">
-            <ActivityIndicator size="large" />
-          </View>
-        ))}
+      {(isPending || isRestoring) && (
+        <View className="absolute top-0 right-0 bottom-0 left-0 z-50 items-center justify-center bg-background/50">
+          <ActivityIndicator size="large" />
+        </View>
+      )}
     </View>
   )
 }

apps/mobile/app/(app)/transaction/new-record.tsx

@@ -84,7 +84,7 @@ export default function NewRecordScreen() {
           }}
           className="w-[160px]"
         >
-          <TabsList className="border border-border">
+          <TabsList className="border border-border dark:border-background/20">
             <TabsTrigger value="0">
               <KeyboardIcon className="!text-primary size-6" />
             </TabsTrigger>

apps/mobile/app/(auth)/login.tsx

@@ -23,6 +23,7 @@ export default function LoginScreen() {
       contentContainerClassName="gap-4 p-8"
       automaticallyAdjustKeyboardInsets
       keyboardShouldPersistTaps="handled"
+      showsVerticalScrollIndicator={false}
     >
       <Trans>
         <View className="gap-4">

apps/mobile/components/auth/auth-email.tsx

@@ -7,8 +7,10 @@ import { View } from 'react-native'
 import { createUser } from '@/mutations/user'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
+import * as Haptics from 'expo-haptics'
 import { XCircleIcon } from 'lucide-react-native'
 import { FormProvider, useForm } from 'react-hook-form'
+import { toast } from '../common/toast'
 import { InputField } from '../form-fields/input-field'
 import { SubmitButton } from '../form-fields/submit-button'
 import { Button } from '../ui/button'
@@ -80,6 +82,10 @@ export function AuthEmail() {
         } catch (e: any) {
           // biome-ignore lint/suspicious/noConsoleLog: <explanation>
           console.log('error', JSON.stringify(e, null, 2))
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+          if (e.errors?.[0]?.longMessage) {
+            toast.error(e.errors?.[0]?.longMessage)
+          }
         }
       } else {
         authEmailForm.setError('emailAddress', {
@@ -121,6 +127,10 @@ export function AuthEmail() {
     } catch (err: any) {
       // biome-ignore lint/suspicious/noConsoleLog: <explanation>
       console.log('error', JSON.stringify(err, null, 2))
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+      if (err.errors?.[0]?.longMessage) {
+        toast.error(err.errors?.[0]?.longMessage)
+      }
     }
   }
 

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

@@ -117,7 +117,7 @@ export function CircularProgress({
         />
       </Svg>
       <View
-        className="items-center justify-center"
+        className="z-10 items-center justify-center"
         style={[
           {
             top: strokeWidth,
@@ -130,8 +130,14 @@ export function CircularProgress({
         ]}
       >
         <Text
-          className="font-bold font-mono text-sm"
-          style={{ color: strokeColor }}
+          className={'font-bold font-mono text-primary text-sm'}
+          style={
+            strokeColor
+              ? {
+                  color: strokeColor,
+                }
+              : {}
+          }
         >
           {Math.round(progress)}%
         </Text>

apps/mobile/components/common/tab-bar.tsx

@@ -37,6 +37,7 @@ function TabBarItem({
       accessibilityState={focused ? { selected: true } : {}}
       accessibilityLabel={options.tabBarAccessibilityLabel}
       className={'h-12 w-12 items-center justify-center'}
+      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
       {...props}
     >
       <Icon
@@ -61,6 +62,7 @@ function NewRecordButton() {
         className={cn(
           'h-12 w-12 items-center justify-center rounded-xl border border-border bg-muted active:bg-muted/75',
         )}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
       >
         <PlusIcon className="size-6 text-foreground" />
       </Button>
@@ -74,7 +76,7 @@ const TAB_BAR_ICONS = {
   settings: CogIcon,
 }
 
-const TAB_BAR_ITEM_WIDTH = (3 + 0.75) * rem.get()
+const TAB_BAR_ITEM_WIDTH = (3 + 1) * rem.get()
 
 export function TabBar({ state, descriptors, navigation }: BottomTabBarProps) {
   const tabIndicatorPosition = useSharedValue(0)
@@ -89,43 +91,48 @@ export function TabBar({ state, descriptors, navigation }: BottomTabBarProps) {
         style={[animatedStyle]}
         className="absolute left-2 h-12 w-12 rounded-xl bg-primary"
       />
-      {state.routes.map((route, index) => {
-        function onPress() {
-          Haptics.selectionAsync()
+      <View className="flex-row items-center gap-4">
+        {state.routes.map((route, index) => {
+          function onPress() {
+            Haptics.selectionAsync()
 
-          tabIndicatorPosition.value = withTiming(index * TAB_BAR_ITEM_WIDTH, {
-            duration: 300,
-          })
+            tabIndicatorPosition.value = withTiming(
+              index * TAB_BAR_ITEM_WIDTH,
+              {
+                duration: 300,
+              },
+            )
 
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true,
-          })
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            })
 
-          if (state.index !== index && !event.defaultPrevented) {
-            navigation.navigate(route.name, route.params)
+            if (state.index !== index && !event.defaultPrevented) {
+              navigation.navigate(route.name, route.params)
+            }
           }
-        }
 
-        function onLongPress() {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          })
-        }
+          function onLongPress() {
+            navigation.emit({
+              type: 'tabLongPress',
+              target: route.key,
+            })
+          }
 
-        return (
-          <TabBarItem
-            key={route.key}
-            icon={TAB_BAR_ICONS[route.name as keyof typeof TAB_BAR_ICONS]}
-            focused={state.index === index}
-            descriptor={descriptors[route.key]}
-            onPress={onPress}
-            onLongPress={onLongPress}
-          />
-        )
-      })}
+          return (
+            <TabBarItem
+              key={route.key}
+              icon={TAB_BAR_ICONS[route.name as keyof typeof TAB_BAR_ICONS]}
+              focused={state.index === index}
+              descriptor={descriptors[route.key]}
+              onPress={onPress}
+              onLongPress={onLongPress}
+            />
+          )
+        })}
+      </View>
       <Separator orientation="vertical" className="h-8" />
       <NewRecordButton />
     </View>

apps/mobile/components/common/user-avatar.tsx

@@ -23,7 +23,7 @@ export function UserAvatar({
   return (
     <Avatar
       alt={`${user?.fullName}'s avatar`}
-      className={cn('h-12 w-12 border-2 border-card bg-muted', className)}
+      className={cn('h-12 w-12 border border-border bg-muted', className)}
     >
       <AvatarImage
         source={{