From b4e68dbac411278d0d8fe45de01614508b7005f0 Mon Sep 17 00:00:00 2001
From: "wolfmoyaers@gmail.com" <wolfmoyaers@gmail.com>
Date: Mon, 1 Nov 2021 12:30:56 +0100
Subject: [PATCH] modal Add item works

---
 src/components/Dropdown.js                    | 11 ++---
 src/components/GroceryList/TabMenu.js         |  4 +-
 .../GroceryList/groceries/GroceryButtons.js   | 12 +++---
 .../GroceryList/groceries/GroceryList.js      | 22 ++++++----
 src/components/GroceryList/groceries/List.js  | 41 +++++++++++--------
 .../GroceryList/groceries/ListedItem.js       |  4 +-
 .../GroceryList/groceries/styles/buttons.js   |  5 ++-
 .../GroceryList/groceries/styles/list.js      |  3 +-
 .../GroceryList/products/ListedProduct.js     |  2 +-
 .../GroceryList/products/ProductButtons.js    | 10 ++---
 .../GroceryList/products/ProductsList.js      | 30 ++++++++------
 .../GroceryList/products/styles/buttons.js    |  1 +
 .../products/styles/listedProduct.js          |  1 +
 src/components/GroceryList/styles/tabMenu.js  | 20 ++-------
 src/components/Home/GroceryCard.js            |  1 +
 src/components/Home/RecipeCard.js             |  2 +-
 .../modals/groceries/ModalAddItem.js          | 38 +++++++++--------
 .../modals/groceries/ModalAddProduct.js       | 12 +++---
 .../modals/groceries/ModalEditItem.js         | 16 ++++----
 .../modals/groceries/ModalEditProduct.js      | 12 +++---
 .../modals/groceries/styles/addItem.js        |  1 +
 .../modals/groceries/styles/addProduct.js     |  1 +
 .../modals/recipes/ModalAddIngredients.js     |  6 +--
 src/components/modals/styles/modal.js         | 25 ++++++-----
 src/components/recipes/addRecipe/Buttons.js   | 10 ++---
 .../recipes/addRecipe/styles/buttons.js       |  1 +
 src/pages/recipes/AddRecipe.js                |  8 ++--
 src/pages/recipes/Recipe.js                   |  6 +--
 src/pages/recipes/styles/addRecipe.js         |  1 +
 src/pages/recipes/styles/recipe.js            |  1 +
 src/styles/theme.js                           |  8 ++--
 31 files changed, 167 insertions(+), 148 deletions(-)

diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js
index a0effda..528adbc 100644
--- a/src/components/Dropdown.js
+++ b/src/components/Dropdown.js
@@ -1,15 +1,14 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Text, TouchableOpacity, View } from 'react-native'
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native'
 
-const WrapperDropdown = styled(View)`
+const WrapperDropdown = styled(ScrollView)`
     display: flex;
     flex-direction: column;
     position: absolute;
     z-index:2;
 
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden;
 
     background-color: ${({ theme }) => theme.colors.dp01 + 'cc'};
     width: 200px;
@@ -18,6 +17,8 @@ const WrapperDropdown = styled(View)`
     border-bottom-right-radius: 10px;
 `
 const DropdownItem = styled(TouchableOpacity)`
+`
+const TextProduct = styled(Text)`
     color: ${({ theme }) => theme.colors.textW2};
     font-size: 20px;
 `
