Refactor(SnackbarProvider): use an IconButton component for the clear…

… button instead of the raw ✖ button text (#634)

Fix icon centering and size

Signed-off-by: sBouzols <sylvain.bouzols@gmail.com>

src/components/snackbarProvider/SnackbarProvider.tsx

@@ -6,18 +6,29 @@
  */
 
 import { useRef } from 'react';
-import { Button } from '@mui/material';
-
+import { IconButton, Theme } from '@mui/material';
+import ClearIcon from '@mui/icons-material/Clear';
 import { SnackbarProvider as OrigSnackbarProvider, SnackbarKey, SnackbarProviderProps } from 'notistack';
 
+const styles = {
+    buttonColor: (theme: Theme) => ({
+        color: theme.palette.common.white,
+    }),
+};
+
 /* A wrapper around notistack's SnackbarProvider that provides defaults props */
 export function SnackbarProvider(props: SnackbarProviderProps) {
     const ref = useRef<OrigSnackbarProvider>(null);
 
     const action = (key: SnackbarKey) => (
-        <Button onClick={() => ref.current?.closeSnackbar(key)} style={{ color: '#fff', fontSize: '20px' }}>
-            ✖
-        </Button>
+        <IconButton
+            onClick={() => ref.current?.closeSnackbar(key)}
+            aria-label="clear-snack"
+            size="small"
+            sx={styles.buttonColor}
+        >
+            <ClearIcon fontSize="small" />
+        </IconButton>
     );
 
     return (