fix(web): make lint panel readable

2 files changed, 50 insertions, 0 deletions

diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts
index 240c73e9..a19759a4 100644
--- a/language-web/src/main/js/editor/EditorParent.ts
+++ b/language-web/src/main/js/editor/EditorParent.ts
@@ -77,13 +77,38 @@ export const EditorParent = styled('div')(({ theme }) => {
       color: theme.palette.text.secondary,
     },
     '.cm-panel': {
+      '&, & button, & input': {
+        fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+      },
       background: theme.palette.background.paper,
       borderTop: `1px solid ${theme.palette.divider}`,
       'button[name="close"]': {
+        background: 'transparent',
         color: theme.palette.text.secondary,
         cursor: 'pointer',
       },
     },
+    '.cm-panel.cm-panel-lint': {
+      'button[name="close"]': {
+        // Close button interferes with scrollbar, so we better hide it.
+        // The panel can still be closed from the toolbar.
+        display: 'none',
+      },
+      ul: {
+        li: {
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          cursor: 'pointer',
+        },
+        '[aria-selected]': {
+          background: '#3e4453',
+          color: theme.palette.text.primary,
+        },
+        '&:focus [aria-selected]': {
+          background: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText,
+        },
+      },
+    },
     '.cm-foldPlaceholder': {
       background: theme.palette.background.paper,
       borderColor: theme.palette.text.disabled,
@@ -108,6 +133,28 @@ export const EditorParent = styled('div')(({ theme }) => {
     '.cmt-variableName': {
       color: '#c8ae9d',
     },
+    '.cm-tooltip-autocomplete': {
+      background: theme.palette.background.paper,
+      boxShadow: `0px 2px 4px -1px rgb(0 0 0 / 20%),
+        0px 4px 5px 0px rgb(0 0 0 / 14%),
+        0px 1px 10px 0px rgb(0 0 0 / 12%)`,
+      '.cm-completionIcon': {
+        color: theme.palette.text.secondary,
+      },
+      '.cm-completionLabel': {
+        color: theme.palette.text.primary,
+      },
+      '.cm-completionDetail': {
+        color: theme.palette.text.secondary,
+        fontStyle: 'normal',
+      },
+      '[aria-selected]': {
+        background: `${theme.palette.primary.main} !important`,
+        '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': {
+          color: theme.palette.primary.contrastText,
+        },
+      },
+    },
     '.cm-completionIcon': {
       width: 16,
       padding: 0,
diff --git a/language-web/src/main/js/theme/ThemeStore.ts b/language-web/src/main/js/theme/ThemeStore.ts
index db94d9f7..ffaf6dde 100644
--- a/language-web/src/main/js/theme/ThemeStore.ts
+++ b/language-web/src/main/js/theme/ThemeStore.ts
@@ -42,6 +42,9 @@ export class ThemeStore {
         secondary: {
           main: themeData.secondary,
         },
+        error: {
+          main: themeData.secondary,
+        },
         text: {
           primary: themeData.foregroundHighlight,
           secondary: themeData.foreground,