@@ -41,7 +42,7 @@ const Dropdown = (props) => {
     let dropdownList = newArray.map((element, index) => {
         return (
             <View key={index}>
-                <DropdownItem onPress={() => props.setElement(element)}>{element}</DropdownItem>
+                <DropdownItem onPress={() => props.setElement(element)}><TextProduct>{element}</TextProduct></DropdownItem>
                 <HorizontalSeperator />
             </View>
         )
diff --git a/src/components/GroceryList/TabMenu.js b/src/components/GroceryList/TabMenu.js
index 7e5c210..c4ed45e 100644
--- a/src/components/GroceryList/TabMenu.js
+++ b/src/components/GroceryList/TabMenu.js
@@ -16,10 +16,10 @@ const TabMenu = (props) => {
         <Wrapper>
             <WrapperSelected previousPos = {previousPos} currenttab={props.currentTab}/>
             <WrapperGroceries currenttab={props.currentTab} onPress={()=>handleTabPress("Groceries")}>
-                {/* <IconGroceries currenttab={props.currentTab}/> */}
+                <IconGroceries currenttab={props.currentTab} />
             </WrapperGroceries>
             <WrapperProducts currenttab={props.currentTab} onPress={()=>handleTabPress("Products")}>
-                {/* <IconProducts currenttab={props.currentTab}/> */}
+                <IconProducts currenttab={props.currentTab}/>
             </WrapperProducts>
         </Wrapper>
     )
diff --git a/src/components/GroceryList/groceries/GroceryButtons.js b/src/components/GroceryList/groceries/GroceryButtons.js
index 8f9e95b..20e2c07 100644
--- a/src/components/GroceryList/groceries/GroceryButtons.js
+++ b/src/components/GroceryList/groceries/GroceryButtons.js
@@ -19,7 +19,7 @@ const SelectAllItemsButton = (props) => {
     }
     return (
         <WrapperSelect toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
-            {/* <CheckIcon /> */}
+            <CheckIcon />
         </WrapperSelect>
     )
 }
@@ -34,7 +34,7 @@ const RemoveItemsButton = (props) => {
     }
     return (
         <WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
-            {/* <RemoveIcon /> */}
+            <RemoveIcon />
         </WrapperRemove>
     )
 }
@@ -46,7 +46,7 @@ export const ContainerButtons = (props) => {
             <SelectAllItemsButton visible={visible} />
             <RemoveItemsButton visible={visible} />
             <WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
-                {/* <MenuIcon /> */}
+                <MenuIcon />
             </WrapperButtons >
         </>
     )
@@ -60,16 +60,16 @@ export const AddItemButton = (props) => {
         return (
             <>
                 <WrapperAddItem toggle={visibleItem} onPress={() => setVisibleItem(true)}>
-                    {/* <PlusIcon /> */}
+                    <PlusIcon />
+                    <ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
                 </WrapperAddItem>
-                <ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
             </>
         )
     }
     return (
         <>
             <WrapperAddList toggle={visibleList} onPress={() => setVisibleList(true)}>
-                {/* <ListIcon /> */}
+                <ListIcon />
             </WrapperAddList>
             <ModalAddList visible={visibleList} closeModal={() => setVisibleList(false)} />
         </>
diff --git a/src/components/GroceryList/groceries/GroceryList.js b/src/components/GroceryList/groceries/GroceryList.js
index 3c13343..9752379 100644
--- a/src/components/GroceryList/groceries/GroceryList.js
+++ b/src/components/GroceryList/groceries/GroceryList.js
@@ -7,16 +7,13 @@ import { selectAllSortedItems } from '../../../redux/slices/groceryList/itemsSli
 //styles
 import { WrapperGroceryList, TextTotalAmount } from './styles/list'
 import { selectAllProducts } from '../../../redux/slices/groceryList/productsSlice';
-import { ScrollView, View } from 'react-native';
+import { FlatList, View } from 'react-native';
 import HeaderPadding from '../../Header';
 
 const GroceryList = (props) => {
     const items = useSelector(selectAllSortedItems)
     const products = useSelector(selectAllProducts)
     const lists = useSelector(state => state.lists.entities)
-    let Lists = lists.map((list, index) => {
-        return <List key={index} listId={list._id} />
-    })
     const totalPrice = Math.round(items.reduce((accumulator, item) => {
         let product = products.find(product => product._id === item._id && item.checked)
         accumulator += (product ? product.price : 0) * item.amount.am
@@ -26,11 +23,18 @@ const GroceryList = (props) => {
     return (
         <WrapperGroceryList>
             <TextTotalAmount>total:  € {totalPrice}</TextTotalAmount>
-            <ScrollView>
-                <HeaderPadding/>
-                {Lists}
-                <View style={{ height: 150 }} />
-            </ScrollView>
+            <FlatList
+                ListHeaderComponent={<HeaderPadding />}
+                ListFooterComponent={<View style={{ height: 100 }} />}
+                initialNumToRender={15}
+                maxToRenderPerBatch={10}
+                data={lists}
+                renderItem={({ item }) => {
+                    return <List listId={item._id} />
+                }}
+                keyExtractor={(item, index) => {
+                    return index.toString();
+                }} />
         </WrapperGroceryList>
     )
 }
diff --git a/src/components/GroceryList/groceries/List.js b/src/components/GroceryList/groceries/List.js
index 5083fe0..37181dd 100644
--- a/src/components/GroceryList/groceries/List.js
+++ b/src/components/GroceryList/groceries/List.js
@@ -1,4 +1,4 @@
-import React, { useState , useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
 //components
 import ListedItem from './ListedItem'
 import ModalEditItem from '../../modals/groceries/ModalEditItem';
@@ -9,29 +9,24 @@ import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, Button
 import { useSelector, useDispatch } from 'react-redux';
 import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
 import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
-import { View } from 'react-native';
+import { FlatList, View } from 'react-native';
 
 export default React.memo((props) => {
     const items = useSelector(selectAllSortedItems)
     const list = useSelector(state => state.lists.entities.find((list) => list._id === props.listId))
 
     const [height, setHeight] = useState(100);
-  
+
     useEffect(() => {
         setHeight(1);
     }, [list.open, items]);
-  
+
     const dispatch = useDispatch()
 
 
     const [modalItemVisible, setModalItemVisible] = useState(false);
     const [modalListVisible, setModalListVisible] = useState(false);
 
-    const itemList = items.filter(item => item.listId === props.listId).map((item, index) => {
-        return (
-            <ListedItem key={index} item={item} setVisible={setModalItemVisible} />
-        )
-    })
     const removeList = () => {
         if (window.confirm("Do you really want to remove this list and the groceries within")) {
             dispatch(itemsRemovedByList(props.listId))
@@ -47,22 +42,32 @@ export default React.memo((props) => {
                 </WrapperLeft>
                 <WrapperRight>
                     {list.open && <>
-                        {/* <ButtonEditList onClick={() => setModalListVisible(true)} />
-                        <ButtonRemoveList onClick={removeList} /> */}
+                        <ButtonEditList onClick={() => setModalListVisible(true)} />
+                        <ButtonRemoveList onClick={removeList} />
                     </>}
-                    {/* <IconArrowDown visible={list.open.toString()} /> */}
+                    <IconArrowDown visible={list.open.toString()} />
                 </WrapperRight>
             </WrapperListTitle>
             <ListSizeWrapper height={height} visible={list.open} >
-                < WrapperList listLength={items.length} onLayout={(event) => {setHeight(event.nativeEvent.layout.height)}}>
-                    {list.open && itemList}
-                    {
-                        itemList.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>
+                < WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
+                    {list.open &&
+                        <FlatList style={{width: '100%'}}
+                            initialNumToRender={20}
+                            maxToRenderPerBatch={10}
+                            // ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
+                            data={items.filter(item => item.listId === props.listId)}
+                            renderItem={({ item }) => (
+                                <ListedItem item={item} setVisible={setModalItemVisible} />
+                            )}
+                            keyExtractor={(item, index) => {
+                                return index.toString();
+                            }}
+                        />
                     }
                     {items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />}
                 </WrapperList >
-                <ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} />
-            </ListSizeWrapper>
+                <ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} /> 
+           </ListSizeWrapper>
         </Wrapper>
     )
 })
\ No newline at end of file
diff --git a/src/components/GroceryList/groceries/ListedItem.js b/src/components/GroceryList/groceries/ListedItem.js
index b9f5395..f496540 100644
--- a/src/components/GroceryList/groceries/ListedItem.js
+++ b/src/components/GroceryList/groceries/ListedItem.js
@@ -19,8 +19,8 @@ const ListedItem = React.memo((props) => {
                     <TextProductName >{item.productName}</TextProductName>
                     <TextDetails>{item.details}</TextDetails>
                     <TextAmount>{item.amount.am}{item.amount.qt && " " + item.amount.qt}</TextAmount>
-                    <TextPerson>{item.person && item.person}</TextPerson>
-                    {/* {product.image && <Image source={product.image} />} */}
+                    {item.person != "" && <TextPerson>{item.person}</TextPerson>}
+                    {/* {product.image != "" && <Image source={product.image} />} */}
                 </WrapperItem>
             </DarkLayer>
             <WrapperButton onPress={() => dispatch(checkToggle(item._id))} >
diff --git a/src/components/GroceryList/groceries/styles/buttons.js b/src/components/GroceryList/groceries/styles/buttons.js
index 45da615..992a10b 100644
--- a/src/components/GroceryList/groceries/styles/buttons.js
+++ b/src/components/GroceryList/groceries/styles/buttons.js
@@ -1,3 +1,4 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 //dependencies
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -51,11 +52,11 @@ export const WrapperSelect = styled(Button)`
             bottom:70px; 
             `};
 `
-export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.colors.textB2} size={47} />
+export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.colors.textB2} size={50} />
 
 export const PlusIcon = () => <MaterialCommunityIcons name="cart-plus" color={theme.colors.textB2} size={45} />
 
-export const RemoveIcon = () => <MaterialCommunityIcons name="deleter-forever" color={theme.colors.textB2} size={45} />
+export const RemoveIcon = () => <MaterialCommunityIcons name="delete-forever" color={theme.colors.textB2} size={45} />
 
 export const CheckIcon = () => <MaterialCommunityIcons name="check" color={theme.colors.textB2} size={40} />
 
diff --git a/src/components/GroceryList/groceries/styles/list.js b/src/components/GroceryList/groceries/styles/list.js
index 3233ab9..a51028d 100644
--- a/src/components/GroceryList/groceries/styles/list.js
+++ b/src/components/GroceryList/groceries/styles/list.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Text, TouchableOpacity, View } from 'react-native'
 import styled, { css } from 'styled-components'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -65,7 +66,7 @@ export const ButtonRemoveList = styled(Close)`
     margin: 4px 10px 4px 0px;
 `
 
-const Edit = () => <MaterialCommunityIcons name="pencil" color={theme.colors.textW5} size={28} />
+const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={28} />
 
 export const ButtonEditList = styled(Edit)`
     margin: 4px 10px 4px 0px;
diff --git a/src/components/GroceryList/products/ListedProduct.js b/src/components/GroceryList/products/ListedProduct.js
index f5e4b12..75bd39f 100644
--- a/src/components/GroceryList/products/ListedProduct.js
+++ b/src/components/GroceryList/products/ListedProduct.js
@@ -24,7 +24,7 @@ const ListedProduct = React.memo((props) => {
             </WrapperProduct>
             <WrapperButton onPress={() => dispatch(checkToggle(product._id))} >
                 <CheckButton checked={product.checked}>
-                    {/* <IconCheck checked={product.checked} /> */}
+                    <IconCheck checked={product.checked} />
                 </CheckButton>
             </WrapperButton>
         </Wrapper>
diff --git a/src/components/GroceryList/products/ProductButtons.js b/src/components/GroceryList/products/ProductButtons.js
index 300b1df..60f2e9f 100644
--- a/src/components/GroceryList/products/ProductButtons.js
+++ b/src/components/GroceryList/products/ProductButtons.js
@@ -24,7 +24,7 @@ const UploadProductsButton = (props) => {
             <UploadInput type="file"
                 onChange={evt => openFile(evt)}
                 multiple={false} />
-            {/* <UploadIcon /> */}
+            <UploadIcon />
         </WrapperUpload>
     )
 }
@@ -41,7 +41,7 @@ const DownloadProductsButton = (props) => {
     }
     return (
         <WrapperDownload toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
-            {/* <DownloadIcon /> */}
+            <DownloadIcon />
         </WrapperDownload>
     )
 }
@@ -56,7 +56,7 @@ const RemoveProductsButton = (props) => {
     }
     return (
         <WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
-            {/* <RemoveIcon /> */}
+            <RemoveIcon />
         </WrapperRemove>
     )
 }
@@ -68,7 +68,7 @@ export const ContainerButtons = (props) => {
             <DownloadProductsButton visible={visible} />
             <RemoveProductsButton visible={visible} />
             <WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
-                {/* <MenuIcon /> */}
+                <MenuIcon />
             </WrapperButtons >
         </>
     )
@@ -80,7 +80,7 @@ export const AddProductButton = (props) => {
     return (
         <>
             <WrapperAddProduct toggle={visible} onPress={() => setVisible(true)}>
-                {/* <PlusIcon /> */}
+                <PlusIcon />
             </WrapperAddProduct>
             <ModalAddProduct visible={visible} closeModal={closeModal} />
         </>
diff --git a/src/components/GroceryList/products/ProductsList.js b/src/components/GroceryList/products/ProductsList.js
index 96595de..3e4df0c 100644
--- a/src/components/GroceryList/products/ProductsList.js
+++ b/src/components/GroceryList/products/ProductsList.js
@@ -8,28 +8,32 @@ import { selectAllSortedProducts } from '../../../redux/slices/groceryList/produ
 //styles
 import { WrapperList } from './styles/list'
 import ModalEditProduct from '../../modals/groceries/ModalEditProduct';
-import { ScrollView, View } from 'react-native';
+import { View } from 'react-native';
 import HeaderPadding from '../../Header';
+import { FlatList } from 'react-native-gesture-handler';
 
 const ProductsList = (props) => {
     const products = useSelector(selectAllSortedProducts)
 
     const [visible, setVisible] = useState(false);
 
-    const productList = products.map((product, index) => {
-        return (
-            <ListedProduct key={index} _id={product._id} setVisible={setVisible} />
-        )
-    })
-
     return (
         <WrapperList>
-            <ScrollView>
-                <HeaderPadding />
-                {productList}
-                <View style={{ height: 150 }} />
-                {products.find(product => product.modalVisible) && <ModalEditProduct visible={visible} setVisible={setVisible} />}
-            </ScrollView>
+
+            <FlatList
+                ListHeaderComponent={ <HeaderPadding/> }
+                ListFooterComponent={<View style={{ height: 100 }} />}
+                initialNumToRender={10}
+                maxToRenderPerBatch={10}
+                data={products}
+                renderItem={({ item, index }) => {
+                    return <ListedProduct key={index} _id={item._id} setVisible={setVisible} />
+                }}
+                keyExtractor={(item, index) => {
+                    return index.toString();
+                }}
+            />
+            {products.find(product => product.modalVisible) && <ModalEditProduct visible={visible} setVisible={setVisible} />}
         </WrapperList>
     )
 }
diff --git a/src/components/GroceryList/products/styles/buttons.js b/src/components/GroceryList/products/styles/buttons.js
index f36f783..7710199 100644
--- a/src/components/GroceryList/products/styles/buttons.js
+++ b/src/components/GroceryList/products/styles/buttons.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components'
 //dependencies
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
diff --git a/src/components/GroceryList/products/styles/listedProduct.js b/src/components/GroceryList/products/styles/listedProduct.js
index 08dcee6..da11696 100644
--- a/src/components/GroceryList/products/styles/listedProduct.js
+++ b/src/components/GroceryList/products/styles/listedProduct.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { View, Text, Image, TouchableOpacity } from 'react-native'
 import styled, { css } from 'styled-components'
 //dependencies
diff --git a/src/components/GroceryList/styles/tabMenu.js b/src/components/GroceryList/styles/tabMenu.js
index d8b9e66..28bc816 100644
--- a/src/components/GroceryList/styles/tabMenu.js
+++ b/src/components/GroceryList/styles/tabMenu.js
@@ -1,11 +1,10 @@
+import React from 'react'
 import { TouchableOpacity, View } from 'react-native'
 import styled, { css } from 'styled-components'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import theme from '../../../styles/theme';
 
 
-const iconSize = '2.0px'
-const iconSizeSelected = '2.5px'
 
 const WrapperIcon = styled(TouchableOpacity)`
     display: flex;
@@ -55,15 +54,9 @@ export const WrapperGroceries = styled(WrapperIcon)`
     height: 65px;
 `
 
-const Groceries = () => <MaterialCommunityIcons name="shopping" color={theme.colors.textW0} size={iconSize} />
+const Groceries = () => <MaterialCommunityIcons name="shopping" color={theme.colors.textW0} size={30} />
 
 export const IconGroceries = styled(Groceries)`
-    font-size: ${iconSize};
-    ${props => props.currenttab === 'Groceries' &&
-        css` 
-        color: ${props => props.theme.colors.textW0};
-        font-size: ${iconSizeSelected};`
-    };
 `
 //products
 export const WrapperProducts = styled(WrapperIcon)`
@@ -72,15 +65,8 @@ export const WrapperProducts = styled(WrapperIcon)`
 
 `
 
-const Products = () => <MaterialCommunityIcons name="apple" color={theme.colors.textW0} size={iconSize} />
+const Products = () => <MaterialCommunityIcons name="food-apple" color={theme.colors.textW0} size={30} />
 
 export const IconProducts = styled(Products)`
-    font-size: 16px;
     margin-top:-5px;
-    ${props => props.currenttab === 'Products' &&
-        css` 
-        color: ${props => props.theme.colors.textW0};
-        font-size: 16px;`
-    };
-
 `
diff --git a/src/components/Home/GroceryCard.js b/src/components/Home/GroceryCard.js
index bed8071..8f44c32 100644
--- a/src/components/Home/GroceryCard.js
+++ b/src/components/Home/GroceryCard.js
@@ -11,6 +11,7 @@ const GroceryCard = (props) => {
     return (
         <WrapperCard onPress={() => navigation.navigate('Groceries')}>
             <TextCard>Groceries</TextCard>
+            <IconCoffee/>
             <View style={{ height: 100, width: '100%' }} />
         </WrapperCard>
     )
diff --git a/src/components/Home/RecipeCard.js b/src/components/Home/RecipeCard.js
index 1933c45..07d13a4 100644
--- a/src/components/Home/RecipeCard.js
+++ b/src/components/Home/RecipeCard.js
@@ -10,7 +10,7 @@ const RecipeCard = () => {
         // <Link to="/recipes">
             <WrapperCard>
                 <TextCard>Recipes</TextCard>
-                {/* <IconRecipe/> */}
+                <IconRecipe/>
             </WrapperCard>
         // </Link>
     )
diff --git a/src/components/modals/groceries/ModalAddItem.js b/src/components/modals/groceries/ModalAddItem.js
index 6829b43..2c540ea 100644
--- a/src/components/modals/groceries/ModalAddItem.js
+++ b/src/components/modals/groceries/ModalAddItem.js
@@ -4,7 +4,7 @@ import Dropdown, { QtDropdown } from '../../Dropdown'
 
 //styles
 import {
-    StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall
+    StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall, Wrapper
 } from '../styles/modal'
 import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem'
 import { IconTag, IconDollar } from './styles/addProduct'
@@ -64,55 +64,60 @@ const ModalAddItem = (props) => {
         setPrice(product.price)
     }
     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 product</ModalHeader>
-            {/* {product && product.image && <Image source={product.image} />} */}
+            {/* {product && product.image && <Image source={product.image} />}  */}
             <WrapperInput>
                 <IconProduct />
-                <Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
+                <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false) }
                     type="text"
                     value={productName}
-                    onChange={(text) => setProductName(text.target.value)}
+                    onChangeText={(text) => setProductName(text)}
                     placeholder="Product name" />
-                {/* {productName ? <IconCheck /> : <IconWrong />} */}
+                {productName != "" ? <IconCheck /> : <IconWrong />}
             </WrapperInput>
             {focusedProduct && <WrapperDropdown>
                 <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
             </WrapperDropdown>}
             <WrapperInput>
-                {/* <IconAmount /> */}
+                <IconAmount />
                 <Input style={{ width: '69%' }}
                     type="number"
                     value={amount}
-                    onChange={(text) => setAmount(text.target.value)}
+                    onChange={(text) => setAmount(text)}
                     placeholder="Amount" />
-                {/* {amount ? <IconCheck /> : <IconWrong />} */}
+                {amount ? <IconCheck /> : <IconWrong />}
                 <InputSmall style={{ marginLeft: "1%", width: '10%' }}
                     onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
                     type="text"
                     value={qt}
-                    onChange={(text) => setQt(text.target.value)}
+                    onChange={(text) => setQt(text)}
                     placeholder="Qt." />
             </WrapperInput>
-            {focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
+            {/*{focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
                 <QtDropdown  text={qt} setElement={setQt} />
             </WrapperDropdown>}
             <WrapperInput>
-                {/* <IconPerson /> */}
+                <IconPerson />
                 <Input type="text"
                     value={person}
                     onChange={(text) => setPerson(text.target.value)}
                     placeholder="For" />
             </WrapperInput>
             <WrapperInput>
-                {/* <IconDetails /> */}
+                <IconDetails />
                 <Input type="text"
                     value={details}
                     onChange={(text) => setDetails(text.target.value)}
                     placeholder="Additional details" />
             </WrapperInput>
             <WrapperInput>
-                {/* <IconTag /> */}
+                <IconTag />
                 <Input type="text"
                     onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
                     value={tag}
@@ -123,7 +128,7 @@ const ModalAddItem = (props) => {
                 <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
             </WrapperDropdown>}
             <WrapperInput>
-                {/* <IconDollar /> */}
+                <IconDollar />
                 <Input type="text"
                     value={price}
                     onChange={(text) => setPrice(text.target.value)}
@@ -133,7 +138,8 @@ const ModalAddItem = (props) => {
                 <Button onClick={props.closeModal}>Close</Button>
                 <VerticalSeperator />
                 <Button onClick={() => handleSubmit()}>Add Item</Button>
-            </WrapperButtons>
+            </WrapperButtons> */}
+            </Wrapper>
         </StyledModal >
     )
 }
diff --git a/src/components/modals/groceries/ModalAddProduct.js b/src/components/modals/groceries/ModalAddProduct.js
index 9185cf6..f7a02fd 100644
--- a/src/components/modals/groceries/ModalAddProduct.js
+++ b/src/components/modals/groceries/ModalAddProduct.js
@@ -45,35 +45,35 @@ export const ModalAddProduct = (props) => {
         <StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
             <ModalHeader>Add product</ModalHeader>
             <WrapperInput>
-                {/* <IconProduct /> */}
+                <IconProduct />
                 <InputSmall type="text"
                     value={productName}
                     onChange={(text) => setProductName(text.target.value)}
                     // onKeyDown={(event) => handleKeyDown(event)}
                     placeholder="Product name" />
-                {/* {productName ? <IconCheck /> : <IconWrong />} */}
+                {productName ? <IconCheck /> : <IconWrong />}
             </WrapperInput>
             <WrapperInput>
-                {/* <IconTag /> */}
+                <IconTag />
                 <InputSmall onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
                     type="text"
                     value={tag}
                     onChange={(text) => setTag(text.target.value)}
                     placeholder="Tag" />
-                {/* {tag ? <IconCheck /> : <IconWrong />} */}
+                {tag ? <IconCheck /> : <IconWrong />}
             </WrapperInput>
             {focused && <WrapperDropdown>
                 <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
             </WrapperDropdown>}
             <WrapperInput>
-                {/* <IconDollar /> */}
+                <IconDollar />
                 <InputSmall type="number"
                     value={price}
                     onChange={(text) => setPrice(text.target.value)}
                     placeholder="Price" />
             </WrapperInput>
             <WrapperInput>
-                {/* <IconLink /> */}
+                <IconLink />
                 <InputSmall type="text"
                     value={image}
                     onChange={(text) => setImage(text.target.value)}
diff --git a/src/components/modals/groceries/ModalEditItem.js b/src/components/modals/groceries/ModalEditItem.js
index 7a5f2b8..cfb70da 100644
--- a/src/components/modals/groceries/ModalEditItem.js
+++ b/src/components/modals/groceries/ModalEditItem.js
@@ -70,26 +70,26 @@ const ModalEditItem = (props) => {
                 </WrapperProductInfo>
             </WrapperProduct>
             <WrapperInput>
-                {/* <IconProduct /> */}
+                <IconProduct />
                 <Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
                     type="text"
                     value={productName}
                     onChange={(text) => setProductName(text.target.value)}
                     // onKeyDown={(event) => handleKeyDown(event)}
                     placeholder="Product name" />
-                {/* {productName ? <IconCheck /> : <IconWrong />} */}
+                {productName ? <IconCheck /> : <IconWrong />}
             </WrapperInput>
             {focusedProduct && <WrapperDropdown>
                 <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
             </WrapperDropdown>}
             <WrapperInput>
-                {/* <IconAmount /> */}
+                <IconAmount />
                 <Input style={{ width: '67%' }}
                     type="number"
                     value={amount}
                     onChange={(text) => setAmount(text.target.value)}
                     placeholder="Amount" />
-                {/* {amount ? <IconCheck /> : <IconWrong />} */}
+                {amount ? <IconCheck /> : <IconWrong />}
                 <InputSmall style={{ marginLeft: "1%", width: '10%' }}
                     onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
                     type="text"
@@ -101,21 +101,21 @@ const ModalEditItem = (props) => {
                 <QtDropdown  text={qt} setElement={setQt} />
             </WrapperDropdown>}
             <WrapperInput>
-                {/* <IconPerson /> */}
+                <IconPerson />
                 <Input type="text"
                     value={person}
                     onChange={(text) => setPerson(text.target.value)}
                     placeholder="For" />
             </WrapperInput>
             <WrapperInput>
-                {/* <IconDetails /> */}
+                <IconDetails />
                 <Input type="text"
                     value={details}
                     onChange={(text) => setDetails(text.target.value)}
                     placeholder="Additional details" />
             </WrapperInput>
             <WrapperInput>
-                {/* <IconTag /> */}
+                <IconTag />
                 <Input type="text"
                     onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
                     value={tag}
@@ -126,7 +126,7 @@ const ModalEditItem = (props) => {
                 <Dropdown array={tags.map(t => t.tagName)} text={tag} setElement={setTag} />
             </WrapperDropdown>}
             <WrapperInput>
-                {/* <IconDollar /> */}
+                <IconDollar />
                 <Input type="text"
                     value={price}
                     onChange={(text) => setPrice(text.target.value)}
diff --git a/src/components/modals/groceries/ModalEditProduct.js b/src/components/modals/groceries/ModalEditProduct.js
index 56ab0f4..10e882b 100644
--- a/src/components/modals/groceries/ModalEditProduct.js
+++ b/src/components/modals/groceries/ModalEditProduct.js
@@ -55,35 +55,35 @@ const ModalEditProduct = (props) => {
                 </WrapperProductInfo>
             </WrapperProduct>
             <WrapperInput>
-                {/* <IconProduct /> */}
+                <IconProduct />
                 <Input type="text"
                     value={productName}
                     onChange={(text) => setProductName(text.target.value)}
                     // onKeyDown={(event) => handleKeyDown(event)}
                     placeholder="Product name" />
-                {/* {productName ? <IconCheck /> : <IconWrong />} */}
+                {productName ? <IconCheck /> : <IconWrong />}
             </WrapperInput>
             <WrapperInput>
-                {/* <IconTag /> */}
+                <IconTag />
                 <Input onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
                     type="text"
                     value={tag}
                     onChange={(text) => setTag(text.target.value)}
                     placeholder="Tag" />
-                {/* {tag ? <IconCheck /> : <IconWrong />} */}
+                {tag ? <IconCheck /> : <IconWrong />}
             </WrapperInput>
             {focused && <WrapperDropdown>
                 <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
             </WrapperDropdown>}
             <WrapperInput>
-                {/* <IconDollar /> */}
+                <IconDollar />
                 <Input type="number"
                     value={price}
                     onChange={(text) => setPrice(text.target.value)}
                     placeholder="Price" />
             </WrapperInput>
             <WrapperInput>
-                {/* <IconLink /> */}
+                <IconLink />
                 <Input type="text"
                     value={image}
                     onChange={(text) => setImage(text.target.value)}
diff --git a/src/components/modals/groceries/styles/addItem.js b/src/components/modals/groceries/styles/addItem.js
index 7fc640f..b88fd6c 100644
--- a/src/components/modals/groceries/styles/addItem.js
+++ b/src/components/modals/groceries/styles/addItem.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { Image } from 'react-native'
diff --git a/src/components/modals/groceries/styles/addProduct.js b/src/components/modals/groceries/styles/addProduct.js
index fbd87d3..a90c54c 100644
--- a/src/components/modals/groceries/styles/addProduct.js
+++ b/src/components/modals/groceries/styles/addProduct.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
diff --git a/src/components/modals/recipes/ModalAddIngredients.js b/src/components/modals/recipes/ModalAddIngredients.js
index 54a3562..323c4f1 100644
--- a/src/components/modals/recipes/ModalAddIngredients.js
+++ b/src/components/modals/recipes/ModalAddIngredients.js
@@ -60,7 +60,7 @@ const ModalAddIngredients = (props) => {
             <ModalHeader>Add to grocerylist</ModalHeader>
             <ModalDescription>Choose a grocery list and select the ingredients you would like to add to it</ModalDescription>
             <WrapperInput>
-                {/* <IconList /> */}
+                <IconList />
                 <Input
                     style={{ fontSize: 20 }}
                     type="text"
@@ -68,14 +68,14 @@ const ModalAddIngredients = (props) => {
                     onChange={(text) => setListName(text.target.value)}
                     onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
                     placeholder="Grocery list" />
-                {/* {listName ? <IconCheck /> : <IconWrong />} */}
+                {listName ? <IconCheck /> : <IconWrong />}
             </WrapperInput>
             {focused && <WrapperDropdown>
                 <Dropdown array={lists.map(list => list.listName)} text={listName} setElement={setListName} />
             </WrapperDropdown>
             }
             <WrapperInput>
-                {/* <IconMeal /> */}
+                <IconMeal />
                 <Input
                     style={{ fontSize: 20, width: 100 }}
                     type="number"
diff --git a/src/components/modals/styles/modal.js b/src/components/modals/styles/modal.js
index 8687569..f9e9885 100644
--- a/src/components/modals/styles/modal.js
+++ b/src/components/modals/styles/modal.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Text, View, TextInput } from 'react-native'
 import styled from 'styled-components'
 import Modal from 'react-native-modal';
@@ -5,10 +6,13 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import theme from '../../../styles/theme';
 
 export const StyledModal = styled(Modal)`
-    .modal-content{
-        background-color: ${({ theme }) => theme.colors.dp01};
-        border-radius: 15px;
-    }
+    margin: 0px;
+    padding: 5px;
+`
+export const Wrapper = styled(View)`
+    border-radius: 10px;
+    padding: 5px;
+    background-color: ${props => props.theme.colors.dp01};
 `
 export const WrapperInput = styled(View)`
     padding-left: 5px;
@@ -40,7 +44,7 @@ export const VerticalSeperator = styled(View)`
 export const InputSmall = styled(TextInput)`
     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: 50%;
@@ -50,7 +54,8 @@ export const InputSmall = styled(TextInput)`
 export const Input = styled(TextInput)`
     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;
+    color: ${props => props.theme.colors.textW2};
     
 
     width: 80%;
@@ -61,12 +66,12 @@ export const Input = styled(TextInput)`
 export const Button = styled(Text)`
     color: ${props => props.theme.colors.primary};
     font-weight: bold;
-    font-size: ${({ theme }) => theme.fontSize.fontS};
+    font-size: ${({ theme }) => theme.fontSizes.fontS}px;
     margin-bottom: 10px;
 `
 
 export const ModalHeader = styled(Text)`
-    font-size: ${({ theme }) => theme.fontSize.fontM};
+    font-size: ${({ theme }) => theme.fontSizes.fontM}px;
     margin: 5px;
     color: ${({ theme }) => theme.colors.textW1};
 `
@@ -77,14 +82,14 @@ export const ModalDescription = styled(Text)`
     padding: 2px;
 `
 
-const Wrong = () => <MaterialCommunityIcons name="asterisk" color={theme.colors.error + 'aa'} size={theme.fontSize.fontS} />
+const Wrong = () => <MaterialCommunityIcons name="asterisk" color={theme.colors.error + 'aa'} size={theme.fontSizes.fontS} />
 
 export const IconWrong = styled(Wrong)`
     margin-left: -10px;
     margin-top: -10px;
 `
 
-const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.primary} size={theme.fontSize.fontM}/>
+const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.primary} size={theme.fontSizes.fontM}/>
 
 export const IconCheck = styled(Check)`
     margin-left: -15px;
diff --git a/src/components/recipes/addRecipe/Buttons.js b/src/components/recipes/addRecipe/Buttons.js
index ece24f9..6d5a6ab 100644
--- a/src/components/recipes/addRecipe/Buttons.js
+++ b/src/components/recipes/addRecipe/Buttons.js
@@ -14,7 +14,7 @@ export const AddRecipeButton = () => {
     return (
         // < Link to="/recipes/addRecipe">
             <WrapperAddRecipe>
-                {/* <IconPlus /> */}
+                <IconPlus />
             </WrapperAddRecipe>
         // </Link>
     )
@@ -24,7 +24,7 @@ export const AddIngredientsButton = (props) => {
     const [visible, setVisible] = useState(false)
     return (<>
         <WrapperAddItem style={{ bottom: 10 }} onClick={()=>setVisible(true)}>
-            {/* <PlusIcon /> */}
+            <PlusIcon />
         </WrapperAddItem>
         <ModalAddIngredients id={props.id} visible={visible} closeModal={() => setVisible(false)} />
     </>
@@ -41,10 +41,10 @@ export const OptionsButtonRecipe = (props) => {
     }
     return (
         <WrapperOptions toggled={toggled} >
-            {/* <IconOptions toggled={toggled} onClick={() => setToggled(!toggled)} /> */}
+            <IconOptions toggled={toggled} onClick={() => setToggled(!toggled)} />
             <WrapperOptionButtons toggled={toggled}>
-                {/* <IconRemove onClick={() => handleRemove()} /> */}
-                {/* <IconEdit onClick={() => history.push("/recipes/addRecipe/" + props.id)} /> */}
+                <IconRemove onClick={() => handleRemove()} />
+                <IconEdit onClick={() => history.push("/recipes/addRecipe/" + props.id)} />
             </WrapperOptionButtons>
         </WrapperOptions>
     )
diff --git a/src/components/recipes/addRecipe/styles/buttons.js b/src/components/recipes/addRecipe/styles/buttons.js
index a08b514..84f09f4 100644
--- a/src/components/recipes/addRecipe/styles/buttons.js
+++ b/src/components/recipes/addRecipe/styles/buttons.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { View } from "react-native"
 import styled, {css} from 'styled-components'
 import { Button } from '../../../../styles/componentBlueprints'
diff --git a/src/pages/recipes/AddRecipe.js b/src/pages/recipes/AddRecipe.js
index 2d73b10..b66890b 100644
--- a/src/pages/recipes/AddRecipe.js
+++ b/src/pages/recipes/AddRecipe.js
@@ -70,7 +70,7 @@ const AddRecipe = () => {
                 {image && <StyledImage source={image} alt="Recipe" />}
                 <WrapperRecipe>
                     <View id="row">
-                        {/* <IconRecipe /> */}
+                        <IconRecipe />
                         <Input
                             type="text"
                             value={name}
@@ -78,13 +78,13 @@ const AddRecipe = () => {
                             placeholder="Recipe name" />
                     </View>
                     <View id="row">
-                        {/* <IconPot /> */}
+                        <IconPot />
                         <Input
                             type="number"
                             value={prepTime}
                             onChange={(text) => setPrepTime(text.target.value)}
                             placeholder="Prep time (min)" />
-                        {/* <IconMeal /> */}
+                        <IconMeal />
                         <Input
                             type="number"
                             value={servings}
@@ -92,7 +92,7 @@ const AddRecipe = () => {
                             placeholder="Servings" />
                     </View>
                     <View id="row">
-                        {/* <IconImage /> */}
+                        <IconImage />
                         <Input
                             style={{ borderBottom: 'none' }}
                             type="file" accept="image/*"
diff --git a/src/pages/recipes/Recipe.js b/src/pages/recipes/Recipe.js
index 09f6485..dbd3df3 100644
--- a/src/pages/recipes/Recipe.js
+++ b/src/pages/recipes/Recipe.js
@@ -3,8 +3,6 @@ import { useParams } from "react-router"
 //redux
 import { findRecipeById } from "../../redux/slices/recipesSlice"
 
-import Header from "../../components/Header"
-import { ArrowBack } from "../styles/page"
 import { 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"
@@ -37,7 +35,7 @@ const Recipe = () => {
                     <Hr />
                     {recipe.prepTime !== 0 && recipe.prepTime && <>
                         <View id="row" style={{ position: 'relative', marginTop: 0 }} >
-                            {/* <IconPotLarge /> */}
+                            <IconPotLarge />
                             <TextPrep>READY IN:</TextPrep>
                             <View id="column" >
                                 <TextTime>{recipe.prepTime}</TextTime>
@@ -45,7 +43,7 @@ const Recipe = () => {
                             </View>
                             {recipe.servings !== 0 && recipe.servings && <>
                                 <WrapperServings>
-                                    {/* <IconMeal /> */}
+                                    <IconMeal />
                                     <View>
                                         <TextTime>{recipe.servings}</TextTime>
                                         <TextServings>servings</TextServings>
diff --git a/src/pages/recipes/styles/addRecipe.js b/src/pages/recipes/styles/addRecipe.js
index b84ed84..f53cedc 100644
--- a/src/pages/recipes/styles/addRecipe.js
+++ b/src/pages/recipes/styles/addRecipe.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Image, Text, TextInput, View } from "react-native"
 import styled from 'styled-components'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
diff --git a/src/pages/recipes/styles/recipe.js b/src/pages/recipes/styles/recipe.js
index 0fedbd1..135bbe0 100644
--- a/src/pages/recipes/styles/recipe.js
+++ b/src/pages/recipes/styles/recipe.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Image, Text, View } from "react-native"
 import styled from 'styled-components'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
diff --git a/src/styles/theme.js b/src/styles/theme.js
index 6c9e0aa..9fad3cd 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -91,10 +91,10 @@ const theme = {
             textB5: LightenDarken(textB0, -18),
         },
     fontSizes: {
-        fontS: '16px',
-        fontM: '24px',
-        fontL: '32px',
-        fontXL: '64px',
+        fontS: 16,
+        fontM: 24,
+        fontL: 32,
+        fontXL: 64,
     },
     mediaQueries: {
         "below768": "only screen and (max-width: 768px)",