fix(snackBarAction): replace snackbar action and color

src/app/App.tsx

@@ -1,4 +1,4 @@
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import CloseIcon from '@mui/icons-material/Close';
 import { LocalizationProvider } from '@mui/lab';
 import DateAdapter from '@mui/lab/AdapterDateFns';
 import { Container, IconButton, Paper } from '@mui/material';
@@ -68,8 +68,11 @@ function App() {
               maxSnack={3}
               ref={notistackRef}
               action={(key) => (
-                <IconButton onClick={onClickDismiss(key)} size="small">
-                  <VisibilityOffIcon />
+                <IconButton
+                  onClick={onClickDismiss(key)}
+                  size="small"
+                  sx={{ color: 'common.white' }}>
+                  <CloseIcon />
                 </IconButton>
               )}>
               <AppBar toggleDrawerMenu={toggleDrawerMenu} />

src/components/TrackerCard/TrackerCardActions.tsx

@@ -53,8 +53,6 @@ const TrackerCardActions: FC<Props> = ({
     enqueueSnackbar('Tracker validé !', { variant: 'success' });
   };
 
-  // TODO: remove next line when feature is implemented
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const handleMakeVisible = () => {
     dispatch(makeTrackerVisible(tracker.id));
     setIsMakeVisibleOpen(false);

src/components/settings/DeleteDataDialog.tsx

@@ -0,0 +1,36 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogProps,
+  DialogTitle
+} from '@mui/material';
+import { FC } from 'react';
+
+interface Props {
+  dialogProps: DialogProps;
+  onDelete: () => void;
+}
+
+const DeleteDataDialog: FC<Props> = ({ dialogProps, onDelete }) => {
+  return (
+    <Dialog {...dialogProps}>
+      <DialogTitle>Suppression de vos données</DialogTitle>
+      <DialogContent>
+        <DialogContentText gutterBottom>
+          Êtes vous sûr·e de vouloir supprimer toutes vos données ? Cette action est{' '}
+          <b>irréversible</b>.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onDelete} color="error" autoFocus>
+          Supprimer
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteDataDialog;

src/config/CustomTheme.ts

@@ -68,6 +68,10 @@ const commonTheme = {
   secondary: YELLOW_CRAYOLA,
   text: {
     primary: CHARCOAL.main
+  },
+  common: {
+    white: '#eee',
+    black: '#111'
   }
 };