From 14f1c502156d9ae49d839e0e35658e06b7428cda Mon Sep 17 00:00:00 2001 From: Torpenn Date: Tue, 8 Apr 2025 21:44:56 +0200 Subject: [PATCH] refactor: consistent theme with dark/light theme possibility --- app/(tabs)/index.tsx | 6 +-- app/Timer.tsx | 14 ++++++- app/_layout.tsx | 6 ++- app/shared/theme/colors.ts | 7 ---- app/shared/theme/index.ts | 14 +++++-- components/shared/Button.tsx | 9 ++--- components/shared/Card.tsx | 2 +- components/shared/NumberSelector.tsx | 3 +- .../useCases/timer/view/FinishContent.tsx | 13 ++++-- .../useCases/timer/view/TimerContent.tsx | 17 +++++--- constants/Colors.ts | 40 +++++++++++++------ 11 files changed, 84 insertions(+), 47 deletions(-) delete mode 100644 app/shared/theme/colors.ts diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 6f78b0e..7c9ca90 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -113,7 +113,7 @@ const Title = styled(Text)(({ theme }) => ({ textAlign: 'center', fontSize: 40, fontWeight: 'bold', - color: theme.colors.black + color: theme.colors.fixed.black })); const Container = styled.View({ @@ -135,7 +135,5 @@ const CustomText = styled(Text)(({ theme }) => ({ fontSize: 20, fontWeight: 'bold', textAlign: 'center', - color: theme.colors.white + color: theme.colors.fixed.white })) - - diff --git a/app/Timer.tsx b/app/Timer.tsx index c3b7f61..d6ba07d 100644 --- a/app/Timer.tsx +++ b/app/Timer.tsx @@ -102,6 +102,15 @@ export default function Timer() { ); }; + const handleReset = () => { + setCurrentRep(1); + setIsWorkPhase(true); + setTimeLeft(workTime); + setIsRunning(false); + setIsFinish(false); + cancelNotification(); + }; + const nextRep = () => { if (currentRep < reps) { if (isWorkPhase) { @@ -152,7 +161,7 @@ export default function Timer() { return ( - {isFinish && } + {isFinish && } {!isFinish && ( @@ -177,6 +187,6 @@ const Container = styled(View)<{ bgColor: TimerBgColor }>( flex: 1, alignItems: "center", justifyContent: "center", - backgroundColor: theme.colors[bgColor], + backgroundColor: theme.colors.fixed[bgColor], }), ); diff --git a/app/_layout.tsx b/app/_layout.tsx index 6fbffa9..122432e 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,6 +1,6 @@ import FontAwesome from '@expo/vector-icons/FontAwesome'; import { ThemeProvider } from '@emotion/react'; -import { theme } from '@/app/shared/theme/index'; +import { useThemeColors } from '@/app/shared/theme/index'; import { useFonts } from 'expo-font'; import { Stack } from 'expo-router'; import * as SplashScreen from 'expo-splash-screen'; @@ -47,9 +47,11 @@ export default function RootLayout() { } function RootLayoutNav() { + const dynamicTheme = useThemeColors(); + return ( - + diff --git a/app/shared/theme/colors.ts b/app/shared/theme/colors.ts deleted file mode 100644 index 2ed9a35..0000000 --- a/app/shared/theme/colors.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const colors = { - black: '#000000', - white: '#FFFFFF', - red: '#FF4141', - green: '#3AC26E', - grey: '#F9F9F9', -} as const; diff --git a/app/shared/theme/index.ts b/app/shared/theme/index.ts index f1adb5c..0eeeb67 100644 --- a/app/shared/theme/index.ts +++ b/app/shared/theme/index.ts @@ -1,14 +1,22 @@ -import { colors } from './colors'; +import Colors from '@/constants/Colors'; import { layout } from './layout'; +import { useColorScheme } from 'react-native'; export const theme = { - colors, + colors: Colors, layout }; +export const useThemeColors = () => { + const colorScheme = useColorScheme() ?? 'light'; + return { + ...theme, + }; +}; + declare module '@emotion/react' { export interface Theme { - colors: typeof colors; + colors: typeof Colors; layout: typeof layout; } } diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx index 890b20d..15e30a9 100644 --- a/components/shared/Button.tsx +++ b/components/shared/Button.tsx @@ -69,9 +69,9 @@ const Container = styled.TouchableOpacity<{ disabled: boolean; secondary: boolean; }>(({ theme, bgColor, secondary }) => ({ - backgroundColor: theme.colors[bgColor], + backgroundColor: theme.colors.fixed[bgColor], borderWidth: secondary ? 1 : 0, - borderColor: theme.colors[bgColor], + borderColor: theme.colors.fixed[bgColor], borderRadius: 6, height: theme.layout.gridUnit * 12, justifyContent: 'center', @@ -81,13 +81,13 @@ const Container = styled.TouchableOpacity<{ })); const Label = styled(Text)<{ color: LabelColor }>(({ theme, color }) => ({ - color: theme.colors[color], + color: theme.colors.fixed[color], fontSize: 16, fontWeight: 'semibold', })); const SecondaryLabel = styled(Text)<{ bgColor: ButtonColor }>(({ theme, bgColor }) => ({ - color: theme.colors[bgColor], + color: theme.colors.fixed[bgColor], fontWeight: 'semibold', })); @@ -97,4 +97,3 @@ const IconContainer = styled.View(({ theme }) => ({ alignItems: 'center', justifyContent: 'center', })); - diff --git a/components/shared/Card.tsx b/components/shared/Card.tsx index d1742b1..0e13b36 100644 --- a/components/shared/Card.tsx +++ b/components/shared/Card.tsx @@ -43,7 +43,7 @@ const Container = styled.View<{ width: '100%', borderRadius: 10, overflow: 'hidden', - backgroundColor: theme.colors[bgColor] + backgroundColor: theme.colors.fixed[bgColor] })); export default Card; diff --git a/components/shared/NumberSelector.tsx b/components/shared/NumberSelector.tsx index bb98605..98f101a 100644 --- a/components/shared/NumberSelector.tsx +++ b/components/shared/NumberSelector.tsx @@ -42,6 +42,5 @@ const CustomText = styled(Text)(({ theme }) => ({ fontSize: 20, fontWeight: 'bold', textAlign: 'center', - color: theme.colors.white + color: theme.colors.fixed.white })) - diff --git a/components/useCases/timer/view/FinishContent.tsx b/components/useCases/timer/view/FinishContent.tsx index 08d8959..3dbc987 100644 --- a/components/useCases/timer/view/FinishContent.tsx +++ b/components/useCases/timer/view/FinishContent.tsx @@ -9,15 +9,22 @@ import { i18n } from '@/app/i18n/i18n'; type FinishContentProps = { handleStart: () => void; + handleReset: () => void; }; const t = i18n.scoped('timer.finishContent'); export default function FinishContent({ - handleStart + handleStart, + handleReset }: FinishContentProps) { const router = useRouter(); + const handleBackClick = () => { + router.push('/'); + handleReset(); + }; + return ( <> @@ -29,7 +36,7 @@ export default function FinishContent({ -