Colors

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

@@ -26,6 +26,7 @@ import {
 import { createTooltip } from 'component/insights/components/LineChart/createTooltip';
 import { CreationArchiveTooltip } from './CreationArchiveTooltip.tsx';
 import { CreationArchiveRatioTooltip } from './CreationArchiveRatioTooltip.tsx';
+import { getFlagTypeColors } from './flagTypeColors.ts';
 
 ChartJS.register(
     CategoryScale,
@@ -83,7 +84,6 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
             ),
         );
 
-        // Get all unique flag types
         const allFlagTypes = new Set<string>();
         creationArchiveData.datasets.forEach((d) =>
             d.data.forEach((item: any) => {
@@ -138,14 +138,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
             }))
             .sort((a, b) => (a.week > b.week ? 1 : -1));
 
-        // Create datasets for each flag type
+        const flagTypeColors = getFlagTypeColors(theme);
-        const flagTypeColors = [
-            theme.palette.success.border,
-            theme.palette.success.main,
-            theme.palette.success.dark,
-            '#4D8007',
-            '#7D935E',
-        ];
 
         const flagTypeDatasets = Array.from(allFlagTypes).map(
             (flagType, index) => ({

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

@@ -1,8 +1,13 @@
 import type { FC } from 'react';
-import { Box, Paper, Typography, styled } from '@mui/material';
+import { Box, Paper, Typography, styled, useTheme } from '@mui/material';
 import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
 import { ChartTooltipContainer } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
 
+const getRatioTooltipColors = (theme: any) => ({
+    CREATED: theme.palette.success.main,
+    ARCHIVED: theme.palette.background.application,
+});
+
 const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(2),
     width: 200,
@@ -22,6 +27,9 @@ interface CreationArchiveRatioTooltipProps {
 export const CreationArchiveRatioTooltip: FC<
     CreationArchiveRatioTooltipProps
 > = ({ tooltip }) => {
+    const theme = useTheme();
+    const colors = getRatioTooltipColors(theme);
+
     if (!tooltip?.dataPoints) {
         return null;
     }
@@ -60,7 +68,10 @@ export const CreationArchiveRatioTooltip: FC<
 
                 <StyledFlagItem>
                     <Typography variant='body2' component='span'>
-                        <Typography sx={{ color: '#4caf50' }} component='span'>
+                        <Typography
+                            sx={{ color: colors.CREATED }}
+                            component='span'
+                        >
                             {'● '}
                         </Typography>
                         Flags created
@@ -72,7 +83,10 @@ export const CreationArchiveRatioTooltip: FC<
 
                 <StyledFlagItem>
                     <Typography variant='body2' component='span'>
-                        <Typography sx={{ color: '#9e9e9e' }} component='span'>
+                        <Typography
+                            sx={{ color: colors.ARCHIVED }}
+                            component='span'
+                        >
                             {'● '}
                         </Typography>
                         Flags archived

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

@@ -1,7 +1,8 @@
 import type { FC } from 'react';
-import { Box, Paper, Typography, styled } from '@mui/material';
+import { Box, Paper, Typography, styled, useTheme } from '@mui/material';
-import type { TooltipState } from '../../components/LineChart/ChartTooltip/ChartTooltip.tsx';
+import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
-import { ChartTooltipContainer } from '../../components/LineChart/ChartTooltip/ChartTooltip.tsx';
+import { ChartTooltipContainer } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
+import { getFlagTypeColors } from './flagTypeColors.ts';
 
 const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(2),
@@ -21,6 +22,8 @@ interface CreationArchiveTooltipProps {
 export const CreationArchiveTooltip: FC<CreationArchiveTooltipProps> = ({
     tooltip,
 }) => {
+    const theme = useTheme();
+
     if (!tooltip?.dataPoints) {
         return null;
     }
@@ -41,20 +44,13 @@ export const CreationArchiveTooltip: FC<CreationArchiveTooltipProps> = ({
         return null;
     }
 
-    // Flag type colors matching the chart
-    const flagTypeColors = [
-        '#66bb6a', // theme.palette.success.border
-        '#4caf50', // theme.palette.success.main
-        '#388e3c', // theme.palette.success.dark
-        '#4D8007',
-        '#7D935E',
-    ];
-
     // Get flag type names from the chart datasets
     const flagTypeNames = createdFlagDataPoints.map(
         (point) => point.dataset.label?.replace('Created: ', '') || '',
     );
 
+    const flagTypeColors = getFlagTypeColors(theme);
+
     // Create entries for each flag type with count > 0
     const flagTypeEntries = Object.entries(rawData.createdFlagsByType)
         .filter(([, count]) => (count as number) > 0)