Refactor makestyles 2-1 (#2820)

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

@@ -31,60 +31,19 @@ export const useStyles = makeStyles()(theme => ({
     accordionEdit: {
         backgroundColor: theme.palette.constraintAccordion.editBackground,
     },
-    headerMetaInfo: {
-        display: 'flex',
-        alignItems: 'stretch',
-        marginLeft: theme.spacing(1),
-        [theme.breakpoints.down(710)]: {
-            marginLeft: 0,
-            flexDirection: 'column',
-            alignItems: 'center',
-            width: '100%',
-        },
-    },
     headerContainer: {
         display: 'flex',
         alignItems: 'center',
         width: '100%',
-        [theme.breakpoints.down(710)]: {
+        [theme.breakpoints.down('sm')]: {
             flexDirection: 'column',
             alignItems: 'center',
             position: 'relative',
         },
     },
-    headerValuesContainerWrapper: {
-        display: 'flex',
-        alignItems: 'stretch',
-        margin: 'auto 0',
-    },
-    headerValuesContainer: {
-        display: 'flex',
-        justifyContent: 'stretch',
-        margin: 'auto 0',
-        flexDirection: 'column',
-        marginLeft: theme.spacing(1),
-        [theme.breakpoints.down(710)]: {
-            marginLeft: 0,
-        },
-    },
     headerValues: {
         fontSize: theme.fontSizes.smallBody,
     },
-    headerValuesExpand: {
-        fontSize: theme.fontSizes.smallBody,
-        marginTop: '4px',
-        color: theme.palette.primary.dark,
-        [theme.breakpoints.down(710)]: {
-            textAlign: 'center',
-        },
-    },
-    headerConstraintContainer: {
-        minWidth: '152px',
-        position: 'relative',
-        [theme.breakpoints.down(710)]: {
-            paddingRight: 0,
-        },
-    },
     editingBadge: {
         borderRadius: theme.shape.borderRadiusExtraLarge,
         padding: '0.25rem 0.5rem',
@@ -135,7 +94,7 @@ export const useStyles = makeStyles()(theme => ({
     headerActions: {
         marginLeft: 'auto',
         whiteSpace: 'nowrap',
-        [theme.breakpoints.down(710)]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },

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

@@ -15,7 +15,7 @@ import { resolveText } from './helpers';
 import { oneOf } from 'utils/oneOf';
 import React, { useEffect, useState } from 'react';
 import { Operator } from 'constants/operators';
-import { ConstraintOperatorSelect } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect';
+import { ConstraintOperatorSelect } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect';
 import {
     operatorsForContext,
     CURRENT_TIME_CONTEXT_FIELD,

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

@@ -1,20 +1,36 @@
-import { Chip } from '@mui/material';
+import { Chip, styled } from '@mui/material';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { useStyles } from '../ConstraintAccordionViewBody.style';
 
 interface ISingleValueProps {
     value: string | undefined;
     operator: string;
 }
 
+const StyledDiv = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    [theme.breakpoints.down(600)]: { flexDirection: 'column' },
+}));
+
+const StyledParagraph = styled('p')(({ theme }) => ({
+    marginRight: theme.spacing(1.5),
+    [theme.breakpoints.down(600)]: {
+        marginBottom: theme.spacing(1.5),
+        marginRight: 0,
+    },
+}));
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+    margin: theme.spacing(0, 1, 1, 0),
+}));
+
 export const SingleValue = ({ value, operator }: ISingleValueProps) => {
-    const { classes: styles } = useStyles();
     if (!value) return null;
 
     return (
-        <div className={styles.singleValueView}>
+        <StyledDiv>
-            <p className={styles.singleValueText}>Value must be {operator}</p>{' '}
+            <StyledParagraph>Value must be {operator}</StyledParagraph>{' '}
-            <Chip
+            <StyledChip
                 label={
                     <StringTruncator
                         maxWidth="400"
@@ -22,8 +38,7 @@ export const SingleValue = ({ value, operator }: ISingleValueProps) => {
                         maxLength={50}
                     />
                 }
-                className={styles.chip}
             />
-        </div>
+        </StyledDiv>
     );
 };

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

@@ -1,6 +1,6 @@
 import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
 import { IConstraint } from 'interfaces/strategy';
-import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo';
+import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo';
 import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
 import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
 

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

@@ -1,11 +1,10 @@
-import { styled, Tooltip } from '@mui/material';
+import { Divider, styled, Tooltip } from '@mui/material';
-import { ConstraintViewHeaderOperator } from '../ConstraintViewHeaderOperator/ConstraintViewHeaderOperator';
+import { ConstraintViewHeaderOperator } from './ConstraintViewHeaderOperator';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { ConstraintAccordionViewHeaderSingleValue } from '../ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue';
+import { ConstraintAccordionViewHeaderSingleValue } from './ConstraintAccordionViewHeaderSingleValue';
-import { ConstraintAccordionViewHeaderMultipleValues } from '../ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues';
+import { ConstraintAccordionViewHeaderMultipleValues } from './ConstraintAccordionViewHeaderMultipleValues';
 import React from 'react';
 import { IConstraint } from 'interfaces/strategy';
-import { useStyles } from '../../../ConstraintAccordion.styles';
 
 const StyledHeaderText = styled('span')(({ theme }) => ({
     display: '-webkit-box',
@@ -34,6 +33,18 @@ const StyledHeaderWrapper = styled('div')(({ theme }) => ({
     borderRadius: theme.spacing(1),
 }));
 
+const StyledHeaderMetaInfo = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'stretch',
+    marginLeft: theme.spacing(1),
+    [theme.breakpoints.down('sm')]: {
+        marginLeft: 0,
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+    },
+}));
+
 interface ConstraintAccordionViewHeaderMetaInfoProps {
     constraint: IConstraint;
     singleValue: boolean;
@@ -49,11 +60,9 @@ export const ConstraintAccordionViewHeaderInfo = ({
     expanded,
     maxLength = 112, //The max number of characters in the values text for NOT allowing expansion
 }: ConstraintAccordionViewHeaderMetaInfoProps) => {
-    const { classes: styles } = useStyles();
-
     return (
         <StyledHeaderWrapper>
-            <div className={styles.headerMetaInfo}>
+            <StyledHeaderMetaInfo>
                 <Tooltip title={constraint.contextName} arrow>
                     <StyledHeaderText>
                         {constraint.contextName}
@@ -77,7 +86,7 @@ export const ConstraintAccordionViewHeaderInfo = ({
                         />
                     }
                 />
-            </div>
+            </StyledHeaderMetaInfo>
         </StyledHeaderWrapper>
     );
 };

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

@@ -3,7 +3,6 @@ import { styled } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
 import { IConstraint } from 'interfaces/strategy';
-import { useStyles } from '../../../ConstraintAccordion.styles';
 
 const StyledValuesSpan = styled('span')(({ theme }) => ({
     display: '-webkit-box',
@@ -13,7 +12,7 @@ const StyledValuesSpan = styled('span')(({ theme }) => ({
     wordBreak: 'break-word',
     fontSize: theme.fontSizes.smallBody,
     margin: 'auto 0',
-    [theme.breakpoints.down(710)]: {
+    [theme.breakpoints.down('sm')]: {
         margin: theme.spacing(1, 0),
         textAlign: 'center',
     },
@@ -26,14 +25,38 @@ interface ConstraintSingleValueProps {
     allowExpand: (shouldExpand: boolean) => void;
 }
 
+const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'stretch',
+    margin: 'auto 0',
+}));
+
+const StyledHeaderValuesContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'stretch',
+    margin: 'auto 0',
+    flexDirection: 'column',
+    marginLeft: theme.spacing(1),
+    [theme.breakpoints.down('sm')]: {
+        marginLeft: 0,
+    },
+}));
+
+const StyledHeaderValuesExpand = styled('p')(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+    marginTop: theme.spacing(0.5),
+    color: theme.palette.primary.dark,
+    [theme.breakpoints.down('sm')]: {
+        textAlign: 'center',
+    },
+}));
+
 export const ConstraintAccordionViewHeaderMultipleValues = ({
     constraint,
     expanded,
     allowExpand,
     maxLength,
 }: ConstraintSingleValueProps) => {
-    const { classes: styles } = useStyles();
-
     const [expandable, setExpandable] = useState(false);
 
     const text = useMemo(() => {
@@ -48,25 +71,22 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({
     }, [text, maxLength, allowExpand, setExpandable]);
 
     return (
-        <div className={styles.headerValuesContainerWrapper}>
+        <StyledHeaderValuesContainerWrapper>
-            <div className={styles.headerValuesContainer}>
+            <StyledHeaderValuesContainer>
                 <StyledValuesSpan>{text}</StyledValuesSpan>
                 <ConditionallyRender
                     condition={expandable}
                     show={
-                        <p
+                        <StyledHeaderValuesExpand
-                            className={classnames(
+                            className={'valuesExpandLabel'}
-                                styles.headerValuesExpand,
-                                'valuesExpandLabel'
-                            )}
                         >
                             {!expanded
                                 ? `View all (${constraint?.values?.length})`
                                 : 'View less'}
-                        </p>
+                        </StyledHeaderValuesExpand>
                     }
                 />
-            </div>
+            </StyledHeaderValuesContainer>
-        </div>
+        </StyledHeaderValuesContainerWrapper>
     );
 };

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

@@ -1,14 +1,13 @@
 import React, { useEffect } from 'react';
 import { Chip, styled } from '@mui/material';
 import { formatConstraintValue } from 'utils/formatConstraintValue';
-import { useStyles } from '../../../ConstraintAccordion.styles';
 import { IConstraint } from 'interfaces/strategy';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 
 const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
     margin: 'auto 0',
     marginLeft: theme.spacing(1),
-    [theme.breakpoints.down(710)]: {
+    [theme.breakpoints.down('sm')]: {
         margin: theme.spacing(1, 0),
     },
 }));
@@ -18,22 +17,27 @@ interface ConstraintSingleValueProps {
     allowExpand: (shouldExpand: boolean) => void;
 }
 
+const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'stretch',
+    margin: 'auto 0',
+}));
+
 export const ConstraintAccordionViewHeaderSingleValue = ({
     constraint,
     allowExpand,
 }: ConstraintSingleValueProps) => {
     const { locationSettings } = useLocationSettings();
-    const { classes: styles } = useStyles();
 
     useEffect(() => {
         allowExpand(false);
     }, [allowExpand]);
 
     return (
-        <div className={styles.headerValuesContainerWrapper}>
+        <StyledHeaderValuesContainerWrapper>
             <StyledSingleValueChip
                 label={formatConstraintValue(constraint, locationSettings)}
             />
-        </div>
+        </StyledHeaderValuesContainerWrapper>
     );
 };

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

@@ -1,11 +1,10 @@
 import { IConstraint } from 'interfaces/strategy';
-import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from '../../../ConditionallyRender/ConditionallyRender';
-import { Tooltip, Box } from '@mui/material';
+import { Tooltip, Box, styled } from '@mui/material';
 import { stringOperators } from 'constants/operators';
 import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg';
-import { ConstraintOperator } from '../../../ConstraintOperator/ConstraintOperator';
+import { ConstraintOperator } from '../../ConstraintOperator/ConstraintOperator';
-import { useStyles } from '../../../ConstraintAccordion.styles';
+import { StyledIconWrapper } from './StyledIconWrapper';
-import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper';
 import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
 import { oneOf } from 'utils/oneOf';
 
@@ -13,13 +12,25 @@ interface ConstraintViewHeaderOperatorProps {
     constraint: IConstraint;
 }
 
+const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'stretch',
+    margin: 'auto 0',
+}));
+
+const StyledHeaderConstraintContainer = styled('div')(({ theme }) => ({
+    minWidth: '152px',
+    position: 'relative',
+    [theme.breakpoints.down('sm')]: {
+        paddingRight: 0,
+    },
+}));
+
 export const ConstraintViewHeaderOperator = ({
     constraint,
 }: ConstraintViewHeaderOperatorProps) => {
-    const { classes: styles } = useStyles();
-
     return (
-        <div className={styles.headerValuesContainerWrapper}>
+        <StyledHeaderValuesContainerWrapper>
             <ConditionallyRender
                 condition={Boolean(constraint.inverted)}
                 show={
@@ -32,12 +43,12 @@ export const ConstraintViewHeaderOperator = ({
                     </Tooltip>
                 }
             />
-            <div className={styles.headerConstraintContainer}>
+            <StyledHeaderConstraintContainer>
                 <ConstraintOperator
                     constraint={constraint}
                     hasPrefix={Boolean(constraint.inverted)}
                 />
-            </div>
+            </StyledHeaderConstraintContainer>
             <ConditionallyRender
                 condition={
                     !Boolean(constraint.caseInsensitive) &&
@@ -51,6 +62,6 @@ export const ConstraintViewHeaderOperator = ({
                     </Tooltip>
                 }
             />
-        </div>
+        </StyledHeaderValuesContainerWrapper>
     );
 };

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

@@ -1,31 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        padding: theme.spacing(0.5, 1.5),
-        borderRadius: theme.shape.borderRadius,
-        backgroundColor: theme.palette.constraintAccordion.operatorBackground,
-        lineHeight: 1.25,
-    },
-    name: {
-        fontSize: theme.fontSizes.smallBody,
-        lineHeight: 17 / 14,
-    },
-    text: {
-        fontSize: theme.fontSizes.smallerBody,
-        color: theme.palette.grey[700],
-    },
-    not: {
-        display: 'block',
-        margin: '-1rem 0 0.25rem 0',
-        height: '1rem',
-        '& > span': {
-            display: 'inline-block',
-            padding: '0 0.25rem',
-            borderRadius: theme.shape.borderRadius,
-            fontSize: theme.fontSizes.smallerBody,
-            backgroundColor: theme.palette.primary.light,
-            color: 'white',
-        },
-    },
-}));

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

