Update nav styles

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

Hide file tree

Showing 22 changed files with 177 additions and 203 deletions.
diff --git a/components/Accordion.jsx b/components/Accordion.jsx
@@ -31,7 +31,7 @@ const Accordion = ({
               <AntDesign
                 name={activeIndex === index ? 'up' : 'down'}
                 size={18}
-                color='black'
+                color='#121212'
               />
             </TouchableOpacity>
             {activeIndex === index && (

diff --git a/components/AcctHeader.jsx b/components/AcctHeader.jsx
@@ -51,12 +51,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     paddingTop: 80,
     paddingBottom: 50,
-    borderTopColor: 'white',
-    borderRightColor: 'white',
+    borderTopColor: '#fff',
+    borderRightColor: '#fff',
     borderBottomColor: '#52B175',
-    borderLeftColor: 'white',
+    borderLeftColor: '#fff',
     borderWidth: 3,
-    backgroundColor: 'white',
+    backgroundColor: '#fff',
   },
   rowContainer: {
     flexDirection: 'row',

diff --git a/components/AcctRecipeBar.jsx b/components/AcctRecipeBar.jsx
@@ -51,7 +51,7 @@ export default AcctRecipeBar = (props) => {
           style={styles.iconContainer}
           onPress={() => console.log('Remove Button Pressed')}
         >
-          <MaterialCommunityIcons name='close' size={45} color='black' />
+          <MaterialCommunityIcons name='close' size={45} color='#121212' />
         </TouchableOpacity>
       </View>
     </View>

diff --git a/components/Auth.jsx b/components/Auth.jsx
@@ -44,20 +44,20 @@ const performOAuth = async () => {
       const response = await fetch('http://192.168.254.14:8081/auth/signup/', {
         method: 'POST',
         headers: {
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ 
-          payload: "test"
-        })
+        body: JSON.stringify({
+          payload: 'test',
+        }),
       });
-    
+
       // Log the response directly
-      console.log("Response status:", response.status);
+      console.log('Response status:', response.status);
       const responseBody = await response.text();
-      console.log("Response body:", responseBody);
-    
+      console.log('Response body:', responseBody);
+
       const responseData = JSON.parse(responseBody);
-      console.log("Parsed response data:", responseData);
+      console.log('Parsed response data:', responseData);
     } catch (error) {
       console.error('Error sending data to backend:', error);
     }
@@ -75,12 +75,12 @@ const Auth = () => {
         title='Google'
         textColor='gray'
         icon='google'
-        iconColor='black'
-        backgroundColor='white'
+        iconColor='#121212'
+        backgroundColor='#fff'
         onPress={performOAuth}
       />
     </>
   );
-}
+};
 
 export default Auth;
diff --git a/components/CategoryButton.jsx b/components/CategoryButton.jsx
@@ -1,15 +1,10 @@
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { ButtonLarge } from './Typography';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { ButtonText } from './Typography';
 
-const CategoryButton = ({
-  title,
-  onPress,
-  customButtonStyling,
-  customTextStyling,
-}) => {
+const CategoryButton = ({ title, onPress }) => {
   return (
     <TouchableOpacity
-      style={[stlyes.categoryButton, customButtonStyling]}
+      style={[stlyes.categoryButton]}
       onPress={
         onPress ||
         (() =>
@@ -18,9 +13,7 @@ const CategoryButton = ({
           ))
       }
     >
-      <Text style={[stlyes.titleText, customTextStyling]}>
-        <ButtonLarge>{title || 'Button'}</ButtonLarge>
-      </Text>
+      <ButtonText>{title || 'Button'}</ButtonText>
     </TouchableOpacity>
   );
 };
@@ -29,15 +22,13 @@ export default CategoryButton;
 
 const stlyes = StyleSheet.create({
   categoryButton: {
-    padding: 15,
-    margin: 5,
-    backgroundColor: '#53B175',
-    borderRadius: 13,
     alignItems: 'center',
+    backgroundColor: '#F7FCF8',
+    borderColor: '#52B175',
+    borderRadius: 18,
+    borderWidth: 1,
     justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 15,
-    color: '#0A0A0A',
+    paddingHorizontal: 60,
+    paddingVertical: 40,
   },
 });
diff --git a/components/Macro.jsx b/components/Macro.jsx
@@ -4,7 +4,7 @@ import { AnimatedCircularProgress } from 'react-native-circular-progress';
 import { Body, BodySmall, ButtonSmall } from './Typography';
 
 const Macro = ({ macro, percentage, goal }) => {
-  const completed = ((percentage / 100) * goal).toFixed(2);
+  const completed = ((percentage / 100) * goal).toFixed(0);
 
   return (
     <View>
@@ -13,18 +13,18 @@ const Macro = ({ macro, percentage, goal }) => {
         width={10}
         fill={percentage}
         tintColor='#52B175'
-        backgroundColor='#ccc'
+        backgroundColor='#f2f2f2'
       >
         {(fill) => (
           <View style={{ display: 'flex', alignItems: 'center' }}>
-            <ButtonSmall>{completed ? completed : 0}</ButtonSmall>
+            <ButtonSmall>{completed ? completed : 0}g</ButtonSmall>
             <BodySmall>of {goal ? goal : 0}g</BodySmall>
           </View>
         )}
       </AnimatedCircularProgress>
       <View style={{ display: 'flex', alignItems: 'center', marginTop: 5 }}>
-        <Body style={{ color: 'black' }}>{macro}</Body>
-        <BodySmall>{goal ? (goal - completed).toFixed(2) : 0}g left</BodySmall>
+        <Body style={{ color: '#121212' }}>{macro}</Body>
+        <BodySmall>{goal ? (goal - completed).toFixed(0) : 0}g left</BodySmall>
       </View>
     </View>
   );

diff --git a/components/Modal/index.jsx b/components/Modal/index.jsx
@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
   },
   modalView: {
     minWidth: '100%',
-    backgroundColor: 'white',
+    backgroundColor: '#fff',
     borderTopEndRadius: 20,
     borderTopStartRadius: 20,
     padding: 35,
@@ -106,7 +106,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#2196F3',
   },
   textStyle: {
-    color: 'white',
+    color: '#fff',
     fontWeight: 'bold',
     textAlign: 'center',
   },

diff --git a/components/Nav.jsx b/components/Nav.jsx
@@ -3,65 +3,80 @@ import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { FontAwesome5 } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { Caption } from './Typography';
 
 const Nav = () => {
   const navigation = useNavigation();
   return (
-    <View style={[styles.nav, styles.shadowProp]}>
+    <View style={[styles.nav,]}>
       <TouchableOpacity
         accessible={true}
         accessibilityLabel='Home button was pressed!'
         onPress={() => navigation.navigate('Home')}
       >
         <FontAwesome5 name='home' style={styles.icon} />
+        <Caption>Home</Caption>
       </TouchableOpacity>
       <TouchableOpacity
         accessible={true}
         accessibilityLabel='Ingredients button was pressed!'
         onPress={() => navigation.navigate('Ingredients')}
       >
         <FontAwesome5 name='apple-alt' style={styles.icon} />
+        <Caption>Ingredients</Caption>
       </TouchableOpacity>
       <TouchableOpacity
         accessible={true}
         accessibilityLabel='Shopping list button was pressed!'
         onPress={() => navigation.navigate('Shopping List')}
       >
         <FontAwesome5 name='clipboard-list' style={styles.icon} />
+        <Caption>Shopping</Caption>
       </TouchableOpacity>
       <TouchableOpacity
         accessible={true}
         accessibilityLabel='Account Settings button was pressed!'
         onPress={() => navigation.navigate('Account')}
       >
         <MaterialCommunityIcons name='account-circle' style={styles.icon} />
+        <Caption>Account</Caption>
       </TouchableOpacity>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   nav: {
-    position: 'absolute',
-    width: '100%',
-    bottom: 0,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    height: 60,
-    paddingBottom: 16,
+  alignItems: 'center',
+  backgroundColor: '#fff',
+  borderColor: '#c2c2c2',
+  borderTopWidth: 1,
+  bottom: 0,
+  flexDirection: 'row',
+  height: 70,
+  justifyContent: 'space-around',
+  position: 'absolute',
+  textAlign: 'center',
+  width: '100%',
+  },
+  innerNavContainer: {
+    // justifyContent: 'space-around',
+    // textAlign: 'center',
+    // alignContent: 'center',
+    // alignItems: 'center',
+    // flexDirection: 'row',
+    // padding: 16,
+  },
+  iconContainer: {
+    // alignItems: 'center',
+    // gap: 4,
+    // borderWidth: 1
   },
   icon: {
-    color: 'black',
+    color: '#121212',
     fontSize: 24,
-    padding: 10,
-  },
-  shadowProp: {
-    shadowColor: '#171717',
-    shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.2,
-    shadowRadius: 3,
+    textAlign: 'center',
+    marginBottom: 4,
   },
 });
 

diff --git a/components/RadioButton.jsx b/components/RadioButton.jsx
@@ -18,12 +18,12 @@ const RadioButton = ({
           styles.radioCircle,
           {
             backgroundColor: isSelected
-              ? customRadioColor || 'black'
+              ? customRadioColor || '#121212'
               : 'transparent',
           },
         ]}
       />
-      <Text style={[styles.labelTitle, { color: customTextColor || 'black' }]}>
+      <Text style={[styles.labelTitle, { color: customTextColor || '#121212' }]}>
         {label || 'label'}
       </Text>
     </TouchableOpacity>
@@ -45,7 +45,7 @@ const styles = StyleSheet.create({
   radioCircle: {
     height: 20,
     width: 20,
-    borderColor: 'black',
+    borderColor: '#121212',
     borderWidth: 1,
     borderRadius: 50,
     justifyContent: 'center',

diff --git a/components/RecipeList.jsx b/components/RecipeList.jsx
@@ -7,7 +7,7 @@ import { useNavigation } from '@react-navigation/native';
 const RecipeList = ({ title, scrollEnabled, numberOfRecipes }) => {
   const [recipes, setRecipes] = useState([]);
   const navigation = useNavigation();
-  const { userId } = "1";
+  const { userId } = '1';
 
   useEffect(() => {
     const fetchRecipes = async () => {

diff --git a/components/SearchBar.jsx b/components/SearchBar.jsx
@@ -20,7 +20,7 @@ const Search = ({ updateSearch, value }) => {
           borderBottomColor: 'transparent',
           borderTopColor: 'transparent',
         }}
-        searchIcon={<AntDesign name='search1' size={24} color='black' />}
+        searchIcon={<AntDesign name='search1' size={24} color='#121212' />}
       />
       <View></View>
     </View>

diff --git a/components/SearchItem/index.jsx b/components/SearchItem/index.jsx
@@ -31,7 +31,7 @@ const SearchItem = ({ image, title, prepTime, type, price }) => {
         >
           <ButtonLarge>{title}</ButtonLarge>
           <FlexRow>
-            <EvilIcons name={'clock'} size={24} color='black' />
+            <EvilIcons name={'clock'} size={24} color='#121212' />
             <Caption>{prepTime}</Caption>
           </FlexRow>
         </FlexColumn>

diff --git a/components/SettingOption.jsx b/components/SettingOption.jsx
@@ -16,7 +16,7 @@ export const SettingOption = ({ title, icon, onPress }) => {
         {icon}
         <Body style={{ color: '#181725' }}>{title}</Body>
       </View>
-      <Ionicons name='chevron-forward' size={24} color='black' />
+      <Ionicons name='chevron-forward' size={24} color='#121212' />
     </Pressable>
   );
 };

diff --git a/components/ThirdPartySignIn.jsx b/components/ThirdPartySignIn.jsx
@@ -15,21 +15,21 @@ const ThirdPartySignIn = ({
       style={[
         styles.buttonContainer,
         { backgroundColor: backgroundColor },
-        backgroundColor === 'white' || backgroundColor === undefined
+        backgroundColor === '#fff' || backgroundColor === undefined
           ? { borderWidth: 1 }
           : null,
       ]}
       onPress={onPress}
     >
       <View style={styles.iconContainer}>
         {icon ? (
-          <FontAwesome name={icon} size={24} color={iconColor || 'black'} />
+          <FontAwesome name={icon} size={24} color={iconColor || '#121212'} />
         ) : (
           <Text>-</Text>
         )}
       </View>
       <View style={styles.titleContainer}>
-        <Text style={{ color: textColor || 'black', fontSize: 20 }}>
+        <Text style={{ color: textColor || '#121212', fontSize: 20 }}>
           Continue with {title}
         </Text>
       </View>

diff --git a/screens/AccountSettingsMenu.jsx b/screens/AccountSettingsMenu.jsx
@@ -94,7 +94,9 @@ export const AccountSettingsMenu = () => {
         )}
         {screenOption == SettingsScreen.MyDetails && <AccountDetailsScreen />}
 
-        {screenOption == SettingsScreen.FavoriteRecipes && <AcctSavedRecipesScreen />}
+        {screenOption == SettingsScreen.FavoriteRecipes && (
+          <AcctSavedRecipesScreen />
+        )}
       </View>
       <Nav />
     </SafeAreaView>