fix: Project Status UI fixes (#8762)

This PR fixes a few small UI issues reported by UX. It:
- Adds hover colors to the lifecycle boxes
- Adjusts the font size for the health widget to match project resources
and lifecycle
- Makes the `view health over time tooltip` take you to the insights
page with the current project preselected


![image](https://github.com/user-attachments/assets/f672a577-1b01-4d45-98da-d5c367c9a0bc)

frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx

@@ -28,10 +28,6 @@ const StyledSVG = styled('svg')({
     position: 'absolute',
 });
 
-const StyledLink = styled(Link)(({ theme }) => ({
-    fontSize: theme.typography.body2.fontSize,
-}));
-
 export const ProjectHealth = () => {
     const projectId = useRequiredPathParam('projectId');
     const {
@@ -93,14 +89,14 @@ export const ProjectHealth = () => {
                     </StyledSVG>
                 </SVGWrapper>
                 <TextContainer>
-                    <Typography variant='body2'>
+                    <Typography>
                         On average, your project health has remained at{' '}
                         {averageHealth}% the last 4 weeks
                     </Typography>
                     {!isOss() && (
-                        <StyledLink to='/insights'>
+                        <Link to={`/insights?project=IS%3A${projectId}`}>
                             View health over time
-                        </StyledLink>
+                        </Link>
                     )}
                 </TextContainer>
             </ChartRow>

frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx

@@ -16,13 +16,16 @@ const LifecycleBoxContent = styled('div')(({ theme }) => ({
     display: 'flex',
     flexFlow: 'column',
     justifyContent: 'space-between',
-    transition: 'border-color 200ms',
+    transition: 'all 200ms',
     borderRadius: theme.shape.borderRadiusExtraLarge,
     border: `2px solid ${theme.palette.divider}`,
     '&:focus-visible': {
         outline: 'none',
         borderColor: theme.palette.primary.main,
     },
+    '&:hover': {
+        backgroundColor: theme.palette.table.rowHover,
+    },
 }));
 
 const LifecycleBoxTooltip: FC<{ text: string }> = ({ text }) => {