@@ -1,33 +1,47 @@
 import { IConstraint } from 'interfaces/strategy';
 import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
-import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles';
 import React from 'react';
+import { styled } from '@mui/material';
 
 interface IConstraintOperatorProps {
     constraint: IConstraint;
     hasPrefix?: boolean;
 }
 
+const StyledContainer = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0.5, 1.5),
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.constraintAccordion.operatorBackground,
+    lineHeight: 1.25,
+}));
+
+const StyledName = styled('div')(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+    lineHeight: 17 / 14,
+}));
+
+const StyledText = styled('div')(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+    color: theme.palette.neutral.main,
+}));
+
 export const ConstraintOperator = ({
     constraint,
     hasPrefix,
 }: IConstraintOperatorProps) => {
-    const { classes: styles } = useStyles();
-
     const operatorName = constraint.operator;
     const operatorText = formatOperatorDescription(constraint.operator);
 
     return (
-        <div
+        <StyledContainer
-            className={styles.container}
             style={{
                 borderTopLeftRadius: hasPrefix ? 0 : undefined,
                 borderBottomLeftRadius: hasPrefix ? 0 : undefined,
                 paddingLeft: hasPrefix ? 0 : undefined,
             }}
         >
-            <div className={styles.name}>{operatorName}</div>
+            <StyledName>{operatorName}</StyledName>
-            <div className={styles.text}>{operatorText}</div>
+            <StyledText>{operatorText}</StyledText>
-        </div>
+        </StyledContainer>
     );
 };

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

