diff --git a/src/components/Theme/ThemeProvider.tsx b/src/components/Theme/ThemeProvider.tsx index 4212e050e..a62ad938c 100644 --- a/src/components/Theme/ThemeProvider.tsx +++ b/src/components/Theme/ThemeProvider.tsx @@ -26,7 +26,8 @@ const dark: IThemeColors = { input: { border: "#9d9d9d", default: "#25262A", - disabled: "none", + disabled: "#393939", + disabledBackground: "#292A2D", text: "#FCFCFC", textHover: "#616161" }, @@ -55,6 +56,8 @@ const light: IThemeColors = { border: "#616161", default: "#FFFFFF", disabled: "#EAEAEA", + disabledBackground: "#F4F4F4", + disabledText: "#9D9D9D", text: "#3D3D3D", textHover: "#616161" }, diff --git a/src/theme.ts b/src/theme.ts index e9c6fc811..ee8738e96 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -22,7 +22,13 @@ export type IThemeColors = Record< gray: Record<"default" | "disabled", string>; } & { input: Record< - "default" | "border" | "disabled" | "text" | "textHover", + | "default" + | "border" + | "disabled" + | "disabledBackground" + | "disabledText" + | "text" + | "textHover", string >; }; @@ -121,6 +127,9 @@ export default (colors: IThemeColors): Theme => } }, MuiInputLabel: { + disabled: { + color: `${fade(colors.primary, 0.4)} !important` as any + }, formControl: { transform: "translate(0, 1.5px) scale(0.75)", transformOrigin: "top left" as "top left", @@ -197,10 +206,11 @@ export default (colors: IThemeColors): Theme => }, "&$disabled": { "& fieldset": { - backgroundColor: colors.input.disabled + backgroundColor: colors.input.disabledBackground, + borderColor: [[colors.input.disabled], "!important"] as any }, "& input": { - color: colors.input.text, + color: colors.input.disabledText, zIndex: 2 } },