refactor: polish progression edit form UI (#10853)

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/MilestoneListRenderer.tsx

@@ -11,7 +11,7 @@ const StyledConnection = styled('div')(({ theme }) => ({
     width: 2,
     height: theme.spacing(2),
     backgroundColor: theme.palette.divider,
-    marginLeft: theme.spacing(3.25),
+    marginLeft: theme.spacing(3.5),
 }));
 
 interface MilestoneListRendererCoreProps {

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneAutomationSection.tsx

@@ -4,10 +4,11 @@ import type { MilestoneStatus } from './ReleasePlanMilestoneStatus.tsx';
 const StyledAutomationContainer = styled('div', {
     shouldForwardProp: (prop) => prop !== 'status',
 })<{ status?: MilestoneStatus }>(({ theme, status }) => ({
-    border: `${status === 'active' ? '1.25px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
+    border: `${status === 'active' ? '1.5px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
     borderTop: `1px solid ${theme.palette.divider}`,
     borderRadius: `0 0 ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`,
     padding: theme.spacing(1.5, 2),
+    paddingLeft: theme.spacing(2.25),
     backgroundColor:
         status === 'completed'
             ? theme.palette.background.default

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneTransitionDisplay.tsx

@@ -11,6 +11,26 @@ import type { ChangeMilestoneProgressionSchema } from 'openapi';
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
 
+const StyledFormWrapper = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'hasChanged',
+})<{ hasChanged: boolean }>(({ theme, hasChanged }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1.5),
+    width: '100%',
+    transition: theme.transitions.create(
+        ['background-color', 'padding', 'border-radius'],
+        {
+            duration: theme.transitions.duration.short,
+        },
+    ),
+    ...(hasChanged && {
+        backgroundColor: theme.palette.background.elevation1,
+        padding: theme.spacing(1.5, 2),
+        borderRadius: `${theme.shape.borderRadiusLarge}px`,
+    }),
+}));
+
 const StyledDisplayContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
@@ -50,10 +70,24 @@ const StyledLabel = styled('span', {
     flexShrink: 0,
 }));
 
-const StyledButtonGroup = styled('div')(({ theme }) => ({
+const StyledButtonGroup = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'hasChanged',
+})<{ hasChanged: boolean }>(({ theme, hasChanged }) => ({
     display: 'flex',
     gap: theme.spacing(1),
     alignItems: 'center',
+    justifyContent: 'flex-end',
+    transition: theme.transitions.create(
+        ['border-top', 'padding-top', 'margin-top'],
+        {
+            duration: theme.transitions.duration.short,
+        },
+    ),
+    ...(hasChanged && {
+        paddingTop: theme.spacing(1),
+        marginTop: theme.spacing(0.5),
+        borderTop: `1px solid ${theme.palette.divider}`,
+    }),
 }));
 
 interface IMilestoneTransitionDisplayProps {
@@ -130,7 +164,8 @@ export const MilestoneTransitionDisplay = ({
     };
 
     return (
-        <StyledDisplayContainer onKeyDown={handleKeyDown}>
+        <StyledFormWrapper hasChanged={hasChanged} onKeyDown={handleKeyDown}>
+            <StyledDisplayContainer>
                 <StyledContentGroup>
                     <StyledIcon status={status} />
                     <StyledLabel status={status}>
@@ -143,17 +178,8 @@ export const MilestoneTransitionDisplay = ({
                         onTimeUnitChange={form.handleTimeUnitChange}
                     />
                 </StyledContentGroup>
-            <StyledButtonGroup>
-                {hasChanged && (
-                    <Button
-                        variant='contained'
-                        color='primary'
-                        onClick={handleSave}
-                        size='small'
-                    >
-                        Save
-                    </Button>
-                )}
+                {!hasChanged && (
+                    <StyledButtonGroup hasChanged={false}>
                         {badge}
                         <IconButton
                             onClick={onDelete}
@@ -164,6 +190,28 @@ export const MilestoneTransitionDisplay = ({
                             <DeleteOutlineIcon fontSize='small' />
                         </IconButton>
                     </StyledButtonGroup>
+                )}
             </StyledDisplayContainer>
+            {hasChanged && (
+                <StyledButtonGroup hasChanged={true}>
+                    <Button
+                        variant='outlined'
+                        color='primary'
+                        onClick={handleReset}
+                        size='small'
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant='contained'
+                        color='primary'
+                        onClick={handleSave}
+                        size='small'
+                    >
+                        Save
+                    </Button>
+                </StyledButtonGroup>
+            )}
+        </StyledFormWrapper>
     );
 };

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx

@@ -23,10 +23,10 @@ const StyledAccordion = styled(Accordion, {
     shouldForwardProp: (prop) => prop !== 'status' && prop !== 'hasAutomation',
 })<{ status: MilestoneStatus; hasAutomation?: boolean }>(
     ({ theme, status, hasAutomation }) => ({
-        border: `${status === 'active' ? '1.25px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
+        border: `${status === 'active' ? '1.5px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
         borderBottom: hasAutomation
             ? 'none'
-            : `${status === 'active' ? '1.25px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
+            : `${status === 'active' ? '1.5px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
         overflow: 'hidden',
         boxShadow: 'none',
         margin: 0,
@@ -58,6 +58,11 @@ const StyledTitleContainer = styled('div')(({ theme }) => ({
     gap: theme.spacing(0.5),
 }));
 
+const StyledMilestoneLabel = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.caption.fontSize,
+    color: theme.palette.text.secondary,
+}));
+
 const StyledTitle = styled('span', {
     shouldForwardProp: (prop) => prop !== 'status',
 })<{ status?: MilestoneStatus }>(({ theme, status }) => ({
@@ -121,6 +126,9 @@ export const ReleasePlanMilestone = ({
                 <StyledAccordion status={status} hasAutomation={hasAutomation}>
                     <StyledAccordionSummary>
                         <StyledTitleContainer>
+                            <StyledMilestoneLabel>
+                                Milestone
+                            </StyledMilestoneLabel>
                             <StyledTitle status={status}>
                                 {milestone.name}
                             </StyledTitle>
@@ -175,6 +183,7 @@ export const ReleasePlanMilestone = ({
             >
                 <StyledAccordionSummary expandIcon={<ExpandMore />}>
                     <StyledTitleContainer>
+                        <StyledMilestoneLabel>Milestone</StyledMilestoneLabel>
                         <StyledTitle status={status}>
                             {milestone.name}
                         </StyledTitle>

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestoneItem/ReleasePlanMilestoneItem.tsx

@@ -19,7 +19,7 @@ const StyledConnection = styled('div', {
     backgroundColor: isCompleted
         ? theme.palette.divider
         : theme.palette.primary.main,
-    marginLeft: theme.spacing(3.25),
+    marginLeft: theme.spacing(3.5),
 }));
 
 export interface PendingProgressionChange {
@@ -133,7 +133,7 @@ export const ReleasePlanMilestoneItem = ({
         getPendingProgressionData(milestone, getPendingProgressionChange);
 
     const shouldShowAutomation =
-        isNotLastMilestone && milestoneProgressionsEnabled;
+        isNotLastMilestone && milestoneProgressionsEnabled && !readonly;
 
     const automationSection = shouldShowAutomation ? (
         <MilestoneAutomation