recipes visible

2021-11-02 15:43:43 +01:00
parent ad4778de3d
commit ad391b69f6
19 changed files with 252 additions and 230 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -4,8 +4,11 @@ import { TouchableOpacity, View } from 'react-native';
 //components
 import HomePage from './pages/HomePage';
 import GroceryListPage from './pages/groceryList/GroceryListPage';
+
 import RecipePage from './pages/recipes/RecipesPage';
 import AddRecipe from './pages/recipes/AddRecipe';
+import Recipe from './pages/recipes/Recipe';
+
 import theme from './styles/theme';
 //dependencies
 //navigation
@@ -24,16 +27,6 @@ const MyTheme = {
 	},
 };

-// const ScrollToTop = () => {
-//   const { pathname } = useLocation();
-
-//   useEffect(() => {
-//     window.scrollTo(0, 0);
-//   }, [pathname]);
-//   return null
-// }
-
-
 const Stack = createNativeStackNavigator();

 function App() {
@@ -59,6 +52,8 @@ function App() {
 					),
 				}} />
 				<Stack.Screen name="Groceries" component={GroceryListPage} />
+				<Stack.Screen name="Recipes" component={RecipePage} />
+				<Stack.Screen name="Recipe" component={Recipe} />
 			</Stack.Navigator>
 		</NavigationContainer>
 	);
--- a/src/components/Home/RecipeCard.js
+++ b/src/components/Home/RecipeCard.js
@@ -1,18 +1,18 @@
 import React from 'react';
+import { useNavigation } from '@react-navigation/core';
 //dependencies

 //styles
 import {WrapperCard, TextCard, IconRecipe} from './styles/groceryCard'

 const RecipeCard = () => {
+    const navigation = useNavigation();

    return (
-        // <Link to="/recipes">
-            <WrapperCard>
+            <WrapperCard onPress={() => navigation.navigate('Recipes')}>
                <TextCard>Recipes</TextCard>
                <IconRecipe/>
            </WrapperCard>
-        // </Link>
    )
 }

