PR comments

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

@@ -6,7 +6,7 @@ export const useStyles = makeStyles()(theme => ({
         flexDirection: 'column',
         alignItems: 'flex-start',
         padding: theme.spacing(6),
-        width: '728px',
+        maxWidth: '728px',
         height: 'auto',
         overflowY: 'scroll',
         backgroundColor: theme.palette.tertiary.light,

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

@@ -26,9 +26,7 @@ export const FeatureResultInfoPopoverCell = ({
     const [open, setOpen] = useState(false);
     const { classes: styles } = useStyles();
     const ref = useRef(null);
-
+    
-    console.log(feature);
-
     const togglePopover = () => {
         setOpen(!open);
     };

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts

@@ -18,7 +18,7 @@ export const useStyles = makeStyles()(theme => ({
     },
     accordion: {
         border: `1px solid ${theme.palette.grey[400]}`,
-        borderRadius: '8px',
+        borderRadius: theme.spacing(1),
         backgroundColor: '#fff',
         boxShadow: 'none',
         margin: 0,
@@ -28,9 +28,6 @@ export const useStyles = makeStyles()(theme => ({
             opacity: '0 !important',
         },
     },
-    accordionEdit: {
-        backgroundColor: '#F6F6FA',
-    },
     headerMetaInfo: {
         display: 'flex',
         alignItems: 'stretch',
@@ -39,7 +36,6 @@ export const useStyles = makeStyles()(theme => ({
     headerContainer: {
         display: 'flex',
         alignItems: 'center',
-        width: '100%',
         [theme.breakpoints.down(710)]: {
             flexDirection: 'column',
             alignItems: 'center',
@@ -77,19 +73,6 @@ export const useStyles = makeStyles()(theme => ({
             paddingRight: '0.5rem',
         },
     },
-    editingBadge: {
-        borderRadius: theme.shape.borderRadiusExtraLarge,
-        padding: '0.25rem 0.5rem',
-        backgroundColor: '#635DC5',
-        color: '#fff',
-        marginLeft: 'auto',
-        fontSize: '0.9rem',
-        [theme.breakpoints.down(650)]: {
-            position: 'absolute',
-            right: 0,
-            top: '-10px',
-        },
-    },
     headerText: {
         maxWidth: '400px',
         fontSize: theme.fontSizes.smallBody,
@@ -97,40 +80,12 @@ export const useStyles = makeStyles()(theme => ({
             display: 'none',
         },
     },
-    selectContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        [theme.breakpoints.down(770)]: {
-            flexDirection: 'column',
-        },
-    },
-    bottomSelect: {
-        [theme.breakpoints.down(770)]: {
-            marginTop: '1rem',
-        },
-        display: 'inline-flex',
-    },
-    headerSelect: {
-        marginRight: '1rem',
-        width: '200px',
-        [theme.breakpoints.between(1101, 1365)]: {
-            width: '170px',
-            marginRight: '8px',
-        },
-    },
     chip: {
         margin: '0 0.5rem 0.5rem 0',
     },
     chipValue: {
         whiteSpace: 'pre',
     },
-    headerActions: {
-        marginLeft: 'auto',
-        whiteSpace: 'nowrap',
-        [theme.breakpoints.down(710)]: {
-            display: 'none',
-        },
-    },
     accordionDetails: {
         borderTop: `1px dashed ${theme.palette.grey[300]}`,
         display: 'flex',
@@ -148,11 +103,4 @@ export const useStyles = makeStyles()(theme => ({
             textDecoration: 'underline',
         },
     },
-    settingsIcon: {
-        height: '32.5px',
-        width: '32.5px',
-        marginRight: '0.5rem',
-        fill: theme.palette.inactiveIcon,
-    },
-    form: { padding: 0, margin: 0, width: '100%' },
 }));

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx

@@ -1,7 +1,7 @@
 import { styled, Tooltip, Typography, useTheme } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { PlaygroundConstraintAccordionViewHeaderSingleValue } from '../PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue';
+import { PlaygroundConstraintAccordionViewHeaderSingleValue } from './PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue';
-import { PLaygroundConstraintAccordionViewHeaderMultipleValues } from '../PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues';
+import { PLaygroundConstraintAccordionViewHeaderMultipleValues } from './PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues';
 import React from 'react';
 import { useStyles } from '../../PlaygroundConstraintAccordion.styles';
 import { CancelOutlined } from '@mui/icons-material';

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx

@@ -2,7 +2,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { styled, Typography } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
-import { useStyles } from '../../PlaygroundConstraintAccordion.styles';
+import { useStyles } from '../../../PlaygroundConstraintAccordion.styles';
 import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
 
 const StyledValuesSpan = styled('span')(({ theme }) => ({

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Chip, styled, Typography } from '@mui/material';
 import { formatConstraintValue } from 'utils/formatConstraintValue';
-import { useStyles } from '../../PlaygroundConstraintAccordion.styles';
+import { useStyles } from '../../../PlaygroundConstraintAccordion.styles';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';