From e12129ed0a8111e1dc59f5b6341ec71d753c8b53 Mon Sep 17 00:00:00 2001
From: unknown <11601622+aress31@users.noreply.github.com>
Date: Thu, 16 Sep 2021 19:47:53 +0100
Subject: [PATCH 1/3] better support for light/dark mode

---
 src/SnackbarItem/SnackbarItem.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/SnackbarItem/SnackbarItem.tsx b/src/SnackbarItem/SnackbarItem.tsx
index 9f07a74e..4efb4b3d 100644
--- a/src/SnackbarItem/SnackbarItem.tsx
+++ b/src/SnackbarItem/SnackbarItem.tsx
@@ -27,7 +27,7 @@ const classes = {
 };
 
 const StyledSnackbar = styled(Snackbar)(({ theme }) => {
-    const mode = theme.palette.mode || theme.palette.type;
+    const mode = theme.palette.mode;
     const backgroundColor = emphasize(theme.palette.background.default, mode === 'light' ? 0.8 : 0.98);
 
     return {
@@ -52,20 +52,20 @@ const StyledSnackbar = styled(Snackbar)(({ theme }) => {
             paddingLeft: 8 * 2.5,
         },
         [`.${classes.variantSuccess}`]: {
-            backgroundColor: '#43a047', // green
-            color: '#fff',
+            backgroundColor: mode === "light" ? theme.palette.success.main : theme.palette.success.dark,
+            color:  mode === "light" ? theme.palette.getContrastText(theme.palette.success.main) : theme.palette.getContrastText(theme.palette.success.dark),
         },
         [`.${classes.variantError}`]: {
-            backgroundColor: '#d32f2f', // dark red
-            color: '#fff',
+            backgroundColor: mode === "light" ? theme.palette.error.main : theme.palette.error.dark,
+            color:  mode === "light" ? theme.palette.getContrastText(theme.palette.error.main) : theme.palette.getContrastText(theme.palette.error.dark),
         },
         [`.${classes.variantInfo}`]: {
-            backgroundColor: '#2196f3', // nice blue
-            color: '#fff',
+            backgroundColor: mode === "light" ? theme.palette.info.main : theme.palette.info.dark,
+            color:  mode === "light" ? theme.palette.getContrastText(theme.palette.info.main) : theme.palette.getContrastText(theme.palette.info.dark),
         },
         [`.${classes.variantWarning}`]: {
-            backgroundColor: '#ff9800', // amber
-            color: '#fff',
+            backgroundColor: mode === "light" ? theme.palette.warning.main : theme.palette.warning.dark,
+            color:  mode === "light" ? theme.palette.getContrastText(theme.palette.warning.main) : theme.palette.getContrastText(theme.palette.warning.dark),
         },
         [`.${classes.message}`]: {
             display: 'flex',

From fdff6de14a49460b78ace6b13e8e5589d425f983 Mon Sep 17 00:00:00 2001
From: unknown <11601622+aress31@users.noreply.github.com>
Date: Thu, 16 Sep 2021 19:55:31 +0100
Subject: [PATCH 2/3] inline default background style

---
 src/SnackbarItem/SnackbarItem.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/SnackbarItem/SnackbarItem.tsx b/src/SnackbarItem/SnackbarItem.tsx
index 4efb4b3d..3dca92a1 100644
--- a/src/SnackbarItem/SnackbarItem.tsx
+++ b/src/SnackbarItem/SnackbarItem.tsx
@@ -28,7 +28,6 @@ const classes = {
 
 const StyledSnackbar = styled(Snackbar)(({ theme }) => {
     const mode = theme.palette.mode;
-    const backgroundColor = emphasize(theme.palette.background.default, mode === 'light' ? 0.8 : 0.98);
 
     return {
         [`&.${classes.wrappedRoot}`]: {
@@ -41,8 +40,8 @@ const StyledSnackbar = styled(Snackbar)(({ theme }) => {
         },
         [`.${classes.contentRoot}`]: {
             ...theme.typography.body2,
-            backgroundColor,
-            color: theme.palette.getContrastText(backgroundColor),
+            backgroundColor: emphasize(theme.palette.background.default, mode === 'light' ? 0.8 : 0.98),
+            color: theme.palette.getContrastText(emphasize(theme.palette.background.default, mode === 'light' ? 0.8 : 0.98)),
             alignItems: 'center',
             padding: '6px 16px',
             borderRadius: '4px',

From bf71bb69edc59bb6b767367a459d7630b55e40d1 Mon Sep 17 00:00:00 2001
From: unknown <11601622+aress31@users.noreply.github.com>
Date: Thu, 16 Sep 2021 19:58:57 +0100
Subject: [PATCH 3/3] leverage theme spacing property

---
 src/SnackbarItem/SnackbarItem.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/SnackbarItem/SnackbarItem.tsx b/src/SnackbarItem/SnackbarItem.tsx
index 3dca92a1..b4531457 100644
--- a/src/SnackbarItem/SnackbarItem.tsx
+++ b/src/SnackbarItem/SnackbarItem.tsx
@@ -43,12 +43,12 @@ const StyledSnackbar = styled(Snackbar)(({ theme }) => {
             backgroundColor: emphasize(theme.palette.background.default, mode === 'light' ? 0.8 : 0.98),
             color: theme.palette.getContrastText(emphasize(theme.palette.background.default, mode === 'light' ? 0.8 : 0.98)),
             alignItems: 'center',
-            padding: '6px 16px',
+            padding: `${theme.spacing(0.75)} ${theme.spacing(2)}`,
             borderRadius: '4px',
             boxShadow: '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
         },
         [`.${classes.lessPadding}`]: {
-            paddingLeft: 8 * 2.5,
+            paddingLeft: theme.spacing(2.5),
         },
         [`.${classes.variantSuccess}`]: {
             backgroundColor: mode === "light" ? theme.palette.success.main : theme.palette.success.dark,
@@ -69,14 +69,14 @@ const StyledSnackbar = styled(Snackbar)(({ theme }) => {
         [`.${classes.message}`]: {
             display: 'flex',
             alignItems: 'center',
-            padding: '8px 0',
+            padding: `${theme.spacing(1)} 0`,
         },
         [`.${classes.action}`]: {
             display: 'flex',
             alignItems: 'center',
             marginLeft: 'auto',
-            paddingLeft: 16,
-            marginRight: -8,
+            paddingLeft: theme.spacing(2),
+            marginRight: theme.spacing(-1),
         },
     };
 });