From adf5e66a8a58f54b346f6be50c8ca635ccdf77f2 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 8 Nov 2021 11:25:51 +0300
Subject: [PATCH] Menu styles fine-tuning

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../item-object-list/item-list-layout.scss    |  9 ++---
 src/renderer/components/menu/menu.scss        | 36 ++++++++++++-------
 src/renderer/themes/lens-dark.json            |  2 +-
 src/renderer/themes/lens-light.json           |  2 +-
 4 files changed, 27 insertions(+), 22 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 2609d0b323..cde039e0ed 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 0db62e278a..cc48125e8c 100644
--- a/src/renderer/components/menu/menu.scss
+++ b/src/renderer/components/menu/menu.scss
@@ -27,10 +27,11 @@
   flex-direction: column;
   background: var(--bgc);
   list-style: none;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--colorVague);
   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;
+  padding: 4px;
 
   &.portal {
     left: -1000px;
@@ -64,19 +65,27 @@
 
 .MenuItem {
   --color: #{$textColorPrimary};
-  --color-active: #{$textColorAccent};
-  --bgc-active: #{$menuActiveBackground};
-  --spacing: #{$padding};
+  --color-active: white;
+  --bgc-active: var(--menuActiveBackground);
 
   position: relative;
   display: flex;
   align-items: center;
   color: var(--color);
-  padding: var(--spacing);
+  padding: 6px var(--padding);
+  margin-bottom: 2px;
   white-space: nowrap;
-  transition: 250ms background;
   text-decoration: none;
   text-overflow: ellipsis;
+  border-radius: 3px;
+
+  &: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 $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 720eef4717..75e40f4562 100644
--- a/src/renderer/themes/lens-dark.json
+++ b/src/renderer/themes/lens-dark.json
@@ -124,7 +124,7 @@
     "inputControlHoverBorder": "#474a4f",
     "lineProgressBackground": "#414448",
     "radioActiveBackground": "#36393e",
-    "menuActiveBackground": "#36393e",
+    "menuActiveBackground": "#3d90ce",
     "menuSelectedOptionBgc": "#36393e",
     "scrollBarColor": "#5f6064",
     "settingsBackground": "#262b2e",
diff --git a/src/renderer/themes/lens-light.json b/src/renderer/themes/lens-light.json
index 69fd21c74f..4085c30bc6 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",
     "scrollBarColor": "#bbbbbb",
     "canvasBackground": "#24292e",