styling groceries a little better

2021-10-28 18:19:54 +02:00
parent 55c6704d1b
commit fb346632c5
28 changed files with 155 additions and 233 deletions
--- a/src/components/Dropdown.js
+++ b/src/components/Dropdown.js
@@ -20,9 +20,6 @@ const WrapperDropdown = styled(View)`
 const DropdownItem = styled(Text)`
    color: ${({ theme }) => theme.colors.textW2};
    font-size: 20px;
-    &:hover{
-        background-color: #0001;
-    }
 `
 const HorizontalSeperator = styled(View)`
    width: 100%;
--- 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} onClick={()=>handleTabPress("Groceries")}>
-                <IconGroceries currenttab={props.currentTab}/>
+                {/* <IconGroceries currenttab={props.currentTab}/> */}
            </WrapperGroceries>
            <WrapperProducts currenttab={props.currentTab} onClick={()=>handleTabPress("Products")}>
-                <IconProducts currenttab={props.currentTab}/>
+                {/* <IconProducts currenttab={props.currentTab}/> */}
            </WrapperProducts>
        </Wrapper>
    )
--- 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} onClick={handlePress}>
-            <CheckIcon />
+            {/* <CheckIcon /> */}
        </WrapperSelect>
    )
 }
@@ -34,7 +34,7 @@ const RemoveItemsButton = (props) => {
    }
    return (
        <WrapperRemove toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
-            <RemoveIcon />
+            {/* <RemoveIcon /> */}
        </WrapperRemove>
    )
 }
@@ -46,7 +46,7 @@ export const ContainerButtons = (props) => {
            <SelectAllItemsButton visible={visible} />
            <RemoveItemsButton visible={visible} />
            <WrapperButtons toggle={visible} onClick={() => setVisible(!visible)}>
-                <MenuIcon />
+                {/* <MenuIcon /> */}
            </WrapperButtons >
        </>
    )
