feat(ui): add some color to monaco (#15882)

ui/src/external/monaco.fluxTheme.ts

@@ -1,7 +1,24 @@
-export const addFluxTheme = monaco => {
-  monaco.editor.defineTheme('fluxTheme', {
-    base: 'vs',
+export const THEME_NAME = 'baseTheme'
+export default function(monaco) {
+  monaco.editor.defineTheme(THEME_NAME, {
+    base: 'vs-dark',
     inherit: false,
-    rules: [{token: 'keyword', foreground: 'ff00ff', fontStyle: 'bold'}],
+    rules: [
+      {
+        token: '',
+        foreground: '#f8f8f8',
+        background: '#202028',
+      },
+    ],
+    colors: {
+      'editor.foreground': '#F8F8F8',
+      'editor.background': '#202028',
+      'editorGutter.background': '#25252e',
+      'editor.selectionBackground': '#353640',
+      'editorLineNumber.foreground': '#666978',
+      'editor.lineHighlightBackground': '#353640',
+      'editorCursor.foreground': '#ffffff',
+      'editorActiveLineNumber.foreground': '#bec2cc',
+    },
   })
 }

ui/src/shared/components/FluxMonacoEditor.scss

@@ -0,0 +1,50 @@
+@import '~src/style/modules';
+@import '~src/style/fonts/fonts';
+@import '~src/style/fonts/icon-font';
+
+// the specificity here is important to override the dynamic
+// base theme that monaco loads in at runtime
+.react-monaco-editor-container > .monaco-editor {
+  font-family: $code-font;
+  font-weight: 500;
+  font-size: 13px;
+
+  .mtk1 {
+    color: $g13-mist;
+  }
+
+  .minimap {
+    border-left: 2px solid #25252e;
+
+    .minimap-slider {
+      background: rgba(53, 54, 64, 0.4);
+
+      .minimap-slider-horizontal {
+        background: rgba(53, 54, 64, 0.4);
+      }
+
+      &:hover {
+        background: rgba(53, 54, 64, 0.4);
+        .minimap-slider-horizontal {
+          background: rgba(53, 54, 64, 0.4);
+        }
+      }
+    }
+  }
+
+  .monaco-scrollable-element .scrollbar.vertical .slider {
+    background: rgba(53, 54, 64, 0.6);
+  }
+
+  .scroll-decoration {
+    box-shadow: #1b1b1b 0 6px 6px -6px inset;
+  }
+
+  .margin {
+    background: #25252e;
+  }
+
+  .current-line ~ .line-numbers {
+    color: #bec2cc;
+  }
+}

ui/src/shared/components/FluxMonacoEditor.tsx

@@ -4,9 +4,10 @@ import React, {FC} from 'react'
 // Components
 import MonacoEditor from 'react-monaco-editor'
 import {tokenizeFlux} from 'src/external/monaco.fluxLang'
-import {addFluxTheme} from 'src/external/monaco.fluxTheme'
+import addFluxTheme, {THEME_NAME} from 'src/external/monaco.fluxTheme'
 import {addSnippets} from 'src/external/monaco.fluxCompletions'
 import {OnChangeScript} from 'src/types/flux'
+import './FluxMonacoEditor.scss'
 
 interface Position {
   line: number
@@ -22,8 +23,8 @@ interface Props {
 
 const FluxEditorMonaco: FC<Props> = props => {
   const editorWillMount = monaco => {
-    tokenizeFlux(monaco)
     addFluxTheme(monaco)
+    tokenizeFlux(monaco)
     addSnippets(monaco)
   }
   const editorDidMount = editor => {
@@ -55,12 +56,22 @@ const FluxEditorMonaco: FC<Props> = props => {
   return (
     <div className="time-machine-editor" data-testid="flux-editor">
       <MonacoEditor
-        width="800"
-        height="600"
         language="flux"
-        theme="vs-light"
+        theme={THEME_NAME}
         value={script}
         onChange={onChangeScript}
+        options={{
+          fontSize: 13,
+          fontFamily: '"RobotoMono", monospace',
+          cursorWidth: 2,
+          lineNumbersMinChars: 4,
+          lineDecorationsWidth: 0,
+          minimap: {
+            renderCharacters: false,
+          },
+          overviewRulerBorder: false,
+          automaticLayout: true,
+        }}
         editorWillMount={editorWillMount}
         editorDidMount={editorDidMount}
       />

ui/src/style/fonts/fonts.scss

@@ -2,41 +2,41 @@
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 200;
-  src: url('./fonts/Roboto-Thin.ttf');
+  src: url('~src/style/fonts/Roboto-Thin.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
-  src: url('./fonts/Roboto-Light.ttf');
+  src: url('~src/style/fonts/Roboto-Light.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: url('./fonts/Roboto-Regular.ttf');
+  src: url('~src/style/fonts/Roboto-Regular.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
-  src: url('./fonts/Roboto-Medium.ttf');
+  src: url('~src/style/fonts/Roboto-Medium.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 600;
-  src: url('./fonts/Roboto-Bold.ttf');
+  src: url('~src/style/fonts/Roboto-Bold.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
-  src: url('./fonts/Roboto-Black.ttf');
+  src: url('~src/style/fonts/Roboto-Black.ttf');
 }
 @font-face {
   font-family: 'RobotoMono';
   font-style: normal;
   font-weight: 500;
-  src: url('./fonts/RobotoMono-Medium.ttf');
+  src: url('~src/style/fonts/RobotoMono-Medium.ttf');
 }

ui/src/style/fonts/icon-font.scss

@@ -7,12 +7,12 @@
 
 @font-face {
   font-family: 'icomoon';
-  src:    url('./fonts/icomoon.eot');
-  src:    url('./fonts/icomoon.eot') format('embedded-opentype'),
-      url('./fonts/icomoon.woff2') format('woff2'),
-      url('./fonts/icomoon.ttf') format('truetype'),
-      url('./fonts/icomoon.woff') format('woff'),
-      url('./fonts/icomoon.svg') format('svg');
+  src:    url('~src/style/fonts/icomoon.eot');
+  src:    url('~src/style/fonts/icomoon.eot') format('embedded-opentype'),
+      url('~src/style/fonts/icomoon.woff2') format('woff2'),
+      url('~src/style/fonts/icomoon.ttf') format('truetype'),
+      url('~src/style/fonts/icomoon.woff') format('woff'),
+      url('~src/style/fonts/icomoon.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }

ui/tsconfig.test.json

@@ -17,6 +17,7 @@
     "cypress/**/*.ts",
     "mocks/**/*.ts",
     "mocks/**/*.tsx",
-    "jestSetup.ts"
+    "jestSetup.ts",
+    "global.d.ts"
   ]
 }