From fbb97a751affb9099c1225773c3f7534193d6993 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Mon, 16 Sep 2019 04:14:57 +0200
Subject: [PATCH] Fix button hover styles and small issues

---
 src/components/AppLayout/AppLayout.tsx        |  2 +-
 .../MultiAutocompleteSelectField.tsx          | 20 ++++++++++++++++++-
 .../RichTextEditor/RichTextEditor.tsx         | 11 +++-------
 src/theme.ts                                  | 10 +++++++---
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
index 89ff7c089..f9ca5a792 100644
--- a/src/components/AppLayout/AppLayout.tsx
+++ b/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,
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
index 5163272e3..46ebf6cdc 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
+++ b/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: {
diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
index 6c4a7e01c..badfabb74 100644
--- a/src/components/RichTextEditor/RichTextEditor.tsx
+++ b/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",
diff --git a/src/theme.ts b/src/theme.ts
index 62f3e5fbb..afee6e6df 100644
--- a/src/theme.ts
+++ b/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: {