fix: minor ui improvements (#1163)

frontend/src/assets/icons/rollout.svg

@@ -1 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.584 10H22a2 2 0 1 1 0 4h-5.416a5.001 5.001 0 0 1-9.168 0H2a2 2 0 1 1 0-4h5.416a5.001 5.001 0 0 1 9.168 0Z" /></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M16.584 10H22a2 2 0 1 1 0 4h-5.416a5.001 5.001 0 0 1-9.168 0H2a2 2 0 1 1 0-4h5.416a5.001 5.001 0 0 1 9.168 0Z" />
+</svg>

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

@@ -7,14 +7,11 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        marginRight: theme.spacing(2),
+        marginRight: theme.spacing(1),
         [theme.breakpoints.down(650)]: {
             marginBottom: '1rem',
             marginRight: 0,
         },
-        [theme.breakpoints.between(1101, 1365)]: {
-            marginRight: '8px',
-        },
     },
     constraintIcon: {
         fill: '#fff',
@@ -75,9 +72,6 @@ export const useStyles = makeStyles()(theme => ({
         minWidth: '220px',
         position: 'relative',
         paddingRight: '1rem',
-        [theme.breakpoints.down(650)]: {
-            paddingRight: 0,
-        },
         [theme.breakpoints.between(1101, 1365)]: {
             minWidth: '152px',
             paddingRight: '0.5rem',

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

@@ -1,10 +1,13 @@
-import { IConstraint } from '../../../../../../interfaces/strategy';
+import { IConstraint } from 'interfaces/strategy';
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
 import { Tooltip, Box } from '@mui/material';
-import { ReactComponent as NegatedIcon } from '../../../../../../assets/icons/24_Negator.svg';
+import { stringOperators } from 'constants/operators';
+import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg';
 import { ConstraintOperator } from '../../../ConstraintOperator/ConstraintOperator';
 import { useStyles } from '../../../ConstraintAccordion.styles';
 import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper';
+import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
+import { oneOf } from 'utils/oneOf';
 
 interface ConstraintViewHeaderOperatorProps {
     constraint: IConstraint;
@@ -35,6 +38,19 @@ export const ConstraintViewHeaderOperator = ({
                     hasPrefix={Boolean(constraint.inverted)}
                 />
             </div>
+            <ConditionallyRender
+                condition={
+                    !Boolean(constraint.caseInsensitive) &&
+                    oneOf(stringOperators, constraint.operator)
+                }
+                show={
+                    <Tooltip title="Case sensitive is active" arrow>
+                        <StyledIconWrapper>
+                            <CaseSensitive />
+                        </StyledIconWrapper>
+                    </Tooltip>
+                }
+            />
         </div>
     );
 };

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

@@ -1,11 +1,7 @@
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
-import { oneOf } from '../../../../../../utils/oneOf';
-import { stringOperators } from '../../../../../../constants/operators';
-import { styled, Tooltip } from '@mui/material';
-import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg';
+import { styled } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
-import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper';
 import { IConstraint } from '../../../../../../interfaces/strategy';
 import { useStyles } from '../../../ConstraintAccordion.styles';
 
@@ -53,19 +49,6 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({
 
     return (
         <div className={styles.headerValuesContainerWrapper}>
-            <ConditionallyRender
-                condition={
-                    !Boolean(constraint.caseInsensitive) &&
-                    oneOf(stringOperators, constraint.operator)
-                }
-                show={
-                    <Tooltip title="Case sensitive is active" arrow>
-                        <StyledIconWrapper>
-                            <CaseSensitive />
-                        </StyledIconWrapper>
-                    </Tooltip>
-                }
-            />
             <div className={styles.headerValuesContainer}>
                 <StyledValuesSpan>{text}</StyledValuesSpan>
                 <ConditionallyRender

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx

@@ -1,12 +1,7 @@
 import React, { useEffect } from 'react';
-import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
-import { oneOf } from '../../../../../../utils/oneOf';
-import { stringOperators } from '../../../../../../constants/operators';
-import { Chip, styled, Tooltip } from '@mui/material';
-import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg';
+import { Chip, styled } from '@mui/material';
 import { formatConstraintValue } from '../../../../../../utils/formatConstraintValue';
 import { useStyles } from '../../../ConstraintAccordion.styles';
-import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper';
 import { IConstraint } from '../../../../../../interfaces/strategy';
 import { useLocationSettings } from '../../../../../../hooks/useLocationSettings';
 
@@ -35,19 +30,6 @@ export const ConstraintAccordionViewHeaderSingleValue = ({
 
     return (
         <div className={styles.headerValuesContainerWrapper}>
-            <ConditionallyRender
-                condition={
-                    !Boolean(constraint.caseInsensitive) &&
-                    oneOf(stringOperators, constraint.operator)
-                }
-                show={
-                    <Tooltip title="Case sensitive is active" arrow>
-                        <StyledIconWrapper>
-                            <CaseSensitive />{' '}
-                        </StyledIconWrapper>
-                    </Tooltip>
-                }
-            />
             <StyledSingleValueChip
                 label={formatConstraintValue(constraint, locationSettings)}
             />

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

@@ -6,13 +6,13 @@ export const StyledIconWrapperBase = styled('div')<{
     prefix?: boolean;
 }>(({ theme }) => ({
     backgroundColor: theme.palette.grey[200],
-    width: 28,
+    width: 24,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     alignSelf: 'stretch',
     color: theme.palette.primary.main,
-    marginRight: '1rem',
+    marginRight: theme.spacing(1),
     borderRadius: theme.shape.borderRadius,
 }));
 

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

@@ -9,6 +9,7 @@ export const useStyles = makeStyles()(theme => ({
     },
     name: {
         fontSize: theme.fontSizes.smallBody,
+        lineHeight: 17 / 14,
     },
     text: {
         fontSize: theme.fontSizes.smallerBody,

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

@@ -23,6 +23,7 @@ export const ConstraintOperator = ({
             style={{
                 borderTopLeftRadius: hasPrefix ? 0 : undefined,
                 borderBottomLeftRadius: hasPrefix ? 0 : undefined,
+                paddingLeft: hasPrefix ? 0 : undefined,
             }}
         >
             <div className={styles.name}>{operatorName}</div>

frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx

@@ -14,7 +14,7 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
     const container = {
         backgroundColor: enabled
             ? theme.palette.primary.light
-            : theme.palette.inactiveIcon,
+            : theme.palette.neutral.border,
         borderRadius: '50%',
         width: '28px',
         height: '28px',
@@ -22,13 +22,13 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        marginRight: '0.5rem',
+        marginRight: theme.spacing(1),
     };
 
     const icon = {
         fill: '#fff',
-        width: '17px',
-        height: '17px',
+        width: '16px',
+        height: '16px',
     };
 
     return (

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx

@@ -8,6 +8,7 @@ import { FeatureStrategyMenu } from '../FeatureStrategyMenu/FeatureStrategyMenu'
 import { PresetCard } from './PresetCard/PresetCard';
 import { useStyles } from './FeatureStrategyEmpty.styles';
 import { formatUnknownError } from 'utils/formatUnknownError';
+import { getFeatureStrategyIcon } from 'utils/strategyNames';
 
 interface IFeatureStrategyEmptyProps {
     projectId: string;
@@ -93,6 +94,7 @@ export const FeatureStrategyEmpty = ({
             >
                 <PresetCard
                     title="Standard strategy"
+                    Icon={getFeatureStrategyIcon('default')}
                     onClick={onAddSimpleStrategy}
                 >
                     The standard strategy is strictly on/off for your entire
@@ -100,6 +102,7 @@ export const FeatureStrategyEmpty = ({
                 </PresetCard>
                 <PresetCard
                     title="Gradual rollout"
+                    Icon={getFeatureStrategyIcon('flexibleRollout')}
                     onClick={onAddGradualRolloutStrategy}
                 >
                     Roll out to a percentage of your userbase.

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/PresetCard/PresetCard.tsx

@@ -1,22 +1,34 @@
-import { Button, Card, CardContent, Typography } from '@mui/material';
-import { FC } from 'react';
+import { ElementType, FC } from 'react';
+import { Button, Card, CardContent, styled, Typography } from '@mui/material';
 
 interface IPresetCardProps {
     title: string;
     onClick: () => void;
+    Icon: ElementType;
 }
 
+const StyledCard = styled(Card)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: theme.shape.borderRadiusMedium,
+}));
+
 export const PresetCard: FC<IPresetCardProps> = ({
     title,
     children,
+    Icon,
     onClick,
 }) => (
-    <Card variant="outlined" sx={{ display: 'flex', flexDirection: 'column' }}>
+    <StyledCard variant="outlined">
         <CardContent
             sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}
         >
-            <Typography variant="body1" fontWeight="medium" sx={{ mb: 0.5 }}>
-                {title}
+            <Typography
+                variant="body1"
+                fontWeight="medium"
+                sx={{ mb: 0.5, display: 'flex', alignItems: 'center' }}
+            >
+                <Icon color="disabled" sx={{ mr: 1 }} /> {title}
             </Typography>
             <Typography variant="body2" color="text.secondary" component="p">
                 {children}
@@ -31,5 +43,5 @@ export const PresetCard: FC<IPresetCardProps> = ({
                 Use template
             </Button>
         </CardContent>
-    </Card>
+    </StyledCard>
 );

frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx

@@ -14,13 +14,11 @@ export const FeatureStrategyIcon = ({
     const Icon = getFeatureStrategyIcon(strategyName);
 
     return (
-        <StyledIcon>
-            <Tooltip title={formatStrategyName(strategyName)} arrow>
-                <>
-                    <Icon />
-                </>
-            </Tooltip>
-        </StyledIcon>
+        <Tooltip title={formatStrategyName(strategyName)} arrow>
+            <StyledIcon>
+                <Icon />
+            </StyledIcon>
+        </Tooltip>
     );
 };
 

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

@@ -3,20 +3,19 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     container: {
         borderRadius: theme.shape.borderRadiusMedium,
-        border: `1px solid ${theme.palette.grey[300]}`,
+        border: `1px solid ${theme.palette.divider}`,
         '& + &': {
-            marginTop: '1rem',
+            marginTop: theme.spacing(2),
         },
         background: theme.palette.background.default,
     },
     header: {
         padding: theme.spacing(0.5, 2),
         display: 'flex',
-        gap: '0.5rem',
+        gap: theme.spacing(1),
         alignItems: 'center',
-        borderBottom: `1px solid ${theme.palette.grey[300]}`,
+        borderBottom: `1px solid ${theme.palette.divider}`,
         fontWeight: theme.typography.fontWeightMedium,
-        fontSize: theme.fontSizes.smallBody,
     },
     icon: {
         fill: theme.palette.inactiveIcon,
@@ -26,8 +25,7 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
     },
     body: {
-        padding: '1rem',
-        display: 'grid',
+        padding: theme.spacing(2),
         justifyItems: 'center',
     },
 }));

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

@@ -41,7 +41,6 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
         justifyContent: 'center',
         flexDirection: 'column',
-        // paddingTop: '1.5rem',
     },
     headerTitle: {
         display: 'flex',

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -69,7 +69,7 @@ const FeatureOverviewEnvironment = ({
                         data-loading
                         style={{
                             color: !env.enabled
-                                ? theme.palette.text.disabled
+                                ? theme.palette.text.secondary
                                 : theme.palette.text.primary,
                         }}
                     >
@@ -91,7 +91,6 @@ const FeatureOverviewEnvironment = ({
                                         <Chip
                                             size="small"
                                             variant="outlined"
-                                            // severity="disabled"
                                             label="Disabled"
                                             sx={{ ml: 1 }}
                                         />
@@ -115,6 +114,7 @@ const FeatureOverviewEnvironment = ({
 
                     <FeatureOverviewEnvironmentMetrics
                         environmentMetric={environmentMetric}
+                        disabled={!env.enabled}
                     />
                 </AccordionSummary>
 

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx

@@ -1,4 +1,5 @@
 import { FiberManualRecord } from '@mui/icons-material';
+import { useTheme } from '@mui/system';
 import { IFeatureEnvironmentMetrics } from 'interfaces/featureToggle';
 import { calculatePercentage } from 'utils/calculatePercentage';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
@@ -6,12 +7,15 @@ import { useStyles } from './FeatureOverviewEnvironmentMetrics.styles';
 
 interface IFeatureOverviewEnvironmentMetrics {
     environmentMetric?: IFeatureEnvironmentMetrics;
+    disabled?: boolean;
 }
 
 const FeatureOverviewEnvironmentMetrics = ({
     environmentMetric,
+    disabled = false,
 }: IFeatureOverviewEnvironmentMetrics) => {
     const { classes: styles } = useStyles();
+    const theme = useTheme();
 
     if (!environmentMetric) return null;
 
@@ -25,10 +29,26 @@ const FeatureOverviewEnvironmentMetrics = ({
         return (
             <div className={styles.container}>
                 <div className={styles.info}>
-                    <p className={styles.percentage} data-loading>
+                    <p
+                        className={styles.percentage}
+                        style={{
+                            color: disabled
+                                ? theme.palette.text.secondary
+                                : undefined,
+                        }}
+                        data-loading
+                    >
                         {percentage}%
                     </p>
-                    <p className={styles.infoParagraph} data-loading>
+                    <p
+                        className={styles.infoParagraph}
+                        style={{
+                            color: disabled
+                                ? theme.palette.text.secondary
+                                : theme.palette.text.primary,
+                        }}
+                        data-loading
+                    >
                         The feature has been requested <b>0 times</b> and
                         exposed<b> 0 times</b> in the last hour
                     </p>

frontend/src/utils/strategyNames.tsx

@@ -1,15 +1,24 @@
+import { FC, ElementType } from 'react';
+import { SvgIcon } from '@mui/material';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
 import PeopleIcon from '@mui/icons-material/People';
 import LanguageIcon from '@mui/icons-material/Language';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import CodeIcon from '@mui/icons-material/Code';
 import { ReactComponent as RolloutIcon } from 'assets/icons/rollout.svg';
-import { ElementType } from 'react';
 
 export const formatStrategyName = (strategyName: string): string => {
     return formattedStrategyNames[strategyName] ?? strategyName;
 };
 
+const RolloutSvgIcon: FC = props => (
+    <SvgIcon
+        {...props}
+        component={rest => <RolloutIcon {...rest} />}
+        inheritViewBox
+    />
+);
+
 export const getFeatureStrategyIcon = (strategyName: string): ElementType => {
     switch (strategyName) {
         case 'default':
@@ -17,7 +26,7 @@ export const getFeatureStrategyIcon = (strategyName: string): ElementType => {
         case 'remoteAddress':
             return LanguageIcon;
         case 'flexibleRollout':
-            return RolloutIcon;
+            return RolloutSvgIcon;
         case 'userWithId':
             return PeopleIcon;
         case 'applicationHostname':