fixes: cluster-icon/clusters-menu

Signed-off-by: Roman <ixrock@gmail.com>

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 {

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 (

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;
     }
   }
 

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 && (