From 92bd45150d103e60681431417b5baac687d6d97a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <bkdev98@gmail.com>
Date: Sat, 7 Sep 2024 22:45:05 +0700
Subject: [PATCH] feat(mobile): minor ui tweaks (#284)

---
 apps/mobile/app/(app)/appearance.tsx                  | 11 +++++++++--
 apps/mobile/app/(app)/transaction/new-record.tsx      |  2 +-
 .../components/transaction/select-category-field.tsx  |  2 +-
 apps/mobile/lib/date.tsx                              |  7 +++++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/mobile/app/(app)/appearance.tsx b/apps/mobile/app/(app)/appearance.tsx
index 3c7cbe72..73b06062 100644
--- a/apps/mobile/app/(app)/appearance.tsx
+++ b/apps/mobile/app/(app)/appearance.tsx
@@ -4,7 +4,7 @@ import { useColorScheme } from '@/hooks/useColorScheme'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { MoonStarIcon, SunIcon } from 'lucide-react-native'
-import { ScrollView } from 'react-native'
+import { ScrollView, StatusBar } from 'react-native'
 
 export default function AppearanceScreen() {
   const { colorScheme, setColorScheme } = useColorScheme()
@@ -21,7 +21,14 @@ export default function AppearanceScreen() {
       <Tabs
         value={colorScheme || 'light'}
         // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        onValueChange={(value: any) => setColorScheme(value)}
+        onValueChange={(value: any) => {
+          setColorScheme(value)
+          if (value === 'dark') {
+            StatusBar.setBarStyle('light-content')
+          } else {
+            StatusBar.setBarStyle('dark-content')
+          }
+        }}
       >
         <TabsList>
           <TabsTrigger value="light">
diff --git a/apps/mobile/app/(app)/transaction/new-record.tsx b/apps/mobile/app/(app)/transaction/new-record.tsx
index b42cd202..1fbc8a9f 100644
--- a/apps/mobile/app/(app)/transaction/new-record.tsx
+++ b/apps/mobile/app/(app)/transaction/new-record.tsx
@@ -84,7 +84,7 @@ export default function NewRecordScreen() {
           }}
           className="w-[160px]"
         >
-          <TabsList className="border border-border dark:border-background/20">
+          <TabsList className="border border-border dark:border-primary/10">
             <TabsTrigger value="0">
               <KeyboardIcon className="!text-primary size-6" />
             </TabsTrigger>
diff --git a/apps/mobile/components/transaction/select-category-field.tsx b/apps/mobile/components/transaction/select-category-field.tsx
index daeae629..4f52a9d3 100644
--- a/apps/mobile/components/transaction/select-category-field.tsx
+++ b/apps/mobile/components/transaction/select-category-field.tsx
@@ -134,7 +134,7 @@ export function SelectCategoryField({
                         />
                         <TextTicker
                           marqueeDelay={500}
-                          duration={180 * item.name.length}
+                          duration={200 * item.name.length}
                           bouncePadding={{ left: 5, right: 5 }}
                           bounce
                           loop
diff --git a/apps/mobile/lib/date.tsx b/apps/mobile/lib/date.tsx
index 32ee9f81..4fe78656 100644
--- a/apps/mobile/lib/date.tsx
+++ b/apps/mobile/lib/date.tsx
@@ -54,10 +54,13 @@ const shortenAmPm = (text: string): string => {
 
 const removeLeadingZero = (text: string): string => text.replace(/^0/, '')
 
-export const formatTime = (date: Date, locale?: string): string => {
+export const formatTime = (date?: Date, locale?: string): string => {
+  if (!date) {
+    return ''
+  }
   return removeLeadingZero(
     shortenAmPm(
-      date.toLocaleTimeString(locale, {
+      new Date(date)?.toLocaleTimeString?.(locale || 'en-US', {
         hour: '2-digit',
         minute: '2-digit',
       }) || '',