--- a/src/components/modals/groceries/ModalAddItem.js
+++ b/src/components/modals/groceries/ModalAddItem.js
@@ -68,76 +68,76 @@ const ModalAddItem = (props) => {
            onBackdropPress={props.closeModal}
            onBackButtonPress={props.closeModal}
            useNativeDriverForBackdrop
-            style={{margin: 0}} >
+            style={{ margin: 0 }} >
            <Wrapper>
-            <ModalHeader>Add product</ModalHeader>
-            {/* {product && product.image && <Image source={product.image} />}  */}
-            <WrapperInput>
-                <IconProduct />
-                <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false) }
-                    value={productName}
-                    onChangeText={(text) => setProductName(text)}
-                    placeholder="Product name" />
-                {productName != "" ? <IconCheck /> : <IconWrong />}
-            </WrapperInput>
-            {focusedProduct && <WrapperDropdown>
-                <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconAmount />
-                <Input style={{ width: '69%' }}
-                    keyboardType={'number-pad'}
-                    value={amount}
-                    onChangeText={(text) => setAmount(text)}
-                    placeholder="Amount" />
-                {amount ? <IconCheck /> : <IconWrong />}
-                <InputSmall style={{ marginLeft: "1%", width: '10%' }}
-                    onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)}
-                    value={qt}
-                    onChangeText={(text) => setQt(text)}
-                    placeholder="Qt." />
-            </WrapperInput>
-            {focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
-                <QtDropdown  text={qt} setElement={setQt} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconPerson />
-                <Input 
-                    value={person}
-                    onChangeText={(text) => setPerson(text)}
-                    placeholder="For" />
-            </WrapperInput>
-            <WrapperInput>
-                <IconDetails />
-                <Input
-                    value={details}
-                    onChangeText={(text) => setDetails(text)}
-                    placeholder="Additional details" />
-            </WrapperInput>
-            <WrapperInput>
-                <IconTag />
-                <Input type="text"
-                    onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
-                    value={tag}
-                    onChangeText={(text) => setTag(text)}
-                    placeholder="Tag" />
-            </WrapperInput>
-            {focusedTag && <WrapperDropdown>
-                <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconDollar />
-                <Input 
-                    keyboardType={'number-pad'}
-                    value={price}
-                    onChangeText={(text) => setPrice(text)}
-                    placeholder="Price" />
-            </WrapperInput>
-            <WrapperButtons>
-                <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
-                <VerticalSeperator />
-                <Button onPress={() => handleSubmit()}><ButtonText>Add Item</ButtonText></Button>
-            </WrapperButtons>
+                <ModalHeader>Add product</ModalHeader>
+                {/* {product && product.image && <Image source={product.image} />}  */}
+                <WrapperInput>
+                    <IconProduct />
+                    <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false)}
+                        value={productName}
+                        onChangeText={(text) => setProductName(text)}
+                        placeholder="Product name" />
+                    {productName != "" ? <IconCheck /> : <IconWrong />}
+                </WrapperInput>
+                {focusedProduct && <WrapperDropdown>
+                    <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconAmount />
+                    <Input style={{ width: '69%' }}
+                        keyboardType={'number-pad'}
+                        value={amount}
+                        onChangeText={(text) => setAmount(text)}
+                        placeholder="Amount" />
+                    {amount ? <IconCheck /> : <IconWrong />}
+                    <InputSmall style={{ marginLeft: "1%", width: '10%' }}
+                        onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)}
+                        value={qt}
+                        onChangeText={(text) => setQt(text)}
+                        placeholder="Qt." />
+                </WrapperInput>
+                {focusedQt && <WrapperDropdown style={{ marginLeft: "60%" }}>
+                    <QtDropdown text={qt} setElement={setQt} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconPerson />
+                    <Input
+                        value={person}
+                        onChangeText={(text) => setPerson(text)}
+                        placeholder="For" />
+                </WrapperInput>
+                <WrapperInput>
+                    <IconDetails />
+                    <Input
+                        value={details}
+                        onChangeText={(text) => setDetails(text)}
+                        placeholder="Additional details" />
+                </WrapperInput>
+                <WrapperInput>
+                    <IconTag />
+                    <Input type="text"
+                        onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
+                        value={tag}
+                        onChangeText={(text) => setTag(text)}
+                        placeholder="Tag" />
+                </WrapperInput>
+                {focusedTag && <WrapperDropdown>
+                    <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconDollar />
+                    <Input
+                        keyboardType={'number-pad'}
+                        value={price}
+                        onChangeText={(text) => setPrice(text)}
+                        placeholder="Price" />
+                </WrapperInput>
+                <WrapperButtons>
+                    <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
+                    <VerticalSeperator />
+                    <Button onPress={() => handleSubmit()}><ButtonText>Add Item</ButtonText></Button>
+                </WrapperButtons>
            </Wrapper>
        </StyledModal >
    )
--- a/src/components/modals/recipes/ModalAddIngredients.js
+++ b/src/components/modals/recipes/ModalAddIngredients.js
@@ -7,12 +7,13 @@ import { findRecipeById } from '../../../redux/slices/recipesSlice'

 //styles
 import {
-    StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong
+    StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong, Wrapper, ButtonText
 } from '../styles/modal'
 import Ingredient from '../../recipes/Ingredient&Button'
 import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
 import Dropdown from '../../Dropdown'
 import theme from '../../../styles/theme';
+import { Text } from 'react-native';

 const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} />

@@ -56,7 +57,12 @@ const ModalAddIngredients = (props) => {
        }
    }
    return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={props.closeModal}
+            onBackButtonPress={props.closeModal}
+            useNativeDriverForBackdrop
+            style={{margin: 0}} >
+            <Wrapper>
            <ModalHeader>Add to grocerylist</ModalHeader>
            <ModalDescription>Choose a grocery list and select the ingredients you would like to add to it</ModalDescription>
            <WrapperInput>
