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
source-academy · Sep 13, 2019 · 42b2af7 · 42b2af7
1 parent 4372b39
commit 42b2af7
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {