feat(mobile): complete migrate color palette (#341)

get6pm · Sep 21, 2024 · 747dcd4 · 747dcd4
1 parent 7b655a1
commit 747dcd4
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 96 deletions.
diff --git a/apps/mobile/app/(app)/(tabs)/budgets.tsx b/apps/mobile/app/(app)/(tabs)/budgets.tsx
@@ -1,21 +1,19 @@
 import { BudgetItem } from '@/components/budget/budget-item'
 import { BudgetStatistic } from '@/components/budget/budget-statistic'
 import { BurndownChart } from '@/components/budget/burndown-chart'
+import { FooterGradient } from '@/components/common/footer-gradient'
 import { Button } from '@/components/ui/button'
 // import { Toolbar } from '@/components/common/toolbar'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Text } from '@/components/ui/text'
 import { useUserEntitlements } from '@/hooks/use-purchases'
-import { useColorScheme } from '@/hooks/useColorScheme'
 import { ENTITLEMENT_LIMIT } from '@/lib/constaints'
-import { theme } from '@/lib/theme'
 import { useBudgetList } from '@/stores/budget/hooks'
 import { useTransactionList } from '@/stores/transaction/hooks'
 import { dayjsExtended } from '@6pm/utilities'
 import type { Budget, BudgetPeriodConfig } from '@6pm/validation'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { LinearGradient } from 'expo-linear-gradient'
 import { Link, useNavigation } from 'expo-router'
 import { groupBy, map } from 'lodash-es'
 import { PlusIcon } from 'lucide-react-native'
@@ -47,7 +45,6 @@ const AnimatedSectionList = Animated.createAnimatedComponent(
 export default function BudgetsScreen() {
   const { i18n } = useLingui()
   const { bottom } = useSafeAreaInsets()
-  const { colorScheme } = useColorScheme()
   const headerAnimation = useSharedValue(0)
   const scrollY = useSharedValue(0)
   const headerHeight = useSharedValue(height)
@@ -255,14 +252,7 @@ export default function BudgetsScreen() {
           ) : null
         }
       />
-      <LinearGradient
-        colors={[
-          colorScheme === 'dark' ? 'transparent' : '#ffffff00',
-          theme[colorScheme ?? 'light'].background,
-        ]}
-        className="absolute right-0 bottom-0 left-0 h-36"
-        pointerEvents="none"
-      />
+      <FooterGradient />
       {/* <Toolbar /> */}
     </View>
   )

diff --git a/apps/mobile/app/(app)/(tabs)/index.tsx b/apps/mobile/app/(app)/(tabs)/index.tsx
@@ -1,4 +1,5 @@
 import { AmountFormat } from '@/components/common/amount-format'
+import { FooterGradient } from '@/components/common/footer-gradient'
 import { ListSkeleton } from '@/components/common/list-skeleton'
 // import { Toolbar } from '@/components/common/toolbar'
 import { HomeHeader } from '@/components/home/header'
@@ -9,16 +10,13 @@ import { DraftTransactionList } from '@/components/transaction/draft-transaction
 import { HandyArrow } from '@/components/transaction/handy-arrow'
 import { TransactionItem } from '@/components/transaction/transaction-item'
 import { Text } from '@/components/ui/text'
-import { useColorScheme } from '@/hooks/useColorScheme'
 import { formatDateShort } from '@/lib/date'
-import { theme } from '@/lib/theme'
 import { useTransactionList } from '@/stores/transaction/hooks'
 import { useTransactionStore } from '@/stores/transaction/store'
 import { dayjsExtended } from '@6pm/utilities'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { format } from 'date-fns/format'
-import { LinearGradient } from 'expo-linear-gradient'
 import { groupBy, mapValues, orderBy, sumBy } from 'lodash-es'
 import { useMemo, useState } from 'react'
 import { SectionList, View } from 'react-native'
@@ -27,7 +25,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 export default function HomeScreen() {
   const { i18n } = useLingui()
   const { top, bottom } = useSafeAreaInsets()
-  const { colorScheme } = useColorScheme()
   const [walletAccountId, setWalletAccountId] = useState<string | undefined>()
   const [filter, setFilter] = useState<HomeFilter>(HomeFilter.All)
   const [view, setView] = useState<HomeView>(HomeView.SpentThisWeek)
@@ -177,14 +174,7 @@ export default function HomeScreen() {
           ) : null}
         </>
       )}
