diff --git a/frontend/src/assets/icons/rollout.svg b/frontend/src/assets/icons/rollout.svg index a1d4b2dc19..0626d7b34b 100644 --- a/frontend/src/assets/icons/rollout.svg +++ b/frontend/src/assets/icons/rollout.svg @@ -1 +1,4 @@ - + + + diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index a9c099a44f..bceadae3df 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -7,14 +7,11 @@ export const useStyles = makeStyles()(theme => ({ display: 'flex', alignItems: 'center', justifyContent: 'center', - marginRight: theme.spacing(2), + marginRight: theme.spacing(1), [theme.breakpoints.down(650)]: { marginBottom: '1rem', marginRight: 0, }, - [theme.breakpoints.between(1101, 1365)]: { - marginRight: '8px', - }, }, constraintIcon: { fill: '#fff', @@ -75,9 +72,6 @@ export const useStyles = makeStyles()(theme => ({ minWidth: '220px', position: 'relative', paddingRight: '1rem', - [theme.breakpoints.down(650)]: { - paddingRight: 0, - }, [theme.breakpoints.between(1101, 1365)]: { minWidth: '152px', paddingRight: '0.5rem', diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx index 6dcbab9655..5c254e12b5 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx @@ -1,10 +1,13 @@ -import { IConstraint } from '../../../../../../interfaces/strategy'; +import { IConstraint } from 'interfaces/strategy'; import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; import { Tooltip, Box } from '@mui/material'; -import { ReactComponent as NegatedIcon } from '../../../../../../assets/icons/24_Negator.svg'; +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 { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg'; +import { oneOf } from 'utils/oneOf'; interface ConstraintViewHeaderOperatorProps { constraint: IConstraint; @@ -35,6 +38,19 @@ export const ConstraintViewHeaderOperator = ({ hasPrefix={Boolean(constraint.inverted)} /> + + + + + + } + /> ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx index 99fcef67ba..9d063c1c94 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -1,11 +1,7 @@ import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; -import { oneOf } from '../../../../../../utils/oneOf'; -import { stringOperators } from '../../../../../../constants/operators'; -import { styled, Tooltip } from '@mui/material'; -import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg'; +import { styled } from '@mui/material'; import React, { useEffect, useMemo, useState } from 'react'; import classnames from 'classnames'; -import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper'; import { IConstraint } from '../../../../../../interfaces/strategy'; import { useStyles } from '../../../ConstraintAccordion.styles'; @@ -53,19 +49,6 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({ return (
- - - - - - } - />
{text} - - - {' '} - - - } - /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx index 6827a145d5..d4b6ad8169 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx @@ -6,13 +6,13 @@ export const StyledIconWrapperBase = styled('div')<{ prefix?: boolean; }>(({ theme }) => ({ backgroundColor: theme.palette.grey[200], - width: 28, + width: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', alignSelf: 'stretch', color: theme.palette.primary.main, - marginRight: '1rem', + marginRight: theme.spacing(1), borderRadius: theme.shape.borderRadius, })); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts index 618eb43670..bec4e59041 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts @@ -9,6 +9,7 @@ export const useStyles = makeStyles()(theme => ({ }, name: { fontSize: theme.fontSizes.smallBody, + lineHeight: 17 / 14, }, text: { fontSize: theme.fontSizes.smallerBody, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx index 991c97b0a9..427f98afa0 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx @@ -23,6 +23,7 @@ export const ConstraintOperator = ({ style={{ borderTopLeftRadius: hasPrefix ? 0 : undefined, borderBottomLeftRadius: hasPrefix ? 0 : undefined, + paddingLeft: hasPrefix ? 0 : undefined, }} >
{operatorName}
diff --git a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx index d169ce670c..1d7e251b48 100644 --- a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx +++ b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx @@ -14,7 +14,7 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => { const container = { backgroundColor: enabled ? theme.palette.primary.light - : theme.palette.inactiveIcon, + : theme.palette.neutral.border, borderRadius: '50%', width: '28px', height: '28px', @@ -22,13 +22,13 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => { display: 'flex', alignItems: 'center', justifyContent: 'center', - marginRight: '0.5rem', + marginRight: theme.spacing(1), }; const icon = { fill: '#fff', - width: '17px', - height: '17px', + width: '16px', + height: '16px', }; return ( diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx index 707599909e..060b9a6dc4 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx @@ -8,6 +8,7 @@ import { FeatureStrategyMenu } from '../FeatureStrategyMenu/FeatureStrategyMenu' import { PresetCard } from './PresetCard/PresetCard'; import { useStyles } from './FeatureStrategyEmpty.styles'; import { formatUnknownError } from 'utils/formatUnknownError'; +import { getFeatureStrategyIcon } from 'utils/strategyNames'; interface IFeatureStrategyEmptyProps { projectId: string; @@ -93,6 +94,7 @@ export const FeatureStrategyEmpty = ({ > The standard strategy is strictly on/off for your entire @@ -100,6 +102,7 @@ export const FeatureStrategyEmpty = ({ Roll out to a percentage of your userbase. diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/PresetCard/PresetCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/PresetCard/PresetCard.tsx index f4e5cfea3f..345550d059 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/PresetCard/PresetCard.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/PresetCard/PresetCard.tsx @@ -1,22 +1,34 @@ -import { Button, Card, CardContent, Typography } from '@mui/material'; -import { FC } from 'react'; +import { ElementType, FC } from 'react'; +import { Button, Card, CardContent, styled, Typography } from '@mui/material'; interface IPresetCardProps { title: string; onClick: () => void; + Icon: ElementType; } +const StyledCard = styled(Card)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + borderRadius: theme.shape.borderRadiusMedium, +})); + export const PresetCard: FC = ({ title, children, + Icon, onClick, }) => ( - + - - {title} + + {title} {children} @@ -31,5 +43,5 @@ export const PresetCard: FC = ({ Use template - + ); diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx index a90721befa..390266797b 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx @@ -14,13 +14,11 @@ export const FeatureStrategyIcon = ({ const Icon = getFeatureStrategyIcon(strategyName); return ( - - - <> - - - - + + + + + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts index 9e3068e1f5..3cc43a4599 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts @@ -3,20 +3,19 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ container: { borderRadius: theme.shape.borderRadiusMedium, - border: `1px solid ${theme.palette.grey[300]}`, + border: `1px solid ${theme.palette.divider}`, '& + &': { - marginTop: '1rem', + marginTop: theme.spacing(2), }, background: theme.palette.background.default, }, header: { padding: theme.spacing(0.5, 2), display: 'flex', - gap: '0.5rem', + gap: theme.spacing(1), alignItems: 'center', - borderBottom: `1px solid ${theme.palette.grey[300]}`, + borderBottom: `1px solid ${theme.palette.divider}`, fontWeight: theme.typography.fontWeightMedium, - fontSize: theme.fontSizes.smallBody, }, icon: { fill: theme.palette.inactiveIcon, @@ -26,8 +25,7 @@ export const useStyles = makeStyles()(theme => ({ display: 'flex', }, body: { - padding: '1rem', - display: 'grid', + padding: theme.spacing(2), justifyItems: 'center', }, })); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts index 3e82138c84..b5c55e7728 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts @@ -41,7 +41,6 @@ export const useStyles = makeStyles()(theme => ({ display: 'flex', justifyContent: 'center', flexDirection: 'column', - // paddingTop: '1.5rem', }, headerTitle: { display: 'flex', diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx index fee4f75c1c..299b190264 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx @@ -69,7 +69,7 @@ const FeatureOverviewEnvironment = ({ data-loading style={{ color: !env.enabled - ? theme.palette.text.disabled + ? theme.palette.text.secondary : theme.palette.text.primary, }} > @@ -91,7 +91,6 @@ const FeatureOverviewEnvironment = ({ @@ -115,6 +114,7 @@ const FeatureOverviewEnvironment = ({ diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx index 5e35a7c15b..c3ec160435 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx @@ -1,4 +1,5 @@ import { FiberManualRecord } from '@mui/icons-material'; +import { useTheme } from '@mui/system'; import { IFeatureEnvironmentMetrics } from 'interfaces/featureToggle'; import { calculatePercentage } from 'utils/calculatePercentage'; import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; @@ -6,12 +7,15 @@ import { useStyles } from './FeatureOverviewEnvironmentMetrics.styles'; interface IFeatureOverviewEnvironmentMetrics { environmentMetric?: IFeatureEnvironmentMetrics; + disabled?: boolean; } const FeatureOverviewEnvironmentMetrics = ({ environmentMetric, + disabled = false, }: IFeatureOverviewEnvironmentMetrics) => { const { classes: styles } = useStyles(); + const theme = useTheme(); if (!environmentMetric) return null; @@ -25,10 +29,26 @@ const FeatureOverviewEnvironmentMetrics = ({ return (
-

+

{percentage}%

-

+

The feature has been requested 0 times and exposed 0 times in the last hour

diff --git a/frontend/src/utils/strategyNames.ts b/frontend/src/utils/strategyNames.tsx similarity index 82% rename from frontend/src/utils/strategyNames.ts rename to frontend/src/utils/strategyNames.tsx index da608aa082..e5b2bd500b 100644 --- a/frontend/src/utils/strategyNames.ts +++ b/frontend/src/utils/strategyNames.tsx @@ -1,15 +1,24 @@ +import { FC, ElementType } from 'react'; +import { SvgIcon } from '@mui/material'; import LocationOnIcon from '@mui/icons-material/LocationOn'; import PeopleIcon from '@mui/icons-material/People'; import LanguageIcon from '@mui/icons-material/Language'; import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import CodeIcon from '@mui/icons-material/Code'; import { ReactComponent as RolloutIcon } from 'assets/icons/rollout.svg'; -import { ElementType } from 'react'; export const formatStrategyName = (strategyName: string): string => { return formattedStrategyNames[strategyName] ?? strategyName; }; +const RolloutSvgIcon: FC = props => ( + } + inheritViewBox + /> +); + export const getFeatureStrategyIcon = (strategyName: string): ElementType => { switch (strategyName) { case 'default': @@ -17,7 +26,7 @@ export const getFeatureStrategyIcon = (strategyName: string): ElementType => { case 'remoteAddress': return LanguageIcon; case 'flexibleRollout': - return RolloutIcon; + return RolloutSvgIcon; case 'userWithId': return PeopleIcon; case 'applicationHostname':