From 3ee2738f147f3e84139b9b0a7e33de6b3f7cd04d Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Fri, 15 Oct 2021 12:33:25 +0300
Subject: [PATCH] - use monaco editor theme `vs-dark` for lens-dark.json theme
 (agreed with Alex) - clean up theme.store.ts

Signed-off-by: Roman <ixrock@gmail.com>
---
 src/renderer/theme.store.ts        | 30 +++++++++++++++++-------------
 src/renderer/themes/lens-dark.json |  2 +-
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/renderer/theme.store.ts b/src/renderer/theme.store.ts
index 8fccc7d157..4df0a76809 100644
--- a/src/renderer/theme.store.ts
+++ b/src/renderer/theme.store.ts
@@ -20,41 +20,45 @@
  */
 
 import { computed, makeObservable, observable, reaction } from "mobx";
-import { autoBind, iter, Singleton } from "./utils";
+import { autoBind, Singleton } from "./utils";
 import { UserStore } from "../common/user-store";
 import logger from "../main/logger";
-import darkTheme from "./themes/lens-dark.json";
-import lightTheme from "./themes/lens-light.json";
+import lensDarkTheme from "./themes/lens-dark.json";
+import lensLightTheme from "./themes/lens-light.json";
 import type { SelectOption } from "./components/select";
 import type { MonacoEditorProps } from "./components/monaco-editor";
 
 export type ThemeId = string;
 
 export interface Theme {
-  type: "dark" | "light" | string;
+  id?: ThemeId;
   name: string;
+  type: "dark" | "light";
   colors: Record<string, string>;
   description: string;
   author: string;
   monacoTheme: MonacoEditorProps["theme"];
 }
 
-export interface ThemeItems extends Theme {
-  id: string;
-}
-
 export class ThemeStore extends Singleton {
   static readonly defaultTheme = "lens-dark";
   protected styles: HTMLStyleElement;
 
   // bundled themes from `themes/${themeId}.json`
   private allThemes = observable.map<string, Theme>({
-    "lens-dark": darkTheme,
-    "lens-light": lightTheme,
+    "lens-dark": lensDarkTheme as Theme,
+    "lens-light": lensLightTheme as Theme,
   });
 
-  @computed get themes(): ThemeItems[] {
-    return Array.from(iter.map(this.allThemes, ([id, theme]) => ({ id, ...theme })));
+  @computed get themes() {
+    return Array.from(this.allThemes.entries()).map(([themeId, themeOriginal]) => {
+      const theme: Required<Theme> = {
+        id: themeId, // take id from map's key
+        ...themeOriginal,
+      };
+
+      return theme;
+    });
   }
 
   @computed get activeThemeId(): string {
@@ -62,7 +66,7 @@ export class ThemeStore extends Singleton {
   }
 
   @computed get activeTheme(): Theme {
-    return this.allThemes.get(this.activeThemeId) ?? this.allThemes.get("lens-dark");
+    return this.allThemes.get(this.activeThemeId) ?? this.allThemes.get(ThemeStore.defaultTheme);
   }
 
   @computed get themeOptions(): SelectOption<string>[] {
diff --git a/src/renderer/themes/lens-dark.json b/src/renderer/themes/lens-dark.json
index 720eef4717..c24f8fdde8 100644
--- a/src/renderer/themes/lens-dark.json
+++ b/src/renderer/themes/lens-dark.json
@@ -3,7 +3,7 @@
   "type": "dark",
   "description": "Original Lens dark theme",
   "author": "Mirantis",
-  "monacoTheme": "clouds-midnight",
+  "monacoTheme": "vs-dark",
   "colors": {
     "blue": "#3d90ce",
     "magenta": "#c93dce",