feat: update console theme to modified monokai, then increase font si…

…ze to 18px (#1468) * update console theme to modified monokai, then increase font size to 18px (default was 1rem) * update the snapshot
ocadotechnology · Feb 22, 2021 · 87e7eac · 87e7eac
1 parent 8028eda
commit 87e7eac
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 5 deletions.
diff --git a/game_frontend/public/handlebars_template.html b/game_frontend/public/handlebars_template.html
@@ -51,6 +51,45 @@
       overflow: hidden;
     }
   </style>
+
+  <!-- This overrides the monokai theme used by the AceEditor (IDEEditor/index.js) 
+    Copied from https://github.com/ajaxorg/ace/blob/master/lib/ace/theme/monokai.css (also installed as a package)
+    and a few colours were modified to achieve a good contrast ratio, checked using
+    https://webaim.org/resources/contrastchecker/
+  -->
+  <style id="ace-monokai">
+    .ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}
+    .ace-monokai .ace_print-margin {width: 1px;background: #555651}
+    .ace-monokai {background-color: #272822;color: #F8F8F2}
+    .ace-monokai .ace_cursor {color: #F8F8F0}
+    .ace-monokai .ace_marker-layer .ace_selection {background: #49483E}
+    .ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}
+    .ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}
+    .ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}
+    .ace-monokai .ace_marker-layer .ace_active-line {background: #202020}
+    .ace-monokai .ace_gutter-active-line {background-color: #272727}
+    .ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}
+    .ace-monokai .ace_invisible {color: #52524d}
+    .ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai 
+    .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #FCA6C6}
+    .ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}
+    .ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,
+    .ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #CDB3FF}
+    .ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}
+    .ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #CDB3FF}
+    .ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}
+    .ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}
+    .ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,
+    .ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}
+    .ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,
+    .ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}
+    .ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}
+    .ace-monokai .ace_string {color: #E6DB74}
+    .ace-monokai .ace_comment {color: #C3C0B7}
+    .ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}
+    /*# sourceURL=ace/css/ace-monokai */
+  </style>
+
   <script>
     var appData = {
       urlForAimmoDashboard: "{% url_for_aimmo_dashboard %}"

diff --git a/game_frontend/src/containers/IDEEditor/__snapshots__/index.test.js.snap b/game_frontend/src/containers/IDEEditor/__snapshots__/index.test.js.snap
@@ -9,7 +9,7 @@ exports[`<IDEEditor /> matches snapshot when code is loaded 1`] = `
     enableLiveAutocompletion={false}
     enableSnippets={false}
     focus={false}
-    fontSize="1rem"
+    fontSize="18px"
     height="100%"
     highlightActiveLine={true}
     maxLines={null}
@@ -42,7 +42,7 @@ exports[`<IDEEditor /> matches snapshot when code is loaded 1`] = `
     showPrintMargin={true}
     style={Object {}}
     tabSize={4}
-    theme="idle_fingers"
+    theme="monokai"
     value="def next_turn(...): pass"
     width="100%"
     wrapEnabled={false}

diff --git a/game_frontend/src/containers/IDEEditor/index.js b/game_frontend/src/containers/IDEEditor/index.js
@@ -7,8 +7,9 @@ import RunCodeButton from 'components/RunCodeButton'
 import { connect } from 'react-redux'
 import { actions as editorActions } from 'features/Editor'
 
-import 'ace-builds/src-noconflict/theme-idle_fingers'
 import 'ace-builds/src-noconflict/mode-python'
+// The monokai theme is modified and overridden, see handlebars_template.html
+import 'ace-builds/src-noconflict/theme-monokai'
 
 export const IDEEditorLayout = styled.div`
   position: relative;
@@ -86,10 +87,10 @@ export class IDEEditor extends PureComponent {
       return (
         <AceEditor
           mode='python'
-          theme='idle_fingers'
+          theme='monokai'
           name='ace_editor'
           onChange={this.codeChanged}
-          fontSize={this.props.theme.additionalVariables.typography.code.fontSize}
+          fontSize='18px'
           showPrintMargin
           showGutter
           highlightActiveLine