Fix dropdown select bg, snackbars styles

src/components/Filter/Filter.tsx

@@ -71,12 +71,12 @@ const styles = (theme: Theme) =>
       top: -5
     },
     paper: {
-      marginTop: theme.spacing.unit * 2,
-      padding: theme.spacing.unit * 2,
-      width: 240,
       "& p": {
         paddingBottom: 10
-      }
+      },
+      marginTop: theme.spacing.unit * 2,
+      padding: theme.spacing.unit * 2,
+      width: 240
     },
     popover: {
       zIndex: 1
@@ -134,9 +134,7 @@ const Filter = withStyles(styles, { name: "Filter" })(
               }}
             >
               <Paper className={classes.paper}>
-                <Typography className={classes.filterLabel}>
-                  {filterLabel}
-                </Typography>
+                <Typography>{filterLabel}</Typography>
                 <FilterContent
                   currencySymbol={currencySymbol}
                   filters={menu}

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -37,7 +37,7 @@ const styles = (theme: Theme) =>
       padding: 8,
       position: "absolute",
       right: 0,
-      zIndex: 2
+      zIndex: 22
     }
   });
 

src/components/SingleSelectField/SingleSelectField.tsx

@@ -1,8 +1,8 @@
-import OutlinedInput from "@material-ui/core/OutlinedInput";
 import FormControl from "@material-ui/core/FormControl";
 import FormHelperText from "@material-ui/core/FormHelperText";
 import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
+import OutlinedInput from "@material-ui/core/OutlinedInput";
 import Select, { SelectProps } from "@material-ui/core/Select";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import classNames from "classnames";

src/components/TableFilter/FilterChips.tsx

@@ -45,8 +45,9 @@ const useStyles = makeStyles(
       actionContainer: {
         display: "flex",
         flexWrap: "wrap",
-        padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit *
-          3}px ${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px`
+        padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px ${
+          theme.spacing.unit
+        }px ${theme.spacing.unit * 3}px`
       },
       filterButton: {
         alignItems: "center",

src/components/TablePagination/TablePaginationActions.tsx

@@ -31,15 +31,15 @@ const styles = (theme: Theme) =>
     },
     disabled: {},
     iconButton: {
-      "& svg": {
-        border: `solid 1px #BDBDBD`,
-        borderRadius: "50%"
-      },
       "& > span:first-of-type": {
         backgroundColor: theme.palette.background.default,
         borderRadius: "100%",
         transition: theme.transitions.duration.standard + "ms"
       },
+      "& svg": {
+        border: `solid 1px #BDBDBD`,
+        borderRadius: "50%"
+      },
       "&:focus, &:hover": {
         "& > span:first-of-type": {
           backgroundColor: fade(theme.palette.primary.main, 0.2)
@@ -48,12 +48,12 @@ const styles = (theme: Theme) =>
       }
     },
     root: {
-      color: theme.palette.text.secondary,
-      flexShrink: 0,
-      margin: `0 ${theme.spacing.unit * 2.5}px`,
       "& button": {
         padding: 6
-      }
+      },
+      color: theme.palette.text.secondary,
+      flexShrink: 0,
+      margin: `0 ${theme.spacing.unit * 2.5}px`
     }
   });
 

src/components/Theme/ThemeProvider.tsx

@@ -28,6 +28,7 @@ const dark: IThemeColors = {
     default: "#25262A",
     disabled: "#393939",
     disabledBackground: "#292A2D",
+    disabledText: "#9D9D9D",
     text: "#FCFCFC",
     textHover: "#616161"
   },

src/components/Timeline/Timeline.tsx

@@ -96,9 +96,6 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
             placeholder={intl.formatMessage({
               defaultMessage: "Leave your note here..."
             })}
-            // label={intl.formatMessage({
-            //   defaultMessage: "Leave your note here..."
-            // })}
             onChange={onChange}
             value={message}
             name="message"

src/theme.ts

@@ -136,13 +136,14 @@ export default (colors: IThemeColors): Theme =>
           "&$shrink": {
             transform: "translate(12px, 6px) scale(0.75)"
           },
-          transform: "translate(14px, 14px) scale(1)"
+          transform: "translate(14px, 14px) scale(1)",
+          zIndex: 9
         },
         root: {
-          color: colors.input.text,
           "&$disabled": {
             color: `${fade(colors.primary, 0.4)} !important` as any
-          }
+          },
+          color: colors.input.text
         },
         shrink: {
           // Negates x0.75 scale
@@ -178,14 +179,30 @@ export default (colors: IThemeColors): Theme =>
       },
       MuiMenuItem: {
         root: {
-          "&:hover, &$selected, &$selected:focus": {
-            backgroundColor: colors.input.default
+          "&$selected, &$selected:focus": {
+            backgroundColor: [colors.background.default, "!important"] as any,
+            color: colors.primary,
+            fontWeight: 700
+          },
+          "&:hover": {
+            backgroundColor: [colors.background.default, "!important"] as any,
+            color: colors.font.default,
+            fontWeight: 400
           },
           borderRadius: 4
-        }
+        },
+        selected: {}
       },
       MuiOutlinedInput: {
         input: {
+          "&:-webkit-autofill": {
+            boxShadow: `0 0 0px 1000px rgba(19, 190, 187, 0.1) inset`,
+            left: 1,
+            position: "relative",
+            top: -3,
+            width: `calc(100% - 26px)`,
+            zIndex: 0
+          },
           "&::placeholder": {
             opacity: [[0], "!important"] as any
           },
@@ -243,6 +260,19 @@ export default (colors: IThemeColors): Theme =>
           padding: ["15px 12px 17px", "!important"] as any
         }
       },
+      MuiSnackbarContent: {
+        action: {
+          "& $MuiIconButton": {
+            "& svg": {
+              color: colors.font.default
+            }
+          }
+        },
+        root: {
+          backgroundColor: colors.background.paper,
+          color: colors.font.default
+        }
+      },
       MuiSwitch: {
         bar: {
           "$colorPrimary$checked + &": {