From 78594f4e7ae8bb2ace52fffb0d19c963dce33455 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 19 Jun 2025 14:01:23 +0200
Subject: [PATCH] revert changes to existing component

---
 .../Changes/FeatureToggleChanges.tsx          | 61 +++++++++----------
 1 file changed, 30 insertions(+), 31 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
index c23f7b0091..add7882dcd 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { FC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { Box, Card, Typography, Link, styled } from '@mui/material';
+import { Box, Card, Typography, Link } from '@mui/material';
 import { ConflictWarning } from './Change/ConflictWarning.tsx';
 
 interface IFeatureToggleChanges {
@@ -12,15 +12,6 @@ interface IFeatureToggleChanges {
     children?: React.ReactNode;
 }
 
-const HeaderGroup = styled('hgroup', {
-    shouldForwardProp: (prop) => prop !== 'conflict',
-})<{ conflict?: string }>(({ theme, conflict }) => ({
-    display: 'flex',
-    paddingTop: theme.spacing(conflict ? 0 : 2),
-    paddingBottom: theme.spacing(2),
-    paddingInline: theme.spacing(3),
-}));
-
 export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
     featureName,
     projectId,
@@ -37,7 +28,9 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
     >
         <Box
             sx={(theme) => ({
-                backgroundColor: theme.palette.neutral.light,
+                backgroundColor: conflict
+                    ? theme.palette.neutral.light
+                    : theme.palette.neutral.light,
                 borderRadius: (theme) =>
                     `${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`,
                 border: '1px solid',
@@ -50,26 +43,32 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
             })}
         >
             <ConflictWarning conflict={conflict} />
-            <HeaderGroup conflict={conflict}>
-                <Typography>Feature flag:</Typography>
-                <Typography component='h3'>
-                    <Link
-                        component={RouterLink}
-                        to={`/projects/${projectId}/features/${featureName}`}
-                        color='primary'
-                        underline='hover'
-                        sx={{
-                            marginLeft: 1,
-                            '& :hover': {
-                                textDecoration: 'underline',
-                            },
-                        }}
-                        onClick={onNavigate}
-                    >
-                        <strong>{featureName}</strong>
-                    </Link>
-                </Typography>
-            </HeaderGroup>
+            <Box
+                sx={{
+                    display: 'flex',
+                    pt: conflict ? 0 : 2,
+                    pb: 2,
+                    px: 3,
+                }}
+            >
+                <Typography>Feature flag name: </Typography>
+
+                <Link
+                    component={RouterLink}
+                    to={`/projects/${projectId}/features/${featureName}`}
+                    color='primary'
+                    underline='hover'
+                    sx={{
+                        marginLeft: 1,
+                        '& :hover': {
+                            textDecoration: 'underline',
+                        },
+                    }}
+                    onClick={onNavigate}
+                >
+                    <strong>{featureName}</strong>
+                </Link>
+            </Box>
         </Box>
         <Box>{children}</Box>
     </Card>