merge RC1Deep

SCCapstone · Apr 1, 2024 · 44bfabc · 44bfabc
2 parents b9f8209 + 296e222
commit 44bfabc
Show file tree

Hide file tree

Showing 15 changed files with 99 additions and 56 deletions.
diff --git a/assets/splash.png b/assets/splash.png
diff --git a/components/AccountButton.js b/components/AccountButton.js
@@ -1,9 +1,10 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import getStyles from '../styles/HomeScreenStyles';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useTheme } from "../services/ThemeContext";
 
-const AccountButton = ({navigation}) => {
+const AccountButton = ({ navigation }) => {
   const { theme } = useTheme();
   const styles = getStyles(theme);
   const onAccountPress = () => {
@@ -13,10 +14,10 @@ const AccountButton = ({navigation}) => {
   return (
     <View style={styles.accountContainer}>
       <TouchableOpacity onPress={onAccountPress}>
-        <Text style={styles.accountButton}>👤</Text>
+        <MaterialIcons name="settings" size={24} color={'white'} />
       </TouchableOpacity>
     </View>
   );
 };
 
-export default AccountButton;
+export default AccountButton;
diff --git a/navigators/TabNavigation.js b/navigators/TabNavigation.js
@@ -74,11 +74,14 @@ const TabNavigator = ({ route }) => {
             <MaterialCommunityIcons name={iconName} size={size} color={color} />
           );
         },
-        tabBarActiveTintColor: '#5da8af', // Color of the icon and text when the tab is active
+        tabBarActiveTintColor: '#63D4D5', // Color of the icon and text when the tab is active
         tabBarInactiveTintColor: 'white',
         tabBarStyle: {
           display: "flex",
           backgroundColor: '#3e5e60', 
+          borderTopWidth: 0, // Set borderTopWidth to 0 to remove the top border
+          elevation: 0,
+          shadowOpacity: 0,
         },
       })}
     >

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "@expo/react-native-action-sheet": "^4.0.1",
     "@firebase/firestore": "^4.4.2",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-picker/picker": "2.6.1",

diff --git a/screens/AddPaymentMethodsScreen.js b/screens/AddPaymentMethodsScreen.js
@@ -1,5 +1,5 @@
 import React, { useState} from 'react';
