Refactor makestyles 2-1 (#2820)

2025-05-26 01:17:00 +02:00 · 2023-01-04 21:01:18 +02:00 · 2023-01-04 21:01:18 +02:00 · d1054a3de5
commit d1054a3de5
parent f2eb96000e
18 changed files with 318 additions and 328 deletions
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
+++ b/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',
        },
    },
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
+++ b/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,
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/SingleValue/SingleValue.tsx
+++ b/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}>
-            <p className={styles.singleValueText}>Value must be {operator}</p>{' '}
-            <Chip
+        <StyledDiv>
+            <StyledParagraph>Value must be {operator}</StyledParagraph>{' '}
+            <StyledChip
                label={
                    <StringTruncator
                        maxWidth="400"
@ -22,8 +38,7 @@ export const SingleValue = ({ value, operator }: ISingleValueProps) => {
                        maxLength={50}
                    />
                }
-                className={styles.chip}
            />
-        </div>
+        </StyledDiv>
    );
 };
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/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';

--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx
@ -1,11 +1,10 @@
-import { styled, Tooltip } from '@mui/material';
-import { ConstraintViewHeaderOperator } from '../ConstraintViewHeaderOperator/ConstraintViewHeaderOperator';
+import { Divider, styled, Tooltip } from '@mui/material';
+import { ConstraintViewHeaderOperator } from './ConstraintViewHeaderOperator';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { ConstraintAccordionViewHeaderSingleValue } from '../ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue';
-import { ConstraintAccordionViewHeaderMultipleValues } from '../ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues';
+import { ConstraintAccordionViewHeaderSingleValue } from './ConstraintAccordionViewHeaderSingleValue';
+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>
    );
 };
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/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}>
-            <div className={styles.headerValuesContainer}>
+        <StyledHeaderValuesContainerWrapper>
+            <StyledHeaderValuesContainer>
                <StyledValuesSpan>{text}</StyledValuesSpan>
                <ConditionallyRender
                    condition={expandable}
                    show={
-                        <p
-                            className={classnames(
-                                styles.headerValuesExpand,
-                                'valuesExpandLabel'
-                            )}
+                        <StyledHeaderValuesExpand
+                            className={'valuesExpandLabel'}
                        >
                            {!expanded
                                ? `View all (${constraint?.values?.length})`
                                : 'View less'}
-                        </p>
+                        </StyledHeaderValuesExpand>
                    }
                />
-            </div>
-        </div>
+            </StyledHeaderValuesContainer>
+        </StyledHeaderValuesContainerWrapper>
    );
 };
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/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>
    );
 };
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx
@ -1,11 +1,10 @@
 import { IConstraint } from 'interfaces/strategy';
-import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
-import { Tooltip, Box } from '@mui/material';
+import { ConditionallyRender } from '../../../ConditionallyRender/ConditionallyRender';
+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 { useStyles } from '../../../ConstraintAccordion.styles';
-import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper';
+import { ConstraintOperator } from '../../ConstraintOperator/ConstraintOperator';
+import { StyledIconWrapper } from './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>
    );
 };
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts
+++ b/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',
-        },
-    },
-}));
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
+++ b/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
-            className={styles.container}
+        <StyledContainer
            style={{
                borderTopLeftRadius: hasPrefix ? 0 : undefined,
                borderBottomLeftRadius: hasPrefix ? 0 : undefined,
                paddingLeft: hasPrefix ? 0 : undefined,
            }}
        >
-            <div className={styles.name}>{operatorName}</div>
-            <div className={styles.text}>{operatorText}</div>
-        </div>
+            <StyledName>{operatorName}</StyledName>
+            <StyledText>{operatorText}</StyledText>
+        </StyledContainer>
    );
 };
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx
+++ b/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,
+];
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts
+++ b/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',
-        },
-    },
-}));
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx
+++ b/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,
-];
--- a/frontend/src/component/common/DividerText/DividerText.styles.ts
+++ b/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',
-    },
-}));
--- a/frontend/src/component/common/DividerText/DividerText.tsx
+++ b/frontend/src/component/common/DividerText/DividerText.tsx
@ -1,21 +1,35 @@
-import { Typography } from '@mui/material';
-import { useStyles } from 'component/common/DividerText/DividerText.styles';
-
+import { FormControl, styled, Typography } from '@mui/material';
 interface IDividerTextProps {
    text: string;
 }

-const DividerText = ({ text, ...rest }: IDividerTextProps) => {
-    const { classes: styles } = useStyles();
+const StyledContainer = styled('div')(({ theme }) => ({
+    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}>
-            <span className={styles.wing} />
-            <Typography variant="body2" className={styles.text}>
-                {text}
-            </Typography>
-            <span className={styles.wing} />
-        </div>
+        <StyledContainer {...rest}>
+            <StyledSpan />
+            <StyleTypography variant="body2">{text}</StyleTypography>
+            <StyledSpan />
+        </StyledContainer>
    );
 };

--- a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts
+++ b/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,
-    },
-}));
--- a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx
+++ b/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>
-            <p className={styles.infoText}>
+            </StyledParagraph>
+            <StyledParagraph>
                You can add the activation strategy by selecting the toggle,
                open the environment accordion and add the activation strategy.
-            </p>
+            </StyledParagraph>
        </Dialogue>
    );
 };