refactor(frontend): theme improvements

4 files changed, 26 insertions, 17 deletions

diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx
index 7f6c61f0..f75d4617 100644
--- a/subprojects/frontend/src/editor/AnimatedButton.tsx
+++ b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
+import { styled, type SxProps, type Theme } from '@mui/material/styles';
 import { type ReactNode, useLayoutEffect, useState } from 'react';
 
 const AnimatedButtonBase = styled(Button, {
@@ -9,7 +9,9 @@ const AnimatedButtonBase = styled(Button, {
   // Transition copied from `@mui/material/Button`.
   const colorTransition = theme.transitions.create(
     ['background-color', 'box-shadow', 'border-color', 'color'],
-    { duration: theme.transitions.duration.short },
+    {
+      duration: theme.transitions.duration.short,
+    },
   );
   return {
     width,
@@ -19,7 +21,6 @@ const AnimatedButtonBase = styled(Button, {
       ${colorTransition},
       ${theme.transitions.create(['width'], {
         duration: theme.transitions.duration.short,
-        easing: theme.transitions.easing.easeOut,
       })}
     `,
     '@media (prefers-reduced-motion: reduce)': {
@@ -34,6 +35,7 @@ export default function AnimatedButton({
   color,
   disabled,
   startIcon,
+  sx,
   children,
 }: {
   'aria-label'?: string;
@@ -41,6 +43,7 @@ export default function AnimatedButton({
   color: 'error' | 'warning' | 'primary' | 'inherit';
   disabled?: boolean;
   startIcon: JSX.Element;
+  sx?: SxProps<Theme> | undefined;
   children?: ReactNode;
 }): JSX.Element {
   const [width, setWidth] = useState<string | undefined>();
@@ -65,9 +68,9 @@ export default function AnimatedButton({
     <AnimatedButtonBase
       {...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel })}
       {...(onClick === undefined ? {} : { onClick })}
+      {...(sx === undefined ? {} : { sx })}
       color={color}
-      variant="outlined"
-      className="rounded"
+      className="rounded shaded"
       disabled={disabled ?? false}
       startIcon={startIcon}
       width={width === undefined ? 'auto' : `calc(${width} + 50px)`}
@@ -91,5 +94,6 @@ AnimatedButton.defaultProps = {
   'aria-label': undefined,
   onClick: undefined,
   disabled: false,
+  sx: undefined,
   children: undefined,
 };
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index 1d51b3f5..f7f8241a 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -2,8 +2,6 @@ import Box from '@mui/material/Box';
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 
@@ -12,7 +10,6 @@ import { useRootStore } from '../RootStoreProvider';
 import ConnectionStatusNotification from './ConnectionStatusNotification';
 import EditorArea from './EditorArea';
 import EditorButtons from './EditorButtons';
-import GenerateButton from './GenerateButton';
 import SearchPanelPortal from './SearchPanelPortal';
 
 function EditorLoading(): JSX.Element {
@@ -34,14 +31,11 @@ function EditorLoading(): JSX.Element {
 
 export default observer(function EditorPane(): JSX.Element {
   const { editorStore } = useRootStore();
-  const { breakpoints } = useTheme();
-  const showGenerateButton = useMediaQuery(breakpoints.up('sm'));
 
   return (
     <Stack direction="column" flexGrow={1} flexShrink={1} overflow="auto">
       <Toolbar variant="dense">
         <EditorButtons editorStore={editorStore} />
-        {showGenerateButton && <GenerateButton editorStore={editorStore} />}
       </Toolbar>
       <Box display="flex" flexGrow={1} flexShrink={1} overflow="auto">
         {editorStore === undefined ? (
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index e9907e83..3f2a3bff 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -161,7 +161,7 @@ export default styled('div', {
       background: 'transparent',
     },
     '.cm-cursor, .cm-cursor-primary': {
-      borderLeft: `2px solid ${theme.palette.highlight.cursor}`,
+      borderLeft: `2px solid ${theme.palette.info.main}`,
     },
     '.cm-selectionBackground': {
       background: theme.palette.highlight.selection,
@@ -265,7 +265,7 @@ export default styled('div', {
     },
     '.cm-indentation-marker': {
       display: 'inline-block',
-      boxShadow: `1px 0 0 ${theme.palette.highlight.lineNumber} inset`,
+      boxShadow: `1px 0 0 ${theme.palette.text.disabled} inset`,
       '&.active': {
         boxShadow: `1px 0 0 ${theme.palette.text.primary} inset`,
       },
@@ -273,7 +273,7 @@ export default styled('div', {
     '.cm-scroller-selection': {
       position: 'absolute',
       right: 0,
-      boxShadow: `0 2px 0 ${theme.palette.highlight.cursor} inset`,
+      boxShadow: `0 2px 0 ${theme.palette.info.main} inset`,
       zIndex: 200,
     },
     '.cm-scroller-occurrence': {
@@ -286,7 +286,7 @@ export default styled('div', {
   const lineNumberStyle: CSSObject = {
     '.cm-lineNumbers': {
       ...editorFontStyle,
-      color: theme.palette.highlight.lineNumber,
+      color: theme.palette.text.disabled,
       ...(!showLineNumbers && {
         display: 'none !important',
       }),
@@ -426,7 +426,7 @@ export default styled('div', {
           '&[aria-selected="true"]': {
             color: theme.palette.text.primary,
             background: 'transparent',
-            fontWeight: theme.typography.fontWeightMedium,
+            fontWeight: theme.typography.fontWeightBold,
           },
           ':hover': {
             background: alpha(
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index 1a32f5ce..2036fc28 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -1,6 +1,7 @@
 import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import Button from '@mui/material/Button';
+import type { SxProps, Theme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 
 import AnimatedButton from './AnimatedButton';
@@ -11,13 +12,20 @@ const GENERATE_LABEL = 'Generate';
 const GenerateButton = observer(function GenerateButton({
   editorStore,
   hideWarnings,
+  sx,
 }: {
   editorStore: EditorStore | undefined;
   hideWarnings?: boolean | undefined;
+  sx?: SxProps<Theme> | undefined;
 }): JSX.Element {
   if (editorStore === undefined) {
     return (
-      <Button color="inherit" variant="outlined" className="rounded" disabled>
+      <Button
+        color="inherit"
+        className="rounded shaded"
+        disabled
+        {...(sx === undefined ? {} : { sx })}
+      >
         Loading&hellip;
       </Button>
     );
@@ -41,6 +49,7 @@ const GenerateButton = observer(function GenerateButton({
         onClick={() => editorStore.nextDiagnostic()}
         color="error"
         startIcon={<DangerousOutlinedIcon />}
+        {...(sx === undefined ? {} : { sx })}
       >
         {summary}
       </AnimatedButton>
@@ -52,6 +61,7 @@ const GenerateButton = observer(function GenerateButton({
       disabled={!editorStore.opened}
       color={warningCount > 0 ? 'warning' : 'primary'}
       startIcon={<PlayArrowIcon />}
+      {...(sx === undefined ? {} : { sx })}
     >
       {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
     </AnimatedButton>
@@ -60,6 +70,7 @@ const GenerateButton = observer(function GenerateButton({
 
 GenerateButton.defaultProps = {
   hideWarnings: false,
+  sx: undefined,
 };
 
 export default GenerateButton;