@@ -60,7 +60,7 @@ export const AddItemButton = (props) => {
        return (
            <>
                <WrapperAddItem toggle={visibleItem} onClick={() => setVisibleItem(true)}>
-                    <PlusIcon />
+                    {/* <PlusIcon /> */}
                </WrapperAddItem>
                <ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
            </>
@@ -69,7 +69,7 @@ export const AddItemButton = (props) => {
    return (
        <>
            <WrapperAddList toggle={visibleList} onClick={() => setVisibleList(true)}>
-                <ListIcon />
+                {/* <ListIcon /> */}
            </WrapperAddList>
            <ModalAddList visible={visibleList} closeModal={() => setVisibleList(false)} />
        </>
--- a/src/components/GroceryList/groceries/GroceryList.js
+++ b/src/components/GroceryList/groceries/GroceryList.js
@@ -7,7 +7,8 @@ import { selectAllSortedItems } from '../../../redux/slices/groceryList/itemsSli
 //styles
 import { WrapperGroceryList, TextTotalAmount } from './styles/list'
 import { selectAllProducts } from '../../../redux/slices/groceryList/productsSlice';
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
+import HeaderPadding from '../../Header';

 const GroceryList = (props) => {
    const items = useSelector(selectAllSortedItems)
@@ -25,8 +26,11 @@ const GroceryList = (props) => {
    return (
        <WrapperGroceryList>
            <TextTotalAmount>total:  € {totalPrice}</TextTotalAmount>
-            {Lists}
-            <View style={{ height: 150 }} />
+            <ScrollView>
+                <HeaderPadding/>
+                {Lists}
+                <View style={{ height: 150 }} />
+            </ScrollView>
        </WrapperGroceryList>
    )
 }
--- a/src/components/GroceryList/groceries/List.js
+++ b/src/components/GroceryList/groceries/List.js
@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useState , useEffect} from 'react'
 //components
 import ListedItem from './ListedItem'
 import ModalEditItem from '../../modals/groceries/ModalEditItem';
 import ModalEditList from '../../modals/groceries/ModalEditList';
 // Styling
-import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, ButtonRemoveList, ButtonEditList, IconArrowDown, ListSizeWrapper } from './styles/list'
+import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, ButtonRemoveList, ButtonEditList, IconArrowDown, ListSizeWrapper, WrapperRight, WrapperLeft } from './styles/list'
 //redux
 import { useSelector, useDispatch } from 'react-redux';
 import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
@@ -15,11 +15,10 @@ 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(0);
-    const ref = useRef(null);
+    const [height, setHeight] = useState(100);
  
    useEffect(() => {
-        setHeight(ref.current.clientHeight);
+        setHeight(1);
    }, [list.open, items]);
  
    const dispatch = useDispatch()
@@ -41,21 +40,21 @@ export default React.memo((props) => {
    }
    return (
        <Wrapper >
-            <WrapperListTitle onClick={() => { dispatch(toggleOpen(props.listId)) }}>
-                <View id="left">
+            <WrapperListTitle onPress={() => { dispatch(toggleOpen(props.listId)) }}>
+                <WrapperLeft>
                    <ListTitle>{list.listName}</ListTitle>
                    <ListSubtitle>{list.listDescription && list.listDescription}</ListSubtitle>
-                </View>
-                <View id="right">
+                </WrapperLeft>
+                <WrapperRight>
                    {list.open && <>
-                        <ButtonEditList onClick={() => setModalListVisible(true)} />
-                        <ButtonRemoveList onClick={removeList} />
+                        {/* <ButtonEditList onClick={() => setModalListVisible(true)} />
+                        <ButtonRemoveList onClick={removeList} /> */}
                    </>}
-                    <IconArrowDown visible={list.open.toString()} />
-                </View>
+                    {/* <IconArrowDown visible={list.open.toString()} /> */}
+                </WrapperRight>
            </WrapperListTitle>
            <ListSizeWrapper height={height} visible={list.open} >
-                < WrapperList listLength={items.length} ref={ref}>
+                < 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>
--- a/src/components/GroceryList/groceries/ListedItem.js
+++ b/src/components/GroceryList/groceries/ListedItem.js
@@ -9,7 +9,6 @@ import { selectItemById, checkToggle, modalToggle } from '../../../redux/slices/
 import { findTag } from '../../../redux/slices/groceryList/tagsSlice'

 const ListedItem = React.memo((props) => {
-    console.log("Rendering item")
    const dispatch = useDispatch()
    const item = useSelector(state => selectItemById(state, props.item._id), shallowEqual)
    const tag = useSelector(state => findTag(state, item.tag))
@@ -20,7 +19,7 @@ const ListedItem = React.memo((props) => {
                    <TextProductName >{item.productName}</TextProductName>
                    <TextDetails>{item.details}</TextDetails>
                    <TextAmount>{item.amount.am}{item.amount.qt && " " + item.amount.qt}</TextAmount>
-                    {item.person && <TextPerson>{item.person}</TextPerson>}
+                    <TextPerson>{item.person && item.person}</TextPerson>
                    {/* {product.image && <Image src={product.image} />} */}
                </WrapperItem>
            </DarkLayer>
--- a/src/components/GroceryList/groceries/styles/buttons.js
+++ b/src/components/GroceryList/groceries/styles/buttons.js
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 //dependencies
-import { MdAddShoppingCart, MdDeleteForever} from 'react-icons/md'
-import { FiMenu,FiCheckSquare } from 'react-icons/fi'
+import { MdAddShoppingCart, MdDeleteForever } from 'react-icons/md'
+import { FiMenu, FiCheckSquare } from 'react-icons/fi'
 import { CgFileAdd } from 'react-icons/cg'
 //blueprints
 import { Button } from '../../../../styles/componentBlueprints'
@@ -10,114 +10,65 @@ import { Button } from '../../../../styles/componentBlueprints'
 export const WrapperButtons = styled(Button)`
    position:absolute;
    background-color: ${({ theme }) => theme.colors.primary};
-    bottom:50px;
-    left:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        bottom:70px;
-        left:10px;
-    }
+    bottom:70px;
+    left:10px;
 `

 export const WrapperAddItem = styled(Button)`
    position:absolute;
    background-color: ${({ theme }) => theme.colors.primary};
-    bottom:50px;
-    right:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        bottom:70px;
-        right:10px;
-    }
+    bottom:70px;
+    right:10px;
 `
 export const WrapperAddList = styled(Button)`
    position:absolute;
    background-color: ${({ theme }) => theme.colors.secondary};
-    bottom:50px;
-    right:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        bottom:70px;
-        right:10px;
-    }
+    bottom:70px;
+    right:10px;
 `
 export const WrapperRemove = styled(Button)`
    position:absolute;
    background-color: ${({ theme }) => theme.colors.error};
-    left:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        left:10px;
-        ${(props) =>
-        props.visible
-            ? css`
-                bottom:140px; 
-              `
-            : css`
-                bottom:70px; 
-              `}
-        }
+    left:10px;
    ${(props) =>
-        props.visible
-            ? css`
+    props.visible
+        ? css`
            bottom:140px; 
-          `
-            : css`
-            bottom:50px; 
-          `}
+            `
+        : css`
+            bottom:70px; 
+            `}
 `
 export const WrapperSelect = styled(Button)`
    position:absolute;
    background-color: ${({ theme }) => theme.colors.primary};
-    left:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        left:10px;
-        ${(props) =>
-        props.visible
-            ? css`
-                bottom:210px; 
-              `
-            : css`
-                bottom:70px; 
-              `};
-    }
+    left:10px;
    ${(props) =>
    props.visible
        ? css`
-            bottom:230px; 
-          `
+            bottom:210px; 
+            `
        : css`
-            bottom:50px; 
-          `};
+            bottom:70px; 
+            `};
 `
 export const MenuIcon = styled(FiMenu)`
-    color: ${({theme})=> theme.colors.textB2};
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 47px;
-    }
+    color: ${({ theme }) => theme.colors.textB2};
+    font-size: 47px;
 `
 export const PlusIcon = styled(MdAddShoppingCart)`
-color: ${({theme})=> theme.colors.textB2};
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 45px;
-    }
+color: ${({ theme }) => theme.colors.textB2};
+    font-size: 45px;
 `
 export const RemoveIcon = styled(MdDeleteForever)`
-color: ${({theme})=> theme.colors.textB2};
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 45px;
-    }
+color: ${({ theme }) => theme.colors.textB2};
+    font-size: 45px;
 `
 export const CheckIcon = styled(FiCheckSquare)`
-    color: ${({theme})=> theme.colors.textB2};
-    font-size: 50px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 40px;
-    }
+    color: ${({ theme }) => theme.colors.textB2};
+    font-size: 40px;
 `
 export const ListIcon = styled(CgFileAdd)`
-    color: ${({theme})=> theme.colors.textB2};
-    font-size: 50px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 40px;
-    }
+    color: ${({ theme }) => theme.colors.textB2};
+    font-size: 40px;
 `
--- a/src/components/GroceryList/groceries/styles/list.js
+++ b/src/components/GroceryList/groceries/styles/list.js
@@ -1,4 +1,4 @@
-import { Text, View } from 'react-native'
+import { Text, TouchableOpacity, View } from 'react-native'
 import styled, { css } from 'styled-components'
 import { MdClose } from 'react-icons/md'
 import { BiEditAlt } from 'react-icons/bi'
@@ -15,10 +15,7 @@ export const Wrapper = styled(View)`
    border-bottom-width: 3px;
    /* border-radius: 15px; */
    margin-bottom: 10px;
-    width: 768px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        width: 100%;
-    }
+    width: 100%;
 `
 export const ListSizeWrapper = styled(View)`
    height: ${(props) => props.visible ? props.height + 'px' : css`0px`};
@@ -32,7 +29,7 @@ export const WrapperList = styled(View)`
    align-items: center;
    overflow: hidden;
 `
-export const WrapperListTitle = styled(View)`
+export const WrapperListTitle = styled(TouchableOpacity)`
    display: flex;  
    width: 100%;
    min-height: 60px;
@@ -40,26 +37,25 @@ export const WrapperListTitle = styled(View)`
    justify-content: center;
    align-items: center;
    padding: 3px;
-    #left {
-        display: flex;
-        flex-direction: column; 
-        width: 50%;
-    }
-    #right {
-        width: 50%;
-        display: flex;
-        align-items: flex-start;
-        justify-content: flex-end;
-        flex-direction: row; 
-    }
-    
+`
+export const WrapperLeft = styled(View)`
+    display: flex;
+    flex-direction: column; 
+    width: 50%;
+`
+export const WrapperRight = styled(View)`
+    width: 50%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    flex-direction: row; 
 `
 export const ListTitle = styled(Text)`
-    overflow-wrap: break-word;
+    /* overflow-wrap: break-word; */
    font-size: 20px;
 `
 export const ListSubtitle = styled(Text)`
-    overflow-wrap: break-word;
+    /* overflow-wrap: break-word; */
    color: ${({ theme }) => theme.colors.textB5};
    font-size: 17px;
 `
--- a/src/components/GroceryList/groceries/styles/listedItem.js
+++ b/src/components/GroceryList/groceries/styles/listedItem.js
@@ -5,10 +5,8 @@ export const Wrapper = styled(View)`
    display: flex;
    flex-direction: row;
    align-items: flex-start;
-    width: 768px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        width: 100vw;
-    }
+    justify-content: flex-start;
+    width: 100%;
 `
 export const DarkLayer = styled(View)`
    background-color: ${({ theme }) => theme.colors.dp00};
@@ -22,18 +20,15 @@ export const DarkLayer = styled(View)`
 export const WrapperItem = styled(View)`
    box-shadow: ${({ theme }) => theme.colors.shadow};
    display: flex;
-    flex: 1;
    min-height: ${props => props.person ? css`60px` : css`30px`};
    position: relative;
+    width: 100%;
    
    flex-direction: column;
    justify-content: center;
    border-radius: 15px;
    
    background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '66'};
-    &:hover{
-        background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '77'};
-    }
 `
 export const WrapperButton = styled(View)`
    height: 30px;
@@ -41,7 +36,7 @@ export const WrapperButton = styled(View)`
 `
 export const TextProductName = styled(Text)`
    /* word-wrap: break-word; */
-    word-break: break-all;
+    /* word-break: break-all; */
    margin: 2px 0px 0px 8px;

    max-width: 70%;
@@ -50,7 +45,7 @@ export const TextProductName = styled(Text)`
    color: ${props => props.theme.colors.textW1};
 `
 export const TextDetails = styled(Text)`
-    word-wrap: break-word;
+    /* word-wrap: break-word; */
    margin: 2px 0px 3px 8px;

    max-width: 65%;
@@ -62,10 +57,10 @@ export const TextAmount = styled(Text)`
    position: absolute;
    max-width: 100px;
    max-height: 30px;
-    word-wrap: break-word;
-    text-overflow: ellipsis;
+    /* word-wrap: break-word; */
+    /* text-overflow: ellipsis; */
    overflow:hidden; 
-    white-space:nowrap; 
+    /* white-space:nowrap;  */
    right: 0px;
    margin: 3px 3px 3px 3px;
    font-size: 16px;
@@ -78,11 +73,11 @@ export const TextAmount = styled(Text)`
 `
 export const TextPerson = styled(Text)`
    position: absolute;
-    word-wrap: break-word;
+    /* word-wrap: break-word; */
    max-width: 100px;
-    text-overflow: ellipsis;
+    /* text-overflow: ellipsis; */
    overflow:hidden; 
-    white-space:nowrap; 
+    /* white-space:nowrap;  */
    right: 0px;
    bottom: 0px;
    font-size: 16px;
--- a/src/components/GroceryList/products/ListedProduct.js
+++ b/src/components/GroceryList/products/ListedProduct.js
@@ -23,7 +23,7 @@ const ListedProduct = React.memo((props) => {
            </WrapperProduct>
            <WrapperButton onClick={()=>dispatch(checkToggle(product._id))} >
                <CheckButton checked={product.checked}>
-                    <IconCheck checked={product.checked} />
+                    {/* <IconCheck checked={product.checked} /> */}
                </CheckButton>
            </WrapperButton>
        </Wrapper>
--- 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} onClick={handlePress}>
-            <DownloadIcon />
+            {/* <DownloadIcon /> */}
        </WrapperDownload>
    )
 }
