chore: update ux styling for lifecycle charts (#10481)

Some small ux tweaks to lifecycle charts.


1. Removed vertical lines
2. Styled the legend to have round dots, not square.
<img width="1891" height="656" alt="image"
src="https://github.com/user-attachments/assets/b2c09085-7a2e-4e14-92e0-b3e83edf201d"
/>

frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx

@@ -193,6 +193,10 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                         legend: {
                             position: 'bottom' as const,
                             labels: {
+                                color: theme.palette.text.secondary,
+                                usePointStyle: true,
+                                padding: 21,
+                                boxHeight: 8,
                                 filter: (legendItem) => {
                                     return !flagTypeNames.includes(
                                         legendItem.text || '',
@@ -234,6 +238,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                     scales: {
                         x: {
                             type: 'time',
+                            display: false,
                             time: {
                                 unit: 'week',
                                 tooltipFormat: 'PPP',

frontend/src/component/insights/componentsStat/CreationArchiveStats/CreationArchiveStats.tsx

@@ -1,11 +1,12 @@
 import type { FC } from 'react';
-import { Box, Typography, Link, styled } from '@mui/material';
+import { Box, Typography, styled } from '@mui/material';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import InfoOutlined from '@mui/icons-material/InfoOutlined';
 import Lightbulb from '@mui/icons-material/LightbulbOutlined';
 import { StatsExplanation } from 'component/insights/InsightsCharts.styles';
 import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
 import type { InstanceInsightsSchema } from 'openapi';
+import { Link } from 'react-router-dom';
 
 function getCurrentArchiveRatio(
     groupedCreationArchiveData: GroupedDataByProject<
@@ -72,6 +73,7 @@ const StyledLink = styled(Link)(({ theme }) => ({
     '&:hover': {
         textDecoration: 'underline',
     },
+    fontSize: theme.spacing(1.75),
 }));
 
 interface CreationArchiveStatsProps {
@@ -105,7 +107,7 @@ export const CreationArchiveStats: FC<CreationArchiveStatsProps> = ({
                 Do you create more flags than you archive? Or do you have good
                 process for cleaning up?
             </StatsExplanation>
-            <StyledLink href='/search?lifecycle=IS:completed' variant='body2'>
+            <StyledLink to='/search?lifecycle=IS:completed'>
                 View flags in cleanup stage
             </StyledLink>
         </>