diff --git a/client/src/pages/admin/AdminPage.tsx b/client/src/pages/admin/AdminPage.tsx index c4e43b6d138bf7ef18a8789bb95c7d5a6f4ee068..a0dbe2bd54f721ddad785b5b03776c64f87d2030 100644 --- a/client/src/pages/admin/AdminPage.tsx +++ b/client/src/pages/admin/AdminPage.tsx @@ -46,7 +46,9 @@ const useStyles = makeStyles((theme: Theme) => content: { flexGrow: 1, backgroundColor: theme.palette.background.default, - paddingLeft: theme.spacing(31), + paddingTop: theme.spacing(2), + paddingLeft: theme.spacing(35), + paddingRight: theme.spacing(5), }, }) ) diff --git a/client/src/pages/admin/dashboard/Dashboard.tsx b/client/src/pages/admin/dashboard/Dashboard.tsx index a8cd1ff59f31d0f47f190e4d9cff22bcfb37fa11..e3139d722ee897d50469ba508d3222734bfafef8 100644 --- a/client/src/pages/admin/dashboard/Dashboard.tsx +++ b/client/src/pages/admin/dashboard/Dashboard.tsx @@ -1,14 +1,55 @@ -import Box from '@material-ui/core/Box' +import Grid from '@material-ui/core/Grid' +import Paper from '@material-ui/core/Paper' +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' import React from 'react' import CurrentUser from './widgets/CurrentUser' -// import * from '@material-ui/core' + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + flexGrow: 1, + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + }, + }) +) const Dashboard: React.FC = () => { + const classes = useStyles() + return ( - <div className="widget-container"> - <Box display="flex" flexDirection="row" p={1} m={1} bgcolor="text.disabled"> - <CurrentUser /> - </Box> + <div className={classes.root}> + <div> + <Grid container spacing={3}> + <Grid item xs={12}> + <Paper className={classes.paper}>Dashboard Header</Paper> + </Grid> + <Grid item xs={6}> + <Paper className={classes.paper}>Widget 1</Paper> + </Grid> + <Grid item xs={6}> + <Paper className={classes.paper}>Widget 2</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>Widget 3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}> + Widget 4 + <CurrentUser /> + </Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>Widget 5</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>Widget 6</Paper> + </Grid> + </Grid> + </div> </div> ) } diff --git a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx index f81be4ebaaafba442d7bd64546e384fe99d96584..b197e7b0b3f4e45f1221c04b5a985c743172cf55 100644 --- a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx +++ b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx @@ -6,8 +6,8 @@ import React from 'react' const CurrentUser: React.FC = () => { return ( <div> - <Box color="text.primary" bgcolor="secondary.main" fontFamily="h3.fontFamily" width="200%" height="200%"> - Current User Widget + <Box color="text.primary" bgcolor="secondary.main" fontFamily="h3.fontFamily" width="100%" height="100%"> + Current user info </Box> </div> )