diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx index 3663818960..8a82b7ef5c 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx @@ -7,7 +7,7 @@ import { StyledToggleButtonOn, } from '../StyledToggleButton'; import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; -import { IConstraint } from '../../../../../../interfaces/strategy'; +import { IConstraint } from 'interfaces/strategy'; interface CaseSensitiveButtonProps { localConstraint: IConstraint; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts index 307018fdc8..a035603f16 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts @@ -8,8 +8,7 @@ export const useStyles = makeStyles()(theme => ({ }, titleRow: { display: 'inline-flex', - alignItems: 'flex-start', - justifyContent: 'center', + alignItems: 'center', gap: theme.spacing(1.5), marginTop: theme.spacing(1.5), }, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx index 96a7168ee8..23d61c1f1b 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx @@ -69,12 +69,22 @@ export const FeatureDetails = ({ {feature.name} - - - + ( + + )} + elseShow={() => ( + + )} + /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx index 35eccbc480..4d2abc390f 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx @@ -44,11 +44,6 @@ export const FeatureStrategyItem = ({ showIcon={false} enabled={result.enabled} label={label} - size={ - result.evaluationStatus === 'incomplete' - ? 'large' - : 'default' - } /> } > diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx index 00aacc463a..3daacc5912 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx @@ -1,7 +1,7 @@ import { styled, Tooltip, Typography, useTheme } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PlaygroundSingleValue } from './PlaygroundSingleValue/PlaygroundSingleValue'; -import { PLaygroundMultipleValues } from './PlaygroundMultipleValues/PLaygroundMultipleValues'; +import { PLaygroundMultipleValues } from './PlaygroundMultipleValues/PlaygroundMultipleValues'; import React from 'react'; import { useStyles } from '../../ConstraintAccordion.styles'; import { CancelOutlined } from '@mui/icons-material'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PlaygroundMultipleValues.tsx similarity index 98% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PlaygroundMultipleValues.tsx index 9ec547c758..e5a3bf43de 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PlaygroundMultipleValues.tsx @@ -59,7 +59,7 @@ export const PLaygroundMultipleValues = ({ noWrap={true} sx={{ mr: 1 }} > - does not match any values{' '} + does not match values{' '} } /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx index 7c1dabdd6e..10c01a0750 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx @@ -35,7 +35,7 @@ export const PlaygroundSingleValue = ({ condition={!Boolean(constraint.result)} show={ - does not match any values{' '} + does not match values{' '} } /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx new file mode 100644 index 0000000000..8400e8d404 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx @@ -0,0 +1,97 @@ +import { Box, styled, Typography, useTheme } from '@mui/material'; +import { CancelOutlined } from '@mui/icons-material'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import StringTruncator from 'component/common/StringTruncator/StringTruncator'; + +interface ICustomParameterItem { + text: string; + input?: string | null; + isRequired?: boolean; +} + +const StyledWrapper = styled(Box)(({ theme }) => ({ + width: '100%', + padding: theme.spacing(2, 3), + borderRadius: theme.shape.borderRadiusMedium, + border: `1px solid ${theme.palette.dividerAlternative}`, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + gap: 2, +})); + +export const CustomParameterItem = ({ + text, + input = null, + isRequired = false, +}: ICustomParameterItem) => { + const theme = useTheme(); + + const color = input === null ? 'error' : 'neutral'; + const requiredError = isRequired && input === null; + + return ( + + + {`${input === null ? 'no value' : input}`} + + + + + + {' required parameter '} + + + + {' is not set '} + + + } + elseShow={ + <> + + {' set on parameter '} + + + + } + /> + + + } + elseShow={
} + /> + + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx index fcfcf2d568..3be657400e 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx @@ -4,23 +4,18 @@ import { parseParameterString, parseParameterStrings, } from 'utils/parseParameter'; -import { PlaygroundParameterItem } from '../PlaygroundParameterItem/PlaygroundParameterItem'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; -import { Chip } from '@mui/material'; -import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; -import { PlaygroundConstraintSchema } from 'component/playground/Playground/interfaces/playground.model'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; +import { CustomParameterItem } from './CustomParameterItem/CustomParameterItem'; interface ICustomStrategyProps { parameters: { [key: string]: string }; strategyName: string; - constraints: PlaygroundConstraintSchema[]; } export const CustomStrategyParams: VFC = ({ strategyName, - constraints, parameters, }) => { const { strategies } = useStrategies(); @@ -32,109 +27,84 @@ export const CustomStrategyParams: VFC = ({ return null; } - const renderCustomStrategyParameters = () => { - return definition?.parameters.map((param: any, index: number) => { - const notLastItem = index !== definition?.parameters?.length - 1; - switch (param?.type) { - case 'list': - const values = parseParameterStrings( - parameters[param.name] - ); - return ( - - - } - /> - - ); - case 'percentage': - return ( - -
- {' '} - of your base{' '} - {constraints?.length > 0 - ? 'who match constraints' - : ''}{' '} - is included. -
- - } - /> - - ); - case 'boolean': - const bool = Boolean(parameters[param?.name]); - return ( - - - } - /> - - ); - case 'string': - const value = - parseParameterString(parameters[param.name]) ?? - 'no value'; - return ( - - - } - /> - - ); - case 'number': - const number = parseParameterNumber(parameters[param.name]); - return ( - - - } - /> - - ); - case 'default': - return null; - } - return null; - }); - }; + const items = definition?.parameters.map(param => { + const paramValue = parameters[param.name]; + const isRequired = param.required; - return <>{renderCustomStrategyParameters()}; + switch (param?.type) { + case 'list': + const values = parseParameterStrings(paramValue); + return ( + 0 ? values.join(', ') : null} + /> + ); + case 'percentage': + const percentage = parseParameterNumber(paramValue); + const correctPercentage = !( + paramValue === undefined || + paramValue === '' || + percentage < 0 || + percentage > 100 + ); + return ( + + ); + case 'boolean': + const bool = ['true', 'false'].includes(paramValue) + ? paramValue + : undefined; + return ( + + ); + case 'string': + const value = parseParameterString(paramValue); + return ( + + ); + case 'number': + const isCorrect = !( + paramValue === undefined || paramValue === '' + ); + const number = parseParameterNumber(paramValue); + return ( + + ); + case 'default': + return null; + } + return null; + }); + + return ( + <> + {items.map((item, index) => ( + + 0} + show={} + /> + {item} + + ))} + + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts index 66b3e69b6f..b09f72eced 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts @@ -4,8 +4,8 @@ export const useStyles = makeStyles()(theme => ({ container: { width: '100%', padding: theme.spacing(2, 3), - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.shape.borderRadiusMedium, + border: `1px solid ${theme.palette.dividerAlternative}`, display: 'flex', flexDirection: 'row', alignItems: 'center', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts index 0e2b46fcd9..fd4dd7d2a3 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts @@ -13,7 +13,7 @@ export const useStyles = makeStyles()(theme => ({ width: 'auto', height: 'auto', padding: theme.spacing(2, 3), - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.shape.borderRadiusMedium, + border: `1px solid ${theme.palette.dividerAlternative}`, }, })); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx index c167572aa5..1c548c7d88 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx @@ -23,10 +23,6 @@ const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({ padding: theme.spacing(0), })); -const StyledParamWrapper = styled('div')(({ theme }) => ({ - padding: theme.spacing(0, 0), -})); - export const StrategyExecution: VFC = ({ strategyResult, input, @@ -93,20 +89,15 @@ export const StrategyExecution: VFC = ({ } /> - - - - - - + + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index 0a0fe4d692..2759a3f715 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -18,16 +18,16 @@ const StyledChipWrapper = styled(Box)(() => ({ })); export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => { - const enabled = feature.isEnabled - ? true - : feature.strategies?.result === false - ? false - : 'unknown'; - const label = feature.isEnabled - ? 'True' - : feature.strategies?.result === false - ? 'False' - : 'Unknown'; + const [enabled, label]: [boolean | 'unknown', string] = (() => { + if (feature?.isEnabled) { + return [true, 'True']; + } + if (feature?.strategies?.result === false) { + return [false, 'False']; + } + return ['unknown', 'Unknown']; + })(); + return ( @@ -35,7 +35,6 @@ export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => { enabled={enabled} label={label} showIcon={enabled !== 'unknown'} - size={'medium'} /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx index b97f9c90c8..e6618ac7ea 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx @@ -1,9 +1,9 @@ +import { VFC } from 'react'; import { Chip, styled, useTheme } from '@mui/material'; -import { colors } from '../../../../../themes/colors'; -import { ConditionallyRender } from '../../../../common/ConditionallyRender/ConditionallyRender'; -import React from 'react'; -import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icons/isenabled-true.svg'; -import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg'; +import { colors } from 'themes/colors'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-true.svg'; +import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg'; import { WarningOutlined } from '@mui/icons-material'; interface IResultChipProps { @@ -11,21 +11,18 @@ interface IResultChipProps { label: string; // Result icon - defaults to true showIcon?: boolean; - size?: 'default' | 'medium' | 'large'; } -export const StyledChip = styled(Chip)<{ width?: number }>( - ({ theme, width }) => ({ - width: width ?? 60, - height: 24, - borderRadius: theme.shape.borderRadius, - fontWeight: theme.typography.fontWeightMedium, - ['& .MuiChip-label']: { - padding: 0, - paddingLeft: theme.spacing(0.5), - }, - }) -); +export const StyledChip = styled(Chip)(({ theme, icon }) => ({ + padding: theme.spacing(0, 1), + height: 24, + borderRadius: theme.shape.borderRadius, + fontWeight: theme.typography.fontWeightMedium, + ['& .MuiChip-label']: { + padding: 0, + paddingLeft: Boolean(icon) ? theme.spacing(0.5) : 0, + }, +})); export const StyledFalseChip = styled(StyledChip)(({ theme }) => ({ border: `1px solid ${theme.palette.error.main}`, @@ -60,12 +57,11 @@ export const StyledUnknownChip = styled(StyledChip)(({ theme }) => ({ }, })); -export const PlaygroundResultChip = ({ +export const PlaygroundResultChip: VFC = ({ enabled, label, showIcon = true, - size = 'default', -}: IResultChipProps) => { +}) => { const theme = useTheme(); const icon = ( ); - let chipWidth = 60; - if (size === 'medium') chipWidth = 72; - if (size === 'large') chipWidth = 100; - return ( } elseShow={ @@ -112,14 +103,12 @@ export const PlaygroundResultChip = ({ } elseShow={ } /> diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts index 62f718a053..7acd21d876 100644 --- a/frontend/src/themes/theme.ts +++ b/frontend/src/themes/theme.ts @@ -47,10 +47,10 @@ export default createTheme({ bold: 700, }, shape: { - borderRadius: '4px', - borderRadiusMedium: '8px', - borderRadiusLarge: '12px', - borderRadiusExtraLarge: '20px', + borderRadius: 4, + borderRadiusMedium: 8, + borderRadiusLarge: 12, + borderRadiusExtraLarge: 20, tableRowHeight: 64, tableRowHeightCompact: 56, tableRowHeightDense: 48, diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts index f046800e00..c90527cf54 100644 --- a/frontend/src/themes/themeTypes.ts +++ b/frontend/src/themes/themeTypes.ts @@ -120,9 +120,9 @@ declare module '@mui/material/styles' { declare module '@mui/system/createTheme/shape' { interface Shape { - borderRadiusMedium: string; - borderRadiusLarge: string; - borderRadiusExtraLarge: string; + borderRadiusMedium: number; + borderRadiusLarge: number; + borderRadiusExtraLarge: number; tableRowHeight: number; tableRowHeightCompact: number; tableRowHeightDense: number;