PR comments

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',

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}

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,

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx

@@ -33,7 +33,6 @@ export const ConstraintAccordionView = ({
     );
 
     const handleClick = () => {
-        console.log('click');
         if (expandable) {
             setExpanded(!expanded);
         }

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],

frontend/src/themes/themeTypes.ts

@@ -88,6 +88,8 @@ declare module '@mui/material/styles' {
             main: string;
             light: string;
             dark: string;
+            background: string;
+            contrast: string
         };
     }