Updates network background property and home figures for light/dark t…

…hemes -- #290

src/client/components/defaults.js

@@ -8,8 +8,6 @@ export const BOTTOM_DRAWER_HEIGHT = 48;
 /** Whether the bottom drawer must be open (expanded) by default */
 export const BOTTOM_DRAWER_OPEN = true;
 
-export const NETWORK_BACKGROUND = '#ffffff';
-
 /**
  * The minimum width the header toolbar must have to show its buttons.
  * If the toolbar gets smaller than this, the buttons must be moved to 

src/client/components/home/content.js

@@ -514,8 +514,10 @@ const useFigureStyles = makeStyles(theme => ({
 
 function Figure() {
   const classes = useFigureStyles();
+  const theme = useTheme();
+  const img = theme?.palette?.type === 'dark' ? 'hero-figure-dark.png' : 'hero-figure-light.png';
 
-  return <img src="/images/home-figure.png" alt="figure" className={classes.figure} />;
+  return <img src={`/images/${img}`} alt="figure" className={classes.figure} />;
 }
 
 //==[ LogoBar ]=======================================================================================================

src/client/components/home/recent-networks-list.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 import clsx from 'clsx';
 
-import { NETWORK_BACKGROUND } from '../defaults';
 import { networkURL } from '../util';
 import { RecentNetworksController } from '../recent-networks-controller';
 
@@ -91,6 +90,7 @@ const useStyles = theme => ({
     objectFit: 'contain',
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: 4,
+    backgroundColor: theme.palette.background.network,
     [theme.breakpoints.down('xs')]: {
       width: 148,
       height: 128,
@@ -427,7 +427,7 @@ export class RecentNetworksList extends Component {
         <Grid container direction="column" alignItems="stretch" justifyContent="center">
           <Grid item>
             { enabled ? (
-              <img src={imgSrc} className={classes.thumbnail} style={{ background: NETWORK_BACKGROUND }} />
+              <img src={imgSrc} className={classes.thumbnail} />
             ) : (
               <Skeleton variant="rect" className={classes.thumbnail} />
             )}

src/client/components/home/upload-panel.js

@@ -410,6 +410,7 @@ UploadPanel.propTypes = {
 
 const useDemoPanelStyles = makeStyles((theme) => ({
   thumbnail: {
+    backgroundColor: theme.palette.background.network,
     border: `4px solid ${theme.palette.divider}`,
     borderRadius: '8px',
     width: '100%',

src/client/components/network-editor/header.js

@@ -25,6 +25,7 @@ const useHeaderStyles = makeStyles((theme) => ({
   appBar: {
     minHeight: HEADER_HEIGHT,
     backgroundColor: theme.palette.background.header,
+    borderBottom: `1px solid ${theme.palette.divider}`,
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,

src/client/components/network-editor/main.js

@@ -5,8 +5,7 @@ import Mousetrap from 'mousetrap';
 
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 
-import { DEFAULT_PADDING, HEADER_HEIGHT, LEFT_DRAWER_WIDTH, BOTTOM_DRAWER_HEIGHT, NETWORK_BACKGROUND, bottomDrawerHeight } from '../defaults';
-import { EventEmitterProxy } from '../../../model/event-emitter-proxy';
+import { DEFAULT_PADDING, HEADER_HEIGHT, LEFT_DRAWER_WIDTH, BOTTOM_DRAWER_HEIGHT, bottomDrawerHeight } from '../defaults';
 import { NetworkEditorController } from './controller';
 import { Header } from './header';
 import LeftDrawer from './left-drawer';
@@ -45,7 +44,7 @@ const useStyles = makeStyles((theme) => ({
     right: 0,
     top: 0,
     bottom: 0,
-    background: NETWORK_BACKGROUND,
+    background: theme.palette.background.network,
   },
   cy: {
     position: 'absolute',
@@ -87,27 +86,6 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 
-const NetworkBackground = ({ controller }) => {
-  const [ bgColor, setBgColor ] = useState(NETWORK_BACKGROUND);
-
-  const busProxy = new EventEmitterProxy(controller.bus);
-
-  useEffect(() => {
-    busProxy.on('setNetworkBackgroundColor', (color) => setBgColor(color));
-
-    return function cleanup() {
-      busProxy.removeAllListeners();
-    };
-  }, []);
-
-  return (
-    <div style={{ position: 'absolute', zIndex: -1, width: '100%', height: '100%', backgroundColor: bgColor }} />
-  );
-};
-NetworkBackground.propTypes = {
-  controller: PropTypes.instanceOf(NetworkEditorController).isRequired,
-};
-
 const useRestoreConfirmDialogStyles = makeStyles((theme) => ({
   root: {
     // Disable Text Selection:
@@ -430,7 +408,6 @@ const Main = ({
             style={shiftYCy ? {height: `calc(100% - ${bottomDrawerHeight(theme)}px)`,} : {}}
           >
             <div id="cy" className={classes.cy} style={{ zIndex: 1, width: '100%', height: '100%' }} />
-            <NetworkBackground controller={controller} />
           </div>
           <RightDrawer
             open={openRightDrawer}

src/client/components/recent-networks-controller.js

@@ -1,6 +1,5 @@
 import EventEmitter from 'eventemitter3';
 import LocalForage from 'localforage';
-import { NETWORK_BACKGROUND } from './defaults';
 
 
 const MAX_ITEMS = 20;
@@ -127,7 +126,6 @@ const NETWORK_THUMBNAIL_HEIGHT = 344;
       maxWidth: NETWORK_THUMBNAIL_WIDTH,
       maxHeight: NETWORK_THUMBNAIL_HEIGHT,
       full: true,
-      bg: NETWORK_BACKGROUND,
     });
 
     return {

src/client/theme.js

@@ -18,6 +18,7 @@ export const lightTheme = createTheme({
       field: '#ffffff',
       header: '#e6eaed',
       accent: '#f6faf5',
+      network: '#ffffff',
     },
     action: {
       hover: 'rgba(31, 120, 180, 0.1)',
@@ -120,6 +121,7 @@ export const darkTheme = createTheme({
       field: '#464646',
       header: '#242424',
       accent: 'rgba(45, 52, 43, 0.25)',
+      network: '#121212',
     },
     action: {
       hover: 'rgba(167, 193, 222, 0.1)',