From 0587301cc9b43b6f50f4ca1725ec3667bc4a5671 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 17 Nov 2021 11:30:54 +0300
Subject: [PATCH] Fix drawer icons unexpected outline (#4364)

* Removing MenuItem border in MenuActions

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding hover effect to catalog details icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+catalog/catalog-entity-drawer-menu.tsx |  5 +++--
 src/renderer/components/menu/menu-actions.scss         | 10 +++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx b/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
index 44c2c6f6cc..525afeea68 100644
--- a/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
+++ b/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
@@ -87,6 +87,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
       items.push(
         <MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}>
           <Icon
+            interactive
             tooltip={menuItem.title}
             {...{ [key]: menuItem.icon }}
           />
@@ -98,8 +99,8 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
       <HotbarToggleMenuItem
         key="hotbar-toggle"
         entity={entity}
-        addContent={<Icon material="push_pin" small tooltip="Add to Hotbar"/>}
-        removeContent={<Icon svg="push_off" small tooltip="Remove from Hotbar"/>}
+        addContent={<Icon material="push_pin" interactive small tooltip="Add to Hotbar"/>}
+        removeContent={<Icon svg="push_off" interactive small tooltip="Remove from Hotbar"/>}
       />,
     );
 
diff --git a/src/renderer/components/menu/menu-actions.scss b/src/renderer/components/menu/menu-actions.scss
index 5f2a605ae8..28eb4ea6f3 100644
--- a/src/renderer/components/menu/menu-actions.scss
+++ b/src/renderer/components/menu/menu-actions.scss
@@ -21,7 +21,7 @@
 
 .MenuActions {
   &.toolbar {
-    --flex-gap: #{$padding * 0.5};
+    --flex-gap: var(--padding);
 
     position: static;
     padding: 0;
@@ -31,8 +31,8 @@
     margin-right: var(--flex-gap) !important;
 
     .Icon {
-      color: var(--textColorAccent);
-      padding-right: 0;
+      width: 21px;
+      height: 21px;
     }
 
     .title, .arrow {
@@ -42,6 +42,10 @@
     > .MenuItem {
       background: none !important;
       padding: 0;
+      margin-bottom: 0;
+      border: none;
+      width: 21px;
+      height: 21px;
 
       > .SubMenu {
         $offset: $margin;