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 ( - + +
+
+ +
+
+ + { toggle && }
); } diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx index 180b99c..2f137b5 100644 --- a/src/pages/Home/index.jsx +++ b/src/pages/Home/index.jsx @@ -20,10 +20,10 @@ export default function Home() { return (
- + - +