Bump Material-UI version

4 files changed, 39 insertions, 27 deletions

diff --git a/language-web/src/main/js/App.jsx b/language-web/src/main/js/App.jsx
index a0920823..5bd46c09 100644
--- a/language-web/src/main/js/App.jsx
+++ b/language-web/src/main/js/App.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
@@ -9,10 +8,11 @@ import Typography from '@material-ui/core/Typography';
 import MenuIcon from '@material-ui/icons/Menu';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 
+import { makeStyles } from './makeStyles';
 import Editor from './editor/Editor';
 import EditorButtons from './editor/EditorButtons';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   container: {
     maxHeight: '100vh',
   },
@@ -28,13 +28,13 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default () => {
-  const classes = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
     <Box
       display='flex'
       flexDirection='column'
-      className={classes.container}
+      className={cx(classes.container)}
     >
       <AppBar
         position='static'
@@ -43,7 +43,7 @@ export default () => {
         <Toolbar>
           <IconButton
             edge='start'
-            className={classes.menuButton}
+            className={cx(classes.menuButton)}
             color='inherit'
             aria-label='menu'
           >
@@ -52,7 +52,7 @@ export default () => {
           <Typography
             variant='h6'
             component='h1'
-            className={classes.title}
+            className={cx(classes.title)}
           >
             GraphSolver
           </Typography>
@@ -83,7 +83,7 @@ export default () => {
       <Box
         flexGrow={1}
         flexShrink={1}
-        className={classes.editorBox}
+        className={cx(classes.editorBox)}
       >
         <Editor/>
       </Box>
diff --git a/language-web/src/main/js/editor/EditorButtons.jsx b/language-web/src/main/js/editor/EditorButtons.jsx
index 18139bd4..a5a57f93 100644
--- a/language-web/src/main/js/editor/EditorButtons.jsx
+++ b/language-web/src/main/js/editor/EditorButtons.jsx
@@ -1,34 +1,36 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 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 ToggleButton from '@material-ui/lab/ToggleButton';
 
+import { makeStyles } from '../makeStyles';
 import { useRootStore } from '../RootStore';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   iconButton: {
     padding: 7,
-    minWidth: 36,
     border: 0,
     color: theme.palette.text.primary,
-    '&.MuiButtonGroup-groupedTextHorizontal': {
+    '&, &.MuiButtonGroup-grouped': {
+      minWidth: 36,
+    },
+    '&.MuiButtonGroup-grouped:not(:last-of-type)': {
       borderRight: 0,
     },
   },
   divider: {
     margin: theme.spacing(0.5),
-  }
+  },
 }));
 
 export default observer(() => {
   const editorStore = useRootStore().editorStore;
-  const classes = useStyles();
+  const { classes, cx } = useStyles();
   return (
     <>
       <ButtonGroup
@@ -37,7 +39,8 @@ export default observer(() => {
         <Button
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
-          className={classes.iconButton}
+          className={cx(classes.iconButton)}
+          color='inherit'
           aria-label='Undo'
         >
           <UndoIcon fontSize='small'/>
@@ -45,7 +48,8 @@ export default observer(() => {
         <Button
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
-          className={classes.iconButton}
+          className={cx(classes.iconButton)}
+          color='inherit'
           aria-label='Redo'
         >
           <RedoIcon fontSize='small'/>
@@ -60,7 +64,7 @@ export default observer(() => {
         selected={editorStore.showLineNumbers}
         onChange={() => editorStore.toggleLineNumbers()}
         size='small'
-        className={classes.iconButton}
+        className={cx(classes.iconButton)}
         aria-label='Show line numbers'
         value='show-line-numbers'
       >
diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.jsx
index 40b02b14..d73ffcdd 100644
--- a/language-web/src/main/js/index.jsx
+++ b/language-web/src/main/js/index.jsx
@@ -1,7 +1,8 @@
+import { CacheProvider } from "@emotion/react";
 import React from 'react';
 import { render } from 'react-dom';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider, createTheme } from '@material-ui/core/styles';
+import { getCache } from "tss-react/cache";
 
 import App from './App';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -48,11 +49,12 @@ scope Family = 1, Person += 5..10.
 const rootStore = new RootStore();
 rootStore.editorStore.updateValue(initialValue);
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
-    type: 'dark',
+    mode: 'dark',
     background: {
       default: '#212121',
+      paper: '#2f2f2f',
     },
     primary: {
       main: '#82aaff',
@@ -64,12 +66,14 @@ const theme = createMuiTheme({
 });
 
 const app = (
-  <ThemeProvider theme={theme}>
-    <CssBaseline/>
-    <RootStoreProvider rootStore={rootStore}>
-      <App/>
-    </RootStoreProvider>
-  </ThemeProvider>
+  <CacheProvider value={getCache()}>
+    <ThemeProvider theme={theme}>
+      <CssBaseline/>
+      <RootStoreProvider rootStore={rootStore}>
+        <App/>
+      </RootStoreProvider>
+    </ThemeProvider>
+  </CacheProvider>
 )
 
 render(app, document.getElementById('app'));
diff --git a/language-web/src/main/js/makeStyles.js b/language-web/src/main/js/makeStyles.js
new file mode 100644
index 00000000..1dee6c1f
--- /dev/null
+++ b/language-web/src/main/js/makeStyles.js
@@ -0,0 +1,4 @@
+import { createMakeStyles } from "tss-react";
+import { useTheme } from "@material-ui/core/styles";
+
+export const { makeStyles } = createMakeStyles({ useTheme });