Fix tests

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

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

client/src/pages/admin/dashboard/widgets/CurrentUser.tsx → client/src/pages/admin/dashboard/components/CurrentUser.tsx

-import { Box } from '@material-ui/core'
+import { Box, Typography } from '@material-ui/core'
 import React from 'react'
 import { useAppSelector } from '../../../../hooks'
 
@@ -8,16 +8,18 @@ const CurrentUser: React.FC = () => {
     <div>
       <Box display="flex" flexDirection="column" alignContent="flex-start">
         <div>
-          <h1>Välkommen, {currentUser.name}!</h1>
+          <Typography variant="h2">
+            Välkommen{currentUser && currentUser.name ? `, ${currentUser.name}` : ''}!
+          </Typography>
         </div>
         <div>
-          <h2>Email: {currentUser.email}</h2>
+          <Typography variant="h6">Email: {currentUser && currentUser.email}</Typography>
         </div>
         <div>
-          <h2>Region: {currentUser.city.name}</h2>
+          <Typography variant="h6">Region: {currentUser && currentUser.city && currentUser.city.name}</Typography>
         </div>
         <div>
-          <h2>Roll: {currentUser.role.name}</h2>
+          <Typography variant="h6">Roll: {currentUser && currentUser.role && currentUser.role.name}</Typography>
         </div>
       </Box>
     </div>

client/src/pages/admin/dashboard/widgets/NumberOfCompetitions.tsx → client/src/pages/admin/dashboard/components/NumberOfCompetitions.tsx

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

client/src/pages/admin/dashboard/widgets/NumberOfRegions.tsx → client/src/pages/admin/dashboard/components/NumberOfRegions.tsx

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

client/src/pages/admin/dashboard/widgets/NumberOfUsers.tsx → client/src/pages/admin/dashboard/components/NumberOfUsers.tsx

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