@@ -65,7 +71,7 @@ const ModalAddIngredients = (props) => {
                    style={{ fontSize: 20 }}
                    type="text"
                    value={listName}
-                    onChange={(text) => setListName(text.target.value)}
+                    onChangeText={(text) => setListName(text)}
                    onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
                    placeholder="Grocery list" />
                {listName ? <IconCheck /> : <IconWrong />}
@@ -78,9 +84,9 @@ const ModalAddIngredients = (props) => {
                <IconMeal />
                <Input
                    style={{ fontSize: 20, width: 100 }}
-                    type="number"
+                    type="number-pad"
                    value={servings}
-                    onChange={(text) => setServings(Number(text.target.value))}
+                    onChangeText={(text) => setServings(text)}
                    min={amountOfServings}
                    step={amountOfServings}
                    placeholder="Multiplier" />
@@ -88,10 +94,11 @@ const ModalAddIngredients = (props) => {
            </WrapperInput>
            {IngredientsList}
            <WrapperButtons>
-                <Button onClick={props.closeModal}>Close</Button>
+                <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
                <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Add</Button>
+                <Button onPress={() => handleSubmit()}><ButtonText>Add</ButtonText></Button>
            </WrapperButtons>
+            </Wrapper>
        </StyledModal >
    )
 }
--- a/src/components/recipes/Ingredient&Button.js
+++ b/src/components/recipes/Ingredient&Button.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { View } from 'react-native'
 import styled from "styled-components"

@@ -10,10 +11,10 @@ export const Wrapper = styled(View)`
    display: flex;
    flex-direction: row;
    justify-content: center;
-    border-bottom-color: ${props => props.theme.colors.dp1};
+    border-bottom-color: ${props => props.theme.colors.dp01};
    border-bottom-width: 1px;
    border-radius: 20px;
-    background-color: ${props => props.checked === true && props.theme.colors.selected + '33'};
+    ${props => props.checked === true && css`background-color: ` + props.theme.colors.selected + '33'};
 `

 const IngredientButton = (props) => {
--- a/src/components/recipes/RecipeCard.js
+++ b/src/components/recipes/RecipeCard.js
@@ -1,11 +1,13 @@
-
+import { useNavigation } from "@react-navigation/core";
+import React from "react";
 import { WrapperRecipeCard, RecipeName, ImageRecipe } from "./styles/recipeCard"

 const RecipeCard = (props) => {
    let recipe = props.recipe
+    const navigation = useNavigation();
    return (
-        <WrapperRecipeCard to={"/recipes/"+recipe._id}>
-            {recipe.image && <ImageRecipe source={recipe.image} />}
+        <WrapperRecipeCard onPress={() => navigation.navigate('Recipe', { id: recipe._id })}>{/*to={"/recipes/"+recipe._id}>*/}
+            {recipe.image != "" && <ImageRecipe source={{ uri: recipe.image }} />}
            <RecipeName>{recipe.name}</RecipeName>
        </WrapperRecipeCard>
    )
--- a/src/components/recipes/RecipeList.js
+++ b/src/components/recipes/RecipeList.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { WrapperRecipeList } from "./styles/recipeList"
 import RecipeCard from "./RecipeCard"
 import { useSelector } from "react-redux"
--- a/src/components/recipes/addRecipe/Buttons.js
+++ b/src/components/recipes/addRecipe/Buttons.js
@@ -4,6 +4,7 @@ import {
    WrapperAddRecipe, IconPlus,
    WrapperOptions, IconOptions, WrapperOptionButtons, IconRemove, IconEdit
 } from "./styles/buttons"
+import React from "react";
 import { useDispatch } from "react-redux"
 import { removeRecipe } from "../../../redux/slices/recipesSlice"

@@ -12,6 +13,7 @@ import ModalAddIngredients from "../../modals/recipes/ModalAddIngredients"
 import { Alert } from "react-native"

 export const AddRecipeButton = () => {
+
    return (
        // < Link to="/recipes/addRecipe">
            <WrapperAddRecipe>
@@ -24,7 +26,7 @@ export const AddRecipeButton = () => {
 export const AddIngredientsButton = (props) => {
    const [visible, setVisible] = useState(false)
    return (<>
-        <WrapperAddItem style={{ bottom: 10 }} onClick={()=>setVisible(true)}>
+        <WrapperAddItem style={{ bottom: 10 }} onPress={()=>setVisible(true)}>
            <PlusIcon />
        </WrapperAddItem>
        <ModalAddIngredients id={props.id} visible={visible} closeModal={() => setVisible(false)} />
--- a/src/components/recipes/addRecipe/Ingredient.js
+++ b/src/components/recipes/addRecipe/Ingredient.js
@@ -1,7 +1,8 @@
+import React from 'react';
 import { View } from "react-native"
 import { useSelector } from "react-redux"

-import { WrapperIngredient, TagCircle, IngredientName, IngredientPortion, IngredientAmount, IconEdit, IconRemove } from './styles/ingredient'
+import { WrapperIngredient, WrapperIngredientLeft, TagCircle, IngredientName, IngredientPortion, IngredientAmount, IconEdit, IconRemove } from './styles/ingredient'

 export const Ingredient = (props) => {
    let ingredient = props.ingredient
@@ -9,14 +10,14 @@ export const Ingredient = (props) => {
    let multiplier = props.multiplier ? props.multiplier : 1
    return (
        <WrapperIngredient>
-            <View id="left">
+            <WrapperIngredientLeft>
                <TagCircle tagColor={tag.color} />
                <IngredientPortion>{ingredient.portion}</IngredientPortion>
                <IngredientName>{ingredient.productName}</IngredientName>
-            </View>
+            </WrapperIngredientLeft>
            <IngredientAmount>{ingredient.amount*multiplier}</IngredientAmount>
-            {/* {props.EditIngredient && <IconEdit onClick={() => props.EditIngredient(props.index)} />} */}
-            {/* {props.RemoveIngredient && <IconRemove onClick={() => props.RemoveIngredient(props.index)} />} */}
+            {props.EditIngredient && <IconEdit onClick={() => props.EditIngredient(props.index)} />}
+            {props.RemoveIngredient && <IconRemove onClick={() => props.RemoveIngredient(props.index)} />}
        </WrapperIngredient>
    )
 }
--- a/src/components/recipes/addRecipe/Inputs.js
+++ b/src/components/recipes/addRecipe/Inputs.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useState } from "react"
 import { View } from "react-native"
 import { useSelector } from "react-redux"
--- a/src/components/recipes/addRecipe/styles/ingredient.js
+++ b/src/components/recipes/addRecipe/styles/ingredient.js
@@ -5,58 +5,58 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import theme from "../../../../styles/theme";

 export const WrapperIngredient = styled(View)`
-margin: 5px 0px;
-display: flex;
-flex: 1;
-flex-direction: row;
-justify-content: center;
-align-items: center;
-#left{
+    margin: 5px 0px;
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+`
+export const WrapperIngredientLeft = styled(View)`
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 75%;
-}
 `
 export const TagCircle = styled(View)`
-background-color: ${(props) => props.tagColor};
-width: 7px;
-height: 7px;
-border-radius: 4px;
-align-self: center;
-margin: 0px 5px;
+    background-color: ${(props) => props.tagColor};
+    width: 7px;
+    height: 7px;
+    border-radius: 4px;
+    align-self: center;
+    margin: 0px 5px;
 `
 export const IngredientName = styled(Text)`
-margin-left: 10px;
-width: 60%;
-font-size: ${({ theme }) => theme.fontSize.fontS};
-/* overflow-wrap: break-word; */
-color: ${props => props.theme.colors.textW4};
+    margin-left: 10px;
+    width: 60%;
+    font-size: ${({ theme }) => theme.fontSizes.fontS}px;
+    /* overflow-wrap: break-word; */
+    color: ${props => props.theme.colors.textW4};
 `
 export const IngredientPortion = styled(Text)`
-width: 35%;
-font-size: ${({ theme }) => theme.fontSize.fontS};
-font-weight: 900;
-/* word-break: break-all; */
-/* overflow-wrap: break-word; */
-color: ${props => props.theme.colors.textW5};
+    width: 35%;
+    font-size: ${({ theme }) => theme.fontSizes.fontS}px;
+    font-weight: 900;
+    /* word-break: break-all; */
+    /* overflow-wrap: break-word; */
+    color: ${props => props.theme.colors.textW5};
 `
 export const IngredientAmount = styled(Text)`
-max-width: 12%;
-margin-right: 48px;
-font-size: ${({theme}) => theme.fontSize.fontS};
-/* overflow-wrap: break-word; */
-color: ${props => props.theme.colors.textW5};
+    max-width: 12%;
+    margin-right: 48px;
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
+    /* overflow-wrap: break-word; */
+    color: ${props => props.theme.colors.textW5};
 `
-const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error + 'aa'} size={theme.fontSize.fontS} />
+const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error + 'aa'} size={theme.fontSizes.fontS} />

 export const IconRemove = styled(Remove)`
-position:absolute;
-right: 0px;
+    position:absolute;
+    right: 0px;
 `
-const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={theme.fontSize.fontS} />
+const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={theme.fontSizes.fontS} />

 export const IconEdit = styled(Edit)`
-position:absolute;
-right: 20px;
+    position:absolute;
+    right: 20px;
 `
--- a/src/components/recipes/addRecipe/styles/inputs.js
+++ b/src/components/recipes/addRecipe/styles/inputs.js
@@ -15,19 +15,19 @@ export const WrapperIngredients = styled(View)`
 `
 export const InputIngredientName = styled(TextInput)`
    margin-top: 10px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
    border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
    border-bottom-width: 1px;
    width:100%;
 `
 export const InputAmount = styled(TextInput)`
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
    border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
    border-bottom-width: 1px;
    width: 50px;
 `
 export const InputPortion = styled(TextInput)`
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
    border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
    border-bottom-width: 1px;
    width: 60%;
@@ -39,5 +39,5 @@ export const Button = styled(Text)`
    bottom: -8px;
    color: ${props => props.theme.colors.primary + 'bb'};
    font-weight: bold;
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
 `
--- a/src/components/recipes/styles/recipeCard.js
+++ b/src/components/recipes/styles/recipeCard.js
@@ -1,19 +1,16 @@
-import { Image, Text, View } from 'react-native'
+import { Image, Text, TouchableOpacity, View } from 'react-native'
 import styled from 'styled-components'

-export const WrapperRecipeCard = styled(View)`
+export const WrapperRecipeCard = styled(TouchableOpacity)`
    box-shadow: ${({theme})=> theme.colors.shadow};
    display: flex;
-    flex:1;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;

-    margin: 5px;
    height: 130px;
-    min-width: 130px;
-    max-width: 200px;
+    width: 48%;
    background-color: ${props => props.theme.colors.dp01 + 'dd'};
    border-radius: 20px;
 `
--- a/src/components/recipes/styles/recipeList.js
+++ b/src/components/recipes/styles/recipeList.js
@@ -3,6 +3,7 @@ import styled from 'styled-components'

 export const WrapperRecipeList = styled(View)`
    display: flex;
-    justify-content: flex-start;
+    flex-direction: row;
+    justify-content: space-evenly;
    flex-wrap: wrap;
 `
--- a/src/pages/recipes/AddRecipe.js
+++ b/src/pages/recipes/AddRecipe.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Text, View } from 'react-native'
 //components
 import Header from "../../components/Header"
--- a/src/pages/recipes/Recipe.js
+++ b/src/pages/recipes/Recipe.js
@@ -1,17 +1,17 @@
+import React from "react"
 import { useSelector } from "react-redux"
-import { useParams } from "react-router"
 //redux
 import { findRecipeById } from "../../redux/slices/recipesSlice"

-import { Wrapper, WrapperRecipe } from "./styles/addRecipe"
+import { Column, Row, Wrapper, WrapperRecipe } from "./styles/addRecipe"
 import { Ingredient } from "../../components/recipes/addRecipe/Ingredient"
-import { Title, InstructionWrapper, InstructionNumber, StyledImage, TextPrep, TextTime, TextMinutes, WrapperServings, TextServings, IconPotLarge, IconMeal, Hr } from "./styles/recipe"
+import { Title, InstructionWrapper, InstructionNumber, StyledImage, TextPrep, TextTime, TextMinutes, WrapperServings, TextServings, IconPotLarge, IconMeal, Hr, SubTitle, InstructionText, WrapperNumber } from "./styles/recipe"
 import { OptionsButtonRecipe, AddIngredientsButton } from "../../components/recipes/addRecipe/Buttons"
-import { Text, View } from "react-native"
+import { ScrollView, Text, View } from "react-native"
 import HeaderPadding from "../../components/Header"

-const Recipe = () => {
-    let { id } = useParams()
+const Recipe = (props) => {
+    const id = props.route.params.id
    const recipe = useSelector(state => findRecipeById(state, id))
    const IngredientList = recipe.ingredients.map((ingredient, index) => {
        return (<Ingredient ingredient={ingredient} index={index} key={index} />)
@@ -21,48 +21,50 @@ const Recipe = () => {
    let strArr = recipe.instructions.split("- ")
    const InstructionList = strArr.map((instruction, index) => {
        return index !== 0 && (<InstructionWrapper key={index} >
-            <View><InstructionNumber>{index}</InstructionNumber></View>
-            <Text id="instruction">{instruction}</Text>
+            <WrapperNumber><InstructionNumber>{index}</InstructionNumber></WrapperNumber>
+            <InstructionText>{instruction}</InstructionText>
        </InstructionWrapper>)
    })
    return (
        <>
-            <HeaderPadding/>
-            <Wrapper >
-                {recipe.image && <StyledImage source={recipe.image} />}
-                <WrapperRecipe>
-                    <Text>{recipe.name}</Text>
-                    <Hr />
-                    {recipe.prepTime !== 0 && recipe.prepTime && <>
-                        <View id="row" style={{ position: 'relative', marginTop: 0 }} >
-                            <IconPotLarge />
-                            <TextPrep>READY IN:</TextPrep>
-                            <View id="column" >
-                                <TextTime>{recipe.prepTime}</TextTime>
-                                <TextMinutes>minutes</TextMinutes>
-                            </View>
-                            {recipe.servings !== 0 && recipe.servings && <>
-                                <WrapperServings>
-                                    <IconMeal />
-                                    <View>
-                                        <TextTime>{recipe.servings}</TextTime>
-                                        <TextServings>servings</TextServings>
-                                    </View>
-                                </WrapperServings>
-                            </>}
-                        </View>
-                        <Hr />
-                    </>}
+            <ScrollView>

-                    <View style={{ width: '100%' }}>
-                        <Title>Ingredients</Title>
-                        {IngredientList}
+                <Wrapper >
+                    {recipe.image != "" && <StyledImage source={{ uri: recipe.image }} />}
+                    <WrapperRecipe>
+                        <Title>{recipe.name}</Title>
                        <Hr />
-                        <Title>Instructions</Title>
-                        {InstructionList}
-                    </View>
-                </WrapperRecipe>
-            </Wrapper>
+                        {recipe.prepTime !== 0 && recipe.prepTime && <>
+                            <Row style={{ position: 'relative', marginTop: 0 }} >
+                                <IconPotLarge />
+                                <TextPrep>READY IN:</TextPrep>
+                                <Column >
+                                    <TextTime>{recipe.prepTime}</TextTime>
+                                    <TextMinutes>minutes</TextMinutes>
+                                </Column>
+                                {recipe.servings !== 0 && recipe.servings && <>
+                                    <WrapperServings>
+                                        <IconMeal />
+                                        <View>
+                                            <TextTime>{recipe.servings}</TextTime>
+                                            <TextServings>servings</TextServings>
+                                        </View>
+                                    </WrapperServings>
+                                </>}
+                            </Row>
+                            <Hr />
+                        </>}
+
+                        <View style={{ width: '100%' }}>
+                            <SubTitle>Ingredients</SubTitle>
+                            {IngredientList}
+                            <Hr />
+                            <SubTitle>Instructions</SubTitle>
+                            {InstructionList}
+                        </View>
+                    </WrapperRecipe>
+                </Wrapper>
+            </ScrollView>
            <AddIngredientsButton id={id} />
        </>
    )
--- a/src/pages/recipes/RecipesPage.js
+++ b/src/pages/recipes/RecipesPage.js
@@ -1,4 +1,5 @@
 //components
+import React from "react";
 import RecipeList from "../../components/recipes/RecipeList"
 import Header from '../../components/Header'
 import { ArrowBack } from '../styles/page'
--- a/src/pages/recipes/styles/addRecipe.js
+++ b/src/pages/recipes/styles/addRecipe.js
@@ -16,21 +16,20 @@ export const WrapperRecipe = styled(View)`
    align-items: flex-start;
    width: 100%;
    padding: 10px;
-    #row{
-        margin-top: 5px;
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        align-items: flex-end;
-    }
-    #column{
-        margin-left: 5px;
-        margin-bottom: -3px;
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        justify-content: flex-end;
-    }
+`
+export const Row = styled(View)`
+    margin-top: 5px;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+`
+export const Column = styled(View)`
+    margin-left: 5px;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: flex-end;
 `
 export const Input = styled(TextInput)`
    flex:1;
@@ -39,7 +38,7 @@ export const Input = styled(TextInput)`
    color: ${props => props.theme.colors.textW1};
    border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
    border-bottom-width: 1px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;

    width: 100%;
 `
@@ -49,10 +48,9 @@ export const InputInstructions = styled(Text)`
    padding: 5px;

    color: ${props => props.theme.colors.textW1};
-    border-top: solid ${props => props.theme.colors.primary + 'aa'} 1px;
    border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
    border-bottom-width: 1px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
    min-height: 600px;
    width: 100%;
 `
@@ -60,15 +58,15 @@ export const StyledImage = styled(Image)`
    width: 100px;
    height: 100px;
 `
-export const IconRecipe = () => <MaterialCommunityIcons name="pasta" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+export const IconRecipe = () => <MaterialCommunityIcons name="pasta" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />

-export const IconPot = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+export const IconPot = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />

-export const IconMeal = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+export const IconMeal = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />

-export const IconImage = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+export const IconImage = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />

-const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.textB3} size={theme.fontSize.fontL} />
+const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.textB3} size={theme.fontSizes.fontL} />

 export const IconCheck = styled(Check)`
    margin-right: 10px;
--- a/src/pages/recipes/styles/recipe.js
+++ b/src/pages/recipes/styles/recipe.js
@@ -5,6 +5,14 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import theme from "../../../styles/theme";

 export const Title = styled(Text)`
+    color: ${({theme}) => theme.colors.textW1};
+    font-weight: bold;
+    font-size: 28px;
+`
+export const SubTitle = styled(Text)`
+    color: ${({theme}) => theme.colors.textW2};
+    font-weight: bold;
+    font-size: 24px;
    margin-top: 10px;
 `
 export const InstructionWrapper = styled(View)`
@@ -15,27 +23,30 @@ export const InstructionWrapper = styled(View)`
    align-items: center;
    border-bottom-color: ${({ theme }) => theme.colors.dp02};
    border-bottom-width: 3px;
-    #instruction{
-        margin-left: 7px;
-        color: ${({theme}) => theme.colors.textW4};
-    }
 `
-export const InstructionNumber = styled(Text)`
+export const InstructionText= styled(Text)`
+    width: 80%;
+    font-size: 18px;
+    margin-left: 7px;
+    color: ${({theme}) => theme.colors.textW4};
+`
+export const WrapperNumber = styled(View)`
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: ${({theme}) => theme.colors.primary + 'dd'};
+    height: 36px;
+    width: 36px;
+    border-radius: 18px;
+`
+export const InstructionNumber = styled(Text)`
    color: ${({theme}) => theme.colors.textB1};
    font-size: 25px;
    font-weight: bold;
-    height: 34px;
-    width: 34px;
-    border-radius: 17px;
 `

 export const StyledImage = styled(Image)`
-    margin-top: -70px;
    height: 200px;
    width: 100%;
 `
@@ -43,25 +54,24 @@ export const TextPrep = styled(Text)`
    text-align: right;
    width: 70px;
    font-weight: bold;
-    font-size: ${({theme}) => theme.fontSize.fontS};
-    line-height: 1.2;
+    font-size: ${({theme}) => theme.fontSizes.fontM}px;
+    color: ${({theme}) => theme.colors.textW4};
 `
 export const TextTime = styled(Text)`
-    margin-bottom: -3px;
    width: 70px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
    font-weight: bold;
-    line-height: 1.2;
+    font-size: ${({theme}) => theme.fontSizes.fontM}px;
    color: ${({ theme }) => theme.colors.primary};
 `
 export const TextMinutes = styled(Text)`
    width: 70px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
-    font-weight: normal;
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
    color: ${({ theme }) => theme.colors.primary};
 `
 export const WrapperServings = styled(View)`
    display: flex;
+    flex-direction: row;
+    align-items: center;
    position: absolute;
    right: 2%;
    top: 2px;
@@ -69,14 +79,16 @@ export const WrapperServings = styled(View)`
 export const TextServings = styled(Text)`
    margin-top: -5px;
    font-weight: bold;
+    font-size: 18px;
+    color: ${({theme}) => theme.colors.textW4};
 `
-const PotLarge = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primary} size={theme.fontSize.fontL} />
+const PotLarge = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primary} size={40} />

 export const IconPotLarge = styled(PotLarge)`
    margin: -20px 0px -16px 0px;
 `

-const Meal = () => <MaterialCommunityIcons name="food-turkey" color={theme.colors.primary} size={theme.fontSize.fontL} />
+const Meal = () => <MaterialCommunityIcons name="silverware-clean" color={theme.colors.primary} size={40} />

 export const IconMeal = styled(Meal)`
    margin: -20px 0px -16px 0px;