Add page headers and rename accordingly.

CloudyBae · Apr 22, 2024 · ba4d24c · ba4d24c
1 parent a5698e3
commit ba4d24c
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 43 deletions.
diff --git a/App.js b/App.js
@@ -1,70 +1,74 @@
 import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import { AccountDetailsScreen } from './screens/AccountDetailsScreen';
+import { AccountSettingsMenu } from './screens/AccountSettingsMenu';
+import { AddIngredient } from './screens/AddIngredient';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { FilterScreen } from './screens/Filter';
 import { HomeScreen } from './screens/Home';
-import { IngredientScreen } from './screens/Ingredient';
+import { IngredientScreen } from './screens/Ingredients';
+import { LoginScreen } from './screens/Login';
+import { NavigationContainer } from '@react-navigation/native';
 import { RecipeScreen } from './screens/Recipe';
-import { FilterScreen } from './screens/Filter';
 import { ShoppingListScreen } from './screens/ShoppingList';
-import { LoginScreen } from './screens/Login';
 import { SignUpScreen } from './screens/SignUp';
-import { AccountSettingsMenu } from './screens/AccountSettingsMenu';
-import { AccountDetailsScreen } from './screens/AccountDetailsScreen';
-import { AddIngredient } from './screens/AddIngredient';
+import DietaryAllergenFilterScreen from './screens/DietaryAllergenFilter';
 
 const Stack = createNativeStackNavigator();
 
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName='Login'>
+      <Stack.Navigator initialRouteName='Home'>
         <Stack.Screen
-          name='Home'
-          component={HomeScreen}
+          name='Login'
+          component={LoginScreen}
           options={{ headerShown: false }}
         />
-
         <Stack.Screen
-          name='Recipe'
-          component={RecipeScreen}
+          name='Home'
+          component={HomeScreen}
           options={{ headerShown: false }}
         />
         <Stack.Screen
-          name='Ingredient'
+          name='Ingredients'
           component={IngredientScreen}
-          options={{ headerShown: false }}
+          options={{ headerShown: true }}
+        />
+        <Stack.Screen
+          name='Recipe'
+          component={RecipeScreen}
+          options={{ headerShown: true }}
         />
         <Stack.Screen
           name='Filter'
           component={FilterScreen}
-          options={{ headerShown: false }}
+          options={{ headerShown: true }}
         />
         <Stack.Screen
-          name='ShoppingList'
+          name='Shopping List'
           component={ShoppingListScreen}
-          options={{ headerShown: false }}
+          options={{ headerShown: true }}
         />
         <Stack.Screen
-          name='AccountSettingsMenu'
-          component={AccountSettingsMenu}
-          options={{ headerShown: false }}
+          name='Account Details'
+          component={AccountDetailsScreen}
+          options={{ headerShown: true }}
         />
         <Stack.Screen
-          name='Login'
-          component={LoginScreen}
-          options={{ headerShown: false }}
+          name='DietaryAllergenFilterScreen'
+          component={DietaryAllergenFilterScreen}
+          options={{ headerShown: true }}
         />
         <Stack.Screen
+          name='Account'
+          component={AccountSettingsMenu}
+          options={{ headerShown: true }}
+        />
+        {/* <Stack.Screen
           name='Signup'
           component={SignUpScreen}
           options={{ headerShown: false }}
-        />
-
-        <Stack.Screen
-          name='AccountDetailsScreen'
-          component={AccountDetailsScreen}
-          options={{ headerShown: false }}
-        />
+        /> */}
       </Stack.Navigator>
     </NavigationContainer>
   );

diff --git a/components/CategoryButton.jsx b/components/CategoryButton.jsx
@@ -31,7 +31,7 @@ const stlyes = StyleSheet.create({
   categoryButton: {
     padding: 15,
     margin: 5,
-    backgroundColor: '#72C08F',
+    backgroundColor: '#53B175',
     borderRadius: 13,
     alignItems: 'center',
     justifyContent: 'center',

diff --git a/components/Nav.jsx b/components/Nav.jsx
@@ -18,21 +18,21 @@ const Nav = () => {
       <TouchableOpacity
         accessible={true}
         accessibilityLabel='Ingredients button was pressed!'
-        onPress={() => navigation.navigate('Ingredient')}
+        onPress={() => navigation.navigate('Ingredients')}
       >
         <FontAwesome5 name='apple-alt' style={styles.icon} />
       </TouchableOpacity>
       <TouchableOpacity
         accessible={true}
         accessibilityLabel='Shopping list button was pressed!'
-        onPress={() => navigation.navigate('ShoppingList')}
+        onPress={() => navigation.navigate('Shopping List')}
       >
         <FontAwesome5 name='clipboard-list' style={styles.icon} />
       </TouchableOpacity>
       <TouchableOpacity
         accessible={true}
         accessibilityLabel='Account Settings button was pressed!'
-        onPress={() => navigation.navigate('AccountSettingsMenu')}
+        onPress={() => navigation.navigate('Account')}
       >
         <MaterialCommunityIcons name='account-circle' style={styles.icon} />
       </TouchableOpacity>

diff --git a/screens/AccountSettingsMenu.jsx b/screens/AccountSettingsMenu.jsx
@@ -41,7 +41,7 @@ export const AccountSettingsMenu = () => {
           <Ionicons
             name='chevron-back-circle'
             size={26}
-            color='#72C08F'
+            color='#53B175'
             style={{ margin: 20 }}
           />
         </Pressable>

diff --git a/screens/Home.jsx b/screens/Home.jsx
@@ -34,7 +34,7 @@ export const HomeScreen = () => {
             </View>
             <View style={styles.mainButtonsContainer}>
               <CategoryButton
-                onPress={() => navigation.navigate('Ingredient')}
+                onPress={() => navigation.navigate('Ingredients')}
                 customButtonStyling={{
                   width: '45%',
                   padding: 40,
@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
     marginBottom: 50,
   },
   macrosContainer: {
-    backgroundColor: '#72C08F',
+    backgroundColor: '#53B175',
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',

diff --git a/screens/Ingredient.jsx → screens/Ingredients.jsx b/screens/Ingredient.jsx → screens/Ingredients.jsx
diff --git a/screens/Login.jsx b/screens/Login.jsx
@@ -62,7 +62,7 @@ export const LoginScreen = () => {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#72C08F',
+    backgroundColor: '#53B175',
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',

diff --git a/screens/Recipe.jsx b/screens/Recipe.jsx
@@ -46,7 +46,7 @@ export const RecipeScreen = () => {
         style={{ ...styles.rowContainer, gridGap: 6, alignSelf: 'flex-start' }}
         key={index}
       >
-        <Octicons name='dot-fill' size={24} color='#72C08F' />
+        <Octicons name='dot-fill' size={24} color='#53B175' />
         <BodySmall key={index}>{ingredient.original}</BodySmall>
       </View>
     ));
@@ -141,7 +141,7 @@ export const RecipeScreen = () => {
           <Octicons
             name='x-circle-fill'
             size={26}
-            color='#72C08F'
+            color='#53B175'
             style={{ margin: 20 }}
           />
         </Pressable>

diff --git a/screens/Splash.jsx b/screens/Splash.jsx
@@ -26,7 +26,7 @@ export const SplashScreen = () => {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#72C08F',
+    backgroundColor: '#53B175',
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
   },
   buttonText: {
     fontSize: 20,
-    color: '#72C08F',
+    color: '#53B175',
   },
 });