chore: make the milestone status a button (#9255)

https://linear.app/unleash/issue/2-3251/make-the-milestone-status-action-link-and-icon-a-proper-button-that

Makes the milestone status a button while trying to keep most of the
original design intact.


![image](https://github.com/user-attachments/assets/677cb9df-8ae2-4244-8d07-6cd2bd1da5fe)

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

@@ -1,27 +1,49 @@
-import { Link, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import PlayCircleIcon from '@mui/icons-material/PlayCircle';
 import PauseCircleIcon from '@mui/icons-material/PauseCircle';
 import TripOriginIcon from '@mui/icons-material/TripOrigin';
 
 export type MilestoneStatus = 'not-started' | 'active' | 'paused' | 'completed';
 
-const StyledStatus = styled('div', {
+const StyledStatusButton = styled('button', {
     shouldForwardProp: (prop) => prop !== 'status',
-})<{ status: MilestoneStatus }>(({ theme, status }) => ({
+})<{ status: MilestoneStatus; disabled?: boolean }>(
+    ({ theme, status, disabled }) => ({
         display: 'flex',
         alignItems: 'center',
+        border: 'none',
         gap: theme.spacing(1),
+        padding: 0,
         paddingRight: theme.spacing(1),
-    fontSize: theme.fontSizes.smallerBody,
+        cursor: 'pointer',
-    borderRadius: theme.shape.borderRadiusMedium,
         backgroundColor:
             status === 'active' ? theme.palette.success.light : 'transparent',
+        '&:focus-visible': {
+            outline: `2px solid ${theme.palette.primary.main}`,
+        },
+        '&:hover': {
+            backgroundColor:
+                status === 'active'
+                    ? theme.palette.success.light
+                    : status === 'paused'
+                      ? 'transparent'
+                      : theme.palette.neutral.light,
+            textDecoration: 'none',
+        },
+        fontSize: theme.fontSizes.smallerBody,
+        lineHeight: theme.fontSizes.smallerBody,
+        fontWeight: theme.fontWeight.medium,
+        borderRadius: theme.shape.borderRadiusMedium,
         color:
             status === 'active'
                 ? theme.palette.success.contrastText
-            : status === 'completed'
+                : status === 'paused'
-              ? theme.palette.text.secondary
+                  ? theme.palette.text.primary
-              : theme.palette.text.primary,
+                  : theme.palette.primary.main,
+        textDecoration:
+            status === 'not-started' || status === 'completed'
+                ? 'underline'
+                : 'none',
         '& svg': {
             color:
                 status === 'active'
@@ -31,8 +53,14 @@ const StyledStatus = styled('div', {
                       : status === 'completed'
                         ? theme.palette.neutral.border
                         : theme.palette.primary.main,
+            height: theme.spacing(3),
+            width: theme.spacing(3),
         },
-}));
+        ...(disabled && {
+            pointerEvents: 'none',
+        }),
+    }),
+);
 
 interface IReleasePlanMilestoneStatusProps {
     status: MilestoneStatus;
@@ -52,27 +80,28 @@ export const ReleasePlanMilestoneStatus = ({
                 ? 'Restart'
                 : 'Start';
 
-    return (
+    const statusIcon =
-        <StyledStatus status={status}>
+        status === 'active' ? (
-            {status === 'active' ? (
             <TripOriginIcon />
         ) : status === 'paused' ? (
             <PauseCircleIcon />
         ) : (
             <PlayCircleIcon />
-            )}
+        );
-            {status === 'not-started' || status === 'completed' ? (
+
-                <Link
+    const disabled = status === 'active' || status === 'paused';
+
+    return (
+        <StyledStatusButton
+            status={status}
             onClick={(e) => {
                 e.stopPropagation();
                 onStartMilestone();
             }}
+            disabled={disabled}
         >
+            {statusIcon}
             {statusText}
-                </Link>
+        </StyledStatusButton>
-            ) : (
-                <span>{statusText}</span>
-            )}
-        </StyledStatus>
     );
 };