Add darker color to accent

Client/src/Utils/Theme/constants.js

@@ -128,6 +128,12 @@ const newSemanticColors = {
 			light: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW
 			dark: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW
 		},
+		darker: {
+			// CAIO_REVIEW
+			light: darken(newColors.blueBlueWave, 0.2), // CAIO_REVIEW
+			dark: darken(newColors.blueBlueWave, 0.2), // CAIO_REVIEW
+		},
+
 		contrastText: {
 			light: newColors.offWhite,
 			dark: newColors.offWhite,

Client/src/Utils/Theme/extractColorObject.js

@@ -9,6 +9,7 @@ function extractThemeColors(themeType, colorObject) {
 		}
 
 		if ("light" in obj && "dark" in obj) {
+			// CAIO_REVIEW:  This will break if the root object has light and dark properties
 			return obj[themeType]; // Return the value for the specified theme
 		}
 

Client/src/Utils/Theme/globalTheme.js

@@ -49,8 +49,7 @@ const baseTheme = (palette) => ({
 							props: (props) => props.color === "accent",
 							style: {
 								"&:hover": {
-									color: theme.palette.accent.main,
-									backgroundColor: theme.palette.accent.contrastText,
+									backgroundColor: theme.palette.accent.darker,
 								},
 							},
 						},

Client/src/Utils/Theme/lightTheme.js

@@ -4,7 +4,7 @@ import { /* colors, */ newSemanticColors } from "./constants";
 import { extractThemeColors } from "./extractColorObject";
 
 const palette = extractThemeColors("light", newSemanticColors);
-
+console.log(palette);
 const lightTheme = createTheme({
 	palette,
 	...baseTheme(palette),