Merge pull request #1460 from bluewave-labs/fix/button-contrast

Fix: group buttons contrast text

Client/src/Utils/Theme/constants.js

@@ -108,6 +108,12 @@ const semanticColors = {
 			dark: paletteColors.green900,
 		},
 	},
+	neutral: {
+		contrastText: {
+			light: paletteColors.blueGray900,
+			dark: paletteColors.gray100,
+		},
+	},
 	error: {
 		main: {
 			light: paletteColors.red300,

Client/src/Utils/Theme/darkTheme.js

@@ -8,6 +8,7 @@ const {
 	success,
 	error,
 	warning,
+	neutral,
 	gradient: {
 		color1: { dark: color1 },
 		color2: { dark: color2 },
@@ -51,6 +52,9 @@ const palette = {
 		contrastText: warning.contrastText.dark,
 		dark: warning.dark.dark,
 	},
+	neutral: {
+		contrastText: neutral.contrastText.dark,
+	},
 	/* From this part on, try to create semantic structure, not feature based structure */
 	percentage: {
 		uptimePoor: error.main.dark,

Client/src/Utils/Theme/globalTheme.js

@@ -47,7 +47,8 @@ const baseTheme = (palette) => ({
 						{
 							props: (props) => props.variant === "group",
 							style: {
-								color: theme.palette.secondary.contrastText,
+								/* color: theme.palette.secondary.contrastText, */
+								color: theme.palette.neuter.contrastText,
 								backgroundColor: theme.palette.background.main,
 								border: 1,
 								borderStyle: "solid",
@@ -238,8 +239,8 @@ const baseTheme = (palette) => ({
 						},
 					},
 					"& .MuiInputBase-input:-webkit-autofill": {
-						transition: "background-color 5000s ease-in-out 0s", 
-						WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.background.main} inset`, 
+						transition: "background-color 5000s ease-in-out 0s",
+						WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.background.main} inset`,
 						WebkitTextFillColor: theme.palette.text.primary,
 					},
 					"& .MuiInputBase-input.MuiOutlinedInput-input": {

Client/src/Utils/Theme/lightTheme.js

@@ -13,6 +13,7 @@ const {
 	success,
 	error,
 	warning,
+	neutral,
 	gradient: {
 		color1: { light: color1 },
 		color2: { light: color2 },
@@ -57,6 +58,9 @@ const palette = {
 		contrastText: warning.contrastText.light,
 		dark: warning.dark.light,
 	},
+	neutral: {
+		contrastText: neutral.contrastText.light,
+	},
 	/* From this part on, try to create semantic structure, not feature based structure */
 	percentage: {
 		uptimePoor: error.main.light,