1 files changed, 20 insertions, 45 deletions

diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx
index d3825c07..56577e82 100644
--- a/language-web/src/main/js/editor/EditorButtons.tsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -1,76 +1,51 @@
 import { observer } from 'mobx-react-lite';
+import Stack from '@mui/material/Stack';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+import RedoIcon from '@mui/icons-material/Redo';
+import UndoIcon from '@mui/icons-material/Undo';
 import React from 'react';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import ToggleButton from '@material-ui/core/ToggleButton';
-import Divider from '@material-ui/core/Divider';
-import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
-import RedoIcon from '@material-ui/icons/Redo';
-import UndoIcon from '@material-ui/icons/Undo';
 
-import { makeStyles } from '../makeStyles';
 import { useRootStore } from '../RootStore';
 
-const useStyles = makeStyles()((theme) => ({
-  iconButton: {
-    padding: 7,
-    border: 0,
-    color: theme.palette.text.primary,
-    '&, &.MuiButtonGroup-grouped': {
-      minWidth: 36,
-    },
-    '&.MuiButtonGroup-grouped:not(:last-of-type)': {
-      borderRight: 0,
-    },
-  },
-  divider: {
-    margin: theme.spacing(0.5),
-  },
-}));
-
 export const EditorButtons = observer(() => {
   const { editorStore } = useRootStore();
-  const { classes, cx } = useStyles();
 
   return (
-    <>
-      <ButtonGroup
-        variant="text"
+    <Stack
+      direction="row"
+      spacing={1}
+    >
+      <ToggleButtonGroup
+        size="small"
       >
-        <Button
+        <ToggleButton
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
-          className={cx(classes.iconButton)}
-          color="inherit"
           aria-label="Undo"
+          value="undo"
         >
           <UndoIcon fontSize="small" />
-        </Button>
-        <Button
+        </ToggleButton>
+        <ToggleButton
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
-          className={cx(classes.iconButton)}
-          color="inherit"
           aria-label="Redo"
+          value="redo"
         >
           <RedoIcon fontSize="small" />
-        </Button>
-      </ButtonGroup>
-      <Divider
-        flexItem
-        orientation="vertical"
-        className={classes.divider}
-      />
+        </ToggleButton>
+      </ToggleButtonGroup>
       <ToggleButton
         selected={editorStore.showLineNumbers}
         onChange={() => editorStore.toggleLineNumbers()}
         size="small"
-        className={cx(classes.iconButton)}
         aria-label="Show line numbers"
         value="show-line-numbers"
       >
         <FormatListNumberedIcon fontSize="small" />
       </ToggleButton>
-    </>
+    </Stack>
   );
 });