<Menu/> styles fine-tuning (#4279)

src/renderer/components/item-object-list/item-list-layout.scss

@@ -58,13 +58,8 @@
 }
 
 .ItemListLayoutVisibilityMenu {
-  .MenuItem {
-    padding: 0;
-  }
-
   .Checkbox {
-    width: 100%;
+    --checkbox-color: inherit;
-    padding: var(--spacing);
+    color: var(--checkbox-color);
-    cursor: pointer;
   }
 }

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 {
+  &.active, &:focus {
-    outline: 2px solid var(--colorInfo);
-  }
-
-  &.active {
     color: var(--color-active);
     background-color: var(--bgc-active);
-    cursor: default;
   }
 
   &.disabled {
@@ -114,3 +118,9 @@
     }
   }
 }
+
+.theme-light {
+  .Menu {
+    border: 1px solid var(--borderColor);
+  }
+}

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",

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",