@@ -56,7 +56,7 @@ const RemoveProductsButton = (props) => {
    }
    return (
        <WrapperRemove toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
-            <RemoveIcon />
+            {/* <RemoveIcon /> */}
        </WrapperRemove>
    )
 }
@@ -68,7 +68,7 @@ export const ContainerButtons = (props) => {
            <DownloadProductsButton visible={visible} />
            <RemoveProductsButton visible={visible} />
            <WrapperButtons toggle={visible} onClick={() => setVisible(!visible)}>
-                <MenuIcon />
+                {/* <MenuIcon /> */}
            </WrapperButtons >
        </>
    )
@@ -80,7 +80,7 @@ export const AddProductButton = (props) => {
    return (
        <>
            <WrapperAddProduct toggle={visible} onClick={() => setVisible(true)}>
-                <PlusIcon />
+                {/* <PlusIcon /> */}
            </WrapperAddProduct>
            <ModalAddProduct visible={visible} closeModal={closeModal} />
        </>
--- a/src/components/GroceryList/products/styles/listedProduct.js
+++ b/src/components/GroceryList/products/styles/listedProduct.js
@@ -27,10 +27,6 @@ export const WrapperProduct = styled(View)`
    margin-left: 7px;
    
    background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '66'};
-    &:hover{
-        background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '77'};
-    }
-
 `
 export const WrapperButton = styled(View)`
    height: 60px;
@@ -47,9 +43,6 @@ export const CheckButton = styled(View)`
    border-radius: 15px;
    margin: 0px 5px ;
    background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey};
-    &:hover{
-        background-color: ${props => props.checked ? props.theme.colors.selected : LightenDarken(props.theme.colors.buttonGrey, 5)}
-    }
    `

 export const WrapperText = styled(View)`
@@ -60,20 +53,20 @@ export const WrapperText = styled(View)`
    }
 `
 export const TextProductName = styled(Text)`
-    word-wrap: break-word;
+    /* word-wrap: break-word; */
    max-width: 70%;
    margin: 0px 0px 0px 5px;
    font-size: 16px;
    color: ${props => props.theme.colors.textW1};
 `
 export const TextTag = styled(Text)`
-    word-wrap: break-word;
+    /* word-wrap: break-word; */
    margin: 2px 0px 0px 5px;
    font-size: 16px;
    color: ${props => LightenDarken(props.color,-30)};
 `
 export const TextPrice = styled(Text)`
-    word-wrap: break-word;
+    /* word-wrap: break-word; */
    margin: 0px 6px 3px 3px;
    font-size: 16px;
    
--- a/src/components/GroceryList/styles/tabMenu.js
+++ b/src/components/GroceryList/styles/tabMenu.js
@@ -39,7 +39,6 @@ export const WrapperSelected = styled(View)`
    width:  125px;
    height: 50px;
    border-radius:25px;
-    //anims
    ${(props) =>
        props.currenttab === 'Groceries'
            ? css`
@@ -55,9 +54,6 @@ export const WrapperSelected = styled(View)`
 export const WrapperGroceries = styled(WrapperIcon)`
    flex:1;
    height: 65px;
-    /* &:hover{
-        background-color: #fffa;
-    } */
 `
 export const IconGroceries = styled(RiShoppingBasketLine)`
    font-size: ${iconSize};
@@ -71,9 +67,6 @@ export const IconGroceries = styled(RiShoppingBasketLine)`
 export const WrapperProducts = styled(WrapperIcon)`
    flex:1;
    height: 65px;
-    /* &:hover{
-        background-color: #fff4;
-    } */

 `
 export const IconProducts = styled(FaAppleAlt)`
--- a/src/components/modals/groceries/ModalAddItem.js
+++ b/src/components/modals/groceries/ModalAddItem.js
@@ -36,7 +36,6 @@ const ModalAddItem = (props) => {
                am: amount ? Number(amount) : 1,
                qt: qt
            }
-            console.log(amountObj)
            let listId = lists.find((list) => list.open === true)._id
            if (tags.find(t => t.tagName === tag)) {
                dispatch(itemAdded({ productName, amount: amountObj, person, details, tag, price, listId }));
@@ -65,7 +64,7 @@ const ModalAddItem = (props) => {
        setPrice(product.price)
    }
    return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} animation={false}>
+        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
            <ModalHeader>Add product</ModalHeader>
            {/* {product && product.image && <Image src={product.image} />} */}
            <WrapperInput>
@@ -75,19 +74,19 @@ const ModalAddItem = (props) => {
                    value={productName}
                    onChange={(text) => setProductName(text.target.value)}
                    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)}
                    placeholder="Amount" />
-                {amount ? <IconCheck /> : <IconWrong />}
+                {/* {amount ? <IconCheck /> : <IconWrong />} */}
                <InputSmall style={{ marginLeft: "1%", width: '10%' }}
                    onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
                    type="text"
@@ -99,21 +98,21 @@ const ModalAddItem = (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}
@@ -124,7 +123,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)}
--- a/src/components/modals/groceries/ModalAddList.js
+++ b/src/components/modals/groceries/ModalAddList.js
@@ -26,7 +26,7 @@ const ModalAddList = (props) => {
        }
    }
    return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} animation={false}>
+        <StyledModal show={props.visible} centered={true} onHide={props.closeModal}>
            <ModalHeader>Add a grocery list</ModalHeader>
            <WrapperInput>
                <Input
@@ -35,7 +35,7 @@ const ModalAddList = (props) => {
                    onChange={(text) => setListName(text.target.value)}
                    // onKeyDown={(event) => handleKeyDown(event)}
                    placeholder="List name" />
-                {listName ? <IconCheck /> : <IconWrong />}
+                {/* {listName ? <IconCheck /> : <IconWrong />} */}
            </WrapperInput>
            <WrapperInput>
                <Input type="text"
--- a/src/components/modals/groceries/ModalAddProduct.js
+++ b/src/components/modals/groceries/ModalAddProduct.js
@@ -42,38 +42,38 @@ export const ModalAddProduct = (props) => {
        }
    }
    return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} animation={false}>
+        <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)}
--- a/src/components/modals/groceries/ModalEditItem.js
+++ b/src/components/modals/groceries/ModalEditItem.js
@@ -61,7 +61,7 @@ const ModalEditItem = (props) => {
        props.setVisible(false)
    }
    return (
-        <StyledModal show={props.visible} centered={true} onHide={closeModal} animation={false}>
+        <StyledModal show={props.visible} centered={true} onHide={closeModal} >
            <WrapperProduct color={tagState.color}>
                {product && product.image && <StyledImage src={product.image} />}
                <WrapperProductInfo>
@@ -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)}
--- a/src/components/modals/groceries/ModalEditList.js
+++ b/src/components/modals/groceries/ModalEditList.js
@@ -23,7 +23,7 @@ const ModalEditList = (props) => {
        }
    }
    return (
-        <StyledModal show={props.visible} centered={true} onHide={() => props.setVisible(false)} animation={false}>
+        <StyledModal show={props.visible} centered={true} onHide={() => props.setVisible(false)}>
            <ModalHeader>Edit the list</ModalHeader> 
            <WrapperInput>
                <Input
--- a/src/components/modals/groceries/ModalEditProduct.js
+++ b/src/components/modals/groceries/ModalEditProduct.js
@@ -46,7 +46,7 @@ const ModalEditProduct = (props) => {
        props.setVisible(false)
    }
    return (
-        <StyledModal show={props.visible} centered={true} onHide={closeModal} animation={false}>
+        <StyledModal show={props.visible} centered={true} onHide={closeModal} >
            <WrapperProduct color={usedTag.color}>
                {image && <StyledImage src={image} alt="No image found" />}
                <WrapperProductInfo>
@@ -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)}
--- a/src/components/modals/recipes/ModalAddIngredients.js
+++ b/src/components/modals/recipes/ModalAddIngredients.js
@@ -62,11 +62,11 @@ const ModalAddIngredients = (props) => {
        }
    }
    return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} animation={false}>
+        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
            <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"
@@ -74,14 +74,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"
--- 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,9 +41,9 @@ 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()} />
+                {/* <IconRemove onClick={() => handleRemove()} /> */}
                {/* <IconEdit onClick={() => history.push("/recipes/addRecipe/" + props.id)} /> */}
            </WrapperOptionButtons>
        </WrapperOptions>
--- a/src/components/recipes/addRecipe/Ingredient.js
+++ b/src/components/recipes/addRecipe/Ingredient.js
@@ -15,8 +15,8 @@ export const Ingredient = (props) => {
                <IngredientName>{ingredient.productName}</IngredientName>
            </View>
            <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/styles/ingredient.js
+++ b/src/components/recipes/addRecipe/styles/ingredient.js
@@ -29,22 +29,22 @@ export const IngredientName = styled(Text)`
 margin-left: 10px;
 width: 60%;
 font-size: ${({ theme }) => theme.fontSize.fontS};
-overflow-wrap: break-word;
+/* 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;
+/* 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;
+/* overflow-wrap: break-word; */
 color: ${props => props.theme.colors.textW5};
 `
 export const IconRemove = styled(GoTrashcan)`
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from 'react-native'
+import { ScrollView, View } from 'react-native'
 import HeaderPadding from '../components/Header'

 //components
@@ -13,7 +13,7 @@ import { Wrapper, WrapperBoard, WrapperRight, WrapperLeft } from './styles/HomeP

 const HomePage = () => {
    return (
-        <View style={{flex: 1}}>
+        <ScrollView>
            <HeaderPadding/>
            <Wrapper>
                <WrapperBoard>
@@ -25,7 +25,7 @@ const HomePage = () => {
                    </WrapperRight>
                </WrapperBoard>
            </Wrapper>
-        </View>
+        </ScrollView>
    )
 }

--- a/src/pages/groceryList/GroceryListPage.js
+++ b/src/pages/groceryList/GroceryListPage.js
@@ -13,7 +13,7 @@ const GroceryListPage = () => {
            {
                currentTab === "Groceries" ? <Groceries /> : <Products />
            }
-            <TabMenu currentTab={currentTab} setCurrentTab={setCurrentTab} />
+            {/* <TabMenu currentTab={currentTab} setCurrentTab={setCurrentTab} /> */}
        </WrapperGroceryPage>
    )
 }
--- a/src/pages/recipes/AddRecipe.js
+++ b/src/pages/recipes/AddRecipe.js
@@ -70,7 +70,7 @@ const AddRecipe = () => {
                {image && <StyledImage src={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/*"
--- a/src/pages/recipes/Recipe.js
+++ b/src/pages/recipes/Recipe.js
@@ -37,7 +37,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 +45,7 @@ const Recipe = () => {
                            </View>
                            {recipe.servings !== 0 && recipe.servings && <>
                                <WrapperServings>
-                                    <IconMeal />
+                                    {/* <IconMeal /> */}
                                    <View>
                                        <TextTime>{recipe.servings}</TextTime>
                                        <TextServings>servings</TextServings>
--- a/src/styles/componentBlueprints.js
+++ b/src/styles/componentBlueprints.js
@@ -3,7 +3,6 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 //deps
 import { HiCheck } from 'react-icons/hi'
-//anims

 import LightenDarken from '../functions'
 //standard button layout 
@@ -31,9 +30,6 @@ const CheckButtonWrapper = styled(View)`
    border-radius: 15px;
    margin: 0px 5px ;
    background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey};
-    &:hover{
-        background-color: ${props => props.checked ? props.theme.colors.selected : LightenDarken(props.theme.colors.buttonGrey, 5)}
-    }
    `
 const IconCheck = styled(HiCheck)`
    font-size: ${({ theme }) => theme.fontSize.fontL};
@@ -42,7 +38,7 @@ const IconCheck = styled(HiCheck)`
 export const CheckButton = (props) => {
 	return (
 		<CheckButtonWrapper checked={props.checked} >
-			<IconCheck checked={props.checked} />
+			{/* <IconCheck checked={props.checked} /> */}
 		</CheckButtonWrapper>
 	)
 }