Changes Theme and component styles to a customized "light" theme -- #290

cytoscape · May 21, 2024 · 8da65cb · 8da65cb
1 parent afb0c24
commit 8da65cb
Show file tree

Hide file tree

Showing 15 changed files with 382 additions and 297 deletions.
diff --git a/public/images/bader-lab-logo.svg b/public/images/bader-lab-logo.svg
diff --git a/public/images/cytoscape-consortium-logo.svg b/public/images/cytoscape-consortium-logo.svg
diff --git a/public/images/donnelly-logo.png b/public/images/donnelly-logo.png
diff --git a/public/images/uoft-logo.svg b/public/images/uoft-logo.svg
diff --git a/src/client/components/home/citation.js b/src/client/components/home/citation.js
@@ -15,7 +15,7 @@ const useStyles =  makeStyles((theme) => ({
     textAlign: 'left',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: theme.palette.background.accent,
     border: `1px solid ${theme.palette.text.accent}`,
     borderRadius: 16,
     [theme.breakpoints.down('sm')]: {

diff --git a/src/client/components/home/content.js b/src/client/components/home/content.js
@@ -43,7 +43,6 @@ const menuDef = [
 const logosDef = [
   { src: "/images/bader-lab-logo.svg", alt: "Bader Lab logo", href: "https://baderlab.org/" },
   { src: "/images/cytoscape-consortium-logo.svg", alt: "Cytoscape Consortium logo", href: "https://cytoscape.org/" },
-  // { src: "/images/donnelly-logo.png", alt: "The Donnelly Centre logo", href: "https://thedonnellycentre.utoronto.ca/" },
   { src: "/images/uoft-logo.svg", alt: "UofT logo", href: "https://www.utoronto.ca/" },
 ];
 
@@ -96,7 +95,7 @@ const useContentStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
     border: '4px solid transparent',
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.paper,
   },
   rootDropping: {
     borderColor: 'rgb(54, 102, 209)'
@@ -442,7 +441,7 @@ export function Content({ recentNetworksController }) {
           <LogoBar mobile={mobile} />
         </div>
       </Container>
-      <section id="faq" className={classes.section} style={{backgroundColor: theme.palette.background.paper}}>
+      <section id="faq" className={classes.section} style={{backgroundColor: theme.palette.background.default}}>
         <Container maxWidth="lg" className={classes.sectionContainer}>
           <Typography variant="h2" className={classes.sectionTitle}>Frequently asked questions</Typography>
           <Typography className={classes.sectionDescription}>
@@ -451,7 +450,7 @@ export function Content({ recentNetworksController }) {
           <Faq />
         </Container>
       </section>
-      <section id="about" className={classes.section} style={{backgroundColor: theme.palette.background.default}}>
+      <section id="about" className={classes.section}>
         <Container maxWidth="md" className={classes.sectionContainer}>
           <About />
         </Container>

diff --git a/src/client/components/home/mobile-menu.js b/src/client/components/home/mobile-menu.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import chroma from 'chroma-js';
 
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -16,15 +15,15 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(0.5, 2.5, 2, 2.5),
     borderRadius: '0 0 16px 16px',
     borderBottom: `1px solid ${theme.palette.divider}`,
-    background: chroma(theme.palette.background.default).alpha(0.66).hex(),
-    backdropFilter: 'blur(8px)',
+    background: theme.palette.background.paper,
     [theme.breakpoints.down('sm')]: {
       paddingLeft: theme.spacing(1),
       paddingRight: theme.spacing(1),
     },
   },
   toolbar: {
     marginBottom: theme.spacing(2),
+    backgroundColor: theme.palette.background.header,
   },
   logo: {
     marginLeft: theme.spacing(1.25),

diff --git a/src/client/components/home/recent-networks-list.js b/src/client/components/home/recent-networks-list.js
@@ -33,6 +33,7 @@ const EMPTY_PNG = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgY
 const useStyles = theme => ({
   paper: {
     whiteSpace: 'nowrap',
+    backgroundColor: theme.palette.background.default,
     boxShadow: 'none',
     border: 'none',
     borderRadius: '0 0 8px 8px',
@@ -65,9 +66,8 @@ const useStyles = theme => ({
     margin: theme.spacing(0.5),
     padding: theme.spacing(0.5),
     cursor: 'pointer',
-    border: `2px solid ${theme.palette.background.default}`,
     borderRadius: 8,
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.header,
     "&:hover": {
       backgroundColor: theme.palette.action.hover,
     }
@@ -77,9 +77,8 @@ const useStyles = theme => ({
     margin: theme.spacing(0.5),
     padding: theme.spacing(0.5),
     cursor: 'default',
-    border: `2px solid ${theme.palette.background.default}`,
     borderRadius: 8,
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.header,
   },
   thumbnail: {
     width: 172,
@@ -120,7 +119,7 @@ const useStyles = theme => ({
   },
   snackBarContent: {
     color: 'inherit',
-    background: theme.palette.primary.main,
+    background: theme.palette.background.paper,
     border: `1px solid ${theme.palette.text.disabled}`,
   },
   confirmInfoBox: {

diff --git a/src/client/components/network-editor/bottom-drawer.js b/src/client/components/network-editor/bottom-drawer.js
@@ -60,10 +60,12 @@ function toTableData(nodes, sortFn) {
 
 const useBottomDrawerStyles = makeStyles((theme) => ({
   appBar: {
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.header,
     minHeight: BOTTOM_DRAWER_HEIGHT,
     top: 'auto',
     bottom: 0,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    boxShadow: 'none',
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,

diff --git a/src/client/components/network-editor/header.js b/src/client/components/network-editor/header.js
@@ -24,12 +24,13 @@ import MoreIcon from '@material-ui/icons/MoreVert';
 const useHeaderStyles = makeStyles((theme) => ({
   appBar: {
     minHeight: HEADER_HEIGHT,
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.header,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    boxShadow: 'none',
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
-    boxShadow: 'none',
   },
   appBarShift: {
     width: `calc(100% - ${LEFT_DRAWER_WIDTH}px)`,

diff --git a/src/client/components/network-editor/left-drawer.js b/src/client/components/network-editor/left-drawer.js
@@ -91,6 +91,7 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: theme.spacing(1),
     paddingRight: theme.spacing(0.5),
     minHeight: HEADER_HEIGHT,
+    backgroundColor: theme.palette.background.header,
   },
   title: {
     paddingLeft: theme.spacing(0.5),
@@ -108,6 +109,7 @@ const useStyles = makeStyles((theme) => ({
   },
   setOperationIcon: {
     minWidth: 48,
+    color: theme.palette.text.primary,
   },
   sortButton: {
     width: 77,
@@ -429,15 +431,15 @@ const LeftDrawer = ({ controller, open, isMobile, isTablet, onClose }) => {
                   ({ totalGenes })
                 </Typography> &nbsp;&nbsp;
                 <Tooltip title="Download Current Gene List">
-                  <IconButton size="small" onClick={handleGeneListExport}>
+                  <IconButton size="small" color="inherit" onClick={handleGeneListExport}>
                     <DownloadIcon />
                   </IconButton>
                 </Tooltip>
               </>
             )}
             </Typography>
             <div className={classes.grow} />
-            <IconButton className={classes.closeButton} onClick={onClose}>
+            <IconButton className={classes.closeButton} color="inherit" onClick={onClose}>
               { drawerVariant === 'temporary' ? <CloseIcon /> : <KeyboardArrowLeftIcon fontSize="large" /> }
             </IconButton>
           </Toolbar>

diff --git a/src/client/components/network-editor/right-drawer.js b/src/client/components/network-editor/right-drawer.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import chroma from 'chroma-js';
 
 import { HEADER_HEIGHT, RIGHT_DRAWER_WIDTH } from '../defaults';
 
@@ -18,8 +17,7 @@ import CheckIcon from '@material-ui/icons/Check';
 const useStyles = makeStyles((theme) => ({
   paper: {
     width: RIGHT_DRAWER_WIDTH,
-    background: chroma(theme.palette.background.default).alpha(0.66).hex(),
-    backdropFilter: 'blur(8px)',
+    background: theme.palette.background.paper,
     borderLeft: `1px solid ${theme.palette.divider}`,
   },
   header: {
@@ -153,7 +151,7 @@ const RightDrawer = ({ menu, open, onClose }) => {
     >
       <div className={classes.header}>
         <Toolbar variant="dense" className={classes.toolbar}>
-          <IconButton className={classes.closeButton} onClick={onClose}>
+          <IconButton color="inherit" className={classes.closeButton} onClick={onClose}>
             <CloseIcon />
           </IconButton>
           <div className={classes.grow} />
@@ -190,7 +188,7 @@ const RightDrawer = ({ menu, open, onClose }) => {
           {animatedSelect.title !== title && hasToggle && (
             isSelected?.() ? <CheckIcon className={classes.checkIcon} /> : <span style={{width: 24}} />
           )}
-            <IconButton>{ icon }</IconButton>
+            <IconButton color="inherit">{ icon }</IconButton>
             <p>{ title }</p>
           </MenuItem>
         )}