JetBrains Mono font

2 files changed, 17 insertions, 10 deletions

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>