@@ -0,0 +1,150 @@
+import {
+    Select,
+    MenuItem,
+    FormControl,
+    InputLabel,
+    SelectChangeEvent,
+    styled,
+    Box,
+} from '@mui/material';
+import {
+    Operator,
+    stringOperators,
+    semVerOperators,
+    dateOperators,
+    numOperators,
+    inOperators,
+} from 'constants/operators';
+import React, { useState } from 'react';
+import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
+import classNames from 'classnames';
+
+interface IConstraintOperatorSelectProps {
+    options: Operator[];
+    value: Operator;
+    onChange: (value: Operator) => void;
+}
+
+const StyledValueContainer = styled('div')(({ theme }) => ({
+    lineHeight: 1.1,
+    marginTop: -2,
+    marginBottom: -10,
+}));
+
+const StyledLabel = styled('div')(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+}));
+
+const StyledDescription = styled('div')(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+    color: theme.palette.neutral.main,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+}));
+
+const StyledFormInput = styled(FormControl)(({ theme }) => ({
+    [theme.breakpoints.between(1101, 1365)]: {
+        width: '170px',
+        marginRight: theme.spacing(0.5),
+    },
+}));
+
+const StyledMenuItem = styled(MenuItem, {
+    shouldForwardProp: prop => prop !== 'separator',
+})<{ separator: boolean }>(({ theme, separator }) =>
+    separator
+        ? {
+              position: 'relative',
+              overflow: 'visible',
+              marginTop: theme.spacing(2),
+              '&:before': {
+                  content: '""',
+                  display: 'block',
+                  position: 'absolute',
+                  top: theme.spacing(-1),
+                  left: 0,
+                  right: 0,
+                  borderTop: '1px solid',
+                  borderTopColor: theme.palette.tertiary.contrast,
+              },
+          }
+        : {}
+);
+
+const StyledOptionContainer = styled('div')(({ theme }) => ({
+    lineHeight: 1.2,
+}));
+
+export const ConstraintOperatorSelect = ({
+    options,
+    value,
+    onChange,
+}: IConstraintOperatorSelectProps) => {
+    const [open, setOpen] = useState(false);
+
+    const onSelectChange = (event: SelectChangeEvent) => {
+        onChange(event.target.value as Operator);
+    };
+
+    const renderValue = () => {
+        return (
+            <StyledValueContainer>
+                <StyledLabel>{value}</StyledLabel>
+                <StyledDescription>
+                    {formatOperatorDescription(value)}
+                </StyledDescription>
+            </StyledValueContainer>
+        );
+    };
+
+    return (
+        <StyledFormInput variant="outlined" size="small" fullWidth>
+            <InputLabel htmlFor="operator-select">Operator</InputLabel>
+            <Select
+                id="operator-select"
+                name="operator"
+                label="Operator"
+                value={value}
+                open={open}
+                onOpen={() => setOpen(true)}
+                onClose={() => setOpen(false)}
+                onChange={onSelectChange}
+                renderValue={renderValue}
+            >
+                {options.map(operator => (
+                    <StyledMenuItem
+                        key={operator}
+                        value={operator}
+                        separator={needSeparatorAbove(options, operator)}
+                    >
+                        <StyledOptionContainer>
+                            <StyledLabel>{operator}</StyledLabel>
+                            <StyledDescription>
+                                {formatOperatorDescription(operator)}
+                            </StyledDescription>
+                        </StyledOptionContainer>
+                    </StyledMenuItem>
+                ))}
+            </Select>
+        </StyledFormInput>
+    );
+};
+
+const needSeparatorAbove = (options: Operator[], option: Operator): boolean => {
+    if (option === options[0]) {
+        return false;
+    }
+
+    return operatorGroups.some(group => {
+        return group[0] === option;
+    });
+};
+
+const operatorGroups = [
+    inOperators,
+    stringOperators,
+    numOperators,
+    dateOperators,
+    semVerOperators,
+];

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

