maartenvr98/Kliko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update dark mode

Browse source
This commit is contained in:
Maarten 2024-08-12 09:22:52 +02:00
parent 84aab76737
commit 4b2d3b8b32
6 changed files with 45 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/(explore)/category.tsx
View file

@ -18,7 +18,7 @@ export default function CategoryScreen() {
const colorScheme = useColorScheme() ?? 'light'; const colorScheme = useColorScheme() ?? 'light';
const navigation = useNavigation(); const navigation = useNavigation();
const [ description, setDescription ] = useState( '' ); const [ description, setDescription ] = useState( '' );
const viewCategory = useSelector((state: any) => state.data.viewCategory); const viewCategory = useSelector( (state: any) => state.data.viewCategory );
// Load item from storage // Load item from storage
useEffect( () => { useEffect( () => {
@ -43,6 +43,7 @@ export default function CategoryScreen() {
<RenderHtml <RenderHtml
contentWidth={width} contentWidth={width}
source={source} source={source}
baseStyle={{ color: Colors[ colorScheme ].text }}
/> />
</ThemedView> </ThemedView>
</ScrollView> </ScrollView>

6
app/(settings)/notifications.tsx
View file

@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Switch, TouchableOpacity, } from 'react-native'; import { SafeAreaView, ScrollView, StyleSheet, Switch, TouchableOpacity, } from 'react-native';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import { DateTimePickerAndroid, DateTimePickerEvent } from '@react-native-community/datetimepicker'; import { DateTimePickerAndroid, DateTimePickerEvent } from '@react-native-community/datetimepicker';
import Ionicons from '@expo/vector-icons/Ionicons';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { Colors } from '@/lib/constants/Colors'; import { Colors } from '@/lib/constants/Colors';
@ -14,6 +13,7 @@ import { useToken } from '@/lib/context/AppProvider';
import { Message } from '@/lib/services/message'; import { Message } from '@/lib/services/message';
import { store } from '@/lib/store/store'; import { store } from '@/lib/store/store';
import { setSession } from '@/lib/store/dataStore'; import { setSession } from '@/lib/store/dataStore';
import { ThemedIcon } from '@/lib/components/ThemedIcon';
export default function CategoryScreen() { export default function CategoryScreen() {
const colorScheme = useColorScheme() ?? 'light'; const colorScheme = useColorScheme() ?? 'light';
@ -166,7 +166,7 @@ export default function CategoryScreen() {
( (
<TouchableOpacity style={styles.listEdit} onPress={() => selectTime( 'dayBefore' )}> <TouchableOpacity style={styles.listEdit} onPress={() => selectTime( 'dayBefore' )}>
<ThemedText style={styles.listEditText}>Om {dayBefore}</ThemedText> <ThemedText style={styles.listEditText}>Om {dayBefore}</ThemedText>
<Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/> <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
</TouchableOpacity> </TouchableOpacity>
) : ) :
( (
@ -195,7 +195,7 @@ export default function CategoryScreen() {
( (
<TouchableOpacity style={styles.listEdit} onPress={() => selectTime( 'sameDay' )}> <TouchableOpacity style={styles.listEdit} onPress={() => selectTime( 'sameDay' )}>
<ThemedText style={styles.listEditText}>Om {sameDay}</ThemedText> <ThemedText style={styles.listEditText}>Om {sameDay}</ThemedText>
<Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/> <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
</TouchableOpacity> </TouchableOpacity>
) : ) :
( (

32
app/(tabs)/index.tsx
View file

@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, SafeAreaView, View, StatusBar } from 'react-native'; import { StyleSheet, ScrollView, SafeAreaView, View, StatusBar } from 'react-native';
// @ts-ignore // @ts-ignore
import CalendarPicker from 'react-native-calendar-picker'; import CalendarPicker from 'react-native-calendar-picker';
import Ionicons from '@expo/vector-icons/Ionicons';
import { useIsFocused } from '@react-navigation/core'; import { useIsFocused } from '@react-navigation/core';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { LogLevel, OneSignal } from 'react-native-onesignal'; import { LogLevel, OneSignal } from 'react-native-onesignal';
@ -15,12 +14,13 @@ import { useToken } from '@/lib/context/AppProvider';
import { Request } from '@/lib/services/request'; import { Request } from '@/lib/services/request';
import List from '@/lib/components/List'; import List from '@/lib/components/List';
import { Message } from '@/lib/services/message'; import { Message } from '@/lib/services/message';
import { ThemedIcon } from '@/lib/components/ThemedIcon';
export default function HomeScreen() { export default function HomeScreen() {
const colorScheme = useColorScheme() ?? 'light'; const colorScheme = useColorScheme() ?? 'light';
const isFocused = useIsFocused(); const isFocused = useIsFocused();
const session = useSelector((state: any) => state.data.session); const session = useSelector( (state: any) => state.data.session );
const reloadCalendar = useSelector((state: any) => state.data.reloadCalendar); const reloadCalendar = useSelector( (state: any) => state.data.reloadCalendar );
const { token, isLoading } = useToken(); const { token, isLoading } = useToken();
const [ name, setName ] = useState( ' ' ); // Default empty space to prevent layout shifting const [ name, setName ] = useState( ' ' ); // Default empty space to prevent layout shifting
const [ dates, setDates ] = useState<any | null>( [] ); const [ dates, setDates ] = useState<any | null>( [] );
@ -29,15 +29,15 @@ export default function HomeScreen() {
const loadOneSignal = () => { const loadOneSignal = () => {
// Remove this method to stop OneSignal Debugging // Remove this method to stop OneSignal Debugging
OneSignal.Debug.setLogLevel(LogLevel.Verbose); OneSignal.Debug.setLogLevel( LogLevel.Verbose );
// OneSignal Initialization // OneSignal Initialization
OneSignal.initialize("6ef15aa7-9dc0-4d8b-b6b1-e2005bcd3dc6"); OneSignal.initialize( "6ef15aa7-9dc0-4d8b-b6b1-e2005bcd3dc6" );
// Request permission // Request permission
OneSignal.Notifications.requestPermission(true).then(() => { OneSignal.Notifications.requestPermission( true ).then( () => {
// Retrieve one signal user token // Retrieve one signal user token
OneSignal.User.pushSubscription.getIdAsync().then((notificationsToken) => { OneSignal.User.pushSubscription.getIdAsync().then( (notificationsToken) => {
if (notificationsToken) { if (notificationsToken) {
Request.post( 'sessions/update', { token: token, notifications_token: notificationsToken } ).then( (response) => { Request.post( 'sessions/update', { token: token, notifications_token: notificationsToken } ).then( (response) => {
if (!response.success) { if (!response.success) {
@ -45,22 +45,22 @@ export default function HomeScreen() {
} }
} ); } );
} }
}) } )
}) } )
// Disable loading again // Disable loading again
setOnesignalLoaded(true); setOnesignalLoaded( true );
} }
// Load OneSignal // Load OneSignal
useEffect( () => { useEffect( () => {
loadOneSignal(); loadOneSignal();
}, [onesignalLoaded] ); }, [ onesignalLoaded ] );
// Load session // Load session
useEffect( () => { useEffect( () => {
setName(session.name); setName( session.name );
}, [session, isFocused]); }, [ session, isFocused ] );
useEffect( () => { useEffect( () => {
if (token) { if (token) {
@ -108,11 +108,13 @@ export default function HomeScreen() {
enableDateChange={false} enableDateChange={false}
customDatesStyles={dates} customDatesStyles={dates}
todayTextStyle={styles.today} todayTextStyle={styles.today}
textStyle={{ color: Colors[ colorScheme ].text }}
startFromMonday={true}
previousComponent={ previousComponent={
<Ionicons size={28} name="chevron-back"/> <ThemedIcon size={28} name="chevron-back"/>
} }
nextComponent={ nextComponent={
<Ionicons size={28} name="chevron-forward"/> <ThemedIcon size={28} name="chevron-forward"/>
} }
weekdays={[ "Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat" ]} weekdays={[ "Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat" ]}
months={[ months={[

16
app/(tabs)/settings.tsx
View file

@ -8,7 +8,6 @@ import {
Alert, Alert,
} from 'react-native'; } from 'react-native';
import { useRouter } from 'expo-router'; import { useRouter } from 'expo-router';
import Ionicons from '@expo/vector-icons/Ionicons';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { ThemedText } from '@/lib/components/ThemedText'; import { ThemedText } from '@/lib/components/ThemedText';
@ -21,10 +20,11 @@ import { Request } from '@/lib/services/request';
import CustomModal from '@/lib/components/EditModal'; import CustomModal from '@/lib/components/EditModal';
import { store } from '@/lib/store/store'; import { store } from '@/lib/store/store';
import { setSession, setReloadCalendar } from '@/lib/store/dataStore'; import { setSession, setReloadCalendar } from '@/lib/store/dataStore';
import { ThemedIcon } from '@/lib/components/ThemedIcon';
export default function SettingsScreen() { export default function SettingsScreen() {
const colorScheme = useColorScheme() ?? 'light'; const colorScheme = useColorScheme() ?? 'light';
const { token, isLoading, setToken } = useToken(); const { token, setToken } = useToken();
const session = useSelector( (state: any) => state.data.session ); const session = useSelector( (state: any) => state.data.session );
const router = useRouter(); const router = useRouter();
@ -128,37 +128,37 @@ export default function SettingsScreen() {
<ThemedView style={styles.listContainer}> <ThemedView style={styles.listContainer}>
<ThemedView style={styles.listItem}> <ThemedView style={styles.listItem}>
<ThemedView style={styles.listTitle}> <ThemedView style={styles.listTitle}>
<Ionicons size={20} name="person-outline" style={styles.listIcon}/> <ThemedIcon name="person-outline" size={20} style={styles.listIcon}/>
<ThemedText type="defaultSemiBold">Naam</ThemedText> <ThemedText type="defaultSemiBold">Naam</ThemedText>
</ThemedView> </ThemedView>
<TouchableOpacity style={styles.listEdit} onPress={() => setNameModalVisible( true )}> <TouchableOpacity style={styles.listEdit} onPress={() => setNameModalVisible( true )}>
<ThemedText style={styles.listEditText}>{name}</ThemedText> <ThemedText style={styles.listEditText}>{name}</ThemedText>
<Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/> <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
</TouchableOpacity> </TouchableOpacity>
</ThemedView> </ThemedView>
<ThemedView style={styles.listItem}> <ThemedView style={styles.listItem}>
<ThemedView style={styles.listTitle}> <ThemedView style={styles.listTitle}>
<Ionicons size={20} name="trail-sign-outline" style={styles.listIcon}/> <ThemedIcon size={20} name="trail-sign-outline" style={styles.listIcon}/>
<ThemedText type="defaultSemiBold">Adres</ThemedText> <ThemedText type="defaultSemiBold">Adres</ThemedText>
</ThemedView> </ThemedView>
<TouchableOpacity style={styles.listEdit} onPress={() => setAddressModalVisible( true )}> <TouchableOpacity style={styles.listEdit} onPress={() => setAddressModalVisible( true )}>
<ThemedText style={styles.listEditText}>{street} {houseNumber}. {city}</ThemedText> <ThemedText style={styles.listEditText}>{street} {houseNumber}. {city}</ThemedText>
<Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/> <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
</TouchableOpacity> </TouchableOpacity>
</ThemedView> </ThemedView>
<ThemedView style={styles.listItem}> <ThemedView style={styles.listItem}>
<ThemedView style={styles.listTitle}> <ThemedView style={styles.listTitle}>
<Ionicons size={20} name="notifications-outline" style={styles.listIcon}/> <ThemedIcon size={20} name="notifications-outline" style={styles.listIcon}/>
<ThemedText type="defaultSemiBold">Notificaties</ThemedText> <ThemedText type="defaultSemiBold">Notificaties</ThemedText>
</ThemedView> </ThemedView>
<TouchableOpacity style={styles.listEdit} onPress={() => router.push( '/(settings)/notifications' )}> <TouchableOpacity style={styles.listEdit} onPress={() => router.push( '/(settings)/notifications' )}>
<ThemedText style={styles.listEditText}>Wijzigen</ThemedText> <ThemedText style={styles.listEditText}>Wijzigen</ThemedText>
<Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/> <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
</TouchableOpacity> </TouchableOpacity>
</ThemedView> </ThemedView>
</ThemedView> </ThemedView>

3
lib/components/EditModal.tsx
View file

@ -60,10 +60,11 @@ const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave
<ThemedView key={index} style={styles.inputContainer}> <ThemedView key={index} style={styles.inputContainer}>
{field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>} {field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>}
<TextInput <TextInput
style={styles.input} style={[styles.input, {color: Colors[ colorScheme ].text}]}
placeholder={field.placeholder} placeholder={field.placeholder}
onChangeText={(text) => handleInputChange( field.name, text )} onChangeText={(text) => handleInputChange( field.name, text )}
value={inputValues[ field.name ] || ''} value={inputValues[ field.name ] || ''}
placeholderTextColor={Colors[ colorScheme ].text}
/> />
</ThemedView> </ThemedView>

13
lib/components/ThemedIcon.tsx Normal file
View file

@ -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<ComponentProps<typeof Ionicons>['name']>) {
const colorScheme = useColorScheme() ?? 'light';
return <Ionicons color={Colors[ colorScheme ].text} style={[ style ]} {...rest} />;
}