Refactor makestyles 2-1 (#2820)

Unleash · Jan 4, 2023 · d1054a3 · d1054a3
1 parent f2eb960
commit d1054a3
Show file tree

Hide file tree

Showing 18 changed files with 318 additions and 328 deletions.
diff --git 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',
         },
     },

diff --git a/...n/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/...n/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,

diff --git a/...Accordion/ConstraintAccordionView/ConstraintAccordionViewBody/SingleValue/SingleValue.tsx b/...Accordion/ConstraintAccordionView/ConstraintAccordionViewBody/SingleValue/SingleValue.tsx
@@ -1,29 +1,44 @@
-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"
                         text={value}
                         maxLength={50}
                     />
                 }
-                className={styles.chip}
             />
-        </div>
+        </StyledDiv>
     );
 };
diff --git a/...n/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/...n/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';
 

diff --git a/...nfo/ConstraintAccordionViewHeaderInfo.tsx → ...der/ConstraintAccordionViewHeaderInfo.tsx b/...nfo/ConstraintAccordionViewHeaderInfo.tsx → ...der/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>
     );
 };
diff --git a/...aintAccordionViewHeaderMultipleValues.tsx → ...aintAccordionViewHeaderMultipleValues.tsx b/...aintAccordionViewHeaderMultipleValues.tsx → ...aintAccordionViewHeaderMultipleValues.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>
     );
 };
diff --git a/...straintAccordionViewHeaderSingleValue.tsx → ...straintAccordionViewHeaderSingleValue.tsx b/...straintAccordionViewHeaderSingleValue.tsx → ...straintAccordionViewHeaderSingleValue.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>
     );
 };