diff --git a/apps/mobile/app/(app)/(tabs)/budgets.tsx b/apps/mobile/app/(app)/(tabs)/budgets.tsx
index 8810e051..b32dfbcc 100644
--- 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
}
/>
-
+
{/* */}
)
diff --git a/apps/mobile/app/(app)/(tabs)/index.tsx b/apps/mobile/app/(app)/(tabs)/index.tsx
index f6fb933b..60a99205 100644
--- 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()
const [filter, setFilter] = useState(HomeFilter.All)
const [view, setView] = useState(HomeView.SpentThisWeek)
@@ -177,14 +174,7 @@ export default function HomeScreen() {
) : null}
>
)}
-
+
{/* */}
)
diff --git a/apps/mobile/app/(app)/(tabs)/settings.tsx b/apps/mobile/app/(app)/(tabs)/settings.tsx
index ad427f3a..8f25dd70 100644
--- 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,8 +16,6 @@ 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'
@@ -24,7 +23,6 @@ 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() {
-
+
)
}
diff --git a/apps/mobile/app/(app)/budget/[budgetId]/index.tsx b/apps/mobile/app/(app)/budget/[budgetId]/index.tsx
index 1bb09b72..fa699a22 100644
--- 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() {
)}
/>
-
+
)
}
diff --git a/apps/mobile/components/budget/burndown-chart.tsx b/apps/mobile/components/budget/burndown-chart.tsx
index 8da722c0..a7a698a2 100644
--- 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 (
@@ -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 && (
({
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')}
/>
>
)}
diff --git a/apps/mobile/components/common/circular-progress.tsx b/apps/mobile/components/common/circular-progress.tsx
index 01f1f843..82d23adc 100644
--- 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
new file mode 100644
index 00000000..830d421a
--- /dev/null
+++ 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 (
+
+ )
+}
diff --git a/apps/mobile/components/home/category-chart.tsx b/apps/mobile/components/home/category-chart.tsx
index d66029cd..608e406c 100644
--- 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({
/>
)}
{item.name}
-
- {item.percentage}%
-
+ {item.percentage}%
)
}}
diff --git a/apps/mobile/hooks/use-color-palette.tsx b/apps/mobile/hooks/use-color-palette.tsx
index 702e4962..e0edf189 100644
--- 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
index 75eb26bc..452b5b82 100644
--- 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',