chore: text

apps/expo/app/(tabs)/apps/_layout.tsx

@@ -8,8 +8,8 @@ export const unstable_settings = {
 const OverviewLayout = observer(() => {
   return (
     <Stack>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
-      <Stack.Screen name="[appId]" options={{ headerBackVisible: true, headerBackTitle: "Back", title: "" }} />
+      <Stack.Screen name="index" options={{ headerShown: false, title: "Apps" }} />
+      <Stack.Screen name="[appId]" options={{ headerBackVisible: true, title: "" }} />
     </Stack>
   );
 });

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,

apps/expo/app/(tabs)/overview/_layout.tsx

@@ -8,8 +8,8 @@ export const unstable_settings = {
 const OverviewLayout = observer(() => {
   return (
     <Stack>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
-      <Stack.Screen name="[appId]" options={{ headerBackVisible: true, headerBackTitle: "Back", title: "" }} />
+      <Stack.Screen name="index" options={{ headerShown: false, title: "Overview" }} />
+      <Stack.Screen name="[appId]" options={{ headerBackVisible: true, title: "" }} />
     </Stack>
   );
 });

apps/expo/app/(tabs)/overview/index.tsx

@@ -96,7 +96,7 @@ const Overview = observer(() => {
                   </SizableText>
                 </XStack>
                 {percentageSavedInComparisonToLastWeek !== 0 && (
-                  <PercentageTrend percentage={percentageSavedInComparisonToLastWeek} />
+                  <PercentageTrend percentage={percentageSavedInComparisonToLastWeek} affix="Prevented" />
                 )}
               </XStack>
               <XStack space="$4" marginTop="$2">

apps/expo/app/(tabs)/overview/weekly.summary.tsx

@@ -47,7 +47,9 @@ export const WeeklySummary = () => {
             : `Saved ${savedThisWeek}h this week`}
         </SizableText>
         <SizableText color="$text11" fontWeight={"bold"} fontSize={"$5"}>
-          {savedThisWeekInPercentage !== 0 && <PercentageTrend percentage={savedThisWeekInPercentage} />}
+          {savedThisWeekInPercentage !== 0 && (
+            <PercentageTrend percentage={savedThisWeekInPercentage} affix="hours saved" hideIcon />
+          )}
         </SizableText>
       </XStack>
       <XStack space="$2" marginTop="$3">

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 (
     <NavigationThemeProvider
       value={
@@ -88,9 +89,9 @@ const NavigationStack = () => {
               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,
               },
             }
           : {

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";
 

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 (
     <View position="relative">
       {dummy && (

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;
+}) => (
   <XStack
     backgroundColor={percentage > 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"
   >
     <Paragraph color={percentage > 0 ? "#67D65D" : "red"} fontWeight={"bold"}>
-      {Math.round(percentage)}% {percentage > 0 ? "more" : "less"}
+      {Math.round(percentage)}%{!affix && (percentage > 0 ? " more" : " less")}
+      {affix ? ` ${affix}` : ``}
     </Paragraph>
-    {percentage > 0 ? (
-      <TrendingUp color="#67D65D" strokeWidth={2.5} size={16} />
-    ) : (
-      <TrendingDown color="red" strokeWidth={2.5} size={16} />
-    )}
+    {!hideIcon &&
+      (percentage > 0 ? (
+        <TrendingUp color="#67D65D" strokeWidth={2.5} size={16} />
+      ) : (
+        <TrendingDown color="red" strokeWidth={2.5} size={16} />
+      ))}
   </XStack>
 );

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);

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();