From 31a2a39fded386eb0abbdd552cf0c86ef427a754 Mon Sep 17 00:00:00 2001
From: Caleb Cox <canac@users.noreply.github.com>
Date: Mon, 9 Dec 2024 14:33:00 -0600
Subject: [PATCH] Add graph colors to theme

---
 .../DonationHistories/DonationHistories.tsx   | 25 ++++++++---
 .../HealthIndicatorGraph.tsx                  | 23 +++++++---
 src/theme.ts                                  | 43 ++++++++++++++++---
 3 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/src/components/Dashboard/DonationHistories/DonationHistories.tsx b/src/components/Dashboard/DonationHistories/DonationHistories.tsx
index a4153f3dd..843907d99 100644
--- a/src/components/Dashboard/DonationHistories/DonationHistories.tsx
+++ b/src/components/Dashboard/DonationHistories/DonationHistories.tsx
@@ -8,6 +8,7 @@ import {
   Skeleton,
   Theme,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
@@ -82,11 +83,17 @@ const DonationHistories = ({
   setTime,
 }: Props): ReactElement => {
   const { classes } = useStyles();
+  const { palette } = useTheme();
   const { push } = useRouter();
   const { t } = useTranslation();
   const locale = useLocale();
   const accountListId = useAccountListId();
-  const fills = ['#FFCF07', '#30F2F2', '#1FC0D2', '#007398'];
+  const fills = [
+    palette.cruYellow.main,
+    palette.graphBlue3.main,
+    palette.graphBlue2.main,
+    palette.graphBlue1.main,
+  ];
   const currencies: { dataKey: string; fill: string }[] = [];
   const periods = reportsDonationHistories?.periods?.map((period) => {
     const data: {
@@ -157,7 +164,7 @@ const DonationHistories = ({
                         <LegendReferenceLine
                           name={t('Goal')}
                           value={currencyFormat(goal, currencyCode, locale)}
-                          color="#17AEBF"
+                          color={palette.graphTeal.main}
                         />
                       </Grid>
                       <Grid item>|</Grid>
@@ -194,7 +201,7 @@ const DonationHistories = ({
                         <LegendReferenceLine
                           name={t('Committed')}
                           value={currencyFormat(pledged, currencyCode, locale)}
-                          color="#FFCF07"
+                          color={palette.cruYellow.main}
                         />
                       </Grid>
                     </>
@@ -238,19 +245,19 @@ const DonationHistories = ({
                       {goal && (
                         <ReferenceLine
                           y={goal}
-                          stroke="#17AEBF"
+                          stroke={palette.graphTeal.main}
                           strokeWidth={3}
                         />
                       )}
                       <ReferenceLine
                         y={reportsDonationHistories?.averageIgnoreCurrent}
-                        stroke="#9C9FA1"
+                        stroke={palette.cruGrayMedium.main}
                         strokeWidth={3}
                       />
                       {pledged && (
                         <ReferenceLine
                           y={pledged}
-                          stroke="#FFCF07"
+                          stroke={palette.cruYellow.main}
                           strokeWidth={3}
                         />
                       )}
@@ -294,7 +301,11 @@ const DonationHistories = ({
                     <BarChart data={periods}>
                       <XAxis tickLine={false} dataKey="startDate" />
                       <Tooltip />
-                      <Bar dataKey="total" fill="#007398" barSize={10} />
+                      <Bar
+                        dataKey="total"
+                        fill={palette.graphBlue1.main}
+                        barSize={10}
+                      />
                     </BarChart>
                   </ResponsiveContainer>
                 )}
diff --git a/src/components/Reports/HealthIndicatorReport/HealthIndicatorGraph/HealthIndicatorGraph.tsx b/src/components/Reports/HealthIndicatorReport/HealthIndicatorGraph/HealthIndicatorGraph.tsx
index f0100b506..50fbee415 100644
--- a/src/components/Reports/HealthIndicatorReport/HealthIndicatorGraph/HealthIndicatorGraph.tsx
+++ b/src/components/Reports/HealthIndicatorReport/HealthIndicatorGraph/HealthIndicatorGraph.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, CardContent, CardHeader } from '@mui/material';
+import { Card, CardContent, CardHeader, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import {
   Bar,
@@ -25,18 +25,23 @@ export const HealthIndicatorGraph: React.FC<HealthIndicatorGraphProps> = ({
   accountListId,
 }) => {
   const { t } = useTranslation();
+  const { palette } = useTheme();
 
   const { loading, average, periods } = useGraphData(accountListId);
 
   const stacks = [
-    { field: 'ownership', label: t('Ownership'), color: '#FFCF07' },
-    { field: 'success', label: t('Success'), color: '#30F2F2' },
+    {
+      field: 'ownership',
+      label: t('Ownership'),
+      color: palette.cruYellow.main,
+    },
+    { field: 'success', label: t('Success'), color: palette.graphBlue1.main },
     {
       field: 'consistency',
       label: t('Consistency'),
-      color: '#1FC0D2',
+      color: palette.graphBlue2.main,
     },
-    { field: 'depth', label: t('Depth'), color: '#007398' },
+    { field: 'depth', label: t('Depth'), color: palette.graphBlue3.main },
   ];
 
   if (periods?.length === 0) {
@@ -64,7 +69,7 @@ export const HealthIndicatorGraph: React.FC<HealthIndicatorGraphProps> = ({
             <LegendReferenceLine
               name={t('Average')}
               value={average}
-              color="#17AEBF"
+              color={palette.graphTeal.main}
             />
           )
         }
@@ -91,7 +96,11 @@ export const HealthIndicatorGraph: React.FC<HealthIndicatorGraphProps> = ({
               }
             />
             {average !== null && (
-              <ReferenceLine y={average} stroke="#17AEBF" strokeWidth={3} />
+              <ReferenceLine
+                y={average}
+                stroke={palette.graphTeal.main}
+                strokeWidth={3}
+              />
             )}
             <XAxis tickLine={false} dataKey="month" />
             <YAxis
diff --git a/src/theme.ts b/src/theme.ts
index 0bb1d00d8..585752ac8 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -10,16 +10,10 @@ const cruColors = {
   grayLight: '#EBECEC',
 };
 
-const statusColors = {
-  success: '#5CB85C',
-  warning: '#8A6D3B',
-  danger: '#A94442',
-};
-
 const mpdxColors = {
   green: '#00CA99',
   blue: '#05699B',
-  blueLight: '#e7f2f7',
+  blueLight: '#E7F2F7',
   yellow: '#FFF5CD',
   gray: '#DCDCDC',
 };
@@ -29,6 +23,20 @@ const progressBarColors = {
   orange: '#DD7D1A',
   gray: '#808080',
 };
+
+const statusColors = {
+  success: '#5CB85C',
+  warning: '#8A6D3B',
+  danger: '#A94442',
+};
+
+const graphColors = {
+  blue1: '#007398',
+  blue2: '#1FC0D2',
+  blue3: '#30F2F2',
+  teal: '#17AEBF',
+};
+
 // https://material-ui.com/customization/palette/#adding-new-colors
 declare module '@mui/material/styles/createPalette' {
   interface Palette {
@@ -46,7 +54,12 @@ declare module '@mui/material/styles/createPalette' {
     statusSuccess: Palette['primary'];
     statusWarning: Palette['primary'];
     statusDanger: Palette['primary'];
+    graphBlue1: Palette['primary'];
+    graphBlue2: Palette['primary'];
+    graphBlue3: Palette['primary'];
+    graphTeal: Palette['primary'];
   }
+
   interface PaletteOptions {
     cruYellow: PaletteOptions['primary'];
     cruGrayDark: PaletteOptions['primary'];
@@ -62,6 +75,10 @@ declare module '@mui/material/styles/createPalette' {
     statusSuccess: PaletteOptions['primary'];
     statusWarning: PaletteOptions['primary'];
     statusDanger: PaletteOptions['primary'];
+    graphBlue1: PaletteOptions['primary'];
+    graphBlue2: PaletteOptions['primary'];
+    graphBlue3: PaletteOptions['primary'];
+    graphTeal: PaletteOptions['primary'];
   }
 }
 
@@ -125,6 +142,18 @@ const theme = createTheme({
     statusDanger: {
       main: statusColors.danger,
     },
+    graphBlue1: {
+      main: graphColors.blue1,
+    },
+    graphBlue2: {
+      main: graphColors.blue2,
+    },
+    graphBlue3: {
+      main: graphColors.blue3,
+    },
+    graphTeal: {
+      main: graphColors.teal,
+    },
   },
   components: {
     MuiCard: {