Merge pull request #2222 from bluewave-labs/fix/disabled-colors

fix: disabled field colors

client/src/Components/Inputs/TextInput/index.jsx

@@ -6,18 +6,6 @@ import PropTypes from "prop-types";
 const getSx = (theme, type, maxWidth) => {
 	const sx = {
 		maxWidth: maxWidth,
-		"&  .MuiOutlinedInput-root ": {
-			"&:hover .MuiOutlinedInput-notchedOutline": {
-				borderColor: theme.palette.primary.contrastText, // Adjust hover border color
-			},
-			"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-				borderColor: theme.palette.accent.main, // Adjust focus border color
-			},
-			"&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
-				borderColor: theme.palette.primary.contrastText, // CAIO_REVIEW
-				opacity: 0.5,
-			},
-		},
 
 		"& .MuiFormHelperText-root": {
 			position: "absolute",

client/src/Utils/Theme/constants.js

@@ -63,7 +63,6 @@ const paletteColors = {
 	orange500: "#E88C30",
 	orange600: "#DC6803",
 	orange800: "#624711",
-
 };
 
 const semanticColors = {
@@ -155,7 +154,6 @@ const newSemanticColors = {
 			light: newColors.blueGray600,
 			dark: newColors.gray200,
 		},
-		// CAIO_REVIEW, need a brighter color for dark bg
 		contrastTextSecondaryDarkBg: {
 			light: newColors.gray200,
 			dark: newColors.gray200,
@@ -164,6 +162,14 @@ const newSemanticColors = {
 			light: newColors.blueGray500,
 			dark: newColors.gray500,
 		},
+		contrastBorder: {
+			light: newColors.gray500,
+			dark: newColors.blueGray600,
+		},
+		contrastBorderDisabled: {
+			light: newColors.gray100,
+			dark: newColors.blueGray800,
+		},
 		lowContrast: {
 			light: newColors.gray200,
 			dark: newColors.blueGray600,
@@ -264,7 +270,7 @@ const newSemanticColors = {
 			dark: newColors.red600,
 		},
 	},
-	
+
 	/* These are temporary, just for everything not to break */
 	gradient: {
 		color1: {

client/src/Utils/Theme/globalTheme.js

@@ -1,5 +1,4 @@
 import { typographyLevels } from "./constants";
-
 const fontFamilyPrimary = '"Inter" , sans-serif';
 // const fontFamilySecondary = '"Avenir", sans-serif';
 
@@ -300,13 +299,15 @@ const baseTheme = (palette) => ({
 				}),
 			},
 		},
+
 		MuiTextField: {
 			styleOverrides: {
 				root: ({ theme }) => ({
 					"& fieldset": {
-						borderColor: theme.palette.primary.lowContrast,
+						borderColor: theme.palette.primary.contrastBorder,
 						borderRadius: theme.shape.borderRadius,
 					},
+
 					"& .MuiInputBase-input": {
 						padding: ".75em",
 						minHeight: "var(--env-var-height-2)",
@@ -356,10 +357,19 @@ const baseTheme = (palette) => ({
 		MuiOutlinedInput: {
 			styleOverrides: {
 				root: {
-					color: palette.primary.contrastTextTertiary,
-					"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-						borderColor: palette.primary.contrastTextTertiary,
+					"&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+						borderColor: palette.primary.contrastBorderDisabled,
 					},
+					"&.Mui-disabled:hover .MuiOutlinedInput-notchedOutline": {
+						borderColor: palette.primary.contrastBorderDisabled,
+					},
+					"&:hover .MuiOutlinedInput-notchedOutline": {
+						borderColor: palette.primary.contrastText, // Adjust hover border color
+					},
+					"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+						borderColor: palette.accent.main, // Adjust focus border color
+					},
+					color: palette.primary.contrastTextTertiary,
 				},
 			},
 		},
@@ -486,7 +496,7 @@ const baseTheme = (palette) => ({
 				root: ({ theme }) => ({
 					ml: "auto",
 					"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
-						borderColor: theme.palette.primary.lowContrast,
+						borderColor: theme.palette.primary.contrastBorder,
 						width: "auto",
 						whiteSpace: "nowrap",
 					},