Comment fixes and polishing

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

@@ -64,37 +64,37 @@ export const RestrictiveLegalValues = ({
     };
 
     return (
-        <ConditionallyRender
-            condition={Boolean(values.length > 500)}
-            show={
-                <>
-                    <ConstraintFormHeader>
-                        Select values from a predefined set
-                    </ConstraintFormHeader>
+        <>
+            <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}
-                            legal={match}
-                            control={
-                                <Checkbox
-                                    checked={Boolean(valuesMap[match.value])}
-                                    onChange={() => onChange(match.value)}
-                                    name={match.value}
-                                    color="primary"
-                                />
-                            }
+                }
+            />
+            {filteredValues.map(match => (
+                <LegalValueLabel
+                    key={match.value}
+                    legal={match}
+                    control={
+                        <Checkbox
+                            checked={Boolean(valuesMap[match.value])}
+                            onChange={() => onChange(match.value)}
+                            name={match.value}
+                            color="primary"
                         />
-                    ))}
-                    <ConditionallyRender
-                        condition={Boolean(error)}
-                        show={<p className={styles.error}>{error}</p>}
-                    />
-                </>
-            }
-        />
+                    }
+                />
+            ))}
+            <ConditionallyRender
+                condition={Boolean(error)}
+                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"
-                            color="primary"
+                            variant="outlined"
+                            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;
-    marginTop?: string;
-}>(({ theme, marginRight, marginTop }) => ({
+    marginright?: string;
+}>(({ theme, marginright }) => ({
     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',
-    marginTop: marginTop ? marginTop : 0,
+    marginRight: marginright ? marginright : '1rem',
+    marginTop: 'auto',
+    marginBottom: 'auto',
 }));