diff --git a/src/components/Editor/index.jsx b/src/components/Editor/index.jsx
index ee8c5a0..68009ad 100644
--- a/src/components/Editor/index.jsx
+++ b/src/components/Editor/index.jsx
@@ -64,7 +64,7 @@ export default function Editor() {
value={code || defaultMsg}
showPrintMargin={false}
height="100vh"
- width="50vw"
+ width="100%"
name="editor"
annotations={[annotation]}
editorProps={{ $blockScrolling: true }}
diff --git a/src/components/Emulator/index.jsx b/src/components/Emulator/index.jsx
index df8a8b8..f75d195 100644
--- a/src/components/Emulator/index.jsx
+++ b/src/components/Emulator/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Display from 'components/Display';
@@ -10,19 +10,53 @@ const useStyles = makeStyles((theme) => ({
textAlign: 'center',
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.main,
- height: '100vh',
+ height: '100%',
display: 'flex',
flexDirection: 'column',
},
+ buttonsContainer: {
+ background: theme.palette.background.main,
+ color: theme.palette.text.primary,
+ padding: '.5rem',
+ },
+ buttonWrapper: {
+ display: 'flex',
+ backgroundColor: theme.palette.background.raised,
+ borderRadius: '0.5rem',
+ width: 'auto',
+ padding: '5px 2px',
+ justifyContent: 'center',
+ },
+ button: {
+ cursor: 'ponter',
+ padding: '0.4rem 0.8rem',
+ outline: 'none',
+ display: 'inline-block',
+ textAlign: 'center',
+ background: 'transparent',
+ color: theme.palette.text.primary,
+ border: 'none',
+ },
}));
export default function Emulator() {
+ const [toggle, setToggle] = useState(false);
+
const classes = useStyles();
return (