-      <LinearGradient
-        colors={[
-          colorScheme === 'dark' ? 'transparent' : '#ffffff00',
-          theme[colorScheme ?? 'light'].background,
-        ]}
-        className="absolute right-0 bottom-0 left-0 h-36"
-        pointerEvents="none"
-      />
+      <FooterGradient />
       {/* <Toolbar /> */}
     </View>
   )

diff --git a/apps/mobile/app/(app)/(tabs)/settings.tsx b/apps/mobile/app/(app)/(tabs)/settings.tsx
@@ -2,6 +2,7 @@ import * as Application from 'expo-application'
 import * as Haptics from 'expo-haptics'
 import * as Updates from 'expo-updates'
 
+import { FooterGradient } from '@/components/common/footer-gradient'
 import { Logo } from '@/components/common/logo'
 import { MenuItem } from '@/components/common/menu-item'
 import { toast } from '@/components/common/toast'
@@ -15,16 +16,13 @@ import { Text } from '@/components/ui/text'
 import { useUserEntitlements } from '@/hooks/use-purchases'
 import { useScheduleNotification } from '@/hooks/use-schedule-notification'
 import { useSeed } from '@/hooks/use-seed'
-import { useColorScheme } from '@/hooks/useColorScheme'
-import { theme } from '@/lib/theme'
 import { useLocale } from '@/locales/provider'
 import { useTransactionStore } from '@/stores/transaction/store'
 import { useUserSettingsStore } from '@/stores/user-settings/store'
 import { useAuth } from '@clerk/clerk-expo'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import * as Clipboard from 'expo-clipboard'
-import { LinearGradient } from 'expo-linear-gradient'
 import * as Notifications from 'expo-notifications'
 import { Link } from 'expo-router'
 import {
@@ -62,7 +60,6 @@ export default function SettingsScreen() {
   const { i18n } = useLingui()
   const { bottom } = useSafeAreaInsets()
   const { language } = useLocale()
-  const { colorScheme } = useColorScheme()
   const { cancelAllScheduledNotifications } = useScheduleNotification()
   const { setEnabledPushNotifications, enabledPushNotifications } =
     useUserSettingsStore()
@@ -337,14 +334,7 @@ export default function SettingsScreen() {
           </Text>
         </TouchableOpacity>
       </ScrollView>
-      <LinearGradient
-        colors={[
-          colorScheme === 'dark' ? 'transparent' : '#ffffff00',
-          theme[colorScheme ?? 'light'].background,
-        ]}
-        className="absolute right-0 bottom-0 left-0 h-20"
-        pointerEvents="none"
-      />
+      <FooterGradient />
     </View>
   )
 }
diff --git a/apps/mobile/app/(app)/budget/[budgetId]/index.tsx b/apps/mobile/app/(app)/budget/[budgetId]/index.tsx
@@ -2,16 +2,14 @@ import { BudgetStatistic } from '@/components/budget/budget-statistic'
 import { BurndownChart } from '@/components/budget/burndown-chart'
 import { PeriodControl } from '@/components/budget/period-control'
 import { AmountFormat } from '@/components/common/amount-format'
+import { FooterGradient } from '@/components/common/footer-gradient'
 import { TransactionItem } from '@/components/transaction/transaction-item'
 import { Button } from '@/components/ui/button'
 import { Text } from '@/components/ui/text'
-import { useColorScheme } from '@/hooks/useColorScheme'
 import { formatDateShort } from '@/lib/date'
-import { theme } from '@/lib/theme'
 import { useBudget, useBudgetPeriodStats } from '@/stores/budget/hooks'
 import type { TransactionPopulated } from '@6pm/validation'
 import { format } from 'date-fns'
-import { LinearGradient } from 'expo-linear-gradient'
 import { Link, useLocalSearchParams, useNavigation } from 'expo-router'
 import { groupBy, map, mapValues, orderBy, sortBy, sumBy } from 'lodash-es'
 import { SettingsIcon } from 'lucide-react-native'
@@ -38,7 +36,6 @@ const AnimatedSectionList = Animated.createAnimatedComponent(
 
 export default function BudgetDetailScreen() {
   const navigation = useNavigation()
-  const { colorScheme } = useColorScheme()
   const { bottom } = useSafeAreaInsets()
   const headerAnimation = useSharedValue(0)
   const scrollY = useSharedValue(0)
@@ -266,14 +263,7 @@ export default function BudgetDetailScreen() {
           </View>
         )}
       />
-      <LinearGradient
-        colors={[
-          colorScheme === 'dark' ? 'transparent' : '#ffffff00',
-          theme[colorScheme ?? 'light'].background,
-        ]}
-        className="absolute right-0 bottom-0 left-0 h-16"
-        pointerEvents="none"
-      />
+      <FooterGradient />
     </View>
   )
 }
