#148 changed background color of "A" button in molecule view so it is…

… darker if it has some other options active
m2ms · Mar 9, 2020 · cd6614e · cd6614e
1 parent 786bf50
commit cd6614e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
@@ -50,6 +50,9 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.primary.main,
     color: theme.palette.primary.contrastText
   },
+  contColButtonHalfSelected: {
+    backgroundColor: theme.palette.primary.semidark
+  },
   detailsCol: {
     border: 'solid 1px',
     borderColor: theme.palette.background.divider,
@@ -141,6 +144,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
   const isVectorOn = (currentID && vectorOnList.includes(currentID)) || false;
 
   const hasAllValuesOn = isLigandOn && isComplexOn && isVectorOn;
+  const hasSomeValuesOn = !hasAllValuesOn && (isLigandOn || isComplexOn || isVectorOn);
 
   const disableUserInteraction = useDisableUserInteraction();
 
@@ -339,9 +343,15 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
             <Grid item>
               <Button
                 variant="outlined"
-                className={classNames(classes.contColButton, {
-                  [classes.contColButtonSelected]: hasAllValuesOn
-                })}
+                className={classNames(
+                  classes.contColButton,
+                  {
+                    [classes.contColButtonSelected]: hasAllValuesOn
+                  },
+                  {
+                    [classes.contColButtonHalfSelected]: hasSomeValuesOn
+                  }
+                )}
                 onClick={() => {
                   selectedAll.current = !selectedAll.current;
 

diff --git a/js/theme/palette.js b/js/theme/palette.js
@@ -10,7 +10,8 @@ export default {
     contrastText: white,
     dark: colors.indigo[900],
     main: colors.indigo[500],
-    light: colors.indigo[100]
+    light: colors.indigo[100],
+    semidark: colors.indigo[300]
   },
   secondary: {
     contrastText: white,