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 (
-
- {text}
+
+ {`Starting ${formatSmartDate(projectedStartTime)}`}
);
};
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 (
- {shouldShowIcon && statusIcon}
+ {statusIcon}
{statusText}
);