Comment fixes and polishing

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx

@@ -64,17 +64,19 @@ export const RestrictiveLegalValues = ({
     };
 
     return (
-        <ConditionallyRender
-            condition={Boolean(values.length > 500)}
-            show={
         <>
             <ConstraintFormHeader>
                 Select values from a predefined set
             </ConstraintFormHeader>
+            <ConditionallyRender
+                condition={Boolean(legalValues.length > 100)}
+                show={
                     <ConstraintValueSearch
                         filter={filter}
                         setFilter={setFilter}
                     />
+                }
+            />
             {filteredValues.map(match => (
                 <LegalValueLabel
                     key={match.value}
@@ -94,7 +96,5 @@ export const RestrictiveLegalValues = ({
                 show={<p className={styles.error}>{error}</p>}
             />
         </>
-            }
-        />
     );
 };

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx

@@ -37,7 +37,7 @@ export const SingleLegalValue = ({
                 Add a single {type.toLowerCase()} value
             </ConstraintFormHeader>
             <ConditionallyRender
-                condition={Boolean(legalValues.length > 500)}
+                condition={Boolean(legalValues.length > 100)}
                 show={
                     <ConstraintValueSearch
                         filter={filter}

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx

@@ -1,12 +1,11 @@
 import { styled } from '@mui/system';
-import { Button } from '@mui/material';
+import { IconButton } from '@mui/material';
 
-export const StyledToggleButtonOff = styled(Button)(({ theme }) => ({
+export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({
     width: 28,
     minWidth: '28px!important',
     minHeight: 40,
     backgroundColor: 'white',
-    color: theme.palette.inactiveIcon,
     borderRadius: theme.shape.borderRadius,
     padding: '0 1px 0',
     marginRight: '1rem',
@@ -15,7 +14,7 @@ export const StyledToggleButtonOff = styled(Button)(({ theme }) => ({
     },
 }));
 
-export const StyledToggleButtonOn = styled(Button)(({ theme }) => ({
+export const StyledToggleButtonOn = styled(IconButton)(({ theme }) => ({
     width: 28,
     minWidth: '28px!important',
     minHeight: 40,

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

@@ -7,11 +7,13 @@ import { useStyles } from '../ConstraintAccordion.styles';
 interface ConstraintAccordionHeaderActionsProps {
     onDelete?: () => void;
     onEdit?: () => void;
+    disableEdit?: boolean;
 }
 
 export const ConstraintAccordionHeaderActions = ({
     onEdit,
     onDelete,
+    disableEdit = false
 }: ConstraintAccordionHeaderActionsProps) => {
     const { classes: styles } = useStyles();
     const onEditClick =
@@ -31,7 +33,7 @@ export const ConstraintAccordionHeaderActions = ({
     return (
         <div className={styles.headerActions}>
             <ConditionallyRender
-                condition={Boolean(onEditClick)}
+                condition={Boolean(onEditClick) && !disableEdit}
                 show={() => (
                     <Tooltip title="Edit constraint" arrow>
                         <IconButton

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

@@ -8,7 +8,8 @@ import { objectId } from 'utils/objectId';
 import { useStyles } from './ConstraintAccordionList.styles';
 import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Button } from '@mui/material';
+import { Button, IconButton } from '@mui/material';
+import { Help } from '@mui/icons-material';
 
 interface IConstraintAccordionListProps {
     constraints: IConstraint[];
@@ -102,11 +103,19 @@ export const ConstraintAccordionList = forwardRef<
                 condition={Boolean(showCreateButton && onAdd)}
                 show={
                     <div>
+                        <p>
+                            Add any number of custom constraints
+                            <a href={'https://docs.getunleash.io/advanced/strategy_constraints'}>
+                                <IconButton>
+                                    <Help />
+                                </IconButton>
+                            </a>
+                        </p>
                         <Button
                             type="button"
                             onClick={onAdd}
-                            variant="text"
+                            variant="outlined"
-                            color="primary"
+                            color="secondary"
                         >
                             Add custom constraint
                         </Button>

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

@@ -22,7 +22,7 @@ export const ConstraintViewHeaderOperator = ({
                 condition={Boolean(constraint.inverted)}
                 show={
                     <Tooltip title={'Operator is negated'} arrow>
-                        <StyledIconWrapper marginRight={'0'}>
+                        <StyledIconWrapper marginright={'0'}>
                             <NegatedIcon />
                         </StyledIconWrapper>
                     </Tooltip>

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx

@@ -70,7 +70,7 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({
                 }
                 show={
                     <Tooltip title="Case sensitive is active" arrow>
-                        <StyledIconWrapper marginTop={'7px'}>
+                        <StyledIconWrapper margintop={'auto'}>
                             <CaseSensitive />{' '}
                         </StyledIconWrapper>
                     </Tooltip>

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

@@ -1,16 +1,16 @@
 import { styled } from '@mui/material';
 
 export const StyledIconWrapper = styled('div')<{
-    marginRight?: string;
+    marginright?: string;
-    marginTop?: string;
+}>(({ theme, marginright }) => ({
-}>(({ theme, marginRight, marginTop }) => ({
     backgroundColor: theme.palette.grey[200],
     width: 28,
-    height: 47,
+    height: 48,
     display: 'inline-flex',
     justifyContent: 'center',
     padding: '10px 0',
     color: theme.palette.primary.main,
-    marginRight: marginRight ? marginRight : '0.75rem',
+    marginRight: marginright ? marginright : '1rem',
-    marginTop: marginTop ? marginTop : 0,
+    marginTop: 'auto',
+    marginBottom: 'auto',
 }));