Snacks: review state

src/common/providers/ProviderSnacks.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import type { SxProps } from '@mui/joy/styles/types';
 import { IconButton, Snackbar, SnackbarTypeMap } from '@mui/joy';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 
@@ -36,6 +37,16 @@ const defaultTypeConfig: {
   },
 };
 
+const titleSx: SxProps = {
+  '--Snackbar-inset': '64px',
+  borderRadius: 'md',
+  boxShadow: 'md',
+  backgroundColor: 'background.popup',
+  // bgcolor: `rgba(${theme.vars.palette.background.popup} / 0.5)`,
+  // backdropFilter: 'blur(6px)',
+  // '--Snackbar-padding': config.closeButton ? '0.5rem' : '1rem',
+};
+
 
 /**
  * Simple cycler through the snackbars.
@@ -83,16 +94,7 @@ export const ProviderSnacks = (props: { children: React.ReactNode }) => {
             <CloseRoundedIcon />
           </IconButton>
         )}
-        sx={theme => ({
-          ...(type === 'title' && {
-            '--Snackbar-inset': '64px',
-            borderRadius: 'md',
-            boxShadow: 'md',
-            bgcolor: `rgba(${theme.vars.palette.neutral.lightChannel} / 0.1)`,
-            backdropFilter: 'blur(6px)',
-          }),
-          // '--Snackbar-padding': config.closeButton ? '0.5rem' : '1rem',
-        })}
+        sx={type === 'title' ? titleSx : undefined}
       >
         {message}
       </Snackbar>