From 42b2af782e18724777d26f41f79ebd6d68ee63ba Mon Sep 17 00:00:00 2001
From: Aulud <44989315+Aulud@users.noreply.github.com>
Date: Fri, 13 Sep 2019 13:25:43 +0800
Subject: [PATCH] Update monospaced fonts used in Editor and REPL components
 (#926)

* Remove non-monospaced fonts from Editor; add Inconsolata as default

* Increase font size of text in REPL input

* Increase CSS font size of substituter and REPL output
---
 public/index.html                                           | 2 +-
 src/components/sourcecast/SourcecastEditor.tsx              | 2 +-
 src/components/workspace/Editor.tsx                         | 4 ++--
 src/components/workspace/ReplInput.tsx                      | 6 ++++--
 .../workspace/__tests__/__snapshots__/Editor.tsx.snap       | 2 +-
 src/styles/_workspace.scss                                  | 6 ++----
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/public/index.html b/public/index.html
index a4e835e256..41a617c2b8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,7 +14,7 @@
     -->
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?pr225" />
-  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Droid+Serif" />
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inconsolata|Consolas" />
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/components/sourcecast/SourcecastEditor.tsx b/src/components/sourcecast/SourcecastEditor.tsx
index c0168a6e32..07ebe90aed 100644
--- a/src/components/sourcecast/SourcecastEditor.tsx
+++ b/src/components/sourcecast/SourcecastEditor.tsx
@@ -217,7 +217,7 @@ class SourcecastEditor extends React.PureComponent<ISourcecastEditorProps, {}> {
             value={this.props.editorValue}
             width="100%"
             setOptions={{
-              fontFamily: "'Droid Sans Mono','CPMono_v07 Bold','Droid Sans', monospace"
+              fontFamily: "'Inconsolata', 'Consolas', monospace"
             }}
           />
         </div>
diff --git a/src/components/workspace/Editor.tsx b/src/components/workspace/Editor.tsx
index 34b727807a..9f5de06c4c 100755
--- a/src/components/workspace/Editor.tsx
+++ b/src/components/workspace/Editor.tsx
@@ -128,7 +128,7 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
             }}
             ref={this.AceEditor}
             markers={this.getMarkers()}
-            fontSize={14}
+            fontSize={17}
             height="100%"
             highlightActiveLine={false}
             mode="javascript"
@@ -138,7 +138,7 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
             value={this.props.editorValue}
             width="100%"
             setOptions={{
-              fontFamily: "'Droid Sans Mono','CPMono_v07 Bold','Droid Sans', monospace"
+              fontFamily: "'Inconsolata', 'Consolas', monospace"
             }}
           />
         </div>
diff --git a/src/components/workspace/ReplInput.tsx b/src/components/workspace/ReplInput.tsx
index b26a502d48..9e68f43475 100644
--- a/src/components/workspace/ReplInput.tsx
+++ b/src/components/workspace/ReplInput.tsx
@@ -83,10 +83,12 @@ class ReplInput extends React.PureComponent<IReplInputProps, {}> {
           ]}
           minLines={1}
           maxLines={20}
-          fontSize={14}
+          fontSize={17}
           highlightActiveLine={false}
           showGutter={false}
-          setOptions={{ fontFamily: "'Droid Sans Mono','CPMono_v07 Bold','Droid Sans', monospace" }}
+          setOptions={{
+            fontFamily: "'Inconsolata', 'Consolas', monospace"
+          }}
         />
         <div className="replInputBottom" ref={e => (this.replInputBottom = e!)} />
       </>
diff --git a/src/components/workspace/__tests__/__snapshots__/Editor.tsx.snap b/src/components/workspace/__tests__/__snapshots__/Editor.tsx.snap
index ef5e78c33e..1922614b88 100644
--- a/src/components/workspace/__tests__/__snapshots__/Editor.tsx.snap
+++ b/src/components/workspace/__tests__/__snapshots__/Editor.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Editor renders correctly 1`] = `
 "<HotKeys className=\\"Editor\\" handlers={{...}}>
   <div className=\\"row editor-react-ace\\">
-    <ReactAce className=\\"react-ace\\" commands={{...}} editorProps={{...}} markers={{...}} fontSize={14} height=\\"100%\\" highlightActiveLine={false} mode=\\"javascript\\" onChange={[Function]} onValidate={[Function]} theme=\\"source\\" value=\\"\\" width=\\"100%\\" setOptions={{...}} name=\\"brace-editor\\" focus={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} style={{...}} scrollMargin={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />
+    <ReactAce className=\\"react-ace\\" commands={{...}} editorProps={{...}} markers={{...}} fontSize={17} height=\\"100%\\" highlightActiveLine={false} mode=\\"javascript\\" onChange={[Function]} onValidate={[Function]} theme=\\"source\\" value=\\"\\" width=\\"100%\\" setOptions={{...}} name=\\"brace-editor\\" focus={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} style={{...}} scrollMargin={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />
   </div>
 </HotKeys>"
 `;
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index a3beb9a901..716588e1b6 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -385,8 +385,7 @@ $code-color-error: #ff4444;
               * output. Taken from react-ace
               * sourcecode, font size modified.
               */
-              font: 14px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro',
-                monospace;
+              font: 16px / normal 'Inconsolata', 'Consolas', monospace;
 
               .canvas-container {
                 display: -webkit-box;
@@ -648,8 +647,7 @@ $code-color-error: #ff4444;
  * output. Taken from react-ace
  * sourcecode, font size modified.
  */
-        font: 14px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro',
-          monospace;
+        font: 16px / normal 'Inconsolata', 'Consolas', monospace;
       }
 
       .codeOutput {