Better SnackBar colors (info vs success) -- #290

cytoscape · May 23, 2024 · 932363b · 932363b
1 parent 08d1a53
commit 932363b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/src/client/components/home/recent-networks-list.js b/src/client/components/home/recent-networks-list.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
+import clsx from 'clsx';
 
 import { NETWORK_BACKGROUND } from '../defaults';
 import { networkURL } from '../util';
@@ -122,8 +123,12 @@ const useStyles = theme => ({
   },
   snackBarContent: {
     color: 'inherit',
-    background: theme.palette.background.paper,
-    border: `1px solid ${theme.palette.text.disabled}`,
+    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%',
@@ -268,8 +273,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, message }}),
-      showSpinner: message => this.setState({ snackBarState: { open: true, closeable: false, spinner: true, message }}),
+      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 }}),
     };
   }
 
@@ -325,7 +330,7 @@ export class RecentNetworksList extends Component {
           onClose={() => this.setState({ snackBarState: { open: false }})} 
         >
           <SnackbarContent 
-            className={classes.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) {
@@ -334,7 +339,7 @@ export class RecentNetworksList extends Component {
                     <CloseIcon className={classes.actionIcon} />
                   </IconButton>
                 );
-              } else if(this.state.snackBarState.spinner) {
+              } else if (this.state.snackBarState.spinner) {
                 return <CircularProgressIcon size={20}/>;
               }
             })()}

diff --git a/src/client/components/network-editor/main.js b/src/client/components/network-editor/main.js
@@ -2,7 +2,6 @@ import React, { useEffect, useState, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Mousetrap from 'mousetrap';
-import chroma from 'chroma-js';
 
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -75,7 +74,12 @@ const useStyles = makeStyles((theme) => ({
   },
   snackBarContent: {
     color: 'inherit',
-    background: chroma(theme.palette.background.default).alpha(0.75).hex(),
+    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,
@@ -259,8 +263,8 @@ function handleCopyToClipboard() {
 function snackBarOps(setSnackBarState) {
   return {
     close: () => setSnackBarState({ open: false }),
-    showMessage: message => setSnackBarState({ open: true, closeable: true, autoHideDelay: 3000, message }),
-    showSpinner: message => setSnackBarState({ open: true, closeable: false, spinner: true, message }),
+    showMessage: message => setSnackBarState({ open: true, closeable: true, autoHideDelay: 3000, type: 'success', message }),
+    showSpinner: message => setSnackBarState({ open: true, closeable: false, spinner: true, type: 'info', message }),
   };
 }
 
@@ -288,7 +292,7 @@ const Main = ({
     message: "",
     autoHideDelay: 4000,
     closeable: true,
-    spinner: false
+    spinner: false,
   });
 
   const classes = useStyles();
@@ -456,16 +460,16 @@ const Main = ({
         onClose={() => setSnackBarState({ open: false })} 
       >
         <SnackbarContent 
-          className={classes.snackBarContent}
+          className={clsx(classes.snackBarContent, { [classes.snackBarContentSuccess]: snackBarState.type === 'success' })}
           message={<span>{snackBarState.message || ""}</span>}
           action={(() => {
-            if(snackBarState.closeable) {
+            if (snackBarState.closeable) {
               return (
                 <IconButton size='small' onClick={() => setSnackBarState({ open: false })}>
                   <CloseIcon className={classes.actionIcon} />
                 </IconButton>
               );
-            } else if(snackBarState.spinner) {
+            } else if (snackBarState.spinner) {
               return <CircularProgressIcon size={20}/>;
             }
           })()}