From 112114385e5a941314d222968eb8ca3fbe13ab34 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 21 Aug 2020 10:48:33 +0300
Subject: [PATCH] Using .theme-light flag across components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+apps-releases/release-details.scss           |  7 -------
 .../components/ace-editor/ace-editor.scss         | 15 +++++++++------
 src/renderer/components/ace-editor/ace-editor.tsx |  3 +--
 src/renderer/components/dock/terminal-window.scss |  2 +-
 src/renderer/components/drawer/drawer.scss        |  2 +-
 src/renderer/components/drawer/drawer.tsx         |  3 +--
 src/renderer/components/layout/wizard-layout.scss |  4 ++++
 src/renderer/components/table/table.scss          |  4 ++--
 src/renderer/theme.store.ts                       |  4 ++--
 9 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/renderer/components/+apps-releases/release-details.scss b/src/renderer/components/+apps-releases/release-details.scss
index 99d46cb86a..a6fb0e1cf6 100644
--- a/src/renderer/components/+apps-releases/release-details.scss
+++ b/src/renderer/components/+apps-releases/release-details.scss
@@ -1,13 +1,6 @@
 @import "release.mixins";
 
 .ReleaseDetails {
-  &.light {
-    .AceEditor {
-      border: 1px solid gainsboro;
-      border-radius: $radius;
-    }
-  }
-
   .DrawerItem {
     align-items: center;
   }
diff --git a/src/renderer/components/ace-editor/ace-editor.scss b/src/renderer/components/ace-editor/ace-editor.scss
index 8640130842..8a062a24a9 100644
--- a/src/renderer/components/ace-editor/ace-editor.scss
+++ b/src/renderer/components/ace-editor/ace-editor.scss
@@ -5,14 +5,17 @@
   flex: 1;
   z-index: 10;
 
-  &.hidden {
-    visibility: hidden;
+  .theme-light & {
+    border: 1px solid gainsboro;
+    border-radius: $radius;
+
+    .ace_scrollbar {
+      @include custom-scrollbar(dark);
+    }
   }
 
-  &.light {
-    .ace_scrollbar {
-      @include custom-scrollbar($theme: dark);
-    }
+  &.hidden {
+    visibility: hidden;
   }
 
   > .editor {
diff --git a/src/renderer/components/ace-editor/ace-editor.tsx b/src/renderer/components/ace-editor/ace-editor.tsx
index d3edfaa098..d7ae56ebb5 100644
--- a/src/renderer/components/ace-editor/ace-editor.tsx
+++ b/src/renderer/components/ace-editor/ace-editor.tsx
@@ -148,9 +148,8 @@ export class AceEditor extends React.Component<Props, State> {
 
   render() {
     const { className, hidden } = this.props;
-    const themeType = themeStore.activeTheme.type;
     return (
-      <div className={cssNames("AceEditor", className, { hidden }, themeType)}>
+      <div className={cssNames("AceEditor", className, { hidden })}>
         <div className="editor" ref={e => this.elem = e}/>
       </div>
     )
diff --git a/src/renderer/components/dock/terminal-window.scss b/src/renderer/components/dock/terminal-window.scss
index 17cabffdc1..b3a7f99bda 100644
--- a/src/renderer/components/dock/terminal-window.scss
+++ b/src/renderer/components/dock/terminal-window.scss
@@ -5,7 +5,7 @@
   margin-left: $padding * 2;
   margin-top: $padding * 2;
 
-  &.light {
+  .theme-light & {
     .xterm-viewport {
       @include custom-scrollbar(dark);
     }
diff --git a/src/renderer/components/drawer/drawer.scss b/src/renderer/components/drawer/drawer.scss
index f0449f5519..72a2f10eb1 100644
--- a/src/renderer/components/drawer/drawer.scss
+++ b/src/renderer/components/drawer/drawer.scss
@@ -9,7 +9,7 @@
   box-shadow: 0 0 $unit * 2 $boxShadow;
   z-index: $zIndex-drawer;
 
-  &.light {
+  .theme-light & {
     .drawer-content {
       @include custom-scrollbar(dark);
     }
diff --git a/src/renderer/components/drawer/drawer.tsx b/src/renderer/components/drawer/drawer.tsx
index ef14d5c75e..c4c1a3894a 100644
--- a/src/renderer/components/drawer/drawer.tsx
+++ b/src/renderer/components/drawer/drawer.tsx
@@ -6,7 +6,6 @@ import { cssNames, noop } from "../../utils";
 import { Icon } from "../icon";
 import { Animate, AnimateName } from "../animate";
 import { history } from "../../navigation";
-import { themeStore } from "../../theme.store";
 
 export interface DrawerProps {
   open: boolean;
@@ -101,7 +100,7 @@ export class Drawer extends React.Component<DrawerProps> {
   render() {
     const { open, position, title, animation, children, toolbar, size, usePortal } = this.props
     let { className, contentClass } = this.props;
-    className = cssNames("Drawer", className, position, themeStore.activeTheme.type);
+    className = cssNames("Drawer", className, position);
     contentClass = cssNames("drawer-content flex column box grow", contentClass);
     const style = size ? { "--size": size } as React.CSSProperties : undefined;
     const drawer = (
diff --git a/src/renderer/components/layout/wizard-layout.scss b/src/renderer/components/layout/wizard-layout.scss
index cc85c17af4..85aa686cab 100644
--- a/src/renderer/components/layout/wizard-layout.scss
+++ b/src/renderer/components/layout/wizard-layout.scss
@@ -11,6 +11,10 @@
     @include custom-scrollbar;
     --flex-gap: #{$spacing};
     padding: $spacing;
+
+    .theme-light & {
+      @include custom-scrollbar(dark);
+    }
   }
 
   > .head-col {
diff --git a/src/renderer/components/table/table.scss b/src/renderer/components/table/table.scss
index 0c024b38a3..1ff6343598 100644
--- a/src/renderer/components/table/table.scss
+++ b/src/renderer/components/table/table.scss
@@ -1,9 +1,9 @@
 .Table {
   &.scrollable {
-    &.light {
+    .theme-light & {
       @include custom-scrollbar(dark);
     }
-    
+
     @include custom-scrollbar();
     flex: 1 0 0; // hackfix: flex-basis must be "0" for proper work in firefox
   }
diff --git a/src/renderer/theme.store.ts b/src/renderer/theme.store.ts
index d5a24806c4..5245d2a728 100644
--- a/src/renderer/theme.store.ts
+++ b/src/renderer/theme.store.ts
@@ -94,8 +94,8 @@ export class ThemeStore {
     });
     this.styles.textContent = `:root {\n${cssVars.join("\n")}}`;
     // Adding universal theme flag which can be used in component styles
-    const rootElem = document.getElementById("app");
-    rootElem.classList.toggle("theme-light", theme.type === ThemeType.LIGHT);
+    const body = document.querySelector("body");
+    body.classList.toggle("theme-light", theme.type === ThemeType.LIGHT);
   }
 }