styling groceries a little better

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%;

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>
     )

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)} />
         </>

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}
+            <ScrollView>
-            <View style={{ height: 150 }} />
+                <HeaderPadding/>
+                {Lists}
+                <View style={{ height: 150 }} />
+            </ScrollView>
         </WrapperGroceryList>
     )
 }

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,12 +15,11 @@ 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 [height, setHeight] = useState(100);
-    const ref = useRef(null);
   
     useEffect(() => {
-        setHeight(ref.current.clientHeight);
+        setHeight(1);
-    }, [list.open, items]); 
+    }, [list.open, items]);
   
     const dispatch = useDispatch()
 
@@ -41,21 +40,21 @@ export default React.memo((props) => {
     }
     return (
         <Wrapper >
-            <WrapperListTitle onClick={() => { dispatch(toggleOpen(props.listId)) }}>
+            <WrapperListTitle onPress={() => { dispatch(toggleOpen(props.listId)) }}>
-                <View id="left">
+                <WrapperLeft>
                     <ListTitle>{list.listName}</ListTitle>
                     <ListSubtitle>{list.listDescription && list.listDescription}</ListSubtitle>
-                </View>
+                </WrapperLeft>
-                <View id="right">
+                <WrapperRight>
                     {list.open && <>
-                        <ButtonEditList onClick={() => setModalListVisible(true)} />
+                        {/* <ButtonEditList onClick={() => setModalListVisible(true)} />
-                        <ButtonRemoveList onClick={removeList} />
+                        <ButtonRemoveList onClick={removeList} /> */}
                     </>}
-                    <IconArrowDown visible={list.open.toString()} />
+                    {/* <IconArrowDown visible={list.open.toString()} /> */}
-                </View>
+                </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>

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>

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 { MdAddShoppingCart, MdDeleteForever } from 'react-icons/md'
-import { FiMenu,FiCheckSquare } from 'react-icons/fi'
+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;
+    bottom:70px;
-    left:20px;
+    left:10px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        bottom:70px;
-        left:10px;
-    }
 `
 
 export const WrapperAddItem = styled(Button)`
     position:absolute;
     background-color: ${({ theme }) => theme.colors.primary};
-    bottom:50px;
+    bottom:70px;
-    right:20px;
+    right:10px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        bottom:70px;
-        right:10px;
-    }
 `
 export const WrapperAddList = styled(Button)`
     position:absolute;
     background-color: ${({ theme }) => theme.colors.secondary};
-    bottom:50px;
+    bottom:70px;
-    right:20px;
+    right:10px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        bottom:70px;
-        right:10px;
-    }
 `
 export const WrapperRemove = styled(Button)`
     position:absolute;
     background-color: ${({ theme }) => theme.colors.error};
-    left:20px;
+    left:10px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        left:10px;
-        ${(props) =>
-        props.visible
-            ? css`
-                bottom:140px; 
-              `
-            : css`
-                bottom:70px; 
-              `}
-        }
     ${(props) =>
-        props.visible
+    props.visible
-            ? css`
+        ? css`
             bottom:140px; 
-          `
+            `
-            : css`
+        : css`
-            bottom:50px; 
+            bottom:70px; 
-          `}
+            `}
 `
 export const WrapperSelect = styled(Button)`
     position:absolute;
     background-color: ${({ theme }) => theme.colors.primary};
-    left:20px;
+    left:10px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        left:10px;
-        ${(props) =>
-        props.visible
-            ? css`
-                bottom:210px; 
-              `
-            : css`
-                bottom:70px; 
-              `};
-    }
     ${(props) =>
     props.visible
         ? css`
-            bottom:230px; 
+            bottom:210px; 
-          `
+            `
         : css`
-            bottom:50px; 
+            bottom:70px; 
-          `};
+            `};
 `
 export const MenuIcon = styled(FiMenu)`
-    color: ${({theme})=> theme.colors.textB2};
+    color: ${({ theme }) => theme.colors.textB2};
-    font-size: 60px;
+    font-size: 47px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 47px;
-    }
 `
 export const PlusIcon = styled(MdAddShoppingCart)`
-color: ${({theme})=> theme.colors.textB2};
+color: ${({ theme }) => theme.colors.textB2};
-    font-size: 60px;
+    font-size: 45px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 45px;
-    }
 `
 export const RemoveIcon = styled(MdDeleteForever)`
-color: ${({theme})=> theme.colors.textB2};
+color: ${({ theme }) => theme.colors.textB2};
-    font-size: 60px;
+    font-size: 45px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 45px;
-    }
 `
 export const CheckIcon = styled(FiCheckSquare)`
-    color: ${({theme})=> theme.colors.textB2};
+    color: ${({ theme }) => theme.colors.textB2};
-    font-size: 50px;
+    font-size: 40px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 40px;
-    }
 `
 export const ListIcon = styled(CgFileAdd)`
-    color: ${({theme})=> theme.colors.textB2};
+    color: ${({ theme }) => theme.colors.textB2};
-    font-size: 50px;
+    font-size: 40px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 40px;
-    }
 `

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;
+    width: 100%;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        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;
+export const WrapperLeft = styled(View)`
-        flex-direction: column; 
+    display: flex;
-        width: 50%;
+    flex-direction: column; 
-    }
+    width: 50%;
-    #right {
+`
-        width: 50%;
+export const WrapperRight = styled(View)`
-        display: flex;
+    width: 50%;
-        align-items: flex-start;
+    display: flex;
-        justify-content: flex-end;
+    align-items: flex-start;
-        flex-direction: row; 
+    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;
 `

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;
+    justify-content: flex-start;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
+    width: 100%;
-        width: 100vw;
-    }
 `
 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;
+    /* word-wrap: break-word; */
-    text-overflow: ellipsis;
+    /* 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;

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>

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} />
         </>

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;
     

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)`

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)}

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"

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)}

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)}

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

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)}

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"

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>

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.EditIngredient && <IconEdit onClick={() => props.EditIngredient(props.index)} />} */}
-            {props.RemoveIngredient && <IconRemove onClick={() => props.RemoveIngredient(props.index)} />}
+            {/* {props.RemoveIngredient && <IconRemove onClick={() => props.RemoveIngredient(props.index)} />} */}
         </WrapperIngredient>
     )
 }

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;
+/* word-break: break-all; */
-overflow-wrap: break-word;
+/* 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)`

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>
     )
 }
 

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>
     )
 }

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/*"

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>

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>
 	)
 }