From 818c257a9d724956959b4aa5649c04f690575215 Mon Sep 17 00:00:00 2001 From: lukestahl Date: Wed, 20 Dec 2023 16:52:20 +0100 Subject: [PATCH] chore: text --- apps/expo/app/(tabs)/apps/_layout.tsx | 4 ++-- apps/expo/app/(tabs)/overview/[appId].tsx | 2 +- apps/expo/app/(tabs)/overview/_layout.tsx | 4 ++-- apps/expo/app/(tabs)/overview/index.tsx | 2 +- .../app/(tabs)/overview/weekly.summary.tsx | 4 +++- apps/expo/app/_layout.tsx | 9 +++---- apps/expo/app/settings/theme.tsx | 2 +- apps/expo/components/line.chart.tsx | 7 +++--- apps/expo/components/percentage.trend.tsx | 24 +++++++++++++------ apps/expo/components/pie.chart.tsx | 5 ++-- apps/expo/components/theme-provider.tsx | 4 +++- 11 files changed, 42 insertions(+), 25 deletions(-) diff --git a/apps/expo/app/(tabs)/apps/_layout.tsx b/apps/expo/app/(tabs)/apps/_layout.tsx index b0955b2..3a9ac4c 100644 --- a/apps/expo/app/(tabs)/apps/_layout.tsx +++ b/apps/expo/app/(tabs)/apps/_layout.tsx @@ -8,8 +8,8 @@ export const unstable_settings = { const OverviewLayout = observer(() => { return ( - - + + ); }); diff --git a/apps/expo/app/(tabs)/overview/[appId].tsx b/apps/expo/app/(tabs)/overview/[appId].tsx index 4e96f47..c0c2922 100644 --- a/apps/expo/app/(tabs)/overview/[appId].tsx +++ b/apps/expo/app/(tabs)/overview/[appId].tsx @@ -20,7 +20,7 @@ const generateData = ({ statistic }: { statistic: { value: number; timestamp: nu .sort((a, b) => dayjs(a.timestamp).valueOf() - dayjs(b.timestamp).valueOf()) .map((item, index) => { const date = dayjs(item.timestamp).format("DD MMM YYYY"); - const showLabel = dayjs(item.timestamp).date() % 10 === 1 || index === 0 || index === statistic.length - 1; + const showLabel = dayjs(item.timestamp).date() % 11 === 1 || index === 0 || index === statistic.length - 1; return { value: item.value, date: date, diff --git a/apps/expo/app/(tabs)/overview/_layout.tsx b/apps/expo/app/(tabs)/overview/_layout.tsx index b0955b2..6fde18c 100644 --- a/apps/expo/app/(tabs)/overview/_layout.tsx +++ b/apps/expo/app/(tabs)/overview/_layout.tsx @@ -8,8 +8,8 @@ export const unstable_settings = { const OverviewLayout = observer(() => { return ( - - + + ); }); diff --git a/apps/expo/app/(tabs)/overview/index.tsx b/apps/expo/app/(tabs)/overview/index.tsx index 3f96596..a60f59e 100644 --- a/apps/expo/app/(tabs)/overview/index.tsx +++ b/apps/expo/app/(tabs)/overview/index.tsx @@ -96,7 +96,7 @@ const Overview = observer(() => { {percentageSavedInComparisonToLastWeek !== 0 && ( - + )} diff --git a/apps/expo/app/(tabs)/overview/weekly.summary.tsx b/apps/expo/app/(tabs)/overview/weekly.summary.tsx index b13c5a7..247b1f3 100644 --- a/apps/expo/app/(tabs)/overview/weekly.summary.tsx +++ b/apps/expo/app/(tabs)/overview/weekly.summary.tsx @@ -47,7 +47,9 @@ export const WeeklySummary = () => { : `Saved ${savedThisWeek}h this week`} - {savedThisWeekInPercentage !== 0 && } + {savedThisWeekInPercentage !== 0 && ( + + )} diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx index 5636236..c09cf62 100644 --- a/apps/expo/app/_layout.tsx +++ b/apps/expo/app/_layout.tsx @@ -3,7 +3,7 @@ import { AppState } from "react-native"; import { useFonts } from "expo-font"; import { router, SplashScreen, Stack } from "expo-router"; import { DarkTheme, DefaultTheme, ThemeProvider as NavigationThemeProvider } from "@react-navigation/native"; -import { getTokenValue, TamaguiProvider } from "tamagui"; +import { TamaguiProvider, useTheme as useThemeTamagui } from "tamagui"; import "../data/logger"; @@ -79,6 +79,7 @@ function RootLayoutNav() { const NavigationStack = () => { const { theme } = useTheme(); + const tamaguiTheme = useThemeTamagui(); return ( { colors: { ...DefaultTheme.colors, background: "#FFFFFF", - text: getTokenValue("$text11") as string, - primary: getTokenValue("$text11") as string, - border: getTokenValue("$grey3") as string, + text: tamaguiTheme.text11?.val as string, + primary: tamaguiTheme.text11?.val as string, + border: tamaguiTheme.grey3?.val as string, }, } : { diff --git a/apps/expo/app/settings/theme.tsx b/apps/expo/app/settings/theme.tsx index 6de4a35..7762b9f 100644 --- a/apps/expo/app/settings/theme.tsx +++ b/apps/expo/app/settings/theme.tsx @@ -1,4 +1,4 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ + import { Check, Moon, Smartphone, Sun } from "@tamagui/lucide-icons"; import { ListItem, View, YGroup, YStack } from "tamagui"; diff --git a/apps/expo/components/line.chart.tsx b/apps/expo/components/line.chart.tsx index d82ea8f..037a187 100644 --- a/apps/expo/components/line.chart.tsx +++ b/apps/expo/components/line.chart.tsx @@ -1,6 +1,6 @@ import type { Text as ReactNativeText } from "react-native"; import { LineChart as LineChartGifted } from "react-native-gifted-charts"; -import { getTokenValue, H4, Paragraph, Text, View, YStack } from "tamagui"; +import { H4, Paragraph, Text, useTheme, View, YStack } from "tamagui"; export const LineChart = ({ data, @@ -16,8 +16,9 @@ export const LineChart = ({ labelSuffix?: string; dummy?: boolean; }) => { - const grey3 = getTokenValue("$grey3") as string; - const grey4 = getTokenValue("$grey4") as string; + const theme = useTheme(); + const grey3 = theme.grey3?.val as string; + const grey4 = theme.grey4?.val as string; return ( {dummy && ( diff --git a/apps/expo/components/percentage.trend.tsx b/apps/expo/components/percentage.trend.tsx index 0f20529..d7c0fe4 100644 --- a/apps/expo/components/percentage.trend.tsx +++ b/apps/expo/components/percentage.trend.tsx @@ -1,7 +1,15 @@ import { TrendingDown, TrendingUp } from "@tamagui/lucide-icons"; import { Paragraph, XStack } from "tamagui"; -export const PercentageTrend = ({ percentage }: { percentage: number }) => ( +export const PercentageTrend = ({ + percentage, + affix, + hideIcon, +}: { + percentage: number; + affix?: string; + hideIcon?: boolean; +}) => ( 0 ? "rgba(103,214,93,0.2)" : "rgba(255,0,0,0.2)"} borderRadius={"$2"} @@ -11,12 +19,14 @@ export const PercentageTrend = ({ percentage }: { percentage: number }) => ( paddingVertical="$1" > 0 ? "#67D65D" : "red"} fontWeight={"bold"}> - {Math.round(percentage)}% {percentage > 0 ? "more" : "less"} + {Math.round(percentage)}%{!affix && (percentage > 0 ? " more" : " less")} + {affix ? ` ${affix}` : ``} - {percentage > 0 ? ( - - ) : ( - - )} + {!hideIcon && + (percentage > 0 ? ( + + ) : ( + + ))} ); diff --git a/apps/expo/components/pie.chart.tsx b/apps/expo/components/pie.chart.tsx index bfc95f2..261d1cd 100644 --- a/apps/expo/components/pie.chart.tsx +++ b/apps/expo/components/pie.chart.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { PieChart as PieChartGifted } from "react-native-gifted-charts"; -import { getTokenValue, H4, Paragraph, SizableText, View, YStack } from "tamagui"; +import { H4, Paragraph, SizableText, useTheme, View, YStack } from "tamagui"; export const PieChart = ({ data, @@ -16,7 +16,8 @@ export const PieChart = ({ labelSuffix?: string; dummy?: boolean; }) => { - const grey4 = getTokenValue("$grey4") as string; + const theme = useTheme(); + const grey4 = theme.grey4?.val as string; const [focusedData, setFocusedData] = useState<(typeof data)[0] | null>(null); useEffect(() => { setFocusedData(data.find((d) => d.focused) ?? data[0] ?? null); diff --git a/apps/expo/components/theme-provider.tsx b/apps/expo/components/theme-provider.tsx index 0440f84..4caf764 100644 --- a/apps/expo/components/theme-provider.tsx +++ b/apps/expo/components/theme-provider.tsx @@ -35,9 +35,11 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => { clearTimeout(onColorSchemeChange.current); } const storedTheme = await AsyncStorage.getItem("theme"); - setThemeState(storedTheme as ThemeType); + setAutoTheme(storedTheme === "auto"); if (storedTheme === "auto") { setThemeState(colorScheme === "dark" ? "dark" : "light"); + } else { + setThemeState(storedTheme as ThemeType); } }; void init();