update styles in playground popoup

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

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 = ({
                         <>
                             <Typography
                                 variant={'subtitle1'}
+                                sx={{ mb: 2, color: 'text.secondary' }}
                             >{`Strategies (${strategies.length})`}</Typography>
                             {strategies.map((strategy, index) => (
                                 <PlaygroundResultFeatureStrategyItem

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts

@@ -13,12 +13,7 @@ export const useStyles = makeStyles()(theme => ({
         gap: '12px',
     },
     descriptionRow: {
-        flexDirection: 'row',
-        display: 'inline-flex',
-        alignItems: 'flex-start',
-        justifyItems: 'center',
-        marginTop: '-24px',
-        gap: '6px',
+        marginBottom: theme.spacing(2),
     },
     name: {
         fontWeight: 600,

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx

@@ -48,8 +48,10 @@ export const PlaygroundResultFeatureDetails = ({
                 </IconButton>
             </div>
             <div className={styles.descriptionRow}>
-                <Typography variant={'body1'}>{description}</Typography>
-                <Typography variant={'subtitle1'} color={color}>
+                <Typography variant="body1" component="span">
+                    {description}
+                </Typography>
+                <Typography variant="subtitle1" color={color} component="span">
                     {reason}
                 </Typography>
             </div>

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

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 (
-        <StyledStrategyResultBox key={strategy.id} sx={{ border }}>
+        <Box key={strategy.id} sx={{ width: '100%', position: 'relative' }}>
             <ConditionallyRender
                 condition={index > 0}
                 show={<StrategySeparator text="OR" />}
             />
-            <div className={styles.innerContainer}>
+            <Box className={styles.innerContainer} sx={{ border }}>
                 <div className={styles.header}>
                     <div className={styles.headerName}>
                         <Icon className={styles.icon} />
@@ -69,7 +58,7 @@ export const PlaygroundResultFeatureStrategyItem = ({
                         percentageFill={theme.palette.tertiary.light}
                     />
                 </div>
-            </div>
-        </StyledStrategyResultBox>
+            </Box>
+        </Box>
     );
 };

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']: {