Fix button hover styles and small issues

src/components/AppLayout/AppLayout.tsx

@@ -44,7 +44,7 @@ const styles = (theme: Theme) =>
       bottom: 0,
       gridColumn: 2,
       position: "sticky",
-      zIndex: 1
+      zIndex: 10
     },
     appLoader: {
       height: appLoaderHeight,

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -71,10 +71,28 @@ const styles = (theme: Theme) =>
       margin: `${theme.spacing.unit}px 0`
     },
     menuItem: {
+      "&:focus": {
+        backgroundColor: [
+          theme.palette.background.default,
+          "!important"
+        ] as any,
+        color: theme.palette.primary.main,
+        fontWeight: 400
+      },
+      "&:hover": {
+        backgroundColor: [
+          theme.palette.background.default,
+          "!important"
+        ] as any,
+        color: theme.palette.primary.main,
+        fontWeight: 700
+      },
+      borderRadius: 4,
       display: "grid",
       gridColumnGap: theme.spacing.unit + "px",
-      gridTemplateColumns: "20px 1fr",
+      gridTemplateColumns: "30px 1fr",
       height: "auto",
+      padding: 0,
       whiteSpace: "normal"
     },
     menuItemLabel: {

src/components/RichTextEditor/RichTextEditor.tsx

@@ -101,11 +101,8 @@ const styles = (theme: Theme) =>
           "&:hover": {
             borderColor: theme.palette.primary.main
           },
-          border: `1px ${
-            theme.overrides.MuiOutlinedInput.root.borderColor
-          } solid`,
-          borderTopLeftRadius: 4,
-          borderTopRightRadius: 4,
+          border: `1px ${theme.overrides.MuiOutlinedInput.root.borderColor} solid`,
+          borderRadius: 4,
           padding: "27px 12px 10px",
           position: "relative",
           transition: theme.transitions.duration.shortest + "ms"
@@ -142,9 +139,7 @@ const styles = (theme: Theme) =>
             alignItems: "center",
             background: "none",
             border: "none",
-            borderRight: `1px ${
-              theme.overrides.MuiCard.root.borderColor
-            } solid`,
+            borderRight: `1px ${theme.overrides.MuiCard.root.borderColor} solid`,
             color: theme.typography.body2.color,
             cursor: "pointer",
             display: "inline-flex",

src/theme.ts

@@ -1,5 +1,5 @@
 import { createMuiTheme, Theme } from "@material-ui/core/styles";
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { fade, darken } from "@material-ui/core/styles/colorManipulator";
 import TextField from "@material-ui/core/TextField";
 
 const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) =>
@@ -51,6 +51,11 @@ export default (colors: IThemeColors): Theme =>
             backgroundColor: fade(colors.primary, 0.12)
           }
         },
+        containedPrimary: {
+          "&:hover": {
+            backgroundColor: darken(colors.primary, 0.1)
+          }
+        },
         flat: {
           "& span": {
             color: colors.primary
@@ -215,8 +220,7 @@ export default (colors: IThemeColors): Theme =>
             fontWeight: 400
           },
           borderRadius: 4
-        },
-        selected: {}
+        }
       },
       MuiOutlinedInput: {
         input: {