1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-08 01:15:49 +02:00

Refactor makestyles 2-1 (#2820)

This commit is contained in:
sjaanus 2023-01-04 21:01:18 +02:00 committed by GitHub
parent f2eb96000e
commit d1054a3de5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 318 additions and 328 deletions

View File

@ -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',
},
},

View File

@ -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,

View File

@ -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>
);
};

View File

@ -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';

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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',
},
},
}));

View File

@ -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>
);
};

View File

@ -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,
];

View File

@ -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',
},
},
}));

View File

@ -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,
];

View File

@ -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',
},
}));

View File

@ -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>
);
};

View File

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

View File

@ -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>
);
};