From 4b2d3b8b3263e65c25fd2a0cfdf0e649fe3835d5 Mon Sep 17 00:00:00 2001 From: Maarten Date: Mon, 12 Aug 2024 09:22:52 +0200 Subject: [PATCH] Update dark mode --- app/(explore)/category.tsx | 3 ++- app/(settings)/notifications.tsx | 6 +++--- app/(tabs)/index.tsx | 32 +++++++++++++++++--------------- app/(tabs)/settings.tsx | 16 ++++++++-------- lib/components/EditModal.tsx | 3 ++- lib/components/ThemedIcon.tsx | 13 +++++++++++++ 6 files changed, 45 insertions(+), 28 deletions(-) create mode 100644 lib/components/ThemedIcon.tsx diff --git a/app/(explore)/category.tsx b/app/(explore)/category.tsx index a22df9d..499c0c9 100644 --- a/app/(explore)/category.tsx +++ b/app/(explore)/category.tsx @@ -18,7 +18,7 @@ export default function CategoryScreen() { const colorScheme = useColorScheme() ?? 'light'; const navigation = useNavigation(); const [ description, setDescription ] = useState( '' ); - const viewCategory = useSelector((state: any) => state.data.viewCategory); + const viewCategory = useSelector( (state: any) => state.data.viewCategory ); // Load item from storage useEffect( () => { @@ -43,6 +43,7 @@ export default function CategoryScreen() { diff --git a/app/(settings)/notifications.tsx b/app/(settings)/notifications.tsx index 41888a7..227da66 100644 --- a/app/(settings)/notifications.tsx +++ b/app/(settings)/notifications.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'; import { SafeAreaView, ScrollView, StyleSheet, Switch, TouchableOpacity, } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { DateTimePickerAndroid, DateTimePickerEvent } from '@react-native-community/datetimepicker'; -import Ionicons from '@expo/vector-icons/Ionicons'; import { useSelector } from 'react-redux'; import { Colors } from '@/lib/constants/Colors'; @@ -14,6 +13,7 @@ import { useToken } from '@/lib/context/AppProvider'; import { Message } from '@/lib/services/message'; import { store } from '@/lib/store/store'; import { setSession } from '@/lib/store/dataStore'; +import { ThemedIcon } from '@/lib/components/ThemedIcon'; export default function CategoryScreen() { const colorScheme = useColorScheme() ?? 'light'; @@ -166,7 +166,7 @@ export default function CategoryScreen() { ( selectTime( 'dayBefore' )}> Om {dayBefore} - + ) : ( @@ -195,7 +195,7 @@ export default function CategoryScreen() { ( selectTime( 'sameDay' )}> Om {sameDay} - + ) : ( diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 7c092e5..28446b9 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'; import { StyleSheet, ScrollView, SafeAreaView, View, StatusBar } from 'react-native'; // @ts-ignore import CalendarPicker from 'react-native-calendar-picker'; -import Ionicons from '@expo/vector-icons/Ionicons'; import { useIsFocused } from '@react-navigation/core'; import { useSelector } from 'react-redux'; import { LogLevel, OneSignal } from 'react-native-onesignal'; @@ -15,12 +14,13 @@ import { useToken } from '@/lib/context/AppProvider'; import { Request } from '@/lib/services/request'; import List from '@/lib/components/List'; import { Message } from '@/lib/services/message'; +import { ThemedIcon } from '@/lib/components/ThemedIcon'; export default function HomeScreen() { const colorScheme = useColorScheme() ?? 'light'; const isFocused = useIsFocused(); - const session = useSelector((state: any) => state.data.session); - const reloadCalendar = useSelector((state: any) => state.data.reloadCalendar); + const session = useSelector( (state: any) => state.data.session ); + const reloadCalendar = useSelector( (state: any) => state.data.reloadCalendar ); const { token, isLoading } = useToken(); const [ name, setName ] = useState( ' ' ); // Default empty space to prevent layout shifting const [ dates, setDates ] = useState( [] ); @@ -29,15 +29,15 @@ export default function HomeScreen() { const loadOneSignal = () => { // Remove this method to stop OneSignal Debugging - OneSignal.Debug.setLogLevel(LogLevel.Verbose); + OneSignal.Debug.setLogLevel( LogLevel.Verbose ); // OneSignal Initialization - OneSignal.initialize("6ef15aa7-9dc0-4d8b-b6b1-e2005bcd3dc6"); + OneSignal.initialize( "6ef15aa7-9dc0-4d8b-b6b1-e2005bcd3dc6" ); // Request permission - OneSignal.Notifications.requestPermission(true).then(() => { + OneSignal.Notifications.requestPermission( true ).then( () => { // Retrieve one signal user token - OneSignal.User.pushSubscription.getIdAsync().then((notificationsToken) => { + OneSignal.User.pushSubscription.getIdAsync().then( (notificationsToken) => { if (notificationsToken) { Request.post( 'sessions/update', { token: token, notifications_token: notificationsToken } ).then( (response) => { if (!response.success) { @@ -45,22 +45,22 @@ export default function HomeScreen() { } } ); } - }) - }) + } ) + } ) // Disable loading again - setOnesignalLoaded(true); + setOnesignalLoaded( true ); } // Load OneSignal useEffect( () => { loadOneSignal(); - }, [onesignalLoaded] ); + }, [ onesignalLoaded ] ); // Load session useEffect( () => { - setName(session.name); - }, [session, isFocused]); + setName( session.name ); + }, [ session, isFocused ] ); useEffect( () => { if (token) { @@ -108,11 +108,13 @@ export default function HomeScreen() { enableDateChange={false} customDatesStyles={dates} todayTextStyle={styles.today} + textStyle={{ color: Colors[ colorScheme ].text }} + startFromMonday={true} previousComponent={ - + } nextComponent={ - + } weekdays={[ "Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat" ]} months={[ diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx index c4d70f3..bd09dd9 100644 --- a/app/(tabs)/settings.tsx +++ b/app/(tabs)/settings.tsx @@ -8,7 +8,6 @@ import { Alert, } from 'react-native'; import { useRouter } from 'expo-router'; -import Ionicons from '@expo/vector-icons/Ionicons'; import { useSelector } from 'react-redux'; import { ThemedText } from '@/lib/components/ThemedText'; @@ -21,10 +20,11 @@ import { Request } from '@/lib/services/request'; import CustomModal from '@/lib/components/EditModal'; import { store } from '@/lib/store/store'; import { setSession, setReloadCalendar } from '@/lib/store/dataStore'; +import { ThemedIcon } from '@/lib/components/ThemedIcon'; export default function SettingsScreen() { const colorScheme = useColorScheme() ?? 'light'; - const { token, isLoading, setToken } = useToken(); + const { token, setToken } = useToken(); const session = useSelector( (state: any) => state.data.session ); const router = useRouter(); @@ -128,37 +128,37 @@ export default function SettingsScreen() { - + Naam setNameModalVisible( true )}> {name} - + - + Adres setAddressModalVisible( true )}> {street} {houseNumber}. {city} - + - + Notificaties router.push( '/(settings)/notifications' )}> Wijzigen - + diff --git a/lib/components/EditModal.tsx b/lib/components/EditModal.tsx index 03efd55..c108c07 100644 --- a/lib/components/EditModal.tsx +++ b/lib/components/EditModal.tsx @@ -60,10 +60,11 @@ const CustomModal: React.FC = ({ title, visible, onClose, onSave {field.title && {field.title}} handleInputChange( field.name, text )} value={inputValues[ field.name ] || ''} + placeholderTextColor={Colors[ colorScheme ].text} /> diff --git a/lib/components/ThemedIcon.tsx b/lib/components/ThemedIcon.tsx new file mode 100644 index 0000000..9f961d4 --- /dev/null +++ b/lib/components/ThemedIcon.tsx @@ -0,0 +1,13 @@ +// You can (explore) the built-in icon families and icons on the web at https://icons.expo.fyi/ + +import Ionicons from '@expo/vector-icons/Ionicons'; +import { type IconProps } from '@expo/vector-icons/build/createIconSet'; +import { type ComponentProps } from 'react'; +import { useColorScheme } from '@/lib/hooks/useColorScheme'; +import { Colors } from '@/lib/constants/Colors'; + +export function ThemedIcon({ style, ...rest }: IconProps['name']>) { + const colorScheme = useColorScheme() ?? 'light'; + + return ; +}