diff --git a/components/Accordion.jsx b/components/Accordion.jsx index 78007f9..6f8fe0c 100644 --- a/components/Accordion.jsx +++ b/components/Accordion.jsx @@ -31,7 +31,7 @@ const Accordion = ({ {activeIndex === index && ( diff --git a/components/AcctHeader.jsx b/components/AcctHeader.jsx index acab0b5..48f7a26 100644 --- 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 index a3891cd..a94ee51 100644 --- 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')} > - + diff --git a/components/Auth.jsx b/components/Auth.jsx index a6b2670..28444c1 100644 --- 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 index 3e4614e..cdd035b 100644 --- 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 ( @@ -18,9 +13,7 @@ const CategoryButton = ({ )) } > - - {title || 'Button'} - + {title || 'Button'} ); }; @@ -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 index 2f141ba..47bccd7 100644 --- 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 ( @@ -13,18 +13,18 @@ const Macro = ({ macro, percentage, goal }) => { width={10} fill={percentage} tintColor='#52B175' - backgroundColor='#ccc' + backgroundColor='#f2f2f2' > {(fill) => ( - {completed ? completed : 0} + {completed ? completed : 0}g of {goal ? goal : 0}g )} - {macro} - {goal ? (goal - completed).toFixed(2) : 0}g left + {macro} + {goal ? (goal - completed).toFixed(0) : 0}g left ); diff --git a/components/Modal/index.jsx b/components/Modal/index.jsx index 0c26b96..ef8181f 100644 --- 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 index d9ab1a2..af5921e 100644 --- a/components/Nav.jsx +++ b/components/Nav.jsx @@ -3,17 +3,19 @@ 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 ( - + navigation.navigate('Home')} > + Home { onPress={() => navigation.navigate('Ingredients')} > + Ingredients { onPress={() => navigation.navigate('Shopping List')} > + Shopping { onPress={() => navigation.navigate('Account')} > + Account ); @@ -42,26 +47,36 @@ const Nav = () => { 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 index 7241ca6..70a366a 100644 --- a/components/RadioButton.jsx +++ b/components/RadioButton.jsx @@ -18,12 +18,12 @@ const RadioButton = ({ styles.radioCircle, { backgroundColor: isSelected - ? customRadioColor || 'black' + ? customRadioColor || '#121212' : 'transparent', }, ]} /> - + {label || 'label'} @@ -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 index 3382d4e..3bd3cd3 100644 --- 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 index ff3410e..c1481a3 100644 --- a/components/SearchBar.jsx +++ b/components/SearchBar.jsx @@ -20,7 +20,7 @@ const Search = ({ updateSearch, value }) => { borderBottomColor: 'transparent', borderTopColor: 'transparent', }} - searchIcon={} + searchIcon={} /> diff --git a/components/SearchItem/index.jsx b/components/SearchItem/index.jsx index 1a471fa..7468b17 100644 --- a/components/SearchItem/index.jsx +++ b/components/SearchItem/index.jsx @@ -31,7 +31,7 @@ const SearchItem = ({ image, title, prepTime, type, price }) => { > {title} - + {prepTime} diff --git a/components/SettingOption.jsx b/components/SettingOption.jsx index 282919e..7457da6 100644 --- a/components/SettingOption.jsx +++ b/components/SettingOption.jsx @@ -16,7 +16,7 @@ export const SettingOption = ({ title, icon, onPress }) => { {icon} {title} - + ); }; diff --git a/components/ThirdPartySignIn.jsx b/components/ThirdPartySignIn.jsx index e917a9d..305bcb6 100644 --- a/components/ThirdPartySignIn.jsx +++ b/components/ThirdPartySignIn.jsx @@ -15,7 +15,7 @@ const ThirdPartySignIn = ({ style={[ styles.buttonContainer, { backgroundColor: backgroundColor }, - backgroundColor === 'white' || backgroundColor === undefined + backgroundColor === '#fff' || backgroundColor === undefined ? { borderWidth: 1 } : null, ]} @@ -23,13 +23,13 @@ const ThirdPartySignIn = ({ > {icon ? ( - + ) : ( - )} - + Continue with {title} diff --git a/screens/AccountSettingsMenu.jsx b/screens/AccountSettingsMenu.jsx index 7670ef8..044694d 100644 --- a/screens/AccountSettingsMenu.jsx +++ b/screens/AccountSettingsMenu.jsx @@ -94,7 +94,9 @@ export const AccountSettingsMenu = () => { )} {screenOption == SettingsScreen.MyDetails && } - {screenOption == SettingsScreen.FavoriteRecipes && } + {screenOption == SettingsScreen.FavoriteRecipes && ( + + )}