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>

src/renderer/components/+landing-page/landing-page.scss

@@ -1,8 +1,24 @@
 .LandingPage {
   height: 100%;
-  background: #282b2f url(../../components/icon/crane.svg) no-repeat;
+  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;
-  text-align: center;
+    opacity: 1;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    z-index: -1;
+
+    .theme-light & {
+      opacity: 0.2;
+    }
+  }
 }

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>

src/renderer/components/chart/chart.tsx

@@ -63,14 +63,14 @@ export class Chart extends React.Component<ChartProps> {
     this.renderChart()
   }
 
-  componentDidUpdate(prevProps: ChartProps) {
+  componentDidUpdate() {
-    const { data, showChart, redraw } = this.props
+    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()
     }

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: $textColorAccent;
-    color: white;
     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 {

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -110,6 +110,7 @@ export class ClustersMenu extends React.Component<Props> {
             </p>
           </div>
         )}
+        <div className="clusters flex column gaps">
           {clusters.map(cluster => {
             return (
               <ClusterIcon
@@ -122,6 +123,7 @@ export class ClustersMenu extends React.Component<Props> {
               />
             )
           })}
+        </div>
         <div className="add-cluster" onClick={this.addCluster}>
           <Tooltip targetId="add-cluster-icon">
             <Trans>Add Cluster</Trans>