From c7cd531aebbefdb1126c237463f3d481c2996e5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= <flesz3@o2.pl>
Date: Fri, 4 Dec 2020 13:45:49 +0100
Subject: [PATCH] Fix Chrome 87 fieldset rendering bug (#883)

* Fix order page gray box

* Fix shipping page gray boxes

* Do not put background to fieldsets

Fixes Chrome 87 bug

* Fix disabled style

* Update snapshots

* Trigger CI

* Revert card changes
---
 .../SingleSelectField/SingleSelectField.tsx   |   7 +-
 src/components/Timeline/Timeline.tsx          |   3 -
 .../__snapshots__/Stories.test.ts.snap        |  52 +--
 src/theme.ts                                  | 311 +++++++++---------
 4 files changed, 194 insertions(+), 179 deletions(-)

diff --git a/src/components/SingleSelectField/SingleSelectField.tsx b/src/components/SingleSelectField/SingleSelectField.tsx
index 170b33ef8..a42723d64 100644
--- a/src/components/SingleSelectField/SingleSelectField.tsx
+++ b/src/components/SingleSelectField/SingleSelectField.tsx
@@ -18,6 +18,9 @@ const useStyles = makeStyles(
       },
       width: "100%"
     },
+    label: {
+      zIndex: 3
+    },
     noLabel: {
       padding: theme.spacing(2, 1.5)
     }
@@ -77,7 +80,9 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
       error={error}
       disabled={disabled}
     >
