JetBrains Mono font

4 files changed, 25 insertions, 18 deletions

diff --git a/language-web/package-lock.json b/language-web/package-lock.json
index 335d3d74..906035ba 100644
--- a/language-web/package-lock.json
+++ b/language-web/package-lock.json
@@ -8,7 +8,7 @@
       "version": "1.0.0",
       "license": "EPL-2.0",
       "dependencies": {
-        "@fontsource/fira-code": "^4.4.5",
+        "@fontsource/jetbrains-mono": "^4.4.5",
         "@fontsource/roboto": "^4.4.5",
         "@material-ui/core": "^4.11.4",
         "@material-ui/icons": "^4.11.2",
@@ -1678,10 +1678,10 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
-    "node_modules/@fontsource/fira-code": {
+    "node_modules/@fontsource/jetbrains-mono": {
       "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-4.4.5.tgz",
-      "integrity": "sha512-ap1UKABzbPrUTgIB376n8CSJ7mbJYxGm52A60BHnGHjU2cSDBqNUAColdERgFWgLHfybWXQT13ZrNhAdynf9rg=="
+      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-4.4.5.tgz",
+      "integrity": "sha512-/xBExp46j7LF0v3mVSy46gEL4NICOyTW8zLKEJegMd5pRBprTwcPY1xpDnAbsljiq9gMSvUyoV4aJ+D61wjjCw=="
     },
     "node_modules/@fontsource/roboto": {
       "version": "4.4.5",
@@ -14339,10 +14339,10 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
-    "@fontsource/fira-code": {
+    "@fontsource/jetbrains-mono": {
       "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-4.4.5.tgz",
-      "integrity": "sha512-ap1UKABzbPrUTgIB376n8CSJ7mbJYxGm52A60BHnGHjU2cSDBqNUAColdERgFWgLHfybWXQT13ZrNhAdynf9rg=="
+      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-4.4.5.tgz",
+      "integrity": "sha512-/xBExp46j7LF0v3mVSy46gEL4NICOyTW8zLKEJegMd5pRBprTwcPY1xpDnAbsljiq9gMSvUyoV4aJ+D61wjjCw=="
     },
     "@fontsource/roboto": {
       "version": "4.4.5",
diff --git a/language-web/package.json b/language-web/package.json
index 9804a841..6c06bdb2 100644
--- a/language-web/package.json
+++ b/language-web/package.json
@@ -39,7 +39,7 @@
     "webpack-subresource-integrity": "^5.0.0-alpha.5"
   },
   "dependencies": {
-    "@fontsource/fira-code": "^4.4.5",
+    "@fontsource/jetbrains-mono": "^4.4.5",
     "@fontsource/roboto": "^4.4.5",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
diff --git a/language-web/src/main/css/index.scss b/language-web/src/main/css/index.scss
index 5b03d1fc..319dff8d 100644
--- a/language-web/src/main/css/index.scss
+++ b/language-web/src/main/css/index.scss
@@ -1,5 +1,5 @@
 @use '@fontsource/roboto/scss/mixins' as Roboto;
-@use '@fontsource/fira-code/scss/mixins' as FiraCode;
+@use '@fontsource/jetbrains-mono/scss/mixins' as JetbrainsMono;
 
 @import 'codemirror/lib/codemirror';
 @import 'codemirror/addon/hint/show-hint';
@@ -11,20 +11,22 @@ $robotoWeights: 300, 400, 500, 700;
   @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight, $style: italic);
 }
 
-$firaCodeWeights: 400, 600;
-@each $weight in $firaCodeWeights {
-  @include FiraCode.fontFace($fontName: 'Fira Code', $weight: $weight);
+$jetbrainsMonoWeights: 400, 700;
+@each $weight in $jetbrainsMonoWeights {
+  @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight);
+  @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight, $style: italic);
 }
-@include FiraCode.fontFaceVariable($fontName: 'Fira CodeVariable');
+@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable');
+@include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable', $style: italic);
 
 body {
-  font-family: 'Roboto';
+  font-family: 'Roboto', sans-serif;
 }
 
-.CodeMirror {
+.CodeMirror, .CodeMirror-hints {
   font-size: 16px;
   height: 100%;
-  font-family: 'Fira CodeVariable', 'Fira Code', monospace;
+  font-family: 'JetBrains MonoVariable', 'JetBrains Mono', monospace;
   font-feature-settings: 'liga', 'calt';
   font-weight: 400;
   text-rendering: optimizeLegibility;
@@ -92,6 +94,7 @@ body {
 }
 
 .problem-abstract {
+  font-style: italic;
 }
 
 .problem-reference {
@@ -99,7 +102,7 @@ body {
 }
 
 .problem-containment {
-        font-weight: 600;
+        font-weight: 700;
 }
 
 .cm-quoted-name, .problem-enum-node {
@@ -107,6 +110,7 @@ body {
 }
 
 .problem-new-node {
+  font-style: italic;
 }
 
 .problem-variable {
diff --git a/language-web/src/main/js/editor/EditorButtons.jsx b/language-web/src/main/js/editor/EditorButtons.jsx
index 62f82f29..422c8a6d 100644
--- a/language-web/src/main/js/editor/EditorButtons.jsx
+++ b/language-web/src/main/js/editor/EditorButtons.jsx
@@ -8,6 +8,7 @@ import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
 import RedoIcon from '@material-ui/icons/Redo';
 import UndoIcon from '@material-ui/icons/Undo';
 import ToggleButton from '@material-ui/lab/ToggleButton';
+
 import { useRootStore } from '../RootStore';
 
 const useStyles = makeStyles(theme => ({
@@ -40,6 +41,7 @@ export default observer(() => {
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
           className={classes.iconButton}
+          aria-label='Undo'
         >
           <UndoIcon fontSize='small'/>
         </Button>
@@ -47,6 +49,7 @@ export default observer(() => {
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
           className={classes.iconButton}
+          aria-label='REdo'
         >
           <RedoIcon fontSize='small'/>
         </Button>
@@ -57,11 +60,11 @@ export default observer(() => {
         className={classes.divider}
       />
       <ToggleButton
-        value='Show line numbers'
         selected={editorStore.showLineNumbers}
         onChange={() => editorStore.toggleLineNumbers()}
         size='small'
         className={classes.flatToggleButton}
+        aria-label='Show line numbers'
       >
         <FormatListNumberedIcon fontSize='small'/>
       </ToggleButton>