refactor(frondend): dark theme tweaks

8 files changed, 108 insertions, 84 deletions

diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index d5e9bef4..9bfcbad4 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -31,6 +31,7 @@
     "@codemirror/view": "^6.2.0",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@fontsource/inter": "^4.5.12",
     "@fontsource/jetbrains-mono": "^4.5.10",
     "@fontsource/roboto": "^4.5.8",
     "@lezer/common": "^1.0.0",
@@ -52,7 +53,7 @@
   "devDependencies": {
     "@lezer/generator": "^1.1.1",
     "@types/eslint": "^8.4.5",
-    "@types/node": "^18.7.2",
+    "@types/node": "^18.7.3",
     "@types/prettier": "^2.7.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
@@ -64,7 +65,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.4.0",
+    "eslint-import-resolver-typescript": "^3.4.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx
index 12cf9311..12c66eb9 100644
--- a/subprojects/frontend/src/App.tsx
+++ b/subprojects/frontend/src/App.tsx
@@ -1,4 +1,5 @@
 import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
 import React from 'react';
 
 import TopBar from './TopBar';
@@ -10,16 +11,11 @@ export default function App(): JSX.Element {
   return (
     <Box display="flex" flexDirection="column" sx={{ height: '100vh' }}>
       <TopBar />
-      <Box
-        display="flex"
-        justifyContent="space-between"
-        alignItems="center"
-        p={1}
-      >
+      <Toolbar variant="dense">
         <EditorButtons />
         <GenerateButton />
-      </Box>
-      <Box flexGrow={1} flexShrink={1} sx={{ overflow: 'auto' }}>
+      </Toolbar>
+      <Box flexGrow={1} flexShrink={1} overflow="auto">
         <EditorArea />
       </Box>
     </Box>
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index 5ac74e7a..af571a1e 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -1,6 +1,4 @@
-import MenuIcon from '@mui/icons-material/Menu';
 import AppBar from '@mui/material/AppBar';
-import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import React from 'react';
@@ -9,16 +7,16 @@ import ToggleDarkModeButton from './ToggleDarkModeButton';
 
 export default function TopBar(): JSX.Element {
   return (
-    <AppBar position="static" color="primary">
+    <AppBar
+      position="static"
+      elevation={0}
+      color="transparent"
+      sx={(theme) => ({
+        background: theme.palette.highlight.activeLine,
+        borderBottom: `1px solid ${theme.palette.divider2}`,
+      })}
+    >
       <Toolbar>
-        <IconButton
-          edge="start"
-          sx={{ mr: 2 }}
-          color="inherit"
-          aria-label="menu"
-        >
-          <MenuIcon />
-        </IconButton>
         <Typography variant="h6" component="h1" flexGrow={1}>
           Refinery
         </Typography>
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 />}
     >
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 1b8e49f0..9a8fdd44 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -1,41 +1,76 @@
 import {
+  alpha,
   createTheme,
+  type Components,
   responsiveFontSizes,
   type ThemeOptions,
   ThemeProvider as MaterialUiThemeProvider,
 } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { type CSSProperties, type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 
 import { useRootStore } from '../RootStore';
 
 import EditorTheme from './EditorTheme';
 
 interface HighlightStyles {
-  number: CSSProperties['color'];
-  parameter: CSSProperties['color'];
+  number: string;
+  parameter: string;
+  comment: string;
+  activeLine: string;
   occurences: {
-    read: CSSProperties['color'];
-    write: CSSProperties['color'];
+    read: string;
+    write: string;
   };
 }
 
 declare module '@mui/material/styles' {
   interface Palette {
+    divider2: string;
     selection: Palette['primary'];
     highlight: HighlightStyles;
   }
 
   interface PaletteOptions {
+    divider2: string;
     selection: PaletteOptions['primary'];
     highlight: HighlightStyles;
   }
 }
 
 function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions {
+  const components: Components = {
+    MuiButton: {
+      styleOverrides: {
+        root: { borderRadius: '50em' },
+        text: { padding: '6px 16px' },
+        textSizeSmall: { padding: '4px 10px' },
+        textSizeLarge: { padding: '8px 22px' },
+      },
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        groupedHorizontal: {
+          borderRadius: '50em',
+          ':first-of-type': { paddingLeft: 15 },
+          ':last-of-type': { paddingRight: 15 },
+          '&.MuiToggleButton-sizeSmall': {
+            ':first-of-type': { paddingLeft: 9 },
+            ':last-of-type': { paddingRight: 9 },
+          },
+          '&.MuiToggleButton-sizeLarge': {
+            ':first-of-type': { paddingLeft: 21 },
+            ':last-of-type': { paddingRight: 21 },
+          },
+        },
+      },
+    },
+  };
+
   switch (currentTheme) {
     case EditorTheme.Light:
       return {
+        components,
         palette: {
           mode: 'light',
           primary: { main: '#0097a7' },
@@ -43,9 +78,12 @@ function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions {
             main: '#c8e4fb',
             contrastText: '#000',
           },
+          divider2: '#d7d7d7',
           highlight: {
             number: '#1976d2',
             parameter: '#6a3e3e',
+            comment: alpha('#000', 0.38),
+            activeLine: '#f5f5f5',
             occurences: {
               read: '#ceccf7',
               write: '#f0d8a8',
@@ -55,9 +93,25 @@ function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions {
       };
     case EditorTheme.Dark:
       return {
+        components,
         palette: {
           mode: 'dark',
           primary: { main: '#56b6c2' },
+          error: { main: '#e06c75' },
+          warning: { main: '#e5c07b' },
+          success: { main: '#57a470' },
+          info: { main: '#52b8ff' },
+          background: {
+            default: '#282c34',
+            paper: '#21252b',
+          },
+          text: {
+            primary: '#ebebff',
+            secondary: '#abb2bf',
+            disabled: '#4b5263',
+          },
+          divider: alpha('#abb2bf', 0.16),
+          divider2: '#181a1f',
           selection: {
             main: '#3e4453',
             contrastText: '#fff',
@@ -65,6 +119,8 @@ function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions {
           highlight: {
             number: '#6188a6',
             parameter: '#c8ae9d',
+            comment: '#6b717d',
+            activeLine: '#21252b',
             occurences: {
               read: 'rgba(255, 255, 255, 0.15)',
               write: 'rgba(255, 255, 128, 0.4)',
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index 9cb426cf..d97b0ac9 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -50,7 +50,7 @@ export default defineConfig({
       files: [
         {
           match:
-            /(?:jetbrains-mono-latin-variable-wghtOnly-(?:italic|normal)|roboto-latin-(400|500)-normal).+\.woff2/,
+            /(?:jetbrains-mono-latin-variable-wghtOnly-(?:italic|normal)|roboto-latin-(?:400|500)-normal).+\.woff2/,
           attributes: {
             type: 'font/woff2',
             as: 'font',