Appearance fixes

4 files changed, 35 insertions, 11 deletions

diff --git a/language-web/src/main/css/index.scss b/language-web/src/main/css/index.scss
index 319dff8d..3ed91824 100644
--- a/language-web/src/main/css/index.scss
+++ b/language-web/src/main/css/index.scss
@@ -23,15 +23,37 @@ body {
   font-family: 'Roboto', sans-serif;
 }
 
+.CodeMirror {
+  height: 100%;
+}
+
 .CodeMirror, .CodeMirror-hints {
   font-size: 16px;
-  height: 100%;
   font-family: 'JetBrains MonoVariable', 'JetBrains Mono', monospace;
   font-feature-settings: 'liga', 'calt';
   font-weight: 400;
   text-rendering: optimizeLegibility;
 }
 
+.CodeMirror-hints {
+  background: #333333;
+  border: 0;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
+              0 5px 8px 0 rgba(0, 0, 0, 0.14),
+              0 1px 8px 0 rgba(0, 0, 0, 0.12);
+  padding: 0;
+}
+
+.CodeMirror-hint {
+  color: #fff;
+  border-radius: 0;
+}
+
+li.CodeMirror-hint-active {
+  background: rgba(128, 203, 196, 0.2);
+}
+
 .annotations-gutter {
         width: 12px;
 }
@@ -118,5 +140,5 @@ body {
 }
 
 .problem-singleton-variable {
-  opacity: 0.7;
+  opacity: 0.6;
 }
diff --git a/language-web/src/main/js/editor/EditorButtons.jsx b/language-web/src/main/js/editor/EditorButtons.jsx
index 422c8a6d..f67afdbf 100644
--- a/language-web/src/main/js/editor/EditorButtons.jsx
+++ b/language-web/src/main/js/editor/EditorButtons.jsx
@@ -13,17 +13,14 @@ import { useRootStore } from '../RootStore';
 
 const useStyles = makeStyles(theme => ({
   iconButton: {
-    padding: 8,
+    padding: 7,
     minWidth: 36,
+    border: 0,
+    color: theme.palette.text.primary,
     '&.MuiButtonGroup-groupedTextHorizontal': {
       borderRight: 0,
     },
   },
-  flatToggleButton: {
-    padding: 8,
-    border: 0,
-    color: theme.palette.text.primary,
-  },
   divider: {
     margin: theme.spacing(0.5),
   }
@@ -49,7 +46,7 @@ export default observer(() => {
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
           className={classes.iconButton}
-          aria-label='REdo'
+          aria-label='Redo'
         >
           <RedoIcon fontSize='small'/>
         </Button>
@@ -63,7 +60,7 @@ export default observer(() => {
         selected={editorStore.showLineNumbers}
         onChange={() => editorStore.toggleLineNumbers()}
         size='small'
-        className={classes.flatToggleButton}
+        className={classes.iconButton}
         aria-label='Show line numbers'
       >
         <FormatListNumberedIcon fontSize='small'/>
diff --git a/language-web/src/main/js/editor/EditorStore.jsx b/language-web/src/main/js/editor/EditorStore.jsx
index 6b03b383..b6f9bc0a 100644
--- a/language-web/src/main/js/editor/EditorStore.jsx
+++ b/language-web/src/main/js/editor/EditorStore.jsx
@@ -9,6 +9,8 @@ export default class EditorStore {
   value = '';
   /** @type {boolean} */
   showLineNumbers = false;
+  /** @type {boolean} */
+  showLigatures = true;
 
   constructor() {
     this.atom = createAtom('EditorStore');
@@ -78,4 +80,8 @@ export default class EditorStore {
   toggleLineNumbers() {
     this.showLineNumbers = !this.showLineNumbers;
   }
+
+  toggleLigatures() {
+    this.showLigatures = !this.showLigatures;
+  }
 }
diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.jsx
index f6775760..b3277a30 100644
--- a/language-web/src/main/js/index.jsx
+++ b/language-web/src/main/js/index.jsx
@@ -51,7 +51,6 @@ const theme = createMuiTheme({
     type: 'dark',
     background: {
       default: '#212121',
-      paper: '#333333',
     },
     primary: {
       main: '#82aaff',