Visual updates to constraints (#1157)

frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts

@@ -52,10 +52,13 @@ export const useStyles = makeStyles()(theme => ({
     headerValuesContainerWrapper: {
         display: 'flex',
         alignItems: 'stretch',
+        margin: 'auto 0',
     },
     headerValuesContainer: {
         display: 'flex',
-        alignItems: 'stretch',
+        justifyContent: 'stretch',
+        margin: 'auto 0',
+        flexDirection: 'column',
     },
     headerValues: {
         fontSize: theme.fontSizes.smallBody,

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts

@@ -23,6 +23,7 @@ export const useStyles = makeStyles()(theme => ({
         margin: '0.75rem 0 ',
     },
     customConstraintLabel: {
+        marginBottom: theme.spacing(1),
         color: theme.palette.text.secondary,
     },
 }));

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, Fragment, useImperativeHandle } from 'react';
 import { Button, Tooltip } from '@mui/material';
 import { HelpOutline } from '@mui/icons-material';
 import { IConstraint } from 'interfaces/strategy';
@@ -10,11 +10,14 @@ 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 { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 
 interface IConstraintAccordionListProps {
     constraints: IConstraint[];
     setConstraints?: React.Dispatch<React.SetStateAction<IConstraint[]>>;
     showCreateButton?: boolean;
+    /* Add "Custom constraints" title on the top - default `true` */
+    showLabel?: boolean;
 }
 
 // Ref methods exposed by this component.
@@ -35,8 +38,15 @@ export const constraintAccordionListId = 'constraintAccordionListId';
 export const ConstraintAccordionList = forwardRef<
     IConstraintAccordionListRef | undefined,
     IConstraintAccordionListProps
->(({ constraints, setConstraints, showCreateButton }, ref) => {
-    const state = useWeakMap<IConstraint, IConstraintAccordionListItemState>();
+>(
+    (
+        { constraints, setConstraints, showCreateButton, showLabel = true },
+        ref
+    ) => {
+        const state = useWeakMap<
+            IConstraint,
+            IConstraintAccordionListItemState
+        >();
         const { context } = useUnleashContext();
         const { classes: styles } = useStyles();
 
@@ -100,7 +110,9 @@ export const ConstraintAccordionList = forwardRef<
         return (
             <div className={styles.container} id={constraintAccordionListId}>
                 <ConditionallyRender
-                condition={constraints && constraints.length > 0}
+                    condition={
+                        constraints && constraints.length > 0 && showLabel
+                    }
                     show={
                         <p className={styles.customConstraintLabel}>
                             Custom constraints
@@ -108,8 +120,12 @@ export const ConstraintAccordionList = forwardRef<
                     }
                 />
                 {constraints.map((constraint, index) => (
+                    <Fragment key={objectId(constraint)}>
+                        <ConditionallyRender
+                            condition={index > 0}
+                            show={<StrategySeparator text="AND" />}
+                        />
                         <ConstraintAccordion
-                    key={objectId(constraint)}
                             constraint={constraint}
                             onEdit={onEdit && onEdit.bind(null, constraint)}
                             onCancel={onCancel.bind(null, index)}
@@ -118,6 +134,7 @@ export const ConstraintAccordionList = forwardRef<
                             editing={Boolean(state.get(constraint)?.editing)}
                             compact
                         />
+                    </Fragment>
                 ))}
                 <ConditionallyRender
                     condition={Boolean(showCreateButton && onAdd)}
@@ -146,7 +163,6 @@ export const ConstraintAccordionList = forwardRef<
                                 onClick={onAdd}
                                 variant="outlined"
                                 color="secondary"
-                            sx={{ mb: 2 }}
                             >
                                 Add custom constraint
                             </Button>
@@ -155,4 +171,5 @@ export const ConstraintAccordionList = forwardRef<
                 />
             </div>
         );
-});
+    }
+);

frontend/src/component/common/StrategySeparator/StrategySeparator.tsx

@@ -6,7 +6,7 @@ interface IStrategySeparatorProps {
 }
 
 const StyledContainer = styled('div')(({ theme }) => ({
-    height: theme.spacing(2),
+    height: theme.spacing(1),
     position: 'relative',
     width: '100%',
 }));

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -256,7 +256,10 @@ export const StrategyExecution = ({ strategy }: IStrategyExecutionProps) => {
                 condition={constraints.length > 0}
                 show={
                     <>
-                        <ConstraintAccordionList constraints={constraints} />
+                        <ConstraintAccordionList
+                            constraints={constraints}
+                            showLabel={false}
+                        />
                         <StrategySeparator text="AND" />
                     </>
                 }

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts

@@ -16,6 +16,7 @@ export const useStyles = makeStyles()(theme => ({
         alignItems: 'center',
         borderBottom: `1px solid ${theme.palette.grey[300]}`,
         fontWeight: theme.typography.fontWeightMedium,
+        fontSize: theme.fontSizes.smallBody,
     },
     icon: {
         fill: theme.palette.inactiveIcon,

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts

@@ -3,16 +3,18 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     container: {
         width: '100%',
-        padding: '1rem',
+        padding: theme.spacing(2, 3),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
         fontSize: theme.fontSizes.smallBody,
-        backgroundColor: theme.palette.grey[200],
+        border: `1px solid ${theme.palette.dividerAlternative}`,
         position: 'relative',
         borderRadius: '5px',
-        textAlign: 'center',
     },
     link: {
         textDecoration: 'none',
-        fontWeight: theme.fontWeight.bold,
+        marginLeft: theme.spacing(1),
         '&:hover': {
             textDecoration: 'underline',
         },

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx

@@ -1,8 +1,9 @@
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+import { DonutLarge } from '@mui/icons-material';
 import { useStyles } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles';
 import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
-import { Link } from 'react-router-dom';
-import { Fragment } from 'react';
 
 interface IFeatureOverviewSegmentProps {
     strategyId: string;
@@ -23,7 +24,7 @@ export const FeatureOverviewSegment = ({
             {segments.map(segment => (
                 <Fragment key={segment.id}>
                     <div className={styles.container}>
-                        Segment{' '}
+                        <DonutLarge color="secondary" sx={{ mr: 1 }} /> Segment:{' '}
                         <Link
                             to={segmentPath(segment.id)}
                             className={styles.link}