-import { View, Text, TextInput, Pressable, ScrollView, Alert } from 'react-native';
+import { View, Text, TextInput, Pressable, ScrollView, Alert, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/core';
 import { useTheme } from '../services/ThemeContext';
 import { savePaymentMethodForUser, fetchAllPaymentMethodsForUser } from "../services/AuthAPI";
@@ -129,11 +129,11 @@ const AddPaymentMethodsScreen = () => {
 
       <View style={styles.buttonContainer}> 
         <View style={styles.saveButtonContainer}>
-          <Pressable 
+          <TouchableOpacity 
             onPress={handleSavePaymentMethod}
             style={styles.saveButton}>
             <Text style={styles.saveButtonText}>Save Payment Method</Text>
-          </Pressable>
+          </TouchableOpacity>
         </View>
       </View>
 

diff --git a/screens/EditPaymentMethodsScreen.js b/screens/EditPaymentMethodsScreen.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, Text, TextInput, Pressable, ScrollView, Alert } from 'react-native';
+import { View, Text, TextInput, Pressable, ScrollView, Alert, TouchableOpacity } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/core'; // useRoute to receive parameters
 import { deletePaymentMethodForUser, updatePaymentMethodForUser, fetchAllPaymentMethodsForUser } from "../services/AuthAPI"; 
 import { getAuth } from 'firebase/auth';
@@ -175,19 +175,19 @@ const EditPaymentMethodsScreen = () => {
 
       <View style={styles.buttonContainer}>
             <View style={styles.saveButtonContainer}>
-              <Pressable 
+              <TouchableOpacity 
                 onPress={handleUpdatePaymentMethod} // Update this to handleUpdatePaymentMethod
                 style={styles.saveButton}>
                 <Text style={styles.saveButtonText}>Update Payment Method</Text>
-              </Pressable>
+              </TouchableOpacity>
             </View>
 
             <View style={styles.deleteButtonContainer}>
-              <Pressable 
+              <TouchableOpacity 
                 onPress={handleDeletePaymentMethod}
                 style={styles.deleteButton}>
                 <Text style={styles.deleteButtonText}>Delete Payment Method</Text>
-              </Pressable>
+              </TouchableOpacity>
             </View>
           </View>
     </View>

diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
@@ -59,7 +59,17 @@ const HomeScreen = ({ route }) => {
   return (
     <View style={styles.container}>
       <View style={styles.homeTextContainer}>
-        <Text style={styles.homeText}>Today</Text>
+        <View style={styles.headerContainer}>
+          <View style={{flex: 1}}> 
+            {/* Empty View as Spacer */}
+          </View>
+          <View style={{flex: 2, alignItems: 'center'}}> 
+            <Text style={styles.homeText}>Today</Text>
+          </View>
+          <View style={{flex: 1, alignItems: 'flex-end'}}> 
+            <AccountButton navigation={navigation} />
+          </View>
+        </View>
         <View style={{ width: 24 }} />
       </View>
       <View style={styles.topContainer}>
@@ -68,7 +78,8 @@ const HomeScreen = ({ route }) => {
        </View>
         <AccountButton navigation={navigation} />
       </View>
-      <ProgressBar progress={taskCount} />
+      <ProgressBar progress={taskCount}/>
+      <Text style={styles.title}>Active Tasks</Text>
       <View style={styles.categoryContainer}>
         <CategoryCounter count={3} label="School" color="#57BCBE" />
         <CategoryCounter count={2} label="Personal" color="#4BA4A6" />

diff --git a/screens/LoginScreen.js b/screens/LoginScreen.js
@@ -58,4 +58,4 @@ const LoginScreen = ({ navigation }) => {
   );
 };
 
-export default LoginScreen;
+export default LoginScreen;
diff --git a/screens/PaymentMethodsScreen.js b/screens/PaymentMethodsScreen.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useIsFocused } from '@react-navigation/native';
-import { View, Text, Pressable, FlatList } from 'react-native';
+import { View, Text, Pressable, FlatList, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/core'; 
 import { useTheme } from '../services/ThemeContext';
 import { fetchAllPaymentMethodsForUser } from "../services/AuthAPI";
@@ -28,7 +28,7 @@ const PaymentMethodsScreen = () => {
   }, [isFocused, userId]);
 
   const renderPaymentMethod = ({ item }) => (
-    <Pressable onPress={() => navigation.navigate('EditPaymentMethods', {
+    <TouchableOpacity onPress={() => navigation.navigate('EditPaymentMethods', {
       id: item.id,
       nickname: item.nickname,
       creditCard: item.creditCard,
@@ -40,7 +40,7 @@ const PaymentMethodsScreen = () => {
       <View style={styles.paymentsContainer}>
         <Text style={styles.paymentMethod}>{item.nickname}</Text>
       </View>
-    </Pressable>
+    </TouchableOpacity>
   );
 
 
@@ -63,31 +63,31 @@ const PaymentMethodsScreen = () => {
         keyExtractor={item => item.id.toString()}
         contentContainerStyle={{ alignItems: 'center' }}
         ListFooterComponent={
-          <Pressable onPress={() => navigation.navigate('AddPaymentMethods')} style={{ marginVertical: 20 }}>
-            <Pressable onPress={() => navigation.navigate('AddPaymentMethods')}>
+          <TouchableOpacity onPress={() => navigation.navigate('AddPaymentMethods')} style={{ marginVertical: 20 }}>
+            <TouchableOpacity onPress={() => navigation.navigate('AddPaymentMethods')}>
               <View style={styles.addPaymentContainer}>
               <Text style={styles.addPayment}>
                 Add a payment method
                 <Text style={styles.plusStyle}>  +</Text>
               </Text>
               </View>
-            </Pressable>
-          </Pressable>
+            </TouchableOpacity>
+          </TouchableOpacity>
         }
         />
         ) : (
           <View style={styles.noPaymentContainer}>
             <Text style={styles.noPaymentText}>
               You have no payment methods.
             </Text>
-          <Pressable onPress={() => navigation.navigate('AddPaymentMethods')}>
+          <TouchableOpacity onPress={() => navigation.navigate('AddPaymentMethods')}>
             <View style={styles.addPaymentContainer}>
               <Text style={styles.addPayment}>
                 Add a payment method
                 <Text style={styles.plusStyle}> +</Text>
               </Text>
             </View>
-          </Pressable>
+          </TouchableOpacity>
         </View>
       )}
     </View>

diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, TextInput, Modal, Alert, Pressable, ScrollView, ActivityIndicator } from 'react-native';
+import { View, Text, TextInput, Modal, Alert, Pressable, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/core';
 import { updateUserProfile } from '../services/AuthAPI';
 import { getFirestore, doc, getDoc } from "firebase/firestore";
@@ -133,9 +133,9 @@ function SelectProfile() {
           <Text style={styles.labelText}>{weight}</Text>
         </View>
 
-        <Pressable style={styles.editButton} onPress={openModal}>
+        <TouchableOpacity style={styles.editButton} onPress={openModal}>
           <Text style={styles.buttonText}>Edit</Text>
-        </Pressable>
+        </TouchableOpacity>
 
         <Modal visible={isModalVisible} animationType="slide" transparent={true}>
           <View style={styles.modalContainer}>
@@ -185,12 +185,12 @@ function SelectProfile() {
               onChangeText={(text) => setEditedWeight(text)}
             />
             <View style={styles.modalButtonContainer}>
-            <Pressable style={styles.modalSaveButton} onPress={handleSaveChanges} >
+            <TouchableOpacity style={styles.modalSaveButton} onPress={handleSaveChanges} >
               <Text style={styles.modalText}>Save</Text>
-            </Pressable>
-            <Pressable style={styles.modalCancelButton} onPress={closeModal} >
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.modalCancelButton} onPress={closeModal} >
               <Text style={styles.modalText}>Cancel</Text>
-            </Pressable>
+            </TouchableOpacity>
             </View>
           </View>
         </Modal>
@@ -240,22 +240,22 @@ function SelectAccount() {
         <Text style={styles.title}>{firstName ? firstName : ""} {lastName ? lastName : ""}</Text>
         <Text style={styles.profileID}>User ID: {userId}</Text>
         <View style={styles.rowContainer}>
-          <Pressable style={styles.pageButton} onPress={() => navigation.navigate('TransactionHistory')} >
+          <TouchableOpacity style={styles.pageButton} onPress={() => navigation.navigate('TransactionHistory')} >
             <Text style={styles.accountText}>Transaction History</Text>
-          </Pressable>
-          <Pressable style={styles.pageButton} onPress={() => navigation.navigate('PaymentMethods')}>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.pageButton} onPress={() => navigation.navigate('PaymentMethods')}>
             <Text style={styles.accountText}>Payment Methods</Text>
-          </Pressable>
+          </TouchableOpacity>
         </View>
         <View style={styles.rowContainer}>
-          <Pressable style={styles.pageButton} onPress={() => navigation.navigate('ToS')}>
+          <TouchableOpacity style={styles.pageButton} onPress={() => navigation.navigate('ToS')}>
             <Text style={styles.accountText}>Terms of Service</Text>
-          </Pressable>
-          <Pressable style={styles.pageButton} onPress={() => navigation.navigate('QR')}>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.pageButton} onPress={() => navigation.navigate('QR')}>
             <Text style={styles.accountText}>QR Code</Text>
-          </Pressable>
+          </TouchableOpacity>
         </View>
-        <Pressable
+        <TouchableOpacity
           style={styles.editButton}
           onPress={() => {
             Alert.alert(
@@ -274,7 +274,7 @@ function SelectAccount() {
           }}
         >
           <Text style={styles.buttonText}>Sign Out</Text>
-        </Pressable>
+        </TouchableOpacity>
 
       </ScrollView>
     </View>
@@ -323,20 +323,20 @@ function SelectOthers() {
         <Text style={styles.title}>{firstName ? firstName : ""} {lastName ? lastName : ""}</Text>
         <Text style={styles.profileID}>User ID: {userId}</Text>
         <View style={styles.rowContainer}>
-          <Pressable style={styles.pageButton} onPress={toggleTheme}>
-            <Text style={styles.accountText}>Dark Mode</Text>
-          </Pressable>
-          <Pressable style={styles.pageButton} onPress={() => Alert.alert('This app is only available in English right now.')}>
+          <TouchableOpacity style={styles.pageButton} onPress={toggleTheme}>
+            <Text style={styles.accountText}>{theme === 'light' ? 'Dark Mode' : 'Light Mode'}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.pageButton} onPress={() => Alert.alert('This app is only available in English right now.')}>
             <Text style={styles.accountText}>Languages</Text>
-          </Pressable>
+          </TouchableOpacity>
         </View>
         <View style={styles.rowContainer}>
-          <Pressable style={styles.pageButton} onPress={() => Alert.alert('For support, contact us at [email protected]')}>
+          <TouchableOpacity style={styles.pageButton} onPress={() => Alert.alert('For support, contact us at [email protected]')}>
             <Text style={styles.accountText}>Support</Text>
-          </Pressable>
-          <Pressable style={styles.pageButton} onPress={() => Alert.alert('App Version: v0.5')}>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.pageButton} onPress={() => Alert.alert('App Version: v0.5')}>
             <Text style={styles.accountText}>Version</Text>
-          </Pressable>
+          </TouchableOpacity>
         </View>
       </ScrollView>
     </View>

diff --git a/services/AuthAPI.js b/services/AuthAPI.js
@@ -274,7 +274,6 @@ export const updateMealData = async (userId, mealId, updatedData) => {
   }
   try {
     console.log("Updating meal with data:", updatedData);
-    debugger;
     if (!userId || !mealId) {
       console.error("userId or mealId is not provided");
       return; // Exit the function if no userId or taskId
@@ -343,7 +342,6 @@ export const updateWorkoutData = async (userId, workoutId, updatedData) => {
   }
   try {
     console.log("Updating workout with data:", updatedData);
-    debugger;
     if (!userId || !workoutId) {
       console.error("userId or workoutId is not provided");
       return; // Exit the function if no userId or taskId

diff --git a/styles/CookbookStyle.js b/styles/CookbookStyle.js
@@ -185,6 +185,7 @@ const getStyles = (theme) => StyleSheet.create({
     color: theme === 'dark' ? 'white' : 'black',
   },
   addButton: {
+    color: "#5da8af",
     color: "#5da8af",
     fontSize: 16,
     padding: 16,
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,4 +58,4 @@ const LoginScreen = ({ navigation }) => { @@
       );
     };
-    export default LoginScreen;
+    export default LoginScreen;