1 files changed, 55 insertions, 82 deletions
diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx
index 5cd157fa..d25ac4d3 100644
--- a/language-web/src/main/js/App.tsx
+++ b/language-web/src/main/js/App.tsx
@@ -1,92 +1,65 @@
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import MenuIcon from '@mui/icons-material/Menu';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import React from 'react';
-import AppBar from '@material-ui/core/AppBar';
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import Toolbar from '@material-ui/core/Toolbar';
-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 { EditorArea } from './editor/EditorArea';
 import { EditorButtons } from './editor/EditorButtons';
-const useStyles = makeStyles()((theme) => ({
+export const App = (): JSX.Element => (
-  container: {
+  <Box
-    height: '100vh',
+    display="flex"
-  },
+    flexDirection="column"
-  menuButton: {
+    sx={{ height: '100vh' }}
-    marginRight: theme.spacing(2),
+  >
-  },
+    <AppBar
-  title: {
+      position="static"
-    flexGrow: 1,
+      color="inherit"
-  },
+    >
-  editorBox: {
+      <Toolbar>
-    overflow: 'auto',
+        <IconButton
-  },
+          edge="start"
-}));
+          sx={{ mr: 2 }}
+          color="inherit"
-export const App = (): JSX.Element => {
+          aria-label="menu"
-  const { classes, cx } = useStyles();
+        >
+          <MenuIcon />
-  return (
+        </IconButton>
+        <Typography
+          variant="h6"
+          component="h1"
+          flexGrow={1}
+        >
+          Refinery
+        </Typography>
+      </Toolbar>
+    </AppBar>
    <Box
      display="flex"
-      flexDirection="column"
+      justifyContent="space-between"
-      className={cx(classes.container)}
+      alignItems="center"
+      p={1}
    >
-      <AppBar
+      <EditorButtons />
-        position="static"
+      <Button
-        color="inherit"
+        variant="outlined"
-      >
+        color="primary"
-        <Toolbar>
+        startIcon={<PlayArrowIcon />}
-          <IconButton
-            edge="start"
-            className={cx(classes.menuButton)}
-            color="inherit"
-            aria-label="menu"
-          >
-            <MenuIcon />
-          </IconButton>
-          <Typography
-            variant="h6"
-            component="h1"
-            className={cx(classes.title)}
-          >
-            GraphSolver
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <Box
-        display="flex"
-        justifyContent="space-between"
-        alignItems="center"
-        p={1}
      >
-        <Box
+        Generate
-          display="flex"
+      </Button>
-          alignItems="center"
+    </Box>
-        >
+    <Box
-          <EditorButtons />
+      flexGrow={1}
-        </Box>
+      flexShrink={1}
-        <Box>
+      sx={{ overflow: 'auto' }}
-          <Button
+    >
-            variant="outlined"
+      <EditorArea />
-            color="primary"
-            startIcon={<PlayArrowIcon />}
-          >
-            Generate
-          </Button>
-        </Box>
-      </Box>
-      <Box
-        flexGrow={1}
-        flexShrink={1}
-        className={cx(classes.editorBox)}
-      >
-        <EditorArea />
-      </Box>
    </Box>
-  );
+  </Box>
-};
+);

diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx index 5cd157fa..d25ac4d3 100644 --- a/language-web/src/main/js/App.tsx +++ b/language-web/src/main/js/App.tsx
@@ -1,92 +1,65 @@
		1	import AppBar from '@mui/material/AppBar';
		2	import Box from '@mui/material/Box';
		3	import Button from '@mui/material/Button';
		4	import IconButton from '@mui/material/IconButton';
		5	import Toolbar from '@mui/material/Toolbar';
		6	import Typography from '@mui/material/Typography';
		7	import MenuIcon from '@mui/icons-material/Menu';
		8	import PlayArrowIcon from '@mui/icons-material/PlayArrow';
1	import React from 'react';	9	import React from 'react';
2	import AppBar from '@material-ui/core/AppBar';
3	import Box from '@material-ui/core/Box';
4	import Button from '@material-ui/core/Button';
5	import IconButton from '@material-ui/core/IconButton';
6	import Toolbar from '@material-ui/core/Toolbar';
7	import Typography from '@material-ui/core/Typography';
8	import MenuIcon from '@material-ui/icons/Menu';
9	import PlayArrowIcon from '@material-ui/icons/PlayArrow';
10		10
11	import { makeStyles } from './makeStyles';
12	import { EditorArea } from './editor/EditorArea';	11	import { EditorArea } from './editor/EditorArea';
13	import { EditorButtons } from './editor/EditorButtons';	12	import { EditorButtons } from './editor/EditorButtons';
14		13
15	const useStyles = makeStyles()((theme) => ({	14	export const App = (): JSX.Element => (
16	container: {	15	<Box
17	height: '100vh',	16	display="flex"
18	},	17	flexDirection="column"
19	menuButton: {	18	sx={{ height: '100vh' }}
20	marginRight: theme.spacing(2),	19	>
21	},	20	<AppBar
22	title: {	21	position="static"
23	flexGrow: 1,	22	color="inherit"
24	},	23	>
25	editorBox: {	24	<Toolbar>
26	overflow: 'auto',	25	<IconButton
27	},	26	edge="start"
28	}));	27	sx={{ mr: 2 }}
29		28	color="inherit"
30	export const App = (): JSX.Element => {	29	aria-label="menu"
31	const { classes, cx } = useStyles();	30	>
32		31	<MenuIcon />
33	return (	32	</IconButton>
		33	<Typography
		34	variant="h6"
		35	component="h1"
		36	flexGrow={1}
		37	>
		38	Refinery
		39	</Typography>
		40	</Toolbar>
		41	</AppBar>
34	<Box	42	<Box
35	display="flex"	43	display="flex"
36	flexDirection="column"	44	justifyContent="space-between"
37	className={cx(classes.container)}	45	alignItems="center"
		46	p={1}
38	>	47	>
39	<AppBar	48	<EditorButtons />
40	position="static"	49	<Button
41	color="inherit"	50	variant="outlined"
42	>	51	color="primary"
43	<Toolbar>	52	startIcon={<PlayArrowIcon />}
44	<IconButton
45	edge="start"
46	className={cx(classes.menuButton)}
47	color="inherit"
48	aria-label="menu"
49	>
50	<MenuIcon />
51	</IconButton>
52	<Typography
53	variant="h6"
54	component="h1"
55	className={cx(classes.title)}
56	>
57	GraphSolver
58	</Typography>
59	</Toolbar>
60	</AppBar>
61	<Box
62	display="flex"
63	justifyContent="space-between"
64	alignItems="center"
65	p={1}
66	>	53	>
67	<Box	54	Generate
68	display="flex"	55	</Button>
69	alignItems="center"	56	</Box>
70	>	57	<Box
71	<EditorButtons />	58	flexGrow={1}
72	</Box>	59	flexShrink={1}
73	<Box>	60	sx={{ overflow: 'auto' }}
74	<Button	61	>
75	variant="outlined"	62	<EditorArea />
76	color="primary"
77	startIcon={<PlayArrowIcon />}
78	>
79	Generate
80	</Button>
81	</Box>
82	</Box>
83	<Box
84	flexGrow={1}
85	flexShrink={1}
86	className={cx(classes.editorBox)}
87	>
88	<EditorArea />
89	</Box>
90	</Box>	63	</Box>
91	);	64	</Box>
92	};	65	);