Updates SnackBars so they work seamlessly on both light and dark them…

…es -- #291
cytoscape · May 28, 2024 · 51513a0 · 51513a0
1 parent fad3a7f
commit 51513a0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 65 deletions.
diff --git a/src/client/components/home/recent-networks-list.js b/src/client/components/home/recent-networks-list.js
@@ -123,15 +123,6 @@ const useStyles = theme => ({
     top: '10px',
     zOrder: 1000,
   },
-  snackBarContent: {
-    color: 'inherit',
-    background: theme.palette.info.light,
-    border: `1px solid ${theme.palette.info.main}`,
-  },
-  snackBarContentSuccess: {
-    background: theme.palette.success.light,
-    border: `1px solid ${theme.palette.success.main}`,
-  },
   confirmInfoBox: {
     width: '100%',
     paddingTop: theme.spacing(0.5),
@@ -275,8 +266,8 @@ export class RecentNetworksList extends Component {
   snackBarOps() {
     return {
       close: () => this.setState({ snackBarState: { open: false }}),
-      showMessage: message => this.setState({ snackBarState: { open: true, closeable: true, autoHideDelay: 3000, type: 'success', message }}),
-      showSpinner: message => this.setState({ snackBarState: { open: true, closeable: false, spinner: true, type: 'info', message }}),
+      showMessage: message => this.setState({ snackBarState: { open: true, closeable: true, autoHideDelay: 3000, severity: 'success', message }}),
+      showSpinner: message => this.setState({ snackBarState: { open: true, closeable: false, spinner: true, severity: 'info', message }}),
     };
   }
 
@@ -332,17 +323,16 @@ export class RecentNetworksList extends Component {
           onClose={() => this.setState({ snackBarState: { open: false }})} 
         >
           <SnackbarContent 
-            className={clsx(classes.snackBarContent, { [classes.snackBarContentSuccess]: this.state.snackBarState.type === 'success' })}
             message={<span>{this.state.snackBarState.message || ""}</span>}
             action={(() => {
               if (this.state.snackBarState.closeable) {
                 return (
-                  <IconButton size='small' onClick={() => this.setState({ snackBarState: { open: false }})}>
-                    <CloseIcon className={classes.actionIcon} />
+                  <IconButton size='small' color="inherit" onClick={() => this.setState({ snackBarState: { open: false }})}>
+                    <CloseIcon />
                   </IconButton>
                 );
               } else if (this.state.snackBarState.spinner) {
-                return <CircularProgressIcon size={20}/>;
+                return <CircularProgressIcon color="inherit" size={20}/>;
               }
             })()}
           />

diff --git a/src/client/components/network-editor/main.js b/src/client/components/network-editor/main.js
@@ -71,18 +71,6 @@ const useStyles = makeStyles((theme) => ({
     top: '70px',
     zOrder: 1000,
   },
-  snackBarContent: {
-    color: 'inherit',
-    background: theme.palette.info.light,
-    border: `1px solid ${theme.palette.info.main}`,
-  },
-  snackBarContentSuccess: {
-    background: theme.palette.success.light,
-    border: `1px solid ${theme.palette.success.main}`,
-  },
-  actionIcon: {
-    color: theme.palette.text.primary,
-  },
 }));
 
 
@@ -241,8 +229,8 @@ function handleCopyToClipboard() {
 function snackBarOps(setSnackBarState) {
   return {
     close: () => setSnackBarState({ open: false }),
-    showMessage: message => setSnackBarState({ open: true, closeable: true, autoHideDelay: 3000, type: 'success', message }),
-    showSpinner: message => setSnackBarState({ open: true, closeable: false, spinner: true, type: 'info', message }),
+    showMessage: message => setSnackBarState({ open: true, closeable: true, autoHideDelay: 3000, severity: 'success', message }),
+    showSpinner: message => setSnackBarState({ open: true, closeable: false, spinner: true, severity: 'info', message }),
   };
 }
 
@@ -438,17 +426,16 @@ const Main = ({
         onClose={() => setSnackBarState({ open: false })} 
       >
         <SnackbarContent 
-          className={clsx(classes.snackBarContent, { [classes.snackBarContentSuccess]: snackBarState.type === 'success' })}
           message={<span>{snackBarState.message || ""}</span>}
           action={(() => {
             if (snackBarState.closeable) {
               return (
-                <IconButton size='small' onClick={() => setSnackBarState({ open: false })}>
-                  <CloseIcon className={classes.actionIcon} />
+                <IconButton size='small' color="inherit" onClick={() => setSnackBarState({ open: false })}>
+                  <CloseIcon />
                 </IconButton>
               );
             } else if (snackBarState.spinner) {
-              return <CircularProgressIcon size={20}/>;
+              return <CircularProgressIcon color="inherit" size={20}/>;
             }
           })()}
         />

diff --git a/src/client/theme.js b/src/client/theme.js
@@ -24,26 +24,6 @@ export const lightTheme = createTheme({
       hover: 'rgba(31, 120, 180, 0.1)',
       selected: 'rgba(31, 120, 180, 0.2)',
     },
-    error: {
-      main: '#d23434',
-      light: '#fbebeb',
-      dark: '#932424',
-    },
-    info: {
-      main: '#358cbf',
-      light: '#ebf4f9',
-      dark: '#256286',
-    },
-    success: {
-      main: '#47aa41',
-      light: '#edf7ec',
-      dark: '#32772e',
-    },
-    warning: {
-      main: '#e9a735',
-      light: '#fdf6eb',
-      dark: '#a37525',
-    },
     table: {
       divider: 'rgba(0, 0, 0, 0.08)',
     },
@@ -128,18 +108,6 @@ export const darkTheme = createTheme({
       selected: 'rgba(167, 193, 222, 0.2)',
     },
     divider: 'rgba(116, 116, 116, 0.4)',
-    error: {
-      main: '#ef5350',
-    },
-    info: {
-      main: '#42a5f5',
-    },
-    success: {
-      main: '#66bb6a',
-    },
-    warning: {
-      main: '#ffb74d',
-    },
     table: {
       divider: 'rgba(255, 255, 255, 0.08)',
     },
@@ -205,6 +173,11 @@ export const darkTheme = createTheme({
         color: 'rgba(102, 102, 102, 0.9)',
       },
     },
+    MuiSnackbarContent: {
+      root: {
+        backgroundColor: '#e5e5e5',
+      },
+    },
     MuiToggleButton: {
       root: {
         '&.Mui-selected': {