@@ -1,43 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    valueContainer: {
-        lineHeight: 1.1,
-        marginTop: -2,
-        marginBottom: -10,
-    },
-    optionContainer: {
-        lineHeight: 1.2,
-    },
-    label: {
-        fontSize: theme.fontSizes.smallBody,
-    },
-    description: {
-        fontSize: theme.fontSizes.smallerBody,
-        color: theme.palette.grey[700],
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-    },
-    separator: {
-        position: 'relative',
-        overflow: 'visible',
-        marginTop: '1rem',
-        '&:before': {
-            content: '""',
-            display: 'block',
-            position: 'absolute',
-            top: '-0.5rem',
-            left: 0,
-            right: 0,
-            borderTop: '1px solid',
-            borderTopColor: theme.palette.grey[300],
-        },
-    },
-    formInput: {
-        [theme.breakpoints.between(1101, 1365)]: {
-            width: '170px',
-            marginRight: '8px',
-        },
-    },
-}));

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

@@ -1,107 +0,0 @@
-import {
-    Select,
-    MenuItem,
-    FormControl,
-    InputLabel,
-    SelectChangeEvent,
-} from '@mui/material';
-import {
-    Operator,
-    stringOperators,
-    semVerOperators,
-    dateOperators,
-    numOperators,
-    inOperators,
-} from 'constants/operators';
-import React, { useState } from 'react';
-import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
-import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles';
-import classNames from 'classnames';
-
-interface IConstraintOperatorSelectProps {
-    options: Operator[];
-    value: Operator;
-    onChange: (value: Operator) => void;
-}
-
-export const ConstraintOperatorSelect = ({
-    options,
-    value,
-    onChange,
-}: IConstraintOperatorSelectProps) => {
-    const { classes: styles } = useStyles();
-    const [open, setOpen] = useState(false);
-
-    const onSelectChange = (event: SelectChangeEvent) => {
-        onChange(event.target.value as Operator);
-    };
-
-    const renderValue = () => {
-        return (
-            <div className={styles.valueContainer}>
-                <div className={styles.label}>{value}</div>
-                <div className={styles.description}>
-                    {formatOperatorDescription(value)}
-                </div>
-            </div>
-        );
-    };
-
-    return (
-        <FormControl
-            variant="outlined"
-            size="small"
-            fullWidth
-            className={styles.formInput}
-        >
-            <InputLabel htmlFor="operator-select">Operator</InputLabel>
-            <Select
-                id="operator-select"
-                name="operator"
-                label="Operator"
-                value={value}
-                open={open}
-                onOpen={() => setOpen(true)}
-                onClose={() => setOpen(false)}
-                onChange={onSelectChange}
-                renderValue={renderValue}
-            >
-                {options.map(operator => (
-                    <MenuItem
-                        key={operator}
-                        value={operator}
-                        className={classNames(
-                            needSeparatorAbove(options, operator) &&
-                                styles.separator
-                        )}
-                    >
-                        <div className={styles.optionContainer}>
-                            <div className={styles.label}>{operator}</div>
-                            <div className={styles.description}>
-                                {formatOperatorDescription(operator)}
-                            </div>
-                        </div>
-                    </MenuItem>
-                ))}
-            </Select>
-        </FormControl>
-    );
-};
-
-const needSeparatorAbove = (options: Operator[], option: Operator): boolean => {
-    if (option === options[0]) {
-        return false;
-    }
-
-    return operatorGroups.some(group => {
-        return group[0] === option;
-    });
-};
-
-const operatorGroups = [
-    inOperators,
-    stringOperators,
-    numOperators,
-    dateOperators,
-    semVerOperators,
-];

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

