From a4529393f5140f500334424d418efa5aa23fcd98 Mon Sep 17 00:00:00 2001
From: bmodee <bjomo323@student.liu.se>
Date: Tue, 13 Apr 2021 11:10:11 +0200
Subject: [PATCH] add styling and dashboard grid
---
client/src/pages/admin/AdminPage.tsx | 4 +-
.../src/pages/admin/dashboard/Dashboard.tsx | 53 ++++++++++++++++---
.../admin/dashboard/widgets/CurrentUser.tsx | 4 +-
3 files changed, 52 insertions(+), 9 deletions(-)
diff --git a/client/src/pages/admin/AdminPage.tsx b/client/src/pages/admin/AdminPage.tsx
index c4e43b6d..a0dbe2bd 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 a8cd1ff5..e3139d72 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 f81be4eb..b197e7b0 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>
)
--
GitLab