Convert remove to snackbar

3 files changed, 28 insertions, 19 deletions

diff --git a/modern/package.json b/modern/package.json
index b7a53e44..771a786b 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -5,8 +5,8 @@
   "dependencies": {
     "@craco/craco": "^5.9.0",
     "@mapbox/mapbox-gl-draw": "^1.3.0",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@reduxjs/toolkit": "^1.6.0",
     "@tmcw/togeojson": "^4.5.0",
diff --git a/modern/src/common/components/RemoveDialog.js b/modern/src/common/components/RemoveDialog.js
index cbdbb05d..a11af4c2 100644
--- a/modern/src/common/components/RemoveDialog.js
+++ b/modern/src/common/components/RemoveDialog.js
@@ -1,15 +1,23 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
+import { Snackbar, makeStyles } from '@material-ui/core';
 import { useTranslation } from './LocalizationProvider';
 import { useCatch } from '../../reactHelper';
+import { snackBarDurationLongMs } from '../util/duration';
+
+const useStyles = makeStyles((theme) => ({
+  button: {
+    height: 'auto',
+    marginTop: 0,
+    marginBottom: 0,
+    color: theme.palette.colors.negative,
+  },
+}));
 
 const RemoveDialog = ({
   open, endpoint, itemId, onResult,
 }) => {
+  const classes = useStyles();
   const t = useTranslation();
 
   const handleRemove = useCatch(async () => {
@@ -22,18 +30,17 @@ const RemoveDialog = ({
   });
 
   return (
-    <Dialog
+    <Snackbar
       open={open}
-      onClose={() => { onResult(false); }}
-    >
-      <DialogContent>
-        <DialogContentText>{t('sharedRemoveConfirm')}</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button color="primary" onClick={handleRemove}>{t('sharedRemove')}</Button>
-        <Button autoFocus onClick={() => onResult(false)}>{t('sharedCancel')}</Button>
-      </DialogActions>
-    </Dialog>
+      autoHideDuration={snackBarDurationLongMs}
+      onClose={() => onResult(false)}
+      message={t('sharedRemoveConfirm')}
+      action={(
+        <Button size="small" className={classes.button} onClick={handleRemove}>
+          {t('sharedRemove')}
+        </Button>
+      )}
+    />
   );
 };
 
diff --git a/modern/src/settings/components/EditCollectionView.js b/modern/src/settings/components/EditCollectionView.js
index ed92c838..b0bf3ea0 100644
--- a/modern/src/settings/components/EditCollectionView.js
+++ b/modern/src/settings/components/EditCollectionView.js
@@ -60,9 +60,11 @@ const EditCollectionView = ({
     menuHide();
   };
 
-  const handleRemoveResult = () => {
+  const handleRemoveResult = (removed) => {
     setRemoveDialogShown(false);
-    setUpdateTimestamp(Date.now());
+    if (removed) {
+      setUpdateTimestamp(Date.now());
+    }
   };
 
   const Content = content;