From 886fba136ac24d4d7ba831539954076e8d9fe149 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 25 Aug 2020 20:09:00 +0300
Subject: [PATCH] Fixing minor light theme issues (#744)

* Cluster Menu scrolling & tooltip fixes

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

* Removing forgotten console.log()

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

* Fix Landing Page in light theme

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

* Updating Chart on every componentDidUpdate

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+landing-page/landing-page.scss           | 24 ++++++++++++++---
 .../cronjob-trigger-dialog.tsx                |  1 -
 src/renderer/components/chart/chart.tsx       |  6 ++---
 .../cluster-manager/clusters-menu.scss        | 17 +++++++++---
 .../cluster-manager/clusters-menu.tsx         | 26 ++++++++++---------
 5 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/renderer/components/+landing-page/landing-page.scss b/src/renderer/components/+landing-page/landing-page.scss
index 6cc726f5d9..0d05c418d8 100644
--- a/src/renderer/components/+landing-page/landing-page.scss
+++ b/src/renderer/components/+landing-page/landing-page.scss
@@ -1,8 +1,24 @@
 .LandingPage {
   height: 100%;
-  background: #282b2f url(../../components/icon/crane.svg) no-repeat;
-  background-position: 0 35%;
-  background-size: 85%;
-  background-clip: content-box;
   text-align: center;
+  z-index: 0;
+
+  &::after {
+    content: "";
+    background: url(../../components/icon/crane.svg) no-repeat;
+    background-position: 0 35%;
+    background-size: 85%;
+    background-clip: content-box;
+    opacity: 1;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    z-index: -1;
+
+    .theme-light & {
+      opacity: 0.2;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx b/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx
index 5075e2fe9c..7f29c0478d 100644
--- a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx
+++ b/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx
@@ -97,7 +97,6 @@ export class CronJobTriggerDialog extends Component<Props> {
   render() {
     const { className, ...dialogProps } = this.props;
     const cronjobName = this.cronjob ? this.cronjob.getName() : "";
-    console.log(cronjobName);
     const header = (
       <h5>
         <Trans>Trigger CronJob <span>{cronjobName}</span></Trans>
diff --git a/src/renderer/components/chart/chart.tsx b/src/renderer/components/chart/chart.tsx
index 92e3619031..a5fa4b9706 100644
--- a/src/renderer/components/chart/chart.tsx
+++ b/src/renderer/components/chart/chart.tsx
@@ -63,14 +63,14 @@ export class Chart extends React.Component<ChartProps> {
     this.renderChart()
   }
 
-  componentDidUpdate(prevProps: ChartProps) {
-    const { data, showChart, redraw } = this.props
+  componentDidUpdate() {
+    const { showChart, redraw } = this.props
     if (redraw) {
       this.chart.destroy()
       this.renderChart()
       return
     }
-    if (!isEqual(prevProps.data, data) && showChart) {
+    if (showChart) {
       if (!this.chart) this.renderChart()
       else this.updateChart()
     }
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>