mgt.dev - changed monaco editor to light theme (#350)

* changed monaco editor to light theme

* changed border to only one side

* fixed resize bug

* Addressing pr comments

* using flex grid

Author: nmetulev

.storybook/addons/codeEditorAddon/codeAddon.js

@@ -113,10 +113,10 @@ export const withCodeEditor = makeDecorator({
     root.appendChild(editor);
 
     window.addEventListener('resize', () => {
-      storyElement.style.height = '';
-      storyElement.style.width = '';
-      editor.style.height = '';
-      editor.style.width = '';
+      storyElementWrapper.style.height = null;
+      storyElementWrapper.style.width = null;
+      editor.style.height = null;
+      editor.style.width = null;
     });
 
     return root;

.storybook/addons/codeEditorAddon/editor.js

@@ -3,10 +3,10 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 let debounce = (func, wait, immediate) => {
   var timeout;
-  return function() {
+  return function () {
     var context = this,
       args = arguments;
-    var later = function() {
+    var later = function () {
       timeout = null;
       if (!immediate) func.apply(context, args);
     };
@@ -29,30 +29,30 @@ export class EditorElement extends LitElement {
         height: 100%;
         display: flex;
         flex-direction: column;
-        background-color: rgb(37, 37, 38);
+        background-color: rgb(243, 243, 243);
       }
 
-      .tab-root {
-        height: 38px;
-      }
+      
 
       .editor-root {
         flex-basis: 100%;
       }
 
       .tab {
-        background-color: rgb(45, 45, 45);
-        color: rgba(255, 255, 255, 0.25);
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
-          'Helvetica Neue', sans-serif;
-        font-size: 12px;
-        padding: 14px 18px;
+        background-color: rgb(236,236,236);
+        color: #616161;
+        font-family: -apple-system,BlinkMacSystemFont,sans-serif;
+        font-size: 11px;
+        padding: 8px 18px;
         display: inline-block;
+        cursor: pointer;
+        user-select: none;
+        margin: 0px -2px 0px 0px;
       }
 
       .tab.selected {
-        background-color: rgb(30, 30, 30);
-        color: white;
+        background-color: white;
+        color: rgb(51, 51, 51);
         font-weight: 400;
       }
     `;
@@ -94,7 +94,7 @@ export class EditorElement extends LitElement {
       this.files[this.currentType] = this.editor.getValue();
       let event = new CustomEvent('fileUpdated');
       this.dispatchEvent(event);
-    }, 500);
+    }, 1000);
 
     this.setupEditor(this.editorRoot);
     this.appendChild(this.editorRoot);
@@ -123,7 +123,6 @@ export class EditorElement extends LitElement {
 
     this.editor = monaco.editor.create(htmlElement, {
       model: this.currentEditorState.model,
-      theme: 'vs-dark',
       scrollBeyondLastLine: false,
       minimap: {
         enabled: false
@@ -188,17 +187,11 @@ export class EditorElement extends LitElement {
     return html`
       <div class="root">
         <div class="tab-root">
-          ${this.fileTypes.map(
-            type =>
-              html`
-                <div
-                  @click="${_ => this.showTab(type)}"
-                  class="tab ${type === this.currentType ? 'selected' : ''}"
-                >
-                  ${type}
-                </button>
-              `
-          )}
+          ${this.fileTypes.map(type => html`
+            <div @click="${_ => this.showTab(type)}"
+                class="tab ${type === this.currentType ? 'selected' : ''}">
+              ${type}
+            </div>`)}
         </div>
         <div class="editor-root">
           <slot name="editor"></slot>

.storybook/preview-body.html

@@ -14,6 +14,7 @@
     height: 100%;
     width: 100%;
     position: relative;
+    display: flex;
   }
 
   .story-mgt-preview {
@@ -30,11 +31,12 @@
   }
 
   .story-mgt-editor {
-    width: 50%;
+    width: calc(50% - 1px);
     height: 100%;
     position: relative;
     float: left;
     overflow: hidden;
+    border-left: 1px solid #e7e7e7;
   }
 
   .story-mgt-separator {
@@ -61,14 +63,20 @@
   }
 
   @media (max-width: 768px) {
+    .story-mgt-root {
+      flex-direction: column;
+    }
+
     .story-mgt-preview-wrapper {
       height: 50%;
       width: 100%;
     }
 
     .story-mgt-editor {
-      height: 50%;
+      height: calc(50% - 1px);
       width: 100%;
+      border-left: none;
+      border-top: 1px solid #e7e7e7;
     }
 
     .story-mgt-separator {