diff --git a/src/renderer/components/+workloads-pods/pods.store.ts b/src/renderer/components/+workloads-pods/pods.store.ts index 54cff62e7b..9cd3c3b2f9 100644 --- a/src/renderer/components/+workloads-pods/pods.store.ts +++ b/src/renderer/components/+workloads-pods/pods.store.ts @@ -25,6 +25,7 @@ export class PodsStore extends KubeObjectStore { async loadKubeMetrics(namespace?: string) { try { const metrics = await podMetricsApi.list({ namespace }); + this.kubeMetrics.replace(metrics); } catch (error) { console.error("loadKubeMetrics failed", error); diff --git a/src/renderer/components/ace-editor/ace-editor.scss b/src/renderer/components/ace-editor/ace-editor.scss index ef04a4aa6f..92934f0af0 100644 --- a/src/renderer/components/ace-editor/ace-editor.scss +++ b/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); } } \ No newline at end of file diff --git a/src/renderer/components/ace-editor/ace-editor.tsx b/src/renderer/components/ace-editor/ace-editor.tsx index 2111c2b9a9..68ef92635a 100644 --- a/src/renderer/components/ace-editor/ace-editor.tsx +++ b/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 { className?: string; @@ -46,25 +44,10 @@ export class AceEditor extends React.Component { 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 { // setup editor this.editor = AceBuild.edit(this.elem, options); - this.setTheme(this.theme); + this.setTheme("terminal"); this.setMode(mode); this.setCursorPos(cursorPos); diff --git a/src/renderer/components/dock/pod-log-list.scss b/src/renderer/components/dock/pod-log-list.scss index 9c14f79fa4..3f38309376 100644 --- a/src/renderer/components/dock/pod-log-list.scss +++ b/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); } } } diff --git a/src/renderer/themes/lens-dark.json b/src/renderer/themes/lens-dark.json index 6606af6d15..2cd16aec42 100644 --- a/src/renderer/themes/lens-dark.json +++ b/src/renderer/themes/lens-dark.json @@ -60,7 +60,13 @@ "dockHeadBackground": "#2e3136", "dockInfoBackground": "#1e2125", "dockInfoBorderColor": "#303136", + "dockEditorBackground": "#000000", + "dockEditorTag": "#8e97a3", + "dockEditorKeyword": "#ffffff", + "dockEditorComment": "#808080", + "dockEditorActiveLineBackground": "#3a3d41", "logsBackground": "#000000", + "logsForeground": "#ffffff", "logRowHoverBackground": "#35373a", "terminalBackground": "#000000", "terminalForeground": "#ffffff", diff --git a/src/renderer/themes/lens-light.json b/src/renderer/themes/lens-light.json index ebd8441a9b..d5740f1505 100644 --- a/src/renderer/themes/lens-light.json +++ b/src/renderer/themes/lens-light.json @@ -61,28 +61,34 @@ "dockHeadBackground": "#e8e8e8", "dockInfoBackground": "#e8e8e8", "dockInfoBorderColor": "#c9cfd3", - "logsBackground": "#ffffff", - "logRowHoverBackground": "#eeeeee", - "terminalBackground": "#ffffff", - "terminalForeground": "#2d2d2d", - "terminalCursor": "#2d2d2d", - "terminalCursorAccent": "#ffffff", - "terminalSelection": "#bfbfbf66", - "terminalBlack": "#2d2d2d", - "terminalRed": "#cd3734 ", - "terminalGreen": "#18cf12", - "terminalYellow": "#acb300", - "terminalBlue": "#3d90ce", - "terminalMagenta": "#c100cd", - "terminalCyan": "#07c4b9", + "dockEditorBackground": "#24292e", + "dockEditorTag": "#8e97a3", + "dockEditorKeyword": "#ffffff", + "dockEditorComment": "#808080", + "dockEditorActiveLineBackground": "#3a3d41", + "logsBackground": "#24292e", + "logsForeground": "#ffffff", + "logRowHoverBackground": "#35373a", + "terminalBackground": "#24292e", + "terminalForeground": "#ffffff", + "terminalCursor": "#ffffff", + "terminalCursorAccent": "#000000", + "terminalSelection": "#ffffff77", + "terminalBlack": "#2e3436", + "terminalRed": "#cc0000", + "terminalGreen": "#4e9a06", + "terminalYellow": "#c4a000", + "terminalBlue": "#3465a4", + "terminalMagenta": "#75507b", + "terminalCyan": "#06989a", "terminalWhite": "#d3d7cf", - "terminalBrightBlack": "#a8a8a8", - "terminalBrightRed": "#ff6259", - "terminalBrightGreen": "#5cdb59", - "terminalBrightYellow": "#f8c000", - "terminalBrightBlue": "#008db6", - "terminalBrightMagenta": "#ee55f8", - "terminalBrightCyan": "#50e8df", + "terminalBrightBlack": "#555753", + "terminalBrightRed": "#ef2929", + "terminalBrightGreen": "#8ae234", + "terminalBrightYellow": "#fce94f", + "terminalBrightBlue": "#729fcf", + "terminalBrightMagenta": "#ad7fa8", + "terminalBrightCyan": "#34e2e2", "terminalBrightWhite": "#eeeeec", "dialogTextColor": "#87909c", "dialogBackground": "#ffffff", @@ -109,6 +115,7 @@ "lineProgressBackground": "#e8e8e8", "radioActiveBackground": "#f1f1f1", "menuActiveBackground": "#e8e8e8", - "scrollBarColor": "#bbbbbb" + "scrollBarColor": "#bbbbbb", + "canvasBackground": "#24292e" } }