add styling and dashboard grid

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),
     },
   })
 )

client/src/pages/admin/dashboard/Dashboard.tsx

-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>
   )
 }

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>
   )