refactor(frondend): dark theme tweaks

3 files changed, 30 insertions, 57 deletions

diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 652ca71e..1412a314 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -36,24 +36,22 @@ function EditorButtons(): JSX.Element {
   const { editorStore } = useRootStore();
 
   return (
-    <Stack direction="row" spacing={1}>
-      <Stack direction="row" alignItems="center">
-        <IconButton
-          disabled={!editorStore.canUndo}
-          onClick={() => editorStore.undo()}
-          aria-label="Undo"
-        >
-          <UndoIcon fontSize="small" />
-        </IconButton>
-        <IconButton
-          disabled={!editorStore.canRedo}
-          onClick={() => editorStore.redo()}
-          aria-label="Redo"
-        >
-          <RedoIcon fontSize="small" />
-        </IconButton>
-      </Stack>
-      <ToggleButtonGroup size="small">
+    <Stack direction="row" flexGrow={1}>
+      <IconButton
+        disabled={!editorStore.canUndo}
+        onClick={() => editorStore.undo()}
+        aria-label="Undo"
+      >
+        <UndoIcon fontSize="small" />
+      </IconButton>
+      <IconButton
+        disabled={!editorStore.canRedo}
+        onClick={() => editorStore.redo()}
+        aria-label="Redo"
+      >
+        <RedoIcon fontSize="small" />
+      </IconButton>
+      <ToggleButtonGroup size="small" sx={{ mx: 1 }}>
         <ToggleButton
           selected={editorStore.showLineNumbers}
           onClick={() => editorStore.toggleLineNumbers()}
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts
index 805065fc..3742b89c 100644
--- a/subprojects/frontend/src/editor/EditorParent.ts
+++ b/subprojects/frontend/src/editor/EditorParent.ts
@@ -1,22 +1,5 @@
 import { alpha, styled } from '@mui/material/styles';
 
-/**
- * Returns a squiggly underline background image encoded as a CSS `url()` data URI with Base64.
- *
- * Based on
- * https://github.com/codemirror/lint/blob/f524b4a53b0183bb343ac1e32b228d28030d17af/src/lint.ts#L501
- *
- * @param color the color of the underline
- * @returns the CSS `url()`
- */
-function underline(color: string) {
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">
-    <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>
-  </svg>`;
-  const svgBase64 = window.btoa(svg);
-  return `url('data:image/svg+xml;base64,${svgBase64}')`;
-}
-
 export default styled('div', {
   name: 'EditorParent',
   shouldForwardProp: (propName) => propName !== 'showLineNumbers',
@@ -28,7 +11,9 @@ export default styled('div', {
       borderLeftColor: color,
     };
     codeMirrorLintStyle[`.cm-lintRange-${severity}`] = {
-      backgroundImage: underline(color),
+      backgroundImage: 'none',
+      textDecoration: `underline wavy ${color}`,
+      textDecorationSkipInk: 'none',
     };
   });
 
@@ -42,10 +27,9 @@ export default styled('div', {
     },
     '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail':
       {
-        fontSize: 16,
+        ...theme.typography.body1,
         fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
         fontFeatureSettings: '"liga", "calt"',
-        fontWeight: 400,
         letterSpacing: 0,
         textRendering: 'optimizeLegibility',
       },
@@ -61,7 +45,7 @@ export default styled('div', {
       color: theme.palette.secondary.main,
     },
     '.cm-activeLine': {
-      background: alpha(theme.palette.text.secondary, 0.06),
+      background: theme.palette.highlight.activeLine,
     },
     '.cm-foldGutter': {
       color: alpha(theme.palette.text.primary, 0),
@@ -103,10 +87,10 @@ export default styled('div', {
     },
     '.cm-panel': {
       '&, & button, & input': {
-        fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+        fontFamily: theme.typography.fontFamily,
       },
-      background: theme.palette.background.paper,
-      borderTop: `1px solid ${theme.palette.divider}`,
+      background: theme.palette.background.default,
+      borderTop: `1px solid ${theme.palette.divider2}`,
       'button[name="close"]': {
         background: 'transparent',
         color: theme.palette.text.secondary,
@@ -114,6 +98,7 @@ export default styled('div', {
       },
     },
     '.cm-panel.cm-panel-lint': {
+      boderBottom: 'none',
       'button[name="close"]': {
         // Close button interferes with scrollbar, so we better hide it.
         // The panel can still be closed from the toolbar.
@@ -121,18 +106,13 @@ export default styled('div', {
       },
       ul: {
         li: {
-          borderBottom: `1px solid ${theme.palette.divider}`,
           cursor: 'pointer',
           color: theme.palette.text.primary,
         },
-        '[aria-selected]': {
+        '[aria-selected], &:focus [aria-selected]': {
           background: theme.palette.selection.main,
           color: theme.palette.selection.contrastText,
         },
-        '&:focus [aria-selected]': {
-          background: theme.palette.primary.main,
-          color: theme.palette.primary.contrastText,
-        },
       },
     },
     '.cm-foldPlaceholder': {
@@ -159,7 +139,7 @@ export default styled('div', {
     },
     '.tok-comment': {
       fontStyle: 'italic',
-      color: theme.palette.text.disabled,
+      color: theme.palette.highlight.comment,
     },
     '.tok-number': {
       color: theme.palette.highlight.number,
@@ -225,9 +205,9 @@ export default styled('div', {
         fontStyle: 'normal',
       },
       '[aria-selected]': {
-        background: `${theme.palette.selection.main} !important`,
+        background: `${theme.palette.primary.main} !important`,
         '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': {
-          color: theme.palette.selection.contrastText,
+          color: theme.palette.primary.contrastText,
         },
       },
     },
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index fc337da9..4d5c4e44 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -22,11 +22,7 @@ function GenerateButton(): JSX.Element {
 
   if (errorCount > 0) {
     return (
-      <Button
-        variant="outlined"
-        color="error"
-        onClick={() => editorStore.toggleLintPanel()}
-      >
+      <Button color="error" onClick={() => editorStore.toggleLintPanel()}>
         {summary}
       </Button>
     );
@@ -34,7 +30,6 @@ function GenerateButton(): JSX.Element {
 
   return (
     <Button
-      variant="outlined"
       color={warningCount > 0 ? 'warning' : 'primary'}
       startIcon={<PlayArrowIcon />}
     >