From 7f3a747851b198dd895f29d45435125e12578527 Mon Sep 17 00:00:00 2001
From: Sylvain Bouzols <sylvain.bouzols@gmail.com>
Date: Fri, 8 Nov 2024 15:09:36 +0100
Subject: [PATCH] =?UTF-8?q?Refactor(SnackbarProvider):=20use=20an=20IconBu?=
 =?UTF-8?q?tton=20component=20for=20the=20clear=20button=20instead=20of=20?=
 =?UTF-8?q?the=20raw=20=E2=9C=96=20button=20text=20(#634)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix icon centering and size

Signed-off-by: sBouzols <sylvain.bouzols@gmail.com>
---
 .../snackbarProvider/SnackbarProvider.tsx     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/snackbarProvider/SnackbarProvider.tsx b/src/components/snackbarProvider/SnackbarProvider.tsx
index 944fddee..ef1cb4cb 100644
--- a/src/components/snackbarProvider/SnackbarProvider.tsx
+++ b/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 (