buttons work, all modal ready

src/components/GroceryList/groceries/GroceryButtons.js

@@ -8,6 +8,7 @@ import { WrapperButtons, WrapperAddItem, WrapperAddList, WrapperRemove, WrapperS
 import { useSelector, useDispatch } from 'react-redux'
 import { itemsRemoved, checkAll } from '../../../redux/slices/groceryList/itemsSlice'
 import { selectOpenListId } from '../../../redux/slices/groceryList/listsSlice'
+import { Alert } from 'react-native'
 
 const SelectAllItemsButton = (props) => {
     const dispatch = useDispatch()
@@ -27,10 +28,20 @@ const RemoveItemsButton = (props) => {
     const dispatch = useDispatch()
     const [toggleAnim, setToggleAnim] = useState(false)
     const handlePress = () => {
-        if (window.confirm("Do you really want to remove the selected items?")) {
+        Alert.alert(
-            dispatch(itemsRemoved())
+            "Warning",
-            setToggleAnim(!toggleAnim)
+            "Are you sure you want to remove the selected items?",
-        }
+            [
+                { text: "Cancel", },
+                {
+                    text: "Remove", onPress: () => {
+                        dispatch(itemsRemoved())
+                        setToggleAnim(!toggleAnim)
+                    }
+                }
+            ],
+            { cancelable: true, }
+        )
     }
     return (
         <WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>

src/components/GroceryList/groceries/List.js

@@ -9,7 +9,7 @@ import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, Button
 import { useSelector, useDispatch } from 'react-redux';
 import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
 import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
-import { FlatList, View } from 'react-native';
+import { Alert, FlatList, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 export default React.memo((props) => {
@@ -29,10 +29,20 @@ export default React.memo((props) => {
     const [modalListVisible, setModalListVisible] = useState(false);
 
     const removeList = () => {
-        if (window.confirm("Do you really want to remove this list and the groceries within")) {
+        Alert.alert(
-            dispatch(itemsRemovedByList(props.listId))
+            "Warning",
-            dispatch(listRemoved(props.listId))
+            "Are you sure you want to remove this list and the groceries within?",
-        }
+            [
+                { text: "Cancel", },
+                {
+                    text: "Remove", onPress: () => {
+                        dispatch(itemsRemovedByList(props.listId))
+                        dispatch(listRemoved(props.listId))
+                    }
+                }
+            ],
+            { cancelable: true, }
+        )
     }
     return (
         <Wrapper >

src/components/GroceryList/products/ProductButtons.js

@@ -6,7 +6,8 @@ import { WrapperButtons, WrapperAddProduct, WrapperUpload, UploadInput, WrapperD
 //redux
 import { useDispatch, useSelector } from 'react-redux'
 import { productsRemoved, productsUploaded } from '../../../redux/slices/groceryList/productsSlice'
-// var FileSaver = require('file-saver');
+import { Alert } from 'react-native'
+
 
 const UploadProductsButton = (props) => {
     const dispatch = useDispatch()
@@ -32,12 +33,21 @@ const DownloadProductsButton = (props) => {
     const products = useSelector(state => state.products.entities)
     const [toggleAnim, setToggleAnim] = useState(false)
     const handlePress = () => {
-        if (window.confirm("Do you want to download all of your products?")) {
+        Alert.alert(
-            setToggleAnim(!toggleAnim)
+            "Alert",
-            let productsJSON = JSON.stringify({ products: products }, null, 4)
+            "Do you want to download a JSON file with all of the products?",
-            let blob = new Blob([productsJSON], { type: "application/json" });
+            [
-            // FileSaver.saveAs(blob, "productList" + Date.now() + ".json");
+                { text: "Cancel", },
-        }
+                {
+                    text: "Download", onPress: async () => {
+                        setToggleAnim(!toggleAnim)
+                        let productsJSON = JSON.stringify({ products: products }, null, 4)
+                        let blob = new Blob([productsJSON], { type: "application/json" });
+                    }
+                }
+            ],
+            { cancelable: true, }
+        )
     }
     return (
         <WrapperDownload toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
@@ -49,10 +59,20 @@ const RemoveProductsButton = (props) => {
     const dispatch = useDispatch()
     const [toggleAnim, setToggleAnim] = useState(false)
     const handlePress = () => {
-        if (window.confirm("Do you really want to remove the selected products?")) {
+        Alert.alert(
-            dispatch(productsRemoved());
+            "Warning",
-            setToggleAnim(!toggleAnim)
+            "Are you sure you want to remove the selected products?",
-        }
+            [
+                { text: "Cancel", },
+                {
+                    text: "Remove", onPress: () => {
+                        dispatch(productsRemoved());
+                        setToggleAnim(!toggleAnim)
+                    }
+                }
+            ],
+            { cancelable: true, }
+        )
     }
     return (
         <WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
@@ -64,8 +84,8 @@ export const ContainerButtons = (props) => {
     const [visible, setVisible] = useState(false);
     return (
         <>
-            <UploadProductsButton visible={visible} />
+            {/* <UploadProductsButton visible={visible} />
-            <DownloadProductsButton visible={visible} />
+            <DownloadProductsButton visible={visible} /> */}
             <RemoveProductsButton visible={visible} />
             <WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
                 <MenuIcon />

src/components/GroceryList/products/styles/buttons.js

@@ -53,8 +53,8 @@ export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.c
 
 export const PlusIcon = () => <MaterialCommunityIcons name="plus" color={theme.colors.textB2} size={60} />
 
-export const UploadIcon = () => <MaterialCommunityIcons name="cloud-upload-outline" color={theme.colors.textB2} size={40} />
+export const UploadIcon = () => <MaterialCommunityIcons name="cloud-upload-outline" color={theme.colors.textW2} size={40} />
 
-export const DownloadIcon = () => <MaterialCommunityIcons name="cloud-download-outline" color={theme.colors.textB2} size={40} />
+export const DownloadIcon = () => <MaterialCommunityIcons name="cloud-download-outline" color={theme.colors.textW2} size={40} />
 
 export const RemoveIcon = () => <MaterialCommunityIcons name="delete-forever" color={theme.colors.textB2} size={45} />

src/components/GroceryList/products/styles/listedProduct.js

@@ -22,7 +22,7 @@ export const WrapperProduct = styled(TouchableOpacity)`
     min-height: 70px;
     position: relative;
     flex-direction: row;
-    justify-content: center;
+    justify-content: flex-start;
     border-radius: 15px;
     margin-bottom:7px;
     margin-left: 7px;
@@ -36,10 +36,7 @@ export const WrapperButton = styled(TouchableOpacity)`
 
 export const WrapperText = styled(View)`
     flex:1;
-    max-width:600px;
+    max-width:65%;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        max-width: 60vw;
-    }
 `
 export const TextProductName = styled(Text)`
     /* word-wrap: break-word; */

src/components/Home/styles/groceryCard.js

@@ -37,7 +37,7 @@ export const IconCoffee = styled(Coffee)`
     margin-top: 15px;
 `
 
-const Meal = () => <MaterialCommunityIcons name="food-turkey" color={theme.colors.primaryVar} size={50} />
+const Meal = () => <MaterialCommunityIcons name="noodles" color={theme.colors.primaryVar} size={50} />
 
 export const IconRecipe = styled(Meal)`
     margin-top: 15px;

src/components/modals/groceries/ModalEditItem.js

@@ -20,7 +20,7 @@ const ModalEditItem = (props) => {
     const tags = useSelector(state => state.tags.entities)
 
     const [productName, setProductName] = useState(item.productName);
-    const [amount, setAmount] = useState(item.amount.am);
+    const [amount, setAmount] = useState(item.amount.am.toString());
     const [qt, setQt] = useState(item.amount.qt)
     const [person, setPerson] = useState(item.person);
     const [details, setDetails] = useState(item.details);

src/components/modals/groceries/ModalEditProduct.js

@@ -22,7 +22,7 @@ const ModalEditProduct = (props) => {
 
     const [productName, setProductName] = useState(product.productName);
     const [tag, setTag] = useState(product.tag);
-    const [price, setPrice] = useState(product.price);
+    const [price, setPrice] = useState(product.price.toString());
     const [image, setImage] = useState(product.image);
 
     const [focused, setFocused] = React.useState(false)

src/components/recipes/addRecipe/Buttons.js

@@ -9,6 +9,7 @@ import { removeRecipe } from "../../../redux/slices/recipesSlice"
 
 import { PlusIcon, WrapperAddItem } from "../../GroceryList/groceries/styles/buttons"
 import ModalAddIngredients from "../../modals/recipes/ModalAddIngredients"
+import { Alert } from "react-native"
 
 export const AddRecipeButton = () => {
     return (
@@ -35,9 +36,19 @@ export const OptionsButtonRecipe = (props) => {
     const dispatch = useDispatch()
     const [toggled, setToggled] = useState(false)
     const handleRemove = () => {
-        if (window.confirm("Do you really want to remove this recipe?")) {
+        Alert.alert(
-            dispatch(removeRecipe(props.id))
+            "Warning",
-        }
+            "Are you sure you want to remove this recipe?",
+            [
+                { text: "Cancel", },
+                {
+                    text: "Remove", onPress: () => {
+                        dispatch(removeRecipe(props.id))
+                    }
+                }
+            ],
+            { cancelable: true, }
+        )
     }
     return (
         <WrapperOptions toggled={toggled} >

src/components/recipes/addRecipe/styles/buttons.js

@@ -9,12 +9,8 @@ import theme from "../../../../styles/theme";
 export const WrapperAddRecipe = styled(Button)`
     position:absolute;
     background-color: ${({ theme }) => theme.colors.primary};
-    bottom:20px;
+    bottom:30px;
-    right:20px;
+    right:10px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        bottom:30px;
-        right:10px;
-    }
 `
 export const IconPlus = () => <MaterialCommunityIcons name="plus" color={theme.colors.textB2} size={60} />
 

src/pages/recipes/styles/addRecipe.js

@@ -7,17 +7,14 @@ import theme from "../../../styles/theme";
 export const Wrapper = styled(View)`
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        align-items: flex-start;
-    }
 `
 export const WrapperRecipe = styled(View)`
     display: flex;
     flex-direction: column;
 
     align-items: flex-start;
-    width: 500px;
+    width: 100%;
     padding: 10px;
     #row{
         margin-top: 5px;
@@ -34,9 +31,6 @@ export const WrapperRecipe = styled(View)`
         width: 100%;
         justify-content: flex-end;
     }
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        width: 100%;
-    }
 `
 export const Input = styled(TextInput)`
     flex:1;

src/pages/recipes/styles/recipe.js

@@ -38,9 +38,6 @@ export const StyledImage = styled(Image)`
     margin-top: -70px;
     height: 200px;
     width: 100%;
-    @media ${({theme}) => theme.mediaQueries.above768}{
-        width: 500px;
-    }
 `
 export const TextPrep = styled(Text)`
     text-align: right;