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>

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"/>}
       />,
     );
 

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;