From d1054a3de596d523831748f56a44cd429a597298 Mon Sep 17 00:00:00 2001 From: sjaanus Date: Wed, 4 Jan 2023 21:01:18 +0200 Subject: [PATCH] Refactor makestyles 2-1 (#2820) --- .../ConstraintAccordion.styles.ts | 45 +----- .../ConstraintAccordionEditHeader.tsx | 2 +- .../SingleValue/SingleValue.tsx | 31 +++- .../ConstraintAccordionViewHeader.tsx | 2 +- .../ConstraintAccordionViewHeaderInfo.tsx | 27 ++-- ...raintAccordionViewHeaderMultipleValues.tsx | 48 ++++-- ...nstraintAccordionViewHeaderSingleValue.tsx | 14 +- .../ConstraintViewHeaderOperator.tsx | 33 ++-- .../StyledIconWrapper.tsx | 0 .../ConstraintOperator.styles.ts | 31 ---- .../ConstraintOperator/ConstraintOperator.tsx | 30 +++- .../ConstraintOperatorSelect.tsx | 150 ++++++++++++++++++ .../ConstraintOperatorSelect.styles.ts | 43 ----- .../ConstraintOperatorSelect.tsx | 107 ------------- .../common/DividerText/DividerText.styles.ts | 21 --- .../common/DividerText/DividerText.tsx | 38 +++-- .../EnvironmentStrategyDialog.styles.ts | 8 - .../EnvironmentStrategyDialog.tsx | 16 +- 18 files changed, 318 insertions(+), 328 deletions(-) rename frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/{ConstraintAccordionViewHeaderInfo => }/ConstraintAccordionViewHeaderInfo.tsx (77%) rename frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/{ContraintAccordionViewHeaderMultipleValues => }/ConstraintAccordionViewHeaderMultipleValues.tsx (62%) rename frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/{ContraintAccordionViewHeaderSingleValue => }/ConstraintAccordionViewHeaderSingleValue.tsx (77%) rename frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/{ConstraintViewHeaderOperator => }/ConstraintViewHeaderOperator.tsx (67%) rename frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/{StyledIconWrapper => }/StyledIconWrapper.tsx (100%) delete mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx delete mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts delete mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx delete mode 100644 frontend/src/component/common/DividerText/DividerText.styles.ts delete mode 100644 frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index af577bd40e..e0ab59b8e1 100644 --- 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/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx index 8cec04c8be..8664303822 100644 --- 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, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/SingleValue/SingleValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/SingleValue/SingleValue.tsx index f34ef16d46..9e4cab9ff3 100644 --- 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 ( -
-

Value must be {operator}

{' '} - + Value must be {operator}{' '} + { maxLength={50} /> } - className={styles.chip} /> -
+ ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index bf09761625..ec3beef9ce 100644 --- 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'; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx similarity index 77% rename from frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx rename to frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx index f8298b0fa5..d69b32b152 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/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 ( -
+ {constraint.contextName} @@ -77,7 +86,7 @@ export const ConstraintAccordionViewHeaderInfo = ({ /> } /> -
+ ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx similarity index 62% rename from frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx rename to frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx index d3aff894fb..1b4d6c4302 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx +++ b/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 ( -
-
+ + {text} {!expanded ? `View all (${constraint?.values?.length})` : 'View less'} -

+ } /> -
-
+ + ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderSingleValue.tsx similarity index 77% rename from frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx rename to frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderSingleValue.tsx index 64a3cab927..d156bfaffd 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx +++ b/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 ( -
+ -
+ ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx similarity index 67% rename from frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx rename to frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx index 5c254e12b5..58ee34992d 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/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 ( -
+ } /> -
+ -
+ } /> -
+ ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx similarity index 100% rename from frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx rename to frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts deleted file mode 100644 index 4d74d7c893..0000000000 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts +++ /dev/null @@ -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', - }, - }, -})); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx index 427f98afa0..dc5a426813 100644 --- 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 ( -
-
{operatorName}
-
{operatorText}
-
+ {operatorName} + {operatorText} + ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx new file mode 100644 index 0000000000..4d7cb6824e --- /dev/null +++ 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 ( + + {value} + + {formatOperatorDescription(value)} + + + ); + }; + + return ( + + Operator + + + ); +}; + +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, +]; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts deleted file mode 100644 index 3c2d139bc9..0000000000 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts +++ /dev/null @@ -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', - }, - }, -})); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx deleted file mode 100644 index 82e3c23d29..0000000000 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx +++ /dev/null @@ -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 ( -
-
{value}
-
- {formatOperatorDescription(value)} -
-
- ); - }; - - return ( - - Operator - - - ); -}; - -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, -]; diff --git a/frontend/src/component/common/DividerText/DividerText.styles.ts b/frontend/src/component/common/DividerText/DividerText.styles.ts deleted file mode 100644 index 58023603e0..0000000000 --- a/frontend/src/component/common/DividerText/DividerText.styles.ts +++ /dev/null @@ -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', - }, -})); diff --git a/frontend/src/component/common/DividerText/DividerText.tsx b/frontend/src/component/common/DividerText/DividerText.tsx index 13eda22945..957d82782b 100644 --- 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 ( -
- - - {text} - - -
+ + + {text} + + ); }; diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts deleted file mode 100644 index 7de67a83af..0000000000 --- a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - infoText: { - marginBottom: '10px', - fontSize: theme.fontSizes.bodySize, - }, -})); diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx index 19d1ee44a2..8b43a74034 100644 --- 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" > -

+ Before you can enable the toggle in the environment, you need to add an activation strategy. -

-

+ + You can add the activation strategy by selecting the toggle, open the environment accordion and add the activation strategy. -

+ ); };