Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed darkmode #59

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixed darkmode #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
68e30d3
Fixed the time,connection,wifi bar, battery on the top to show while …
CohenAdkins Jun 21, 2024
d9b668c
replaced random white space with black, add new world clock shows wh…
CohenAdkins Jun 22, 2024
daa2775
Merge pull request #1 from CohenAdkins/develop
CohenAdkins Jun 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,666 changes: 3,248 additions & 1,418 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,28 @@
"dependencies": {
"@expo/metro-runtime": "~3.1.3",
"@expo/ngrok": "^4.1.3",
"@react-native-community/datetimepicker": "^7.6.2",
"@react-native-community/datetimepicker": "7.7.0",
"@react-native-picker/picker": "^2.6.1",
"@react-navigation/bottom-tabs": "^6.5.12",
"@react-navigation/native": "^6.1.10",
"@react-navigation/native-stack": "^6.9.18",
"expo": "^50.0.7",
"@types/react": "~18.2.45",
"expo": "^51.0.14",
"expo-haptics": "^12.8.1",
"expo-notifications": "~0.27.8",
"expo-sms": "~11.7.1",
"expo-status-bar": "~1.11.1",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "^0.73.4",
"react-native": "0.73.6",
"react-native-modal-datetime-picker": "^17.1.0",
"react-native-picker-select": "^9.0.1",
"react-native-push-notification": "^8.1.1",
"react-native-vector-icons": "^10.0.3",
"react-native-web": "~0.19.6",
"typescript": "^5.3.0",
"@types/react": "~18.2.45",
"expo-notifications": "~0.27.6"
"typescript": "^5.3.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
Expand Down
21 changes: 11 additions & 10 deletions screens/AlarmFeatures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
import React from 'react';
import { View, Text } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { View, Text, StatusBar, SafeAreaView, StyleSheet } from 'react-native';
import { useDarkMode } from '../contexts/DarkModeContext';
import { styles, textStyles } from '../styles';
import { getDynamicStyles } from '../styles'; // Import the dynamic styles

function AlarmFeatures() {
const { isDarkMode } = useDarkMode();

// Define dynamic styles based on isDarkMode
const containerStyle = isDarkMode ? styles.darkContainer : styles.container;
const textStyle = isDarkMode ? { color: 'white' } : { color: 'black' };
// Get dynamic styles based on isDarkMode
const dynamicStyles = getDynamicStyles(isDarkMode);

return (
<View style={containerStyle}>
<Text style={[textStyles.titleText, textStyle]}>Alarm Features</Text>
<StatusBar style={isDarkMode ? 'light' : 'dark'} />
</View>
<SafeAreaView style={dynamicStyles.container}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<View style={StyleSheet.absoluteFill}>
<Text style={[dynamicStyles.topBarTitle, { padding: 20 }]}>Alarm Features</Text>
{/* Add your Alarm Features component content here */}
</View>
</SafeAreaView>
);
}

Expand Down
56 changes: 23 additions & 33 deletions screens/Alarms.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import React, { useState } from 'react';
import { Switch, View, Text, TouchableOpacity, ScrollView } from 'react-native';
import { View, Text, ScrollView, StatusBar } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import { styles, textStyles } from '../styles';
import { StatusBar } from 'expo-status-bar';
import { getDynamicStyles } from '../styles'; // Import the dynamic styles
import AlarmClock from '../components/AlarmClock';
import AlarmCard from '../components/AlarmCard';
import { Alarm } from '../types/AlarmTypes';

import { useDarkMode } from '../contexts/DarkModeContext'; // Import the hook

export default function Alarms() {
Expand All @@ -15,11 +13,8 @@ export default function Alarms() {

const { isDarkMode } = useDarkMode();

// Define dynamic styles based on isDarkMode
const dynamicStyles = {
backgroundColor: isDarkMode ? 'darkgrey' : 'white',
color: isDarkMode ? 'white' : 'black',
};
// Get dynamic styles based on isDarkMode
const dynamicStyles = getDynamicStyles(isDarkMode);

// Function to handle saving alarm data
const handleSaveAlarm = (alarmData: Alarm) => {
Expand Down Expand Up @@ -52,32 +47,27 @@ export default function Alarms() {
setSelectedAlarm(alarm);
};

const containerStyle = isDarkMode
? styles.darkContainer
: { ...styles.container, ...{ marginTop: 10 } }; // Adjust as necessary for dark mode
const buttonTextStyle = isDarkMode
? { ...textStyles.buttonText, color: 'white' }
: textStyles.buttonText;

return (
<ScrollView>
<Text style={{ ...textStyles.titleText, padding: 20, color: dynamicStyles.color }}>
Alarm Clock
</Text>

<AlarmClock editingAlarm={selectedAlarm} onAlarmSave={handleSaveAlarm} />
<View style={dynamicStyles.container}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={isDarkMode ? '#000000' : '#ffffff'} // Set the correct background color
/>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<Text style={[dynamicStyles.topBarTitle, { padding: 20 }]}>Alarm Clock</Text>

{/* Render a list of AlarmCards */}
{alarms.map((alarm) => (
<AlarmCard
key={alarm.id}
alarm={alarm}
onToggleAlarm={handleToggleAlarm}
onDelete={handleDeleteAlarm}
/>
))}
<AlarmClock editingAlarm={selectedAlarm} onAlarmSave={handleSaveAlarm} />

<StatusBar />
</ScrollView>
{/* Render a list of AlarmCards */}
{alarms.map((alarm) => (
<AlarmCard
key={alarm.id}
alarm={alarm}
onToggleAlarm={handleToggleAlarm}
onDelete={handleDeleteAlarm}
/>
))}
</ScrollView>
</View>
);
}
122 changes: 67 additions & 55 deletions screens/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React, { useState, useEffect } from 'react';
import { Text, ScrollView, View, TouchableOpacity } from 'react-native';
import { Text, ScrollView, View, TouchableOpacity, StatusBar } from 'react-native';
import { useNavigation } from '@react-navigation/native';
// import AlarmClock from './Alarm';
import moment from 'moment-timezone';
import { Picker } from '@react-native-picker/picker';
import { styles, textStyles } from '../styles/index';
import { useDarkMode } from '../contexts/DarkModeContext';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

export default function Home() {
const { isDarkMode } = useDarkMode(); // Use the hook
const navigation = useNavigation();
const insets = useSafeAreaInsets();
const [currentTime, setCurrentTime] = useState(new Date());
const [selectedTimeZone, setSelectedTimeZone] = useState(moment.tz.guess());
const [screenClock, setScreenClock] = useState<string[]>([]);
Expand All @@ -25,8 +26,10 @@ export default function Home() {

// Define dynamic styles based on isDarkMode
const dynamicStyles = {
backgroundColor: isDarkMode ? 'darkgrey' : 'white',
backgroundColor: isDarkMode ? '#000000' : 'white',
color: isDarkMode ? 'white' : 'black',
buttonBackgroundColor: isDarkMode ? '#FFFFFF' : '#000000',
buttonTextColor: isDarkMode ? '#000000' : '#FFFFFF',
};

const addNewTimeZone = (zone: string) => {
Expand All @@ -44,62 +47,71 @@ export default function Home() {
};

return (
<ScrollView style={[styles.container, { backgroundColor: dynamicStyles.backgroundColor }]}>
<Text style={{ ...textStyles.titleText, padding: 20, color: dynamicStyles.color }}>
World Clock
</Text>
<SafeAreaView style={{ flex: 1, backgroundColor: dynamicStyles.backgroundColor }}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={dynamicStyles.backgroundColor}
/>
<ScrollView
style={[styles.container, { backgroundColor: dynamicStyles.backgroundColor, paddingTop: insets.top }]}
contentContainerStyle={{ paddingBottom: insets.bottom }}
>
<Text style={{ ...textStyles.titleText, padding: 20, color: dynamicStyles.color }}>
World Clock
</Text>

<View style={{ height: 10 }} />
{/* Managing picker for the time zones */}
<View>
<TouchableOpacity
onPress={() => {
showTimeZonePicker();
if (modalVisible) {
addNewTimeZone(selectedTimeZone); // Add the selected time zone
}
}}
style={styles.button}
>
<Text style={textStyles.buttonText}>
{modalVisible ? 'Confirm Clock' : 'Add New World Clock'}
</Text>
</TouchableOpacity>
{modalVisible && (
<Picker
// style={styles.picker}: Unused style
selectedValue={selectedTimeZone}
onValueChange={(itemValue) => {
setSelectedTimeZone(itemValue);
<View style={{ height: 10 }} />
{/* Managing picker for the time zones */}
<View>
<TouchableOpacity
onPress={() => {
showTimeZonePicker();
if (modalVisible) {
addNewTimeZone(selectedTimeZone); // Add the selected time zone
}
}}
style={[styles.button, { backgroundColor: dynamicStyles.buttonBackgroundColor }]}
>
{timeZones.map((zone) => (
<Picker.Item key={zone} label={zone} value={zone} />
))}
</Picker>
)}
</View>
{/* Displays different timezones */}
<View>
{screenClock.map((zone, index) => (
<View
key={index}
style={[styles.time, { backgroundColor: dynamicStyles.backgroundColor }]}
>
<Text style={{ ...styles.buttonText, color: dynamicStyles.color }}>{zone}</Text>
<TouchableOpacity onPress={() => removeTimeZone(index)} style={styles.deleteButton}>
<Text style={styles.deleteButtonText}>Delete</Text>
</TouchableOpacity>
<View style={[styles.box, { backgroundColor: dynamicStyles.backgroundColor }]}>
<Text style={{ ...styles.time, color: dynamicStyles.color }}>
{moment().tz(zone).format('hh:mm:ss A')}
</Text>
<Text style={[textStyles.buttonText, { color: dynamicStyles.buttonTextColor }]}>
{modalVisible ? 'Confirm Clock' : 'Add New World Clock'}
</Text>
</TouchableOpacity>
{modalVisible && (
<Picker
selectedValue={selectedTimeZone}
onValueChange={(itemValue) => {
setSelectedTimeZone(itemValue);
}}
itemStyle={{ color: dynamicStyles.color }} // Style for the picker items
>
{timeZones.map((zone) => (
<Picker.Item key={zone} label={zone} value={zone} color={dynamicStyles.color} />
))}
</Picker>
)}
</View>
{/* Displays different timezones */}
<View>
{screenClock.map((zone, index) => (
<View
key={index}
style={[styles.time, { backgroundColor: dynamicStyles.backgroundColor }]}
>
<Text style={{ ...styles.buttonText, color: dynamicStyles.color }}>{zone}</Text>
<TouchableOpacity onPress={() => removeTimeZone(index)} style={styles.deleteButton}>
<Text style={styles.deleteButtonText}>Delete</Text>
</TouchableOpacity>
<View style={[styles.box, { backgroundColor: dynamicStyles.backgroundColor }]}>
<Text style={{ ...styles.time, color: dynamicStyles.color }}>
{moment().tz(zone).format('hh:mm:ss A')}
</Text>
</View>
</View>
</View>
))}
</View>
))}
</View>

<View style={{ height: 200 }} />
</ScrollView>
<View style={{ height: 200 }} />
</ScrollView>
</SafeAreaView>
);
}
34 changes: 15 additions & 19 deletions screens/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,69 @@
import React, { useEffect } from 'react';
import { View, Text, Switch, StyleSheet, Button } from 'react-native';
import { View, Text, Button, StatusBar } from 'react-native';
import { styles, textStyles } from '../styles';
import { useDarkMode } from '../contexts/DarkModeContext'; // Make sure to import useDarkMode
import { useDarkMode } from '../contexts/DarkModeContext';
import SettingsToggle from '../components/SettingsToggle';
import * as Notifications from 'expo-notifications';

function Setting() {
useEffect(() => {
// Request permission to send notifications (this will prompt the user)
Notifications.requestPermissionsAsync().then(({ status }) => {
// Request permission to send notifications
const requestPermission = async () => {
const { status } = await Notifications.requestPermissionsAsync();
if (status === 'granted') {
// Schedule a notification for 5 seconds from now
scheduleNotification();
} else {
console.warn('Permission to receive notifications was denied');
}
});
};

requestPermission();

// Clean up any scheduled notifications when the component unmounts
return () => {
Notifications.cancelAllScheduledNotificationsAsync();
};
}, []);

const scheduleNotification = () => {
// Set the content and trigger for the notification
console.log('here');
const scheduleNotification = async () => {
const notificationContent = {
title: 'Hello!',
body: 'This is a basic Expo notification.',
};

const trigger = {
seconds: 5, // Notify after 5 seconds
seconds: 5,
};

// Schedule the notification
Notifications.scheduleNotificationAsync({
await Notifications.scheduleNotificationAsync({
content: notificationContent,
trigger,
});
};

useEffect(() => {
// ... existing permission request logic

const notificationListener = Notifications.addNotificationReceivedListener((notification) => {
// Handle notification in foreground
console.log('Notification received in foreground:', notification.request.content.title);
// Play a sound, display an alert, or update UI here
});

return () => Notifications.removeNotificationSubscription(notificationListener);
}, []);

const { isDarkMode, toggleSwitch } = useDarkMode(); // Use the useDarkMode hook
const { isDarkMode, toggleSwitch } = useDarkMode();

const backgroundColor = isDarkMode ? 'darkgrey' : 'white';
const backgroundColor = isDarkMode ? '#000000' : 'white';
const textColor = isDarkMode ? 'white' : 'black';

return (
<View style={[styles.container, { backgroundColor }]}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<Text style={[textStyles.titleText, { color: textColor }]}>Settings</Text>

<SettingsToggle
name="Dark Mode"
value={isDarkMode}
onValueChange={toggleSwitch}
></SettingsToggle>
/>

<Button title="Schedule Notification" onPress={scheduleNotification} />
</View>
Expand Down
Loading