Update dark mode
This commit is contained in:
parent
84aab76737
commit
4b2d3b8b32
6 changed files with 45 additions and 28 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
) :
|
) :
|
||||||
(
|
(
|
||||||
|
|
|
@ -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={[
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
13
lib/components/ThemedIcon.tsx
Normal 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} />;
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue