From 10bb420afacc83eb81ad488a6be76a3feba51dec Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 21 Aug 2020 09:27:51 +0300
Subject: [PATCH] Using theme-light global flag

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../kubeconfig-dialog/kubeconfig-dialog.scss          |  2 +-
 .../kubeconfig-dialog/kubeconfig-dialog.tsx           |  3 +--
 src/renderer/components/layout/main-layout.scss       | 11 ++++-------
 src/renderer/components/layout/main-layout.tsx        |  3 +--
 src/renderer/components/layout/sidebar.scss           |  4 ++++
 .../components/virtual-list/virtual-list.scss         | 11 +++++------
 6 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss
index 24a32b6f74..7803026ae7 100644
--- a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss
+++ b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss
@@ -1,5 +1,5 @@
 .KubeConfigDialog {
-  &.light {
+  .theme-light & {
     .AceEditor {
       border: 1px solid gainsboro;
       border-radius: $radius;
diff --git a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
index 68f0a93129..d2f2f1a06f 100644
--- a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
+++ b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
@@ -13,7 +13,6 @@ import { Dialog, DialogProps } from "../dialog";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
 import { Wizard, WizardStep } from "../wizard";
-import { themeStore } from "../../theme.store";
 import { apiBase } from "../../api";
 
 interface IKubeconfigDialogData {
@@ -92,7 +91,7 @@ export class KubeConfigDialog extends React.Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        className={cssNames("KubeConfigDialog", themeStore.activeTheme.type)}
+        className={cssNames("KubeConfigDialog")}
         isOpen={isOpen}
         onOpen={this.onOpen}
         close={this.close}
diff --git a/src/renderer/components/layout/main-layout.scss b/src/renderer/components/layout/main-layout.scss
index 9174852643..e9980bb3fb 100755
--- a/src/renderer/components/layout/main-layout.scss
+++ b/src/renderer/components/layout/main-layout.scss
@@ -8,13 +8,6 @@
   grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
   height: 100%;
 
-  &.light {
-    main {
-      @include custom-scrollbar(dark);
-      overflow-y: scroll;
-    }
-  }
-
   > .Tabs {
     grid-area: tabs;
     background: $layoutTabsBackground;
@@ -69,6 +62,10 @@
     @include custom-scrollbar;
     $spacing: $margin * 2;
 
+    .theme-light & {
+      @include custom-scrollbar(dark);
+    }
+
     grid-area: main;
     overflow-y: scroll; // always reserve space for scrollbar (17px)
     overflow-x: auto;
diff --git a/src/renderer/components/layout/main-layout.tsx b/src/renderer/components/layout/main-layout.tsx
index 678f4d8876..c81a42cb4a 100755
--- a/src/renderer/components/layout/main-layout.tsx
+++ b/src/renderer/components/layout/main-layout.tsx
@@ -11,7 +11,6 @@ import { ErrorBoundary } from "../error-boundary";
 import { Dock } from "../dock";
 import { navigate, navigation } from "../../navigation";
 import { getHostedCluster } from "../../../common/cluster-store";
-import { themeStore } from "../../theme.store";
 
 export interface TabRoute extends RouteProps {
   title: React.ReactNode;
@@ -50,7 +49,7 @@ export class MainLayout extends React.Component<Props> {
     const routePath = navigation.location.pathname;
     const cluster = getHostedCluster();
     return (
-      <div className={cssNames("MainLayout", className, themeStore.activeTheme.type)}>
+      <div className={cssNames("MainLayout", className)}>
         <header className={cssNames("flex gaps align-center", headerClass)}>
           <span className="cluster">
             {cluster.preferences?.clusterName || cluster.contextName}
diff --git a/src/renderer/components/layout/sidebar.scss b/src/renderer/components/layout/sidebar.scss
index 9e9ec63622..f863d374cd 100644
--- a/src/renderer/components/layout/sidebar.scss
+++ b/src/renderer/components/layout/sidebar.scss
@@ -20,6 +20,10 @@
   &.pinned {
     .sidebar-nav {
       @include custom-scrollbar;
+
+      .theme-light & {
+        @include custom-scrollbar(dark);
+      }
     }
   }
 
diff --git a/src/renderer/components/virtual-list/virtual-list.scss b/src/renderer/components/virtual-list/virtual-list.scss
index 2ab6490d7a..73d352cacf 100644
--- a/src/renderer/components/virtual-list/virtual-list.scss
+++ b/src/renderer/components/virtual-list/virtual-list.scss
@@ -1,14 +1,13 @@
 .VirtualList {
   overflow: hidden;
 
-  &.light {
-    .list {
-      @include custom-scrollbar(dark);
-    }
-  }
-
   > .list {
     @include custom-scrollbar;
+
+    .theme-light & {
+      @include custom-scrollbar(dark);
+    }
+
     overflow-y: overlay !important;
     overflow-x: hidden !important;
   }