import Topbar from "./components/Topbar"; import RightPanel from "./components/RightPanel"; import LeftPanel from "./components/LeftPanel"; import { Grid } from "@material-ui/core"; import GrammarContextProvider from "./components/context/GrammarContext"; import Alert from "./components/common/Alert"; import Loading from "./components/common/Loading"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles((theme) => ({ container: { marginTop: 75, }, panel1: { [theme.breakpoints.down("sm")]: { marginBottom: 40, }, [theme.breakpoints.down("xs")]: { marginTop: 55, }, }, panel2: { [theme.breakpoints.down("sm")]: { marginBottom: 40, }, }, })); function App() { const classes = useStyles(); return ( <GrammarContextProvider> <Topbar /> <Grid container className={classes.container} spacing={2}> <Grid item xs={12} sm={12} md={6} className={classes.panel1}> <LeftPanel /> </Grid> <Grid item xs={12} sm={12} md={6} className={classes.panel2}> <RightPanel /> </Grid> </Grid> <Alert /> <Loading /> </GrammarContextProvider> ); } export default App;