Fix styling issues

Author: christianalfoni

packages/app/src/app/components/CodeEditor/VSCode/index.tsx

@@ -10,6 +10,9 @@ import { ThemeProvider } from 'styled-components';
 import { Configuration } from './Configuration';
 import { Container, GlobalStyles } from './elements';
 
+import './icon-theme.css';
+import './workbench-theme.css';
+
 export const VSCode: React.FunctionComponent = () => {
   const { state, actions, effects } = useOvermind();
   const containerEl = useRef(null);

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -523,8 +523,7 @@ export class VSCodeEffect {
   }
 
   private prepareElements() {
-    this.elements.editor.id = 'workbench.main.container';
-    this.elements.editor.className = 'monaco-workbench mac nopanel';
+    this.elements.editor.className = 'monaco-workbench';
     this.elements.editor.style.width = '100%';
     this.elements.editor.style.height = '100%';
 

packages/app/src/app/pages/Sandbox/Editor/Content/index.tsx

@@ -107,6 +107,7 @@ export const Content: React.FC = () => {
       }}
     >
       <div
+        id="workbench.main.container"
         className="monaco-workbench mac nopanel"
         style={{
           height: '100%',

packages/app/src/app/pages/Sandbox/Editor/index.tsx

@@ -36,11 +36,11 @@ const ContentSplit: React.FC = () => {
 
   useEffect(() => {
     async function loadTheme() {
-      const { customVSCodeTheme } = state.preferences.settings;
+      const vsCodeTheme = state.preferences.settings.customVSCodeTheme;
 
       try {
-        const theme = await getVSCodeTheme('', customVSCodeTheme);
-        setLocalState({ theme, customVSCodeTheme });
+        const theme = await getVSCodeTheme('', vsCodeTheme);
+        setLocalState({ theme, vsCodeTheme });
       } catch (e) {
         console.error(e);
       }
@@ -51,7 +51,10 @@ const ContentSplit: React.FC = () => {
     ) {
       loadTheme();
     }
-  }, [localState.customVSCodeTheme, state.preferences.settings]);
+  }, [
+    localState.customVSCodeTheme,
+    state.preferences.settings.customVSCodeTheme,
+  ]);
 
   useEffect(() => {
     statusbarEl.current.appendChild(effects.vscode.getStatusbarElement());

yarn.lock

@@ -1142,14 +1142,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@cerebral/http@^4.0.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@cerebral/http/-/http-4.2.3.tgz#58e0251ab582241f8cca2f3ff4d5133df7f945a7"
-
-"@cerebral/mobx-state-tree@^3.0.0":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@cerebral/mobx-state-tree/-/mobx-state-tree-3.2.2.tgz#d11e74a5a3e99ae4e29e13d555e3b22221a801dc"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -7455,13 +7447,6 @@ ccount@^1.0.0, ccount@^1.0.3:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.4.tgz#9cf2de494ca84060a2a8d2854edd6dfb0445f386"
   integrity sha512-fpZ81yYfzentuieinmGnphk0pLkOTMm6MZdVqwd77ROvhko6iujLNGrHH5E7utq3ygWklwfmwuG+A7P+NpqT6w==
 
-cerebral@^4.0.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/cerebral/-/cerebral-4.2.2.tgz#11fe5c51f9508bd4ca403deb56e98279f2f658e9"
-  dependencies:
-    es6-error "^4.0.2"
-    function-tree "^3.2.2"
-
 chain-function@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
@@ -8206,7 +8191,7 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
 
 console-feed@CompuIves/console-feed#build2, console-feed@^2.8.5:
-  version "2.8.8"
+  version "2.8.9"
   resolved "https://codeload.github.com/CompuIves/console-feed/tar.gz/42f10eb3063f0f26ee9745c4c9e4542cb5591f46"
   dependencies:
     emotion "^9.1.1"
@@ -10318,10 +10303,6 @@ es5-shim@^4.5.13:
   resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.5.13.tgz#5d88062de049f8969f83783f4a4884395f21d28b"
   integrity sha512-xi6hh6gsvDE0MaW4Vp1lgNEBpVcCXRWfPXj5egDvtgLz4L9MEvNwYEMdJH+JJinWkwa8c3c3o5HduV7dB/e1Hw==
 
-es6-error@^4.0.2:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
-
 [email protected], es6-iterator@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
@@ -10732,10 +10713,6 @@ event-stream@^3.3.0, event-stream@~3.3.0:
     stream-combiner "~0.0.4"
     through "~2.3.1"
 
-eventemitter3@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
-
 eventemitter3@^3.0.0, eventemitter3@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
@@ -11864,14 +11841,6 @@ function-bind@^1.0.2, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
-function-tree@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/function-tree/-/function-tree-3.2.2.tgz#c8b4cd1fe24d722ca4b8d6bce9244d3fd074c439"
-  dependencies:
-    chalk "^1.1.3"
-    eventemitter3 "^2.0.2"
-    universal-websocket-client "^1.0.1"
-
 function.prototype.name@^1.1.0, function.prototype.name@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.1.tgz#6d252350803085abc2ad423d4fe3be2f9cbda392"
@@ -23313,10 +23282,6 @@ safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1,
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
   integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
 
-safe-buffer@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
-
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -25910,11 +25875,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
   integrity sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=
 
-ultron@~1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
-  integrity sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==
-
 umask@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
@@ -26184,12 +26144,6 @@ universal-user-agent@^4.0.0:
   dependencies:
     os-name "^3.1.0"
 
-universal-websocket-client@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/universal-websocket-client/-/universal-websocket-client-1.0.1.tgz#ad7c00e22cea16a2a83d6ab5e67ada2928dbe96f"
-  dependencies:
-    ws "^2.2.0"
-
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
@@ -27313,14 +27267,6 @@ [email protected]:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^2.2.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-2.3.1.tgz#6b94b3e447cb6a363f785eaf94af6359e8e81c80"
-  integrity sha1-a5Sz5EfLajY/eF6vlK9jWejoHIA=
-  dependencies:
-    safe-buffer "~5.0.1"
-    ultron "~1.1.0"
-
 ws@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-4.1.0.tgz#a979b5d7d4da68bf54efe0408967c324869a7289"