Applying dark colors to dock regardless of active theme (#1873)

* Appliying dark colors on dock contents

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

* Fix lint error

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

src/renderer/components/+workloads-pods/pods.store.ts

@@ -25,6 +25,7 @@ export class PodsStore extends KubeObjectStore<Pod> {
   async loadKubeMetrics(namespace?: string) {
     try {
       const metrics = await podMetricsApi.list({ namespace });
+
       this.kubeMetrics.replace(metrics);
     } catch (error) {
       console.error("loadKubeMetrics failed", error);

src/renderer/components/ace-editor/ace-editor.scss

@@ -18,33 +18,41 @@
 
   // --Theme customization
 
+  .ace-terminal-theme {
+    background: var(--dockEditorBackground) !important;
+  }
+
   .ace_gutter {
-    color: $textColorSecondary;
-    background-color: $mainBackground;
+    color: #a0a0a0;
+    background-color: var(--dockEditorBackground);
+  }
+
+  .ace_line {
+    color: var(--dockEditorKeyword);
   }
 
   .ace_active-line,
   .ace_gutter-active-line {
-    background: $mainBackground !important;
+    background: var(--dockEditorActiveLineBackground) !important;
   }
 
   .ace_meta.ace_tag {
-    color: $textColorPrimary;
+    color: var(--dockEditorTag);
   }
 
   .ace_constant {
-    color: $lensBlue !important;
+    color: var(--lensBlue) !important;
   }
 
   .ace_keyword {
-    color: $textColorAccent;
+    color: var(--dockEditorKeyword);
   }
 
   .ace_string {
-    color: $colorOk;
+    color: var(--colorOk);
   }
 
   .ace_comment {
-    color: #808080;
+    color: var(--dockEditorComment);
   }
 }

src/renderer/components/ace-editor/ace-editor.tsx

@@ -3,11 +3,9 @@
 import "./ace-editor.scss";
 
 import React from "react";
-import { reaction } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import AceBuild, { Ace } from "ace-builds";
 import { autobind, cssNames, noop } from "../../utils";
-import { themeStore } from "../../theme.store";
 
 interface Props extends Partial<Ace.EditorOptions> {
   className?: string;
@@ -46,25 +44,10 @@ export class AceEditor extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     require("ace-builds/src-noconflict/mode-yaml");
-    require("ace-builds/src-noconflict/theme-dreamweaver");
     require("ace-builds/src-noconflict/theme-terminal");
     require("ace-builds/src-noconflict/ext-searchbox");
   }
 
-  @disposeOnUnmount
-  themeSwitcher = reaction(() => themeStore.activeTheme, () => {
-    this.setTheme(this.theme);
-  });
-
-  get theme() {
-    switch (themeStore.activeTheme.type) {
-      case "light":
-        return "dreamweaver";
-      case "dark":
-        return "terminal";
-    }
-  }
-
   async componentDidMount() {
     const {
       mode, autoFocus, className, hidden, cursorPos,
@@ -74,7 +57,7 @@ export class AceEditor extends React.Component<Props, State> {
 
     // setup editor
     this.editor = AceBuild.edit(this.elem, options);
-    this.setTheme(this.theme);
+    this.setTheme("terminal");
     this.setMode(mode);
     this.setCursorPos(cursorPos);
 

src/renderer/components/dock/pod-log-list.scss

@@ -7,8 +7,8 @@
   overflow: auto;
 
   position: relative;
-  color: $textColorAccent;
-  background: $logsBackground;
+  color: var(--logsForeground);
+  background: var(--logsBackground);
   flex-grow: 1;
 
   .VirtualList {
@@ -20,12 +20,12 @@
       .LogRow {
         padding: 2px 16px;
         height: 18px;  // Must be equal to lineHeight variable in pod-log-list.tsx
-        font-family: $font-monospace;
+        font-family: var(--font-monospace);
         font-size: smaller;
         white-space: pre;
 
         &:hover {
-          background: $logRowHoverBackground;
+          background: var(--logRowHoverBackground);
         }
 
         span {
@@ -66,13 +66,13 @@
   .JumpToBottom {
     position: absolute;
     right: 30px;
-    padding: $unit / 2 $unit * 1.5;
-    border-radius: $unit * 2;
+    padding: 4px 9px;
+    border-radius: 20px;
     z-index: 2;
     top: 20px;
 
     .Icon {
-      --size: $unit * 2;
+      --size: calc(var(--unit) * 2);
     }
   }
 }