From 45fc547049f03d552d657c9d5358702e6fd8dd8e Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Fri, 31 Oct 2025 12:24:56 +0100
Subject: [PATCH] feat: start now button with background (#10897)

---
 .../MilestoneNextStartTime.tsx                   | 10 ++++------
 .../ReleasePlanMilestoneStatus.tsx               | 16 ++++------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneNextStartTime.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneNextStartTime.tsx
index f724daeadf..b8972784bc 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneNextStartTime.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneNextStartTime.tsx
@@ -34,7 +34,7 @@ const StyledTimeContainer = styled('span')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
 }));
 
-const StyledIcon = styled(HourglassEmptyOutlinedIcon)(({ theme }) => ({
+const StyledHourglassIcon = styled(HourglassEmptyOutlinedIcon)(({ theme }) => ({
     fontSize: 18,
     color: theme.palette.primary.main,
 }));
@@ -75,14 +75,12 @@ export const MilestoneNextStartTime = ({
         activeMilestoneId,
     );
 
-    const text = projectedStartTime
-        ? `Starting ${formatSmartDate(projectedStartTime)}`
-        : 'Waiting to start';
+    if (!projectedStartTime) return null;
 
     return (
         <StyledTimeContainer>
-            <StyledIcon />
-            {text}
+            <StyledHourglassIcon />
+            {`Starting ${formatSmartDate(projectedStartTime)}`}
         </StyledTimeContainer>
     );
 };
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx
index b32d0e6467..762c625fe2 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx
@@ -18,7 +18,9 @@ const StyledStatusButton = styled('button', {
         paddingRight: theme.spacing(1),
         cursor: 'pointer',
         backgroundColor:
-            status === 'active' ? theme.palette.success.light : 'transparent',
+            status === 'active'
+                ? theme.palette.success.light
+                : theme.palette.neutral.light,
         '&:focus-visible': {
             outline: `2px solid ${theme.palette.primary.main}`,
         },
@@ -41,10 +43,6 @@ const StyledStatusButton = styled('button', {
                 : status === 'paused'
                   ? theme.palette.text.primary
                   : theme.palette.primary.main,
-        textDecoration:
-            status === 'not-started' || status === 'completed'
-                ? 'underline'
-                : 'none',
         '& svg': {
             color:
                 status === 'active'
@@ -105,12 +103,6 @@ export const ReleasePlanMilestoneStatus = ({
     const statusIcon = getStatusIcon(status);
     const disabled = status === 'active' || status === 'paused';
 
-    // Hide the play icon when progressions are enabled and milestone is not active/paused
-    const shouldShowIcon =
-        status === 'active' ||
-        status === 'paused' ||
-        !milestoneProgressionsEnabled;
-
     return (
         <StyledStatusButton
             status={status}
@@ -120,7 +112,7 @@ export const ReleasePlanMilestoneStatus = ({
             }}
             disabled={disabled}
         >
-            {shouldShowIcon && statusIcon}
+            {statusIcon}
             {statusText}
         </StyledStatusButton>
     );