diff --git a/client/src/pages/admin/dashboard/Dashboard.tsx b/client/src/pages/admin/dashboard/Dashboard.tsx
index e73b6533fa09bb01e8233fd88e877681cfbb6448..a0f569b066a8073a14f9342dcb7d988be63b93b9 100644
--- a/client/src/pages/admin/dashboard/Dashboard.tsx
+++ b/client/src/pages/admin/dashboard/Dashboard.tsx
@@ -1,11 +1,10 @@
+import { createStyles, makeStyles, Paper, Theme, Typography } from '@material-ui/core'
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 NumberOfCompetitions from './widgets/NumberOfCompetitions'
-import NumberOfRegions from './widgets/NumberOfRegions'
-import NumberOfUsers from './widgets/NumberOfUsers'
+import CurrentUser from './components/CurrentUser'
+import NumberOfCompetitions from './components/NumberOfCompetitions'
+import NumberOfRegions from './components/NumberOfRegions'
+import NumberOfUsers from './components/NumberOfUsers'
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -22,7 +21,6 @@ const useStyles = makeStyles((theme: Theme) =>
const Dashboard: React.FC = () => {
const classes = useStyles()
-
return (
<div className={classes.root}>
<div>
@@ -35,19 +33,19 @@ const Dashboard: React.FC = () => {
<Grid item xs>
<Paper className={classes.paper}>
- <h1>Antal Användare:</h1>
+ <Typography variant="h4">Antal Användare:</Typography>
<NumberOfUsers />
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
- <h1>Antal Regioner:</h1>
+ <Typography variant="h4">Antal Regioner:</Typography>
<NumberOfRegions />
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
- <h1>Antal Tävlingar:</h1>
+ <Typography variant="h4">Antal Tävlingar:</Typography>
<NumberOfCompetitions />
</Paper>
</Grid>
diff --git a/client/src/pages/admin/dashboard/components/CurrentUser.tsx b/client/src/pages/admin/dashboard/components/CurrentUser.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0dfdf557bff55224f513fb742ba59bdc8c8b1f56
--- /dev/null
+++ b/client/src/pages/admin/dashboard/components/CurrentUser.tsx
@@ -0,0 +1,29 @@
+import { Box, Typography } from '@material-ui/core'
+import React from 'react'
+import { useAppSelector } from '../../../../hooks'
+
+const CurrentUser: React.FC = () => {
+ const currentUser = useAppSelector((state: { user: { userInfo: any } }) => state.user.userInfo)
+ return (
+ <div>
+ <Box display="flex" flexDirection="column" alignContent="flex-start">
+ <div>
+ <Typography variant="h2">
+ Välkommen{currentUser && currentUser.name ? `, ${currentUser.name}` : ''}!
+ </Typography>
+ </div>
+ <div>
+ <Typography variant="h6">Email: {currentUser && currentUser.email}</Typography>
+ </div>
+ <div>
+ <Typography variant="h6">Region: {currentUser && currentUser.city && currentUser.city.name}</Typography>
+ </div>
+ <div>
+ <Typography variant="h6">Roll: {currentUser && currentUser.role && currentUser.role.name}</Typography>
+ </div>
+ </Box>
+ </div>
+ )
+}
+
+export default CurrentUser
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx b/client/src/pages/admin/dashboard/components/NumberOfCompetitions.tsx
similarity index 81%
rename from client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx
rename to client/src/pages/admin/dashboard/components/NumberOfCompetitions.tsx
index a6a73455888f027feea529312849ef4f131ecb79..da5d015fd52d77de7e599e4f1bc2a62cee805483 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx
+++ b/client/src/pages/admin/dashboard/components/NumberOfCompetitions.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@material-ui/core'
+import { Box, Typography } from '@material-ui/core'
import React, { useEffect } from 'react'
import { getSearchUsers } from '../../../../actions/searchUser'
import { useAppDispatch, useAppSelector } from '../../../../hooks'
@@ -21,9 +21,9 @@ const NumberOfCompetitions: React.FC = () => {
}, [])
return (
<div>
- <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <Box width="100%" height="100%">
<div>
- <h1>{handleCount()}</h1>
+ <Typography variant="h4">{handleCount()}</Typography>
</div>
</Box>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx b/client/src/pages/admin/dashboard/components/NumberOfRegions.tsx
similarity index 81%
rename from client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
rename to client/src/pages/admin/dashboard/components/NumberOfRegions.tsx
index d2bf725143a41840e55ab027f20c31d32d661586..a48b41a61f7a46089cedcd9e6a981b9ca625ec56 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx
+++ b/client/src/pages/admin/dashboard/components/NumberOfRegions.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@material-ui/core'
+import { Box, Typography } from '@material-ui/core'
import React, { useEffect } from 'react'
import { getSearchUsers } from '../../../../actions/searchUser'
import { useAppDispatch, useAppSelector } from '../../../../hooks'
@@ -21,9 +21,9 @@ const NumberOfRegions: React.FC = () => {
}, [])
return (
<div>
- <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <Box width="100%" height="100%">
<div>
- <h1>{handleCount()}</h1>
+ <Typography variant="h4">{handleCount()}</Typography>
</div>
</Box>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx b/client/src/pages/admin/dashboard/components/NumberOfUsers.tsx
similarity index 80%
rename from client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
rename to client/src/pages/admin/dashboard/components/NumberOfUsers.tsx
index 1de1b5b9d78cd764388ba0ebb9b2cfd11ebd3847..af0f97677565aa264a61269c274cf890eec774d8 100644
--- a/client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx
+++ b/client/src/pages/admin/dashboard/components/NumberOfUsers.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@material-ui/core'
+import { Box, Typography } from '@material-ui/core'
import React, { useEffect } from 'react'
import { getSearchUsers } from '../../../../actions/searchUser'
import { useAppDispatch, useAppSelector } from '../../../../hooks'
@@ -21,9 +21,9 @@ const NumberOfUsers: React.FC = () => {
}, [])
return (
<div>
- <Box color="text.primary" bgcolor="" fontFamily="h3.fontFamily" width="100%" height="100%">
+ <Box width="100%" height="100%">
<div>
- <h1>{handleCount()}</h1>
+ <Typography variant="h4">{handleCount()}</Typography>
</div>
</Box>
</div>
diff --git a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx b/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
deleted file mode 100644
index 66384c974b93d609ac67249c6eb0069614386d5f..0000000000000000000000000000000000000000
--- a/client/src/pages/admin/dashboard/widgets/CurrentUser.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Box } from '@material-ui/core'
-import React from 'react'
-import { useAppSelector } from '../../../../hooks'
-
-const CurrentUser: React.FC = () => {
- const currentUser = useAppSelector((state: { user: { userInfo: any } }) => state.user.userInfo)
- return (
- <div>
- <Box display="flex" flexDirection="column" alignContent="flex-start">
- <div>
- <h1>Välkommen, {currentUser.name}!</h1>
- </div>
- <div>
- <h2>Email: {currentUser.email}</h2>
- </div>
- <div>
- <h2>Region: {currentUser.city.name}</h2>
- </div>
- <div>
- <h2>Roll: {currentUser.role.name}</h2>
- </div>
- </Box>
- </div>
- )
-}
-
-export default CurrentUser