@@ -1,21 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        margin: '1rem auto',
-    },
-    wing: {
-        width: '80px',
-        height: '3px',
-        backgroundColor: theme.palette.divider,
-        borderRadius: theme.shape.borderRadius,
-    },
-    text: {
-        textAlign: 'center',
-        display: 'block',
-        margin: '0 1rem',
-    },
-}));

frontend/src/component/common/DividerText/DividerText.tsx

@@ -1,21 +1,35 @@
-import { Typography } from '@mui/material';
+import { FormControl, styled, Typography } from '@mui/material';
-import { useStyles } from 'component/common/DividerText/DividerText.styles';
-
 interface IDividerTextProps {
     text: string;
 }
 
-const DividerText = ({ text, ...rest }: IDividerTextProps) => {
+const StyledContainer = styled('div')(({ theme }) => ({
-    const { classes: styles } = useStyles();
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: theme.spacing(2, 'auto'),
+}));
 
+const StyledSpan = styled('span')(({ theme }) => ({
+    width: '80px',
+    height: '3px',
+    backgroundColor: theme.palette.divider,
+    borderRadius: theme.shape.borderRadius,
+}));
+
+const StyleTypography = styled(Typography)(({ theme }) => ({
+    textAlign: 'center',
+    display: 'block',
+    margin: theme.spacing(0, 2),
+}));
+
+const DividerText = ({ text, ...rest }: IDividerTextProps) => {
     return (
-        <div className={styles.container} {...rest}>
+        <StyledContainer {...rest}>
-            <span className={styles.wing} />
+            <StyledSpan />
-            <Typography variant="body2" className={styles.text}>
+            <StyleTypography variant="body2">{text}</StyleTypography>
-                {text}
+            <StyledSpan />
-            </Typography>
+        </StyledContainer>
-            <span className={styles.wing} />
-        </div>
     );
 };
 

frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts

@@ -1,8 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    infoText: {
-        marginBottom: '10px',
-        fontSize: theme.fontSizes.bodySize,
-    },
-}));

frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx

@@ -2,8 +2,8 @@ import { useNavigate } from 'react-router-dom';
 import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import PermissionButton from '../PermissionButton/PermissionButton';
-import { useStyles } from './EnvironmentStrategyDialog.styles';
 import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
+import { FormControl, styled } from '@mui/material';
 
 interface IEnvironmentStrategyDialogProps {
     open: boolean;
@@ -12,6 +12,11 @@ interface IEnvironmentStrategyDialogProps {
     onClose: () => void;
     environmentName: string;
 }
+
+const StyledParagraph = styled('p')(({ theme }) => ({
+    marginBottom: theme.spacing(0.5),
+    fontSize: theme.fontSizes.bodySize,
+}));
 const EnvironmentStrategyDialog = ({
     open,
     environmentName,
@@ -19,7 +24,6 @@ const EnvironmentStrategyDialog = ({
     projectId,
     onClose,
 }: IEnvironmentStrategyDialogProps) => {
-    const { classes: styles } = useStyles();
     const navigate = useNavigate();
 
     const createStrategyPath = formatCreateStrategyPath(
@@ -54,14 +58,14 @@ const EnvironmentStrategyDialog = ({
             }
             secondaryButtonText="Cancel"
         >
-            <p className={styles.infoText}>
+            <StyledParagraph>
                 Before you can enable the toggle in the environment, you need to
                 add an activation strategy.
-            </p>
+            </StyledParagraph>
-            <p className={styles.infoText}>
+            <StyledParagraph>
                 You can add the activation strategy by selecting the toggle,
                 open the environment accordion and add the activation strategy.
-            </p>
+            </StyledParagraph>
         </Dialogue>
     );
 };