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,38 +1,66 @@
-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 }>(
-    display: 'flex',
+    ({ theme, status, disabled }) => ({
-    alignItems: 'center',
+        display: 'flex',
-    gap: theme.spacing(1),
+        alignItems: 'center',
-    paddingRight: theme.spacing(1),
+        border: 'none',
-    fontSize: theme.fontSizes.smallerBody,
+        gap: theme.spacing(1),
-    borderRadius: theme.shape.borderRadiusMedium,
+        padding: 0,
-    backgroundColor:
+        paddingRight: theme.spacing(1),
-        status === 'active' ? theme.palette.success.light : 'transparent',
+        cursor: 'pointer',
-    color:
+        backgroundColor:
-        status === 'active'
+            status === 'active' ? theme.palette.success.light : 'transparent',
-            ? theme.palette.success.contrastText
+        '&:focus-visible': {
-            : status === 'completed'
+            outline: `2px solid ${theme.palette.primary.main}`,
-              ? theme.palette.text.secondary
+        },
-              : theme.palette.text.primary,
+        '&:hover': {
-    '& svg': {
+            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.main
+                ? theme.palette.success.contrastText
                 : status === 'paused'
-                  ? theme.palette.text.disabled
+                  ? theme.palette.text.primary
-                  : status === 'completed'
+                  : theme.palette.primary.main,
-                    ? theme.palette.neutral.border
+        textDecoration:
-                    : theme.palette.primary.main,
+            status === 'not-started' || status === 'completed'
-    },
+                ? 'underline'
-}));
+                : 'none',
+        '& svg': {
+            color:
+                status === 'active'
+                    ? theme.palette.success.main
+                    : status === 'paused'
+                      ? theme.palette.text.disabled
+                      : 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';
 
+    const statusIcon =
+        status === 'active' ? (
+            <TripOriginIcon />
+        ) : status === 'paused' ? (
+            <PauseCircleIcon />
+        ) : (
+            <PlayCircleIcon />
+        );
+
+    const disabled = status === 'active' || status === 'paused';
+
     return (
-        <StyledStatus status={status}>
+        <StyledStatusButton
-            {status === 'active' ? (
+            status={status}
-                <TripOriginIcon />
+            onClick={(e) => {
-            ) : status === 'paused' ? (
+                e.stopPropagation();
-                <PauseCircleIcon />
+                onStartMilestone();
-            ) : (
+            }}
-                <PlayCircleIcon />
+            disabled={disabled}
-            )}
+        >
-            {status === 'not-started' || status === 'completed' ? (
+            {statusIcon}
-                <Link
+            {statusText}
-                    onClick={(e) => {
+        </StyledStatusButton>
-                        e.stopPropagation();
-                        onStartMilestone();
-                    }}
-                >
-                    {statusText}
-                </Link>
-            ) : (
-                <span>{statusText}</span>
-            )}
-        </StyledStatus>
     );
 };