Convert remove to snackbar

1 files changed, 22 insertions, 15 deletions

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