feat(mobile): minor ui tweaks (#284)

get6pm · Sep 7, 2024 · 92bd451 · 92bd451
1 parent 60a0ac6
commit 92bd451
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',
       }) || '',