From 9ce7572ba0c2fb5c03219958541187a8ccc07cb6 Mon Sep 17 00:00:00 2001
From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com>
Date: Tue, 26 Jul 2022 13:10:30 +0300
Subject: [PATCH] PR comments

---
 .../ConstraintAccordionEditBody.styles.ts        |  2 +-
 .../RestrictiveLegalValues.tsx                   |  2 +-
 .../StyledToggleButton/StyledToggleButton.tsx    | 16 ++++++++--------
 .../ConstraintAccordionView.tsx                  |  1 -
 frontend/src/themes/theme.ts                     |  2 ++
 frontend/src/themes/themeTypes.ts                |  2 ++
 6 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts
index cf2730bcd6..82c2efa82a 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts
@@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     inputContainer: {
         padding: '1rem',
-        backgroundColor: theme.palette.grey[100],
+        backgroundColor: theme.palette.neutral.light,
     },
     buttonContainer: {
         display: 'flex',
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
index c455065b87..930db206da 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
@@ -69,7 +69,7 @@ export const RestrictiveLegalValues = ({
                 Select values from a predefined set
             </ConstraintFormHeader>
             <ConditionallyRender
-                condition={Boolean(legalValues.length > 100)}
+                condition={legalValues.length > 100}
                 show={
                     <ConstraintValueSearch
                         filter={filter}
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
index 09a162dd1b..6e6e60110b 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
@@ -2,22 +2,22 @@ import { styled } from '@mui/system';
 import { IconButton } from '@mui/material';
 
 export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({
-    width: 28,
-    minWidth: '28px!important',
-    minHeight: 40,
-    backgroundColor: 'white',
+    width: '28px',
+    minWidth: '28px',
+    maxWidth: '28px',
+    backgroundColor: theme.palette.tertiary.background,
     borderRadius: theme.shape.borderRadius,
     padding: '0 1px 0',
     marginRight: '1rem',
     '&:hover': {
-        background: theme.palette.grey[300],
+        background: theme.palette.tertiary.contrast[300],
     },
 }));
 
 export const StyledToggleButtonOn = styled(IconButton)(({ theme }) => ({
-    width: 28,
-    minWidth: '28px!important',
-    minHeight: 40,
+    width: '28px',
+    minWidth: '28px',
+    maxWidth: '28px',
     color: theme.palette.primary.contrastText,
     backgroundColor: theme.palette.primary.main,
     borderRadius: theme.shape.borderRadius,
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
index 9668b0070b..033f5b6c18 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -33,7 +33,6 @@ export const ConstraintAccordionView = ({
     );
 
     const handleClick = () => {
-        console.log('click');
         if (expandable) {
             setExpanded(!expanded);
         }
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index 0e9b54d8ba..1a2727318c 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -95,6 +95,8 @@ export default createTheme({
             light: colors.grey[200],
             main: colors.grey[400],
             dark: colors.grey[600],
+            background: 'white',
+            contrast: colors.grey[300]
         },
         divider: colors.grey[300],
         dividerAlternative: colors.grey[400],
diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts
index cb59be8a6e..f4a11048e8 100644
--- a/frontend/src/themes/themeTypes.ts
+++ b/frontend/src/themes/themeTypes.ts
@@ -88,6 +88,8 @@ declare module '@mui/material/styles' {
             main: string;
             light: string;
             dark: string;
+            background: string;
+            contrast: string
         };
     }