From cd6614e094f0c5707017e4fad7301e1ceba1aa3f Mon Sep 17 00:00:00 2001
From: Matej Vavrek <matej.vavrek@m2ms.sk>
Date: Thu, 5 Mar 2020 13:13:07 +0100
Subject: [PATCH] #148 changed background color of "A" button in molecule view
 so it is darker if it has some other options active

---
 js/components/preview/molecule/moleculeView.js | 16 +++++++++++++---
 js/theme/palette.js                            |  3 ++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
index a725a119d8..b777525994 100644
--- 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
index c5fd075ca5..44ea94015f 100644
--- 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,