-      <InputLabel shrink={!!value}>{label}</InputLabel>
+      <InputLabel className={classes.label} shrink={!!value}>
+        {label}
+      </InputLabel>
       <Select
         variant="outlined"
         fullWidth
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
index e5d26d3e1..128c9b7f7 100644
--- a/src/components/Timeline/Timeline.tsx
+++ b/src/components/Timeline/Timeline.tsx
@@ -28,9 +28,6 @@ const useStyles = makeStyles(
       "& > div": {
         padding: "0 14px"
       },
-      "& fieldset": {
-        background: theme.palette.background.paper
-      },
       "& textarea": {
         "&::placeholder": {
           opacity: [[1], "!important"] as any
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 897a71360..6007371b6 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -2455,7 +2455,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
             class="MuiFormControl-root-id SingleSelectField-formControl-id"
           >
             <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
               data-shrink="true"
             />
             <div
@@ -3025,7 +3025,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             class="MuiFormControl-root-id SingleSelectField-formControl-id"
           >
             <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
               data-shrink="true"
             />
             <div
@@ -7124,7 +7124,7 @@ exports[`Storyshots Generics / PhoneField default 1`] = `
           class="MuiFormControl-root-id SingleSelectField-formControl-id"
         >
           <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+            class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
             data-shrink="true"
           />
           <div
@@ -8716,7 +8716,7 @@ exports[`Storyshots Generics / SingleSelectField with error hint 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-error-id MuiInputLabel-error-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-error-id MuiInputLabel-error-id"
           data-shrink="false"
         />
         <div
@@ -8789,7 +8789,7 @@ exports[`Storyshots Generics / SingleSelectField with hint 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
           data-shrink="false"
         />
         <div
@@ -8862,7 +8862,7 @@ exports[`Storyshots Generics / SingleSelectField with label 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
           data-shrink="false"
         >
           Lorem ipsum
@@ -8932,7 +8932,7 @@ exports[`Storyshots Generics / SingleSelectField with label and hint 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
           data-shrink="false"
         >
           Lorem
@@ -9007,7 +9007,7 @@ exports[`Storyshots Generics / SingleSelectField with no value 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
           data-shrink="false"
         />
         <div
@@ -9075,7 +9075,7 @@ exports[`Storyshots Generics / SingleSelectField with value 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
           data-shrink="true"
         />
         <div
@@ -9141,7 +9141,7 @@ exports[`Storyshots Generics / SingleSelectField with value, label and hint 1`]
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
           data-shrink="true"
         >
           Lorem
@@ -26166,7 +26166,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -27197,7 +27197,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -28273,7 +28273,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -29356,7 +29356,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -30171,7 +30171,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -31242,7 +31242,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -151353,7 +151353,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -152493,7 +152493,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -153348,7 +153348,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -154149,7 +154149,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
             class="MuiFormControl-root-id SingleSelectField-formControl-id ProductVariantCreatorStock-shortInput-id"
           >
             <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
               data-shrink="true"
             >
               Select Attribute
@@ -154669,7 +154669,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -155269,7 +155269,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
             class="MuiFormControl-root-id SingleSelectField-formControl-id ProductVariantCreatorStock-shortInput-id"
           >
             <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
               data-shrink="true"
             >
               Select Attribute
@@ -155639,7 +155639,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -208002,7 +208002,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Shipping Weight Unit
@@ -208447,7 +208447,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Shipping Weight Unit
@@ -208779,7 +208779,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Shipping Weight Unit
diff --git a/src/theme.ts b/src/theme.ts
index 604f09980..f41621449 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -2,6 +2,7 @@ import Card from "@material-ui/core/Card";
 import Checkbox from "@material-ui/core/Checkbox";
 import { createMuiTheme, Theme } from "@material-ui/core/styles";
 import { darken, fade } from "@material-ui/core/styles/colorManipulator";
+import { Overrides } from "@material-ui/core/styles/overrides";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import { createElement } from "react";
@@ -22,9 +23,164 @@ export const ICONBUTTON_SIZE = 48;
 
 const fontFamily = '"Inter", "roboto", "sans-serif"';
 
-export default (colors: IThemeColors): Theme =>
+const inputOverrides = (colors: IThemeColors): Overrides => ({
+  MuiInput: {
+    input: {
+      "&:-webkit-autofill": {
+        WebkitTextFillColor: colors.font.default,
+        boxShadow: `inset 0 0 0px 9999px ${colors.autofill}`
+      },
+      "&::placeholder": {
+        opacity: "1 !important" as any
+      },
+      color: colors.font.default
+    },
+    underline: {
+      "&:after": {
+        borderBottomColor: colors.primary
+      }
+    }
+  },
+  MuiInputBase: {
+    input: {
+      "&$disabled": {
+        color: colors.input.disabledText
+      },
+      "&::placeholder": {
+        color: colors.font.gray,
+        opacity: "1 !important" as any
+      },
+      zIndex: 2
+    }
+  },
+  MuiInputLabel: {
+    filled: {
+      zIndex: 2
+    },
+    formControl: {
+      transform: "translate(0, 1.5px) scale(0.75)",
+      transformOrigin: "top left" as "top left",
+      width: "100%"
+    },
+    outlined: {
+      "&$shrink": {
+        transform: "translate(12px, 9px) scale(0.75)"
+      },
+      transform: "translate(14px, 18px) scale(1)",
+      zIndex: 9
+    },
+    root: {
+      "&$disabled": {
+        color: `${fade(colors.primary, 0.4)} !important` as any
+      },
+      "&$error": {
+        "&$focused": {
+          color: colors.error
+        },
+        color: colors.error
+      },
+      "&&$focused": {
+        "&:not($error)": {
+          color: colors.primary
+        }
+      },
+      color: fade(colors.input.text, 0.6)
+    },
+    shrink: {
+      // Negates x0.75 scale
+      width: "133%"
+    }
+  },
+  MuiOutlinedInput: {
+    input: {
+      "&:-webkit-autofill": {
+        borderRadius: 4,
+        boxShadow: `0 0 0px 1000px rgba(19, 190, 187, 0.1) inset`,
+        zIndex: 0
+      },
+      color: colors.input.text,
+      padding: "23px 12px 10px 12px"
+    },
+    inputMultiline: {
+      left: -2,
+      padding: "10px 0",
+      position: "relative"
+    },
+    root: {
+      "& fieldset": {
+        "&&:not($error)": {
+          borderColor: colors.input.border
+        },
+        top: 0,
+        zIndex: 1
+      },
+      "& legend": {
+        display: "none"
+      },
+      "&$disabled": {
+        "& fieldset": {
+          borderColor: [[colors.input.disabled], "!important"] as any
+        },
+        "& input": {
+          backgroundColor: colors.input.disabledBackground,
+          color: colors.input.disabledText,
+          zIndex: 2
+        }
+      },
+      "&$error": {
+        "&$focused": {
+          "& fieldset": {
+            borderColor: colors.error
+          },
+          "& input": {
+            color: colors.error,
+            zIndex: 2
+          }
+        },
+        "&:hover": {
+          "& fieldset": {
+            borderColor: colors.error
+          },
+          "& input": {
+            color: colors.error,
+            zIndex: 2
+          }
+        }
+      },
+      "&$focused": {
+        "& input": {
+          "& fieldset": {
+            borderColor: colors.primary
+          },
+          "&::placeholder": {
+            opacity: [[1], "!important"] as any
+          },
+          color: colors.font.default
+        }
+      },
+      "&:hover": {
+        "& input": {
+          color: colors.font.default
+        },
+        "&&&": {
+          "& fieldset": {
+            borderColor: colors.primary
+          },
+          "&$error fieldset": {
+            borderColor: colors.input.error
+          }
+        }
+      },
+      backgroundColor: colors.background.paper,
+      borderColor: colors.input.border,
+      top: 0
+    }
+  }
+});
+const createTheme = (colors: IThemeColors): Theme =>
   createMuiTheme({
     overrides: {
+      ...inputOverrides(colors),
       MuiButton: {
         contained: {
           "&$disabled": {
@@ -145,73 +301,6 @@ export default (colors: IThemeColors): Theme =>
           }
         }
       },
-      MuiInput: {
-        input: {
-          "&:-webkit-autofill": {
-            WebkitTextFillColor: colors.font.default,
-            boxShadow: `inset 0 0 0px 9999px ${colors.autofill}`
-          },
-          "&::placeholder": {
-            opacity: "1 !important" as any
-          },
-          color: colors.font.default
-        },
-        underline: {
-          "&:after": {
-            borderBottomColor: colors.primary
-          }
-        }
-      },
-      MuiInputBase: {
-        input: {
-          "&$disabled": {
-            color: colors.input.disabledText
-          },
-          "&::placeholder": {
-            color: colors.font.gray,
-            opacity: "1 !important" as any
-          },
-          zIndex: 2
-        }
-      },
-      MuiInputLabel: {
-        filled: {
-          zIndex: 2
-        },
-        formControl: {
-          transform: "translate(0, 1.5px) scale(0.75)",
-          transformOrigin: "top left" as "top left",
-          width: "100%"
-        },
-        outlined: {
-          "&$shrink": {
-            transform: "translate(12px, 9px) scale(0.75)"
-          },
-          transform: "translate(14px, 18px) scale(1)",
-          zIndex: 9
-        },
-        root: {
-          "&$disabled": {
-            color: `${fade(colors.primary, 0.4)} !important` as any
-          },
-          "&$error": {
-            "&$focused": {
-              color: colors.error
-            },
-            color: colors.error
-          },
-          "&&$focused": {
-            "&:not($error)": {
-              color: colors.primary
-            }
-          },
-          color: fade(colors.input.text, 0.6)
-        },
-        shrink: {
-          // Negates x0.75 scale
-          width: "133%"
-        }
-      },
       MuiList: {
         root: {
           display: "grid",
@@ -254,89 +343,11 @@ export default (colors: IThemeColors): Theme =>
           borderRadius: 4
         }
       },
-      MuiOutlinedInput: {
-        input: {
-          "&:-webkit-autofill": {
-            borderRadius: 4,
-            boxShadow: `0 0 0px 1000px rgba(19, 190, 187, 0.1) inset`,
-            zIndex: 0
-          },
-          color: colors.input.text,
-          padding: "23px 12px 10px 12px"
-        },
-        inputMultiline: {
-          left: -2,
-          padding: "10px 0",
-          position: "relative"
-        },
+      MuiSelect: {
         root: {
-          "& fieldset": {
-            "&&:not($error)": {
-              borderColor: colors.input.border
-            },
-            top: 0,
-            zIndex: 1
-          },
-          "& legend": {
-            display: "none"
-          },
           "&$disabled": {
-            "& fieldset": {
-              backgroundColor: colors.input.disabledBackground,
-              borderColor: [[colors.input.disabled], "!important"] as any
-            },
-            "& input": {
-              color: colors.input.disabledText,
-              zIndex: 2
-            }
-          },
-          "&$error": {
-            "&$focused": {
-              "& fieldset": {
-                borderColor: colors.error
-              },
-              "& input": {
-                color: colors.error,
-                zIndex: 2
-              }
-            },
-            "&:hover": {
-              "& fieldset": {
-                borderColor: colors.error
-              },
-              "& input": {
-                color: colors.error,
-                zIndex: 2
-              }
-            }
-          },
-          "&$focused": {
-            "& input": {
-              "& fieldset": {
-                borderColor: colors.primary
-              },
-              "&::placeholder": {
-                opacity: [[1], "!important"] as any
-              },
-              color: colors.font.default
-            }
-          },
-          "&:hover": {
-            "& input": {
-              color: colors.font.default
-            },
-            "&&&": {
-              "& fieldset": {
-                borderColor: colors.primary
-              },
-              "&$error fieldset": {
-                borderColor: colors.input.error
-              }
-            }
-          },
-          backgroundColor: colors.background.paper,
-          borderColor: colors.input.border,
-          top: 0
+            backgroundColor: colors.input.disabledBackground
+          }
         }
       },
       MuiSnackbarContent: {
@@ -572,3 +583,5 @@ Checkbox.defaultProps = {
   icon: createElement(CheckboxIcon),
   indeterminateIcon: createElement(CheckboxIndeterminateIcon)
 };
+
+export default createTheme;