styling groceries a little better

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