From d31a5df321750a4db3e8f6b9efa8b2d2d582c93c Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Fri, 29 Jul 2022 12:34:46 +0200 Subject: [PATCH] update styles in playground popoup --- .../FeatureResultInfoPopoverCell.styles.ts | 3 +- .../FeatureResultInfoPopoverCell.tsx | 3 +- .../PlaygroundResultFeatureDetails.styles.ts | 7 +---- .../PlaygroundResultFeatureDetails.tsx | 6 ++-- ...ygroundResultFeatureStrategyItem.styles.ts | 3 ++ .../PlaygroundResultFeatureStrategyItem.tsx | 31 ++++++------------- .../PlaygroundResultChip.tsx | 19 ++++++++---- 7 files changed, 34 insertions(+), 38 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts index 12801e82b5..d1e652f2cd 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts @@ -5,8 +5,7 @@ export const useStyles = makeStyles()(theme => ({ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', - padding: '48px', - gap: '24px', + padding: theme.spacing(6), width: '728px', height: 'auto', overflowY: 'scroll', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index 4dc19c677f..31e5b79f26 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -1,7 +1,7 @@ import { PlaygroundFeatureSchema, PlaygroundFeatureStrategyResult, -} from '../../../../../hooks/api/actions/usePlayground/playground.model'; +} from 'hooks/api/actions/usePlayground/playground.model'; import { IconButton, Popover, styled, Typography } from '@mui/material'; import { InfoOutlined } from '@mui/icons-material'; import React, { useRef, useState } from 'react'; @@ -138,6 +138,7 @@ export const FeatureResultInfoPopoverCell = ({ <> {`Strategies (${strategies.length})`} {strategies.map((strategy, index) => ( ({ gap: '12px', }, descriptionRow: { - flexDirection: 'row', - display: 'inline-flex', - alignItems: 'flex-start', - justifyItems: 'center', - marginTop: '-24px', - gap: '6px', + marginBottom: theme.spacing(2), }, name: { fontWeight: 600, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 52179a27f6..c923bc9b5b 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -48,8 +48,10 @@ export const PlaygroundResultFeatureDetails = ({
- {description} - + + {description} + + {reason}
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts index 327e01f383..e1b263bea3 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts @@ -28,5 +28,8 @@ export const useStyles = makeStyles()(theme => ({ [theme.breakpoints.down(400)]: { padding: '0.5rem', }, + paddingBottom: '1rem', + borderRadius: theme.shape.borderRadiusMedium, + background: theme.palette.background.default, }, })); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx index aa86ffea67..98a1113c65 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx @@ -1,32 +1,21 @@ -import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; -import { StrategySeparator } from '../../../../../common/StrategySeparator/StrategySeparator'; -import { styled, useTheme } from '@mui/material'; -import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles'; +import { Box, useTheme } from '@mui/material'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { formatStrategyName, getFeatureStrategyIcon, -} from '../../../../../../utils/strategyNames'; -import StringTruncator from '../../../../../common/StringTruncator/StringTruncator'; +} from 'utils/strategyNames'; +import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; import { PlaygroundFeatureStrategyResult } from 'hooks/api/actions/usePlayground/playground.model'; import { PlaygroundResultStrategyExecution } from '../PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution'; +import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles'; interface IPlaygroundResultFeatureStrategyItemProps { strategy: PlaygroundFeatureStrategyResult; index: number; } -const StyledStrategyResultBox = styled('div')(({ theme }) => ({ - width: '100%', - position: 'relative', - paddingBottom: '1rem', - borderRadius: theme.shape.borderRadiusMedium, - '& + &': { - marginTop: theme.spacing(2), - }, - background: theme.palette.background.default, -})); - export const PlaygroundResultFeatureStrategyItem = ({ strategy, index, @@ -42,12 +31,12 @@ export const PlaygroundResultFeatureStrategyItem = ({ : `1px solid ${theme.palette.divider}`; return ( - + 0} show={} /> -
+
@@ -69,7 +58,7 @@ export const PlaygroundResultFeatureStrategyItem = ({ percentageFill={theme.palette.tertiary.light} />
-
- + + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx index 7b4691e0fe..b5294110eb 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx @@ -12,9 +12,18 @@ interface IResultChipProps { label?: string; } -export const StyledFalseChip = styled(Chip)(({ theme }) => ({ - width: 80, - borderRadius: '5px', +export const StyledChip = styled(Chip)(({ theme }) => ({ + width: 60, + height: 24, + borderRadius: theme.shape.borderRadius, + fontWeight: theme.typography.fontWeightMedium, + ['& .MuiChip-label']: { + padding: 0, + paddingLeft: theme.spacing(0.5), + }, +})); + +export const StyledFalseChip = styled(StyledChip)(({ theme }) => ({ border: `1px solid ${theme.palette.error.main}`, backgroundColor: colors.red['200'], ['& .MuiChip-label']: { @@ -25,9 +34,7 @@ export const StyledFalseChip = styled(Chip)(({ theme }) => ({ }, })); -export const StyledTrueChip = styled(Chip)(({ theme }) => ({ - width: 80, - borderRadius: '5px', +export const StyledTrueChip = styled(StyledChip)(({ theme }) => ({ border: `1px solid ${theme.palette.success.main}`, backgroundColor: colors.green['100'], ['& .MuiChip-label']: {