diff --git a/apps/mobile/components/budget/burndown-chart.tsx b/apps/mobile/components/budget/burndown-chart.tsx
@@ -1,5 +1,4 @@
-import { useColorScheme } from '@/hooks/useColorScheme'
-import { theme } from '@/lib/theme'
+import { useColorPalette } from '@/hooks/use-color-palette'
 import { useDefaultCurrency } from '@/stores/user-settings/hooks'
 import { nFormatter } from '@6pm/currency'
 import { dayjsExtended } from '@6pm/utilities'
@@ -25,15 +24,16 @@ import {
 } from 'victory-native'
 
 function AverageLine({ points }: { points: PointsArray }) {
-  const { colorScheme } = useColorScheme()
   const { path } = useLinePath(points, { curveType: 'linear' })
+  const { getColor } = useColorPalette()
+
   return (
     <Path
       path={path}
       style="stroke"
       opacity={0.3}
       strokeWidth={2.5}
-      color={theme[colorScheme].mutedForeground}
+      color={getColor('--muted-foreground')}
       strokeCap="round"
     >
       <DashPathEffect intervals={[6, 6]} />
@@ -47,9 +47,9 @@ function UsageLine({
   points,
   diffAmount,
 }: { points: PointsArray; diffAmount: number }) {
-  const { colorScheme } = useColorScheme()
-  const { path } = useLinePath(points, { curveType: 'cardinal' })
+  const { path } = useLinePath(points, { curveType: 'linear' })
   const font = useFont(SpaceMono_700Bold, 16)
+  const { getColor } = useColorPalette()
 
   const lastPoint = points.filter((i) => !!i.y).pop()
 
@@ -104,14 +104,14 @@ function UsageLine({
         path={path}
         style="stroke"
         strokeWidth={3}
-        color={theme[colorScheme].primary}
+        color={getColor('--primary')}
         strokeCap="round"
       />
       {lastPoint && (
         <Group transform={[{ translateX: 6 }]}>
           <Scatter
             points={[lastPoint]}
-            color={theme[colorScheme].primary}
+            color={getColor('--primary')}
             shape="circle"
             style="stroke"
             strokeWidth={3}
@@ -153,9 +153,9 @@ export function BurndownChart({
   anchorDay = new Date().getDate(),
 }: BurndownChartProps) {
   const font = useFont(SpaceMono_400Regular, 12)
-  const { colorScheme } = useColorScheme()
   const defaultCurrency = useDefaultCurrency()
   const daysInMonth = dayjsExtended(anchorDay).daysInMonth()
+  const { getColor } = useColorPalette()
 
   const chartData = Array.from({ length: daysInMonth + 1 }, (_, i) => ({
     day: i,
@@ -207,7 +207,7 @@ export function BurndownChart({
               y={(points.average[0].y ?? 0) + 16}
               font={font}
               text={`0.00`}
-              color={theme[colorScheme ?? 'light'].mutedForeground}
+              color={getColor('--muted-foreground')}
             />
             <SkiaText
               x={
@@ -217,7 +217,7 @@ export function BurndownChart({
               y={(points.average[points.average.length - 1].y ?? 0) - 10}
               font={font}
               text={totalText}
-              color={theme[colorScheme ?? 'light'].mutedForeground}
+              color={getColor('--muted-foreground')}
             />
           </>
         )}

diff --git a/apps/mobile/components/common/circular-progress.tsx b/apps/mobile/components/common/circular-progress.tsx
@@ -1,5 +1,4 @@
-import { useColorScheme } from '@/hooks/useColorScheme'
-import { theme } from '@/lib/theme'
+import { useColorPalette } from '@/hooks/use-color-palette'
 import { useEffect } from 'react'
 import { type StyleProp, View, type ViewStyle } from 'react-native'
 import Animated, {
@@ -44,7 +43,7 @@ export function CircularProgress({
   delay = 500,
   style,
 }: AnimatedDonutProps) {
-  const { colorScheme } = useColorScheme()
+  const { getColor } = useColorPalette()
   const d = `
     M ${width / 2} 0
     H ${width - radius}
@@ -94,7 +93,7 @@ export function CircularProgress({
           strokeWidth={strokeWidth}
           d={d}
           fill="transparent"
-          stroke={strokeInactiveColor || theme[colorScheme].muted}
+          stroke={strokeInactiveColor || getColor('--muted')}
           strokeLinejoin="miter"
           strokeMiterlimit={0}
         />
@@ -107,7 +106,7 @@ export function CircularProgress({
           strokeWidth={strokeWidth}
           d={d}
           fill="transparent"
-          stroke={strokeColor || theme[colorScheme].primary}
+          stroke={strokeColor || getColor('--primary')}
           strokeDasharray={length}
           // strokeLinecap='butt'
           strokeLinejoin="miter"

diff --git a/apps/mobile/components/common/footer-gradient.tsx b/apps/mobile/components/common/footer-gradient.tsx
@@ -0,0 +1,19 @@
+import { useColorPalette } from '@/hooks/use-color-palette'
+import { useColorScheme } from '@/hooks/useColorScheme'
+import { LinearGradient } from 'expo-linear-gradient'
+
+export function FooterGradient() {
+  const { colorScheme } = useColorScheme()
+  const { getColor } = useColorPalette()
+
+  return (
+    <LinearGradient
+      colors={[
+        colorScheme === 'dark' ? 'transparent' : '#ffffff00',
+        getColor('--background'),
+      ]}
+      className="absolute right-0 bottom-0 left-0 h-36"
+      pointerEvents="none"
+    />
+  )
+}
diff --git a/apps/mobile/components/home/category-chart.tsx b/apps/mobile/components/home/category-chart.tsx
@@ -118,8 +118,8 @@ export function CategoryChart({
               variant={selected === item.id ? 'secondary' : 'ghost'}
               size="sm"
               className={cn(
-                '!h-8 border border-primary-foreground',
-                selected === item.id && 'border-border',
+                '!h-8 border border-border',
+                selected === item.id && '!border-secondary',
               )}
               onPress={() => {
                 onSelect?.(selected === item.id ? undefined : item.id)
@@ -138,9 +138,7 @@ export function CategoryChart({
                 />
               )}
               <Text>{item.name}</Text>
-              <Text className="font-normal text-muted-foreground">
-                {item.percentage}%
-              </Text>
+              <Text className={'font-normal'}>{item.percentage}%</Text>
             </Button>
           )
         }}

diff --git a/apps/mobile/hooks/use-color-palette.tsx b/apps/mobile/hooks/use-color-palette.tsx
@@ -1,19 +1,21 @@
-import { type ColorKey, Palette, themeVariables } from '@/lib/theme'
+import { type ColorKey, themeVariables } from '@/lib/theme'
 import { useUserSettingsStore } from '@/stores/user-settings/store'
-import { FeatureFlag, useFeatureFlag } from './use-feature-flag'
+// import { FeatureFlag, useFeatureFlag } from './use-feature-flag'
 import { useColorScheme } from './useColorScheme'
 
+/**
+ * Not able to use feature flag in burndown-chart somehow
+ */
 export function useColorPalette() {
   const preferredPalette = useUserSettingsStore().preferredPalette
   const { colorScheme } = useColorScheme()
-  const isDynamicColorPaletteEnabled = useFeatureFlag(
-    FeatureFlag.DynamicColorPalette,
-  )
+  // const isDynamicColorPaletteEnabled = useFeatureFlag(
+  //   FeatureFlag.DynamicColorPalette,
+  // )
 
   const colorPalette =
-    themeVariables[
-      isDynamicColorPaletteEnabled ? preferredPalette : Palette.Default
-    ][colorScheme ?? 'light']
+    // isDynamicColorPaletteEnabled ? preferredPalette : Palette.Default
+    themeVariables[preferredPalette][colorScheme ?? 'light']
 
   const getColor = (colorKey: ColorKey) => {
     return `hsl(${colorPalette[colorKey]})`

diff --git a/apps/mobile/lib/theme.ts b/apps/mobile/lib/theme.ts
@@ -1,22 +1,3 @@
-export const theme = {
-  light: {
-    primary: 'hsl(240, 6%, 10%)',
-    background: 'hsl(0, 0%, 100%)',
-    foreground: 'hsl(240, 6%, 10%)',
-    muted: 'hsl(210, 40%, 96.1%)',
-    mutedForeground: 'hsl(240, 4%, 46%)',
-    border: 'hsl(249, 6%, 90%)',
-  },
-  dark: {
-    primary: 'hsl(0, 0%, 90%)',
-    background: 'hsl(240, 9%, 4%)',
-    foreground: 'hsl(0, 0%, 90%)',
-    muted: 'hsl(240, 5%, 19%)',
-    mutedForeground: 'hsl(228, 6%, 68%)',
-    border: 'hsl(240, 5%, 19%)',
-  },
-}
-
 export enum Palette {
   Default = 'default',
   TokyoNight = 'tokyo-night',