From 849ec4f95f16cac425a0752c538331cb3eb8ff80 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 25 Aug 2020 16:39:24 +0300
Subject: [PATCH] Cluster Menu scrolling & tooltip fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../cluster-manager/clusters-menu.scss        | 17 +++++++++---
 .../cluster-manager/clusters-menu.tsx         | 26 ++++++++++---------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/cluster-manager/clusters-menu.scss b/src/renderer/components/cluster-manager/clusters-menu.scss
index 0ee1f59d7e..9b412e5035 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.scss
+++ b/src/renderer/components/cluster-manager/clusters-menu.scss
@@ -1,5 +1,4 @@
 .ClustersMenu {
-  @include hidden-scrollbar;
   $spacing: $padding * 2;
 
   position: relative;
@@ -23,8 +22,7 @@
     padding: $spacing;
     width: 320px;
     background: $bgc;
-    z-index: 100;
-    color: white;
+    color: $textColorAccent;
     filter: drop-shadow(0 0px 2px #ffffff33);
     pointer-events: none;
 
@@ -38,6 +36,19 @@
       border-right: $arrowSize solid $bgc;
       right: 100%;
     }
+
+    .theme-light & {
+      filter: drop-shadow(0 0px 2px #777);
+      background: white;
+
+      &:before {
+        border-right-color: white;
+      }
+    }
+  }
+
+  .clusters {
+    @include hidden-scrollbar;
   }
 
   > .add-cluster {
diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx
index 23d85507c3..d4fb4cefb1 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.tsx
+++ b/src/renderer/components/cluster-manager/clusters-menu.tsx
@@ -110,18 +110,20 @@ export class ClustersMenu extends React.Component<Props> {
             </p>
           </div>
         )}
-        {clusters.map(cluster => {
-          return (
-            <ClusterIcon
-              key={cluster.id}
-              showErrors={true}
-              cluster={cluster}
-              isActive={cluster.id === getMatchedClusterId()}
-              onClick={() => this.showCluster(cluster.id)}
-              onContextMenu={() => this.showContextMenu(cluster)}
-            />
-          )
-        })}
+        <div className="clusters flex column gaps">
+          {clusters.map(cluster => {
+            return (
+              <ClusterIcon
+                key={cluster.id}
+                showErrors={true}
+                cluster={cluster}
+                isActive={cluster.id === getMatchedClusterId()}
+                onClick={() => this.showCluster(cluster.id)}
+                onContextMenu={() => this.showContextMenu(cluster)}
+              />
+            )
+          })}
+        </div>
         <div className="add-cluster" onClick={this.addCluster}>
           <Tooltip targetId="add-cluster-icon">
             <Trans>Add Cluster</Trans>