Update Home screen styles

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

Hide file tree

Showing 3 changed files with 72 additions and 47 deletions.
diff --git a/components/Nav.jsx b/components/Nav.jsx
@@ -8,7 +8,7 @@ import { Caption } from './Typography';
 const Nav = () => {
   const navigation = useNavigation();
   return (
-    <View style={[styles.nav,]}>
+    <View style={[styles.nav]}>
       <TouchableOpacity
         accessible={true}
         accessibilityLabel='Home button was pressed!'
@@ -47,17 +47,17 @@ const Nav = () => {
 
 const styles = StyleSheet.create({
   nav: {
-  alignItems: 'center',
-  backgroundColor: '#fff',
-  borderColor: '#c2c2c2',
-  borderTopWidth: 1,
-  bottom: 0,
-  flexDirection: 'row',
-  height: 70,
-  justifyContent: 'space-around',
-  position: 'absolute',
-  textAlign: 'center',
-  width: '100%',
+    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',

diff --git a/components/RadioButton.jsx b/components/RadioButton.jsx
@@ -23,7 +23,9 @@ const RadioButton = ({
           },
         ]}
       />
-      <Text style={[styles.labelTitle, { color: customTextColor || '#121212' }]}>
+      <Text
+        style={[styles.labelTitle, { color: customTextColor || '#121212' }]}
+      >
         {label || 'label'}
       </Text>
     </TouchableOpacity>

diff --git a/screens/Home.jsx b/screens/Home.jsx
@@ -1,12 +1,18 @@
-import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import {
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import Nav from '../components/Nav';
 import FavoriteRecipesList from '../components/FavoriteRecipes';
 import CategoryButton from '../components/CategoryButton';
 import Macro from '../components/Macro';
 import { useNavigation } from '@react-navigation/native';
 import DietFilter from '../components/DietFilter';
-import { StatusBar } from 'react-native';
 import { Title } from '../components/Typography';
+import { StatusBar } from 'react-native';
 
 export const HomeScreen = () => {
   const navigation = useNavigation();
@@ -15,27 +21,38 @@ export const HomeScreen = () => {
       <StatusBar backgroundColor='#fff' barStyle='dark-content' />
       <View style={{ flex: 1 }}>
         <ScrollView>
-          <View style={styles.screenContainer}>
-            <View style={styles.macrosContainer}>
-              <Macro macro='Carbs' percentage={20} goal={100} />
-              <Macro macro='Protein' percentage={50} goal={100} />
-              <Macro macro='Fat' percentage={70} goal={100} />
+          <View style={styles.macrosContainer}>
+            <Macro macro='Carbs' percentage={20} goal={100} />
+            <Macro macro='Protein' percentage={50} goal={100} />
+            <Macro macro='Fat' percentage={70} goal={100} />
+          </View>
+          <View style={styles.homeContainer}>
+            <View>
+              <TouchableOpacity
+                accessible={true}
+                accessibilityLabel='Ingredients button was pressed!'
+                onPress={() => navigation.navigate('Settings')}
+              ></TouchableOpacity>
+            </View>
+            <View style={styles.mainButtonsContainer}>
+              <CategoryButton
+                onPress={() => navigation.navigate('Ingredient')}
+                title='Pantry'
+              />
+              <CategoryButton
+                title='Recipes'
+                onPress={() => navigation.navigate('Filter')}
+              />
             </View>
-            <View style={styles.innerContainer}>
-              <View style={styles.mainButtonsContainer}>
-                <CategoryButton
-                  onPress={() => navigation.navigate('Ingredients')}
-                  title='Pantry'
-                />
-                <CategoryButton
-                  title='Recipes'
-                  onPress={() => navigation.navigate('Filter')}
-                />
-              </View>
-              <View style={styles.favoriteRecipesContainer}>
-                <Title>Favorite Recipes</Title>
-              </View>
+            <View style={styles.favoriteRecipesContainer}>
+              <Title style={styles.favoriteRecipesTitle}>
+                Favorite Recipes
+              </Title>
+            </View>
+            <View style={styles.dietFilterContainer}>
               <DietFilter />
+            </View>
+            <View style={styles.recipeListContainer}>
               <FavoriteRecipesList numberOfRecipes={10} />
             </View>
           </View>
@@ -47,30 +64,36 @@ export const HomeScreen = () => {
 };
 
 const styles = StyleSheet.create({
-  screenContainer: {
-    backgroundColor: '#f2f2f2',
-    // padding: 10,
-    // marginBottom: 50,
-  },
-  innerContainer: {
+  homeContainer: {
     paddingHorizontal: 16,
+    backgroundColor: '#f2f2f2',
+    paddingTop: 16,
+    flex: 1,
   },
   macrosContainer: {
     backgroundColor: '#fff',
-    borderBottomRightRadius: 18,
-    borderBottomLeftRadius: 18,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingVertical: 24,
-    paddingHorizontal: 16,
+    borderRadius: 9,
+    padding: 16,
   },
   mainButtonsContainer: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 48,
+    justifyContent: 'space-around',
+    marginVertical: 48,
   },
   favoriteRecipesContainer: {
-    alignItems: 'center',
+    marginBottom: 16,
+  },
+  favoriteRecipesTitle: {
+    borderBottomWidth: 1,
+    paddingBottom: 8,
+    borderColor: '#c2c2c2',
+    width: '100%',
+    marginBottom: 12,
+  },
+  dietFilterContainer: {
+    marginBottom: 32,
   },
 });