bug fix

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx

@@ -67,7 +67,6 @@ export const ConstraintAccordionViewHeaderInfo = ({
                         <ConditionallyRender
                             condition={
                                 result !== undefined &&
-                                !Boolean(result) &&
                                 Boolean(playgroundContext)
                             }
                             show={

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

@@ -30,30 +30,43 @@ export const FeatureResultInfoPopoverCell = ({
         setOpen(!open);
     };
 
+    const dummyPlaygroundFeatureTrue: PlaygroundFeatureSchema = {
+        name: feature?.name as any,
+        projectId: 'default',
+        isEnabled: true,
+
+    } as any;
+
+    const dummyPlaygroundFeatureFalse: PlaygroundFeatureSchema = {
+        name: feature?.name as any,
+        projectId: 'default',
+        isEnabled: false,
+
+    } as any;
+
     const strategies: PlaygroundFeatureStrategyResult[] = [
         {
             name: 'default',
             id: 'strategy-id',
             parameters: {},
-            result: true,
+            result: feature?.isEnabled as any,
             constraints: [
                 {
-                    result: false,
+                    result: true,
                     contextName: 'appName',
                     operator: 'IN',
-                    caseInsensitive: true,
+                    caseInsensitive: false,
                     inverted: false,
                     values: [
-                        'a',
-                        'b',
-                        'sdlghigoiahr;g',
-                        'WOGIHwegoihwlwEGHLwgklWEGK;L',
+                        'MyApp',
+                        'MyOtherApp',
+                        'Unleash',
                     ],
                 },
             ],
             segments: [
                 {
-                    result: true,
+                    result: false,
                     id: 5,
                     name: 'my-segment',
                     constraints: [
@@ -63,7 +76,7 @@ export const FeatureResultInfoPopoverCell = ({
                             operator: 'IN',
                             caseInsensitive: false,
                             inverted: false,
-                            values: ['a', 'b'],
+                            values: ['development'],
                         },
                     ],
                 },
@@ -94,7 +107,7 @@ export const FeatureResultInfoPopoverCell = ({
                 }}
                 classes={{ paper: styles.popoverPaper }}
             >
-                <PlaygroundResultFeatureDetails feature={feature} />
+                <PlaygroundResultFeatureDetails feature={feature.isEnabled ? dummyPlaygroundFeatureTrue : dummyPlaygroundFeatureFalse} />
                 <ConditionallyRender
                     condition={strategies.length > 0}
                     show={

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

@@ -1,5 +1,5 @@
 import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model';
-import { Typography } from '@mui/material';
+import {Typography, useTheme} from '@mui/material';
 import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip';
 import { useStyles } from './PlaygroundResultFeatureDetails.styles';
 interface PlaygroundFeatureResultDetailsProps {
@@ -9,6 +9,7 @@ export const PlaygroundResultFeatureDetails = ({
     feature,
 }: PlaygroundFeatureResultDetailsProps) => {
     const { classes: styles } = useStyles();
+    const theme = useTheme();
 
     const description = feature.isEnabled
         ? 'This feature toggle is True in production because '
@@ -16,7 +17,7 @@ export const PlaygroundResultFeatureDetails = ({
     const reason = feature.isEnabled
         ? 'at least one strategy is True'
         : 'all strategies are False';
-    const color = feature.isEnabled ? 'success' : 'error';
+    const color = feature.isEnabled ? theme.palette.success.main : theme.palette.error.main;
 
     return (
         <>
@@ -30,7 +31,7 @@ export const PlaygroundResultFeatureDetails = ({
             </div>
             <div className={styles.descriptionRow}>
                 <Typography variant={'body1'}>{description}</Typography>
-                <Typography variant={'body1'} color={color}>
+                <Typography variant={'subtitle1'} color={color}>
                     {reason}
                 </Typography>
             </div>

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

@@ -20,7 +20,7 @@ export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => {
     return (
         <StyledCellBox>
             <StyledChipWrapper data-loading>
-                <PlaygroundResultChip enabled />
+                <PlaygroundResultChip enabled={enabled} />
             </StyledChipWrapper>
         </StyledCellBox>
     );