From df230d2beca5fd24b4a69ef944e69e880c5b3548 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 16 Nov 2021 19:14:28 +0300
Subject: [PATCH] <Menu/> styles fine-tuning (#4279)

---
 .../item-object-list/item-list-layout.scss    |  9 ++----
 src/renderer/components/menu/menu.scss        | 32 ++++++++++++-------
 src/renderer/themes/lens-dark.json            |  2 +-
 src/renderer/themes/lens-light.json           |  2 +-
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/renderer/components/item-object-list/item-list-layout.scss b/src/renderer/components/item-object-list/item-list-layout.scss
index 8a71f9cb05..9318f9e482 100644
--- a/src/renderer/components/item-object-list/item-list-layout.scss
+++ b/src/renderer/components/item-object-list/item-list-layout.scss
@@ -58,13 +58,8 @@
 }
 
 .ItemListLayoutVisibilityMenu {
-  .MenuItem {
-    padding: 0;
-  }
-
   .Checkbox {
-    width: 100%;
-    padding: var(--spacing);
-    cursor: pointer;
+    --checkbox-color: inherit;
+    color: var(--checkbox-color);
   }
 }
diff --git a/src/renderer/components/menu/menu.scss b/src/renderer/components/menu/menu.scss
index a77eda0a6b..b9403436d5 100644
--- a/src/renderer/components/menu/menu.scss
+++ b/src/renderer/components/menu/menu.scss
@@ -29,7 +29,7 @@
   list-style: none;
   border: 1px solid var(--borderColor);
   z-index: 101;
-  box-shadow: rgba(0,0,0,0.24) 0px 8px 16px 0px;
+  box-shadow: rgb(0 0 0 / 17%) 0px 6px 9px 0px;
   border-radius: 4px;
 
   &.portal {
@@ -64,19 +64,28 @@
 
 .MenuItem {
   --color: var(--textColorPrimary);
-  --color-active: var(--textColorAccent);
+  --color-active: white;
   --bgc-active: var(--menuActiveBackground);
-  --spacing: #{$padding};
 
   position: relative;
   display: flex;
   align-items: center;
   color: var(--color);
-  padding: var(--spacing);
+  padding: 6px var(--padding);
+  margin-bottom: -3px;
   white-space: nowrap;
-  transition: 250ms background;
   text-decoration: none;
   text-overflow: ellipsis;
+  border-radius: 6px;
+  border: 3px solid var(--bgc);
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  &:not(.disabled) {
+    cursor: pointer;
+  }
 
   &:hover:not(.disabled) {
     color: var(--color-active);
@@ -84,14 +93,9 @@
     cursor: pointer;
   }
 
-  &:focus {
-    outline: 2px solid var(--colorInfo);
-  }
-
-  &.active {
+  &.active, &:focus {
     color: var(--color-active);
     background-color: var(--bgc-active);
-    cursor: default;
   }
 
   &.disabled {
@@ -114,3 +118,9 @@
     }
   }
 }
+
+.theme-light {
+  .Menu {
+    border: 1px solid var(--borderColor);
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/themes/lens-dark.json b/src/renderer/themes/lens-dark.json
index 87d653f7fa..023f9f6ccf 100644
--- a/src/renderer/themes/lens-dark.json
+++ b/src/renderer/themes/lens-dark.json
@@ -125,7 +125,7 @@
     "inputControlHoverBorder": "#474a4f",
     "lineProgressBackground": "#414448",
     "radioActiveBackground": "#36393e",
-    "menuActiveBackground": "#36393e",
+    "menuActiveBackground": "#3d90ce",
     "menuSelectedOptionBgc": "#36393e",
     "canvasBackground": "#24292e",
     "scrollBarColor": "#5f6064",
diff --git a/src/renderer/themes/lens-light.json b/src/renderer/themes/lens-light.json
index d872823b8e..8525d31a56 100644
--- a/src/renderer/themes/lens-light.json
+++ b/src/renderer/themes/lens-light.json
@@ -125,7 +125,7 @@
     "inputControlHoverBorder": "#b9bbbe",
     "lineProgressBackground": "#e8e8e8",
     "radioActiveBackground": "#f1f1f1",
-    "menuActiveBackground": "#e8e8e8",
+    "menuActiveBackground": "#3d90ce",
     "menuSelectedOptionBgc": "#e8e8e8",
     "canvasBackground": "#24292e",
     "scrollBarColor": "#bbbbbb",