From 058faeeb535cd182679b24259194877360f018ca Mon Sep 17 00:00:00 2001 From: Deep Patel Date: Mon, 22 Apr 2024 21:41:37 -0400 Subject: [PATCH] styled category task view + edit task --- components/ActiveTasks.js | 12 +- navigators/MainNavigator.js | 3 +- screens/CategoryTasksView.js | 14 ++- screens/EditTaskScreen.js | 114 ++++++++++-------- styles/ActiveTasksStyle.js | 9 +- styles/AddPaymentMethodsStyle.js | 192 +++++++++++++++---------------- styles/AddStyles.js | 22 ++++ styles/CategoryTasksViewStyle.js | 30 ++++- 8 files changed, 238 insertions(+), 158 deletions(-) diff --git a/components/ActiveTasks.js b/components/ActiveTasks.js index a0162f10..c0e1a39e 100644 --- a/components/ActiveTasks.js +++ b/components/ActiveTasks.js @@ -2,10 +2,11 @@ import React, { useState, useEffect } from 'react'; import { View, Text, TouchableOpacity, Switch } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { format, startOfMonth, endOfMonth, parseISO, isSameMonth } from 'date-fns'; -import styles from '../styles/ActiveTasksStyle'; import { fetchTasksForUser } from '../services/AuthAPI'; import eventEmitter from '../components/EventEmitter'; import { useCurrentMonth } from './CurrentMonthContext'; +import { useTheme } from "../services/ThemeContext"; +import getStyles from "../styles/ActiveTasksStyle"; const ActiveTasks = ({ userID }) => { @@ -18,6 +19,8 @@ const ActiveTasks = ({ userID }) => { { label: 'Gym', color: '#FFD700' }, ]); const [currentMonthOnly, setCurrentMonthOnly] = useState(false); + const { theme } = useTheme(); + const styles = getStyles(theme); useEffect(() => { const fetchAndCountTasks = async () => { @@ -54,7 +57,7 @@ const ActiveTasks = ({ userID }) => { return ( - Showing: {currentMonthOnly ? "This Month's Tasks" : "All Time Tasks"} + Showing: {currentMonthOnly ? "This Month's Tasks" : "All Time Tasks"} { navigation.navigate('CategoryTasksView', { category: category.label, userID })} + onPress={() => navigation.navigate('CategoryTasksView', { + category: category.label, + userID: userID, + })} > {category.count} {category.label} diff --git a/navigators/MainNavigator.js b/navigators/MainNavigator.js index 361d479f..eb379bda 100644 --- a/navigators/MainNavigator.js +++ b/navigators/MainNavigator.js @@ -96,11 +96,12 @@ function MainNavigator({ isLoggedIn }) { { const { theme } = useTheme(); const styles = getStyles(theme); + useEffect(() => { const fetchCategoryTasks = async () => { const allTasks = await fetchTasksForUser(userID); @@ -28,8 +29,15 @@ const CategoryTasksView = ({ route, navigation }) => { }, [category, userID]); return ( - + + + navigation.goBack()}> + ← + {`${category} Active Tasks`} + + + item.id.toString()} @@ -48,6 +56,8 @@ const CategoryTasksView = ({ route, navigation }) => { )} /> + + ); }; diff --git a/screens/EditTaskScreen.js b/screens/EditTaskScreen.js index 17953b6d..d2fbb4fc 100644 --- a/screens/EditTaskScreen.js +++ b/screens/EditTaskScreen.js @@ -5,7 +5,8 @@ import { Text, View, Switch, - TextInput + TextInput, + Pressable } from "react-native"; import Header from "../components/Header"; import DateTimePicker from "../components/DateTimePicker"; @@ -77,57 +78,70 @@ const EditTaskScreen = ({ route, navigation }) => { }; return ( - -
navigation.goBack()} /> - - - - - - - Priority: - setPriority(itemValue)} - style={styles.priorityPicker} - > - - - - + + + navigation.goBack()}> + ← + + Edit Task + - - Task Completed: - { - setIsCompleted(newVal); - if (newVal) handleCompleteAndDeleteTask(); - }} + + + - - - + + + + + + Priority: + setPriority(itemValue)} + style={styles.priorityPicker} + > + + + + + + + Task Completed: + { + setIsCompleted(newVal); + if (newVal) handleCompleteAndDeleteTask(); + }} + /> + + + + + ); }; diff --git a/styles/ActiveTasksStyle.js b/styles/ActiveTasksStyle.js index 8329bf47..0fcc8dc7 100644 --- a/styles/ActiveTasksStyle.js +++ b/styles/ActiveTasksStyle.js @@ -3,7 +3,7 @@ import { StyleSheet, Dimensions } from 'react-native'; const { width } = Dimensions.get('window'); // Get the window width const circleSize = width / 4 - 10; // Calculate size to fit 4 across with padding -export default StyleSheet.create({ +const getStyles = (theme) => StyleSheet.create({ container: { flexDirection: 'row', justifyContent: 'space-around', @@ -48,4 +48,9 @@ export default StyleSheet.create({ lightText: { color: '#000000', // Dark text for light backgrounds }, -}); \ No newline at end of file + taskText: { + color: theme === 'dark' ? 'white' : 'black', + }, +}); + +export default getStyles; \ No newline at end of file diff --git a/styles/AddPaymentMethodsStyle.js b/styles/AddPaymentMethodsStyle.js index 749fea32..97287371 100644 --- a/styles/AddPaymentMethodsStyle.js +++ b/styles/AddPaymentMethodsStyle.js @@ -4,100 +4,100 @@ const getStyles = (theme) => StyleSheet.create({ screen : { backgroundColor: theme === 'dark' ? '#262626' : "white", }, - container: { - flex: 1, - backgroundColor: theme === 'dark' ? '#262626' : "white", - position: 'relative', - }, - header: { - flexDirection: 'row', - height: 80, - justifyContent: 'space-between', - alignItems: 'center', - backgroundColor: '#3e5e60', - paddingHorizontal: 20, - }, - backText: { - marginTop: 30, - fontSize: 24, - fontWeight: '700', - color: 'white', - }, - contentContainer: { - marginTop: 25, - }, - titleContainer: { - alignItems: 'center', - marginTop: 85, - }, - title: { - marginTop: 30, - color: 'white', - fontSize: 24, - fontWeight: 'bold', - alignItems: 'center', - }, - label: { - color: theme === 'dark' ? 'white' : 'black', - marginRight: 10, // Add some margin to the right of the label for spacing - fontWeight: 'bold', - marginTop: 1, - marginLeft: 13, - }, - input: { - height: 50, - margin: 12, - marginBottom: 20, - borderWidth: 1, - borderColor: 'grey', - padding: 10, - textAlignVertical: 'top', - color: theme === 'dark' ? 'white' : 'black', - borderRadius: 5, - width: '80%', - }, - buttonContainer: { - position: 'absolute', - bottom: 70, - flexDirection: 'row', - justifyContent: 'space-around', - alignItems: 'center', - paddingHorizontal: 10, - }, - saveButtonContainer: { - flex: 1, - alignItems: 'center', - }, - deleteButtonContainer: { - flex: 1, - alignItems: 'center', - }, - saveButton: { - backgroundColor: '#5da8af', - padding: 10, - borderRadius: 10, - height: 60, - justifyContent: 'center', - }, - deleteButton: { - backgroundColor: '#c60e0b', - padding: 10, - borderRadius: 10, - height: 60, - justifyContent: 'center', - }, - saveButtonText: { - color: '#ffffff', - textAlign: 'center', - fontSize: 16, - fontWeight: 'bold', - }, - deleteButtonText: { - color: '#ffffff', - textAlign: 'center', - fontSize: 16, - fontWeight: 'bold', - }, - }); + container: { + flex: 1, + backgroundColor: theme === 'dark' ? '#262626' : "white", + position: 'relative', + }, + header: { + flexDirection: 'row', + height: 80, + justifyContent: 'space-between', + alignItems: 'center', + backgroundColor: '#3e5e60', + paddingHorizontal: 20, + }, + backText: { + marginTop: 30, + fontSize: 24, + fontWeight: '700', + color: 'white', + }, + contentContainer: { + marginTop: 25, + }, + titleContainer: { + alignItems: 'center', + marginTop: 85, + }, + title: { + marginTop: 30, + color: 'white', + fontSize: 24, + fontWeight: 'bold', + alignItems: 'center', + }, + label: { + color: theme === 'dark' ? 'white' : 'black', + marginRight: 10, // Add some margin to the right of the label for spacing + fontWeight: 'bold', + marginTop: 1, + marginLeft: 13, + }, + input: { + height: 50, + margin: 12, + marginBottom: 20, + borderWidth: 1, + borderColor: 'grey', + padding: 10, + textAlignVertical: 'top', + color: theme === 'dark' ? 'white' : 'black', + borderRadius: 5, + width: '80%', + }, + buttonContainer: { + position: 'absolute', + bottom: 70, + flexDirection: 'row', + justifyContent: 'space-around', + alignItems: 'center', + paddingHorizontal: 10, + }, + saveButtonContainer: { + flex: 1, + alignItems: 'center', + }, + deleteButtonContainer: { + flex: 1, + alignItems: 'center', + }, + saveButton: { + backgroundColor: '#5da8af', + padding: 10, + borderRadius: 10, + height: 60, + justifyContent: 'center', + }, + deleteButton: { + backgroundColor: '#c60e0b', + padding: 10, + borderRadius: 10, + height: 60, + justifyContent: 'center', + }, + saveButtonText: { + color: '#ffffff', + textAlign: 'center', + fontSize: 16, + fontWeight: 'bold', + }, + deleteButtonText: { + color: '#ffffff', + textAlign: 'center', + fontSize: 16, + fontWeight: 'bold', + }, +}); - export default getStyles; \ No newline at end of file +export default getStyles; \ No newline at end of file diff --git a/styles/AddStyles.js b/styles/AddStyles.js index e35eef91..82d49735 100644 --- a/styles/AddStyles.js +++ b/styles/AddStyles.js @@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native'; const getStyles = (theme) => StyleSheet.create({ screen: { flex: 1, + padding: 20, backgroundColor: theme === 'dark' ? '#262626' : "white", }, container: { @@ -10,6 +11,27 @@ const getStyles = (theme) => StyleSheet.create({ backgroundColor: theme === 'dark' ? '#262626' : "white", padding: 10, }, + header: { + flexDirection: 'row', + height: 80, + justifyContent: 'space-between', + alignItems: 'center', + backgroundColor: '#3e5e60', + paddingHorizontal: 20, + }, + backText: { + marginTop: 30, + fontSize: 24, + fontWeight: '700', + color: 'white', + }, + title: { + marginTop: 30, + color: 'white', + fontSize: 24, + fontWeight: 'bold', + alignItems: 'center', + }, addButton: { alignItems: "center", padding: 10, diff --git a/styles/CategoryTasksViewStyle.js b/styles/CategoryTasksViewStyle.js index e7717f8b..1209d317 100644 --- a/styles/CategoryTasksViewStyle.js +++ b/styles/CategoryTasksViewStyle.js @@ -6,14 +6,28 @@ const getStyles = (theme) => StyleSheet.create({ padding: 20, backgroundColor: theme === 'dark' ? '#262626' : "white", }, + header: { + flexDirection: 'row', + height: 80, + justifyContent: 'space-between', + alignItems: 'center', + backgroundColor: '#3e5e60', + paddingHorizontal: 20, + }, + backText: { + marginTop: 30, + fontSize: 24, + fontWeight: '700', + color: 'white', + }, title: { fontSize: 24, fontWeight: 'bold', - color: '#333', // Dark grey text for better readability - marginBottom: 20, + color: 'white', // Dark grey text for better readability + marginTop: 35, }, taskItem: { - backgroundColor: 'white', // White background for task items + backgroundColor: theme === 'dark' ? '#262626' : "white", borderRadius: 10, // Rounded corners padding: 15, marginBottom: 10, @@ -22,10 +36,18 @@ const getStyles = (theme) => StyleSheet.create({ shadowOpacity: 0.1, shadowRadius: 6, elevation: 3, + borderWidth: 1, + borderStyle: 'solid', + borderColor: 'black', + }, + taskName: { + fontSize: 18, + color: theme === 'dark' ? 'white' : 'black', + fontWeight: '900', }, taskDetail: { fontSize: 16, - color: '#666', // Medium grey for text + color: theme === 'dark' ? 'white' : 'black', marginBottom: 5, }, taskPriority: {