Fix disabled input style

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"
   },

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
             }
           },