From 7eee65dba541a55c0d0f4333a6683dc5fd6f3a50 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Mon, 27 Jul 2020 16:52:51 +0300
Subject: [PATCH] fixes: cluster-icon/clusters-menu

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../+cluster-settings/cluster-icon.scss           |  4 ++--
 .../components/+cluster-settings/cluster-icon.tsx |  2 +-
 .../components/cluster-manager/clusters-menu.scss | 15 ++++++++-------
 .../components/cluster-manager/clusters-menu.tsx  |  2 +-
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/+cluster-settings/cluster-icon.scss b/src/renderer/components/+cluster-settings/cluster-icon.scss
index 4da483d54d..296cd1f8f7 100644
--- a/src/renderer/components/+cluster-settings/cluster-icon.scss
+++ b/src/renderer/components/+cluster-settings/cluster-icon.scss
@@ -2,15 +2,15 @@
   --size: 37px;
 
   position: relative;
-  opacity: .75;
+  opacity: .55;
   border-radius: $radius;
+  padding: $radius;
   user-select: none;
   cursor: pointer;
 
   &.active, &.interactive:hover {
     opacity: 1;
     background-color: #fff;
-    box-shadow: 0 0 0 $radius #fff;
   }
 
   > img {
diff --git a/src/renderer/components/+cluster-settings/cluster-icon.tsx b/src/renderer/components/+cluster-settings/cluster-icon.tsx
index a6266a2bcd..8a6146770f 100644
--- a/src/renderer/components/+cluster-settings/cluster-icon.tsx
+++ b/src/renderer/components/+cluster-settings/cluster-icon.tsx
@@ -38,7 +38,7 @@ export class ClusterIcon extends React.Component<Props> {
     const { clusterName, icon } = preferences;
     const clusterIconId = `cluster-icon-${clusterId}`;
     const className = cssNames("ClusterIcon flex inline", this.props.className, {
-      interactive: interactive || !!this.props.onClick,
+      interactive: interactive !== undefined ? interactive : !!this.props.onClick,
       active: isActive,
     });
     return (
diff --git a/src/renderer/components/cluster-manager/clusters-menu.scss b/src/renderer/components/cluster-manager/clusters-menu.scss
index 8e1733a725..8e728e97f2 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.scss
+++ b/src/renderer/components/cluster-manager/clusters-menu.scss
@@ -1,11 +1,13 @@
 .ClustersMenu {
+  $spacing: $padding * 2;
+
   position: relative;
   text-align: center;
-  padding: $padding * 2;
+  padding: $spacing;
   background: var(--clusters-menu-bgc);
 
   .is-mac & {
-    padding-top: $padding * 3;
+    padding-top: $spacing * 2;
   }
 
   > .startup-tooltip {
@@ -16,7 +18,7 @@
     top: 20px;
     left: 100%;
     margin: $padding;
-    padding: $padding * 2;
+    padding: $spacing;
     width: 320px;
     background: $bgc;
     z-index: 100;
@@ -37,12 +39,11 @@
   }
 
   > .clusters {
-    //@include hidden-scrollbar; // fixme: uncomment after refactoring tooltip.tsx
-    --flex-gap: #{$padding * 2};
-    margin: var(--flex-gap) 0;
+    @include hidden-scrollbar;
+    margin-bottom: $spacing !important;
 
     &:empty {
-      margin-bottom: 0;
+      display: none;
     }
   }
 
diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx
index 008adf3ffa..164ecb7973 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.tsx
+++ b/src/renderer/components/cluster-manager/clusters-menu.tsx
@@ -90,7 +90,7 @@ export class ClustersMenu extends React.Component<Props> {
     const showStartupHint = this.showHint && isLanding && noClusters;
     return (
       <div
-        className={cssNames("ClustersMenu flex column", className)}
+        className={cssNames("ClustersMenu flex column gaps", className)}
         onMouseEnter={() => this.showHint = false}
       >
         {showStartupHint && (