From f13290ccf1b77f49554bfd44790ff5ef76eee24a Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 19 Jun 2025 12:53:18 +0200
Subject: [PATCH] make some small changes to get started

---
 .../Changes/Change/SegmentChange.tsx          |  2 +-
 .../Changes/FeatureToggleChanges.tsx          | 61 ++++++++++---------
 .../ChangeRequestHeader.tsx                   |  2 +-
 3 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChange.tsx
index fadd3b334f..0c3d13b6ce 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChange.tsx
@@ -52,7 +52,7 @@ export const SegmentChange: FC<ISegmentChangeProps> = ({
                     px: 3,
                 }}
             >
-                <Typography>Segment name: </Typography>
+                <Typography>Segment:</Typography>
 
                 <Link
                     component={RouterLink}
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
index add7882dcd..c23f7b0091 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 } from '@mui/material';
+import { Box, Card, Typography, Link, styled } from '@mui/material';
 import { ConflictWarning } from './Change/ConflictWarning.tsx';
 
 interface IFeatureToggleChanges {
@@ -12,6 +12,15 @@ 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,
@@ -28,9 +37,7 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
     >
         <Box
             sx={(theme) => ({
-                backgroundColor: conflict
-                    ? theme.palette.neutral.light
-                    : theme.palette.neutral.light,
+                backgroundColor: theme.palette.neutral.light,
                 borderRadius: (theme) =>
                     `${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`,
                 border: '1px solid',
@@ -43,32 +50,26 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
             })}
         >
             <ConflictWarning conflict={conflict} />
-            <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>
+            <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>
         <Box>{children}</Box>
     </Card>
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
index 25c3b19940..9563c1df3e 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
@@ -26,7 +26,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: ChangeRequestType }> = ({
                 title={title}
                 setTitle={setTitle}
             >
-                <StyledHeader variant='h1' sx={{ mr: 1.5 }}>
+                <StyledHeader variant='h1' component='h2' sx={{ mr: 1.5 }}>
                     {title}
                 </StyledHeader>
             </ChangeRequestTitle>