From ff3cbef014fb13714b78f8a2dc07022e6b2a0d99 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Wed, 13 Mar 2024 14:13:49 +0100
Subject: [PATCH] imports  geoptimaliseerd en dubbele declaraties verwijderd.
 paginas moete nu werkende zijn.

---
 frontend/frontend/src/components/ItemList.tsx |  74 +++++----
 .../src/components/StudentScoreListItem.tsx   |  26 +--
 frontend/frontend/src/main.tsx                |  76 +++++----
 .../assignmentPage/assignmentStudentPage.tsx  | 121 +++++++-------
 .../assignmentPage/assignmentTeacherPage.tsx  | 149 +++++++++---------
 .../src/pages/groupsPage/groupsPage.tsx       |  77 ++++-----
 6 files changed, 269 insertions(+), 254 deletions(-)

diff --git a/frontend/frontend/src/components/ItemList.tsx b/frontend/frontend/src/components/ItemList.tsx
index 8c9c749d..cf90a656 100644
--- a/frontend/frontend/src/components/ItemList.tsx
+++ b/frontend/frontend/src/components/ItemList.tsx
@@ -1,40 +1,52 @@
-import { Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody,useTheme, ThemeProvider } from '@mui/material';
+import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from '@mui/material';
 import theme from '../Theme';
 
 interface Item {
-  opdracht: string;
-  deadline: string;
-  status: string;
-  score: string;
+    opdracht: string;
+    deadline: string;
+    status: string;
+    score: string;
 }
 
 interface ItemListProps {
-  itemList: Item[];
+    itemList: Item[];
 }
 
-export const ItemList: React.FC<ItemListProps> = ({ itemList }) => {
-  return (
-    <TableContainer component={Paper} variant="outlined">
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell style={{ backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText }}>Opdracht</TableCell>
-            <TableCell style={{ backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText }}>Deadline</TableCell>
-            <TableCell style={{ backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText }}>Status</TableCell>
-            <TableCell style={{ backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText }}>Score</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {itemList.map((item, index) => (
-            <TableRow key={index}>
-              <TableCell>{item.opdracht}</TableCell>
-              <TableCell>{item.deadline}</TableCell>
-              <TableCell>{item.status}</TableCell>
-              <TableCell>{item.score}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
+export const ItemList: React.FC<ItemListProps> = ({itemList}) => {
+    return (
+        <TableContainer component={Paper} variant="outlined">
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell style={{
+                            backgroundColor: theme.palette.secondary.main,
+                            color: theme.palette.secondary.contrastText
+                        }}>Opdracht</TableCell>
+                        <TableCell style={{
+                            backgroundColor: theme.palette.secondary.main,
+                            color: theme.palette.secondary.contrastText
+                        }}>Deadline</TableCell>
+                        <TableCell style={{
+                            backgroundColor: theme.palette.secondary.main,
+                            color: theme.palette.secondary.contrastText
+                        }}>Status</TableCell>
+                        <TableCell style={{
+                            backgroundColor: theme.palette.secondary.main,
+                            color: theme.palette.secondary.contrastText
+                        }}>Score</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {itemList.map((item, index) => (
+                        <TableRow key={index}>
+                            <TableCell>{item.opdracht}</TableCell>
+                            <TableCell>{item.deadline}</TableCell>
+                            <TableCell>{item.status}</TableCell>
+                            <TableCell>{item.score}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
 };
diff --git a/frontend/frontend/src/components/StudentScoreListItem.tsx b/frontend/frontend/src/components/StudentScoreListItem.tsx
index 74d6bccd..fd586d32 100644
--- a/frontend/frontend/src/components/StudentScoreListItem.tsx
+++ b/frontend/frontend/src/components/StudentScoreListItem.tsx
@@ -1,6 +1,7 @@
-import {ListItem, ListItemText, Divider, TextField, IconButton} from "@mui/material";
+import {Divider, IconButton, ListItem, ListItemText, TextField} from "@mui/material";
 import DownloadIcon from '@mui/icons-material/Download';
-import {t} from "i18next";
+
+//TODO: take care of internationalization
 
 interface StudentScoreListItemProps {
     key: string;
@@ -15,10 +16,10 @@ interface StudentScoreListItemProps {
 * @param submissionFiles: string[] - a list of all files submitted by this student
 */
 
-export function StudentScoreListItem({key, studentName, submissionFiles}:StudentScoreListItemProps) {
+export function StudentScoreListItem({key, studentName, submissionFiles}: StudentScoreListItemProps) {
     return (
         <>
-            <ListItem key={studentName} sx={{margin:0}} disablePadding={true}>
+            <ListItem key={studentName} sx={{margin: 0}} disablePadding={true}>
                 <ListItem sx={{
                     width: "100%",
                     height: 30,
@@ -27,18 +28,19 @@ export function StudentScoreListItem({key, studentName, submissionFiles}:Student
                     justifyContent: "space-between",
                     paddingX: 1,
                     paddingY: 3,
-                    borderRadius:2,
+                    borderRadius: 2,
                 }}>
                     <>
-                        <ListItemText sx={{maxWidth:100}} primary={studentName}/>
-                        <ListItemText sx={{maxWidth:110}} primary={submissionFiles.length? submissionFiles.length + " indieningen" : "geen indieningen"}/>
-                        <ListItem sx={{maxWidth:100}}>
-                            <TextField hiddenLabel defaultValue="0" variant="filled" size="small" />
-                            <ListItemText sx={{maxWidth:100}} primary="/20"/>
+                        <ListItemText sx={{maxWidth: 100}} primary={studentName}/>
+                        <ListItemText sx={{maxWidth: 110}}
+                                      primary={submissionFiles.length ? submissionFiles.length + " indieningen" : "geen indieningen"}/>
+                        <ListItem sx={{maxWidth: 100}}>
+                            <TextField hiddenLabel defaultValue="0" variant="filled" size="small"/>
+                            <ListItemText sx={{maxWidth: 100}} primary="/20"/>
                         </ListItem>
-                        <ListItem sx={{maxWidth:100}}>
+                        <ListItem sx={{maxWidth: 100}}>
                             <IconButton edge="end" aria-label="download">
-                                <DownloadIcon />
+                                <DownloadIcon/>
                             </IconButton>
                         </ListItem>
                     </>
diff --git a/frontend/frontend/src/main.tsx b/frontend/frontend/src/main.tsx
index 9141dcd8..201c4b5b 100644
--- a/frontend/frontend/src/main.tsx
+++ b/frontend/frontend/src/main.tsx
@@ -9,14 +9,12 @@ import ErrorPage from "./pages/ErrorPage.tsx";
 import {MainPage} from "./pages/mainPage/MainPage.tsx";
 import {Helmet, HelmetProvider} from "react-helmet-async";
 
-import { SubjectsStudentPage } from "./pages/subjectsPage/SubjectsStudentPage.tsx";
-import { SubjectsTeacherPage } from "./pages/subjectsPage/SubjectsTeacherPage.tsx";
-import { ProjectScoresPage } from "./pages/scoresPage/ProjectScoresPage.tsx";
-import { SubjectsStudentPage } from "./pages/subjects_page/SubjectsStudentPage.tsx";
-import { AssignmentStudentPage } from "./pages/assignmentPage/assignmentStudentPage";
-import { AssignmentTeacherPage } from "./pages/assignmentPage/assignmentTeacherPage.tsx";
-import { GroupsPage } from "./pages/groupsPage/groupsPage.tsx";
-import {SubjectsStudentPage} from "./pages/subjects_page/SubjectsStudentPage.tsx";
+import {SubjectsStudentPage} from "./pages/SubjectsPage/SubjectsStudentPage.tsx";
+import {SubjectsTeacherPage} from "./pages/SubjectsPage/SubjectsTeacherPage.tsx";
+import {ProjectScoresPage} from "./pages/scoresPage/ProjectScoresPage.tsx";
+import {AssignmentStudentPage} from "./pages/assignmentPage/assignmentStudentPage";
+import {AssignmentTeacherPage} from "./pages/assignmentPage/assignmentTeacherPage.tsx";
+import {GroupsPage} from "./pages/groupsPage/groupsPage.tsx";
 import {LocalizationProvider} from "@mui/x-date-pickers";
 import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs/AdapterDayjs';
 
@@ -25,37 +23,37 @@ import {SimpleRequestsPage} from "./pages/simpleRequestsPage/SimpleRequestsPage.
 
 
 const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <MainPage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/subjects_student/:courseId",
-    element: <SubjectsStudentPage />,
-  },
-  {
-
-    path: "/subjects_teacher/:courseId",
-    element: <SubjectsTeacherPage />,
-  },
-  {
-    path: "/scores",
-    element: <ProjectScoresPage />,
-  },
+    {
+        path: "/",
+        element: <MainPage/>,
+        errorElement: <ErrorPage/>,
+    },
+    {
+        path: "/subjects_student/:courseId",
+        element: <SubjectsStudentPage/>,
+    },
+    {
 
-    path: "/assignment_student",
-    element: <AssignmentStudentPage />,
-  },
-  {
-    path: "/assignment_teacher",
-    element: <AssignmentTeacherPage/>,
-  },
-  {
-    path: "/groups",
-    element: <GroupsPage/>,
-  },
-   {
+        path: "/subjects_teacher/:courseId",
+        element: <SubjectsTeacherPage/>,
+    },
+    {
+        path: "/scores",
+        element: <ProjectScoresPage/>,
+    },
+    {
+        path: "/assignment_student",
+        element: <AssignmentStudentPage/>,
+    },
+    {
+        path: "/assignment_teacher",
+        element: <AssignmentTeacherPage/>,
+    },
+    {
+        path: "/groups",
+        element: <GroupsPage/>,
+    },
+    {
         path: "/subjects_student",
         element: <SubjectsStudentPage/>,
     },
@@ -65,7 +63,7 @@ const router = createBrowserRouter([
         path: "/submission/:project",
         element: <SubmissionPage/>,
     },
-  {
+    {
         path: "/test_requests",
         element: <SimpleRequestsPage/>,
     }
diff --git a/frontend/frontend/src/pages/assignmentPage/assignmentStudentPage.tsx b/frontend/frontend/src/pages/assignmentPage/assignmentStudentPage.tsx
index d4ee8111..83b137f2 100644
--- a/frontend/frontend/src/pages/assignmentPage/assignmentStudentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/assignmentStudentPage.tsx
@@ -1,6 +1,6 @@
 import {Header} from "../../components/Header.tsx";
-import { AssignmentListItem } from "../../components/AssignmentListItem.tsx";
-import {Box,List, Button, Stack, Typography, Card, Divider} from "@mui/material";
+import {AssignmentListItem} from "../../components/AssignmentListItem.tsx";
+import {Box, Button, Card, Divider, List, Stack, Typography} from "@mui/material";
 
 const text = "Lorem ipsum dolor sit amet consectetur. Nisi magna dolor et nisi nibh et velit phasellus. Aliquam semper justo posuere suspendisse amet amet nam nec. Tellus magna in proin tempor hac sit. Faucibus laoreet nulla commodo quis. Porttitor sit facilisis sit dignissim quis. Malesuada etiam tempor donec et ante. Aliquam massa donec augue aliquam semper amet blandit sed faucibus. Et elementum duis adipiscing turpis mi. Senectus eu rutrum accumsan convallis metus mattis risus. Quam eget sapien tellus aliquam facilisi sit volutpat. Scelerisque auctor purus nam sit lacus amet ullamcorper amet. Turpis nulla quis in pretium. Maecenas aliquam ac ullamcorper suspendisse morbi cras. Mi nibh aliquet massa sit eget tristique a. Posuere pretium auctor tellus massa et eu egestas. Sit lorem proin aenean tortor morbi condimentum. Leo eu enim cursus tempus sed viverra laoreet. Nisl ornare velit molestie suspendisse. Hendrerit nibh mauris vulputate sit vitae. Tellus quisque non nibh proin nunc lacus scelerisque dui. Aliquam fermentum libero aliquet volutpat at. Vestibulum ultrices nec felis leo nibh viverra. Hendrerit ut nunc porta egestas sit velit dictumst dis porta. Donec quam aliquam commodo mattis purus. Tellus nulla lectus fusce in fames scelerisque at."
 
@@ -53,74 +53,75 @@ const assignments = [
 ];
 
 
-
 export function AssignmentStudentPage() {
     return (
         <>
-        <Header variant={"default"} title={"Naam Opdracht"}></Header>
-        <Stack marginTop={15} direction={"column"} spacing={4} sx={{width:"100%" ,height:"100%", backgroundColor:"background.default"}}>
-            
-            {/*deadline and groep button */ }
-            <Stack direction={"row"}>
-                <Typography color="text.primary">Deadline: 02/04/2024</Typography>
-                <div style={{ flexGrow: 1 }} />
-                <Button sx={{ bgcolor: 'secondary.main', textTransform: 'none' }}>
-                    <Typography color="secondary.contrastText">groep</Typography>
-                </Button>
-            </Stack>
+            <Header variant={"default"} title={"Naam Opdracht"}></Header>
+            <Stack marginTop={15} direction={"column"} spacing={4}
+                   sx={{width: "100%", height: "100%", backgroundColor: "background.default"}}>
 
-            {/*Opgave*/ }
-            <Card elevation={1} sx={{
-                color:"text.primary", 
-                padding: '20px',
-                backgroundColor: "background.default",
-                borderRadius:5,
-                }}
-            >
-                <Stack direction={"column"}>
-                    <Typography sx={{ textDecoration: 'underline' }}>Opgave</Typography>
-                    <Typography>{text}</Typography>
+                {/*deadline and groep button */}
+                <Stack direction={"row"}>
+                    <Typography color="text.primary">Deadline: 02/04/2024</Typography>
+                    <div style={{flexGrow: 1}}/>
+                    <Button sx={{bgcolor: 'secondary.main', textTransform: 'none'}}>
+                        <Typography color="secondary.contrastText">groep</Typography>
+                    </Button>
                 </Stack>
-            </Card>
 
-            {/*Indieningen*/ }
-            <Card elevation={1} sx={{ 
-                    color:"text.primary", 
+                {/*Opgave*/}
+                <Card elevation={1} sx={{
+                    color: "text.primary",
+                    padding: '20px',
                     backgroundColor: "background.default",
-                    borderRadius:5,
-                    padding: '20px' 
+                    borderRadius: 5,
                 }}
-            >
-                <Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} paddingLeft={0} paddingRight={10}>
-                    <Typography width={30}>Indiening</Typography>
-                    <Typography width={30}>Datum</Typography>
-                </Box>
-                <List disablePadding={true}>
-                    {assignments.map((assignment) => (
-                        <>
-                            <Divider color={"text.main"}></Divider>
-                            <AssignmentListItem key={assignment.id} projectName={assignment.name}
-                                                dueDate={assignment.deadline}
-                                                status={assignment.id === "assignment1"}
-                                                isStudent={false}/>
-                            
-                        </>
-                    ))}
-                </List>
-            </Card>
+                >
+                    <Stack direction={"column"}>
+                        <Typography sx={{textDecoration: 'underline'}}>Opgave</Typography>
+                        <Typography>{text}</Typography>
+                    </Stack>
+                </Card>
 
-            {/*Upload knop*/ }
-            <Stack direction={"row"}>
-                <Button sx={{ bgcolor: 'primary.main', textTransform: 'none' }}>
-                    <Typography color="primary.contrastText">Uploaden</Typography>
-                </Button>
-                <div style={{ flexGrow: 1 }} />
-                <Button sx={{ bgcolor: 'success.main', textTransform: 'none' }}>
-                    <Typography color="primary.contrastText">Uploaden Geslaagd</Typography>
-                </Button>
-            </Stack>
+                {/*Indieningen*/}
+                <Card elevation={1} sx={{
+                    color: "text.primary",
+                    backgroundColor: "background.default",
+                    borderRadius: 5,
+                    padding: '20px'
+                }}
+                >
+                    <Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} paddingLeft={0}
+                         paddingRight={10}>
+                        <Typography width={30}>Indiening</Typography>
+                        <Typography width={30}>Datum</Typography>
+                    </Box>
+                    <List disablePadding={true}>
+                        {assignments.map((assignment) => (
+                            <>
+                                <Divider color={"text.main"}></Divider>
+                                <AssignmentListItem id={assignment.id} projectName={assignment.name}
+                                                    dueDate={assignment.deadline}
+                                                    status={assignment.id === "assignment1"}
+                                                    isStudent={false}/>
+
+                            </>
+                        ))}
+                    </List>
+                </Card>
 
-        </Stack>
+                {/*Upload knop*/}
+                <Stack direction={"row"}>
+                    <Button sx={{bgcolor: 'primary.main', textTransform: 'none'}}>
+                        <Typography color="primary.contrastText">Uploaden</Typography>
+                    </Button>
+                    <div style={{flexGrow: 1}}/>
+                    <Button sx={{bgcolor: 'success.main', textTransform: 'none'}}>
+                        <Typography color="primary.contrastText">Uploaden Geslaagd</Typography>
+                    </Button>
+                </Stack>
+
+            </Stack>
         </>
     );
 }
diff --git a/frontend/frontend/src/pages/assignmentPage/assignmentTeacherPage.tsx b/frontend/frontend/src/pages/assignmentPage/assignmentTeacherPage.tsx
index fbc7653a..660605ae 100644
--- a/frontend/frontend/src/pages/assignmentPage/assignmentTeacherPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/assignmentTeacherPage.tsx
@@ -1,11 +1,11 @@
 import {Header} from "../../components/Header.tsx";
-import {Grid ,TextField,Box,List, Button, Stack, Typography, Card, Divider, ListItem, ListItemText} from "@mui/material";
+import {Button, Card, Divider, Grid, List, ListItem, ListItemText, Stack, TextField, Typography} from "@mui/material";
 import UploadIcon from '@mui/icons-material/Upload';
 import SaveIcon from '@mui/icons-material/Save';
 import AddIcon from '@mui/icons-material/Add';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import {LocalizationProvider} from '@mui/x-date-pickers';
+import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs'
+import {DatePicker} from '@mui/x-date-pickers/DatePicker';
 
 const text = "Lorem ipsum dolor sit amet consectetur. Nisi magna dolor et nisi nibh et velit phasellus. Aliquam semper justo posuere suspendisse amet amet nam nec. Tellus magna in proin tempor hac sit. Faucibus laoreet nulla commodo quis. Porttitor sit facilisis sit dignissim quis. Malesuada etiam tempor donec et ante. Aliquam massa donec augue aliquam semper amet blandit sed faucibus. Et elementum duis adipiscing turpis mi. Senectus eu rutrum accumsan convallis metus mattis risus. Quam eget sapien tellus aliquam facilisi sit volutpat. Scelerisque auctor purus nam sit lacus amet ullamcorper amet. Turpis nulla quis in pretium. Maecenas aliquam ac ullamcorper suspendisse morbi cras. Mi nibh aliquet massa sit eget tristique a. Posuere pretium auctor tellus massa et eu egestas. Sit lorem proin aenean tortor morbi condimentum. Leo eu enim cursus tempus sed viverra laoreet. Nisl ornare velit molestie suspendisse. Hendrerit nibh mauris vulputate sit vitae. Tellus quisque non nibh proin nunc lacus scelerisque dui. Aliquam fermentum libero aliquet volutpat at. Vestibulum ultrices nec felis leo nibh viverra. Hendrerit ut nunc porta egestas sit velit dictumst dis porta. Donec quam aliquam commodo mattis purus. Tellus nulla lectus fusce in fames scelerisque at."
 
@@ -29,7 +29,7 @@ interface restrictionProps {
     details: string,
 }
 
-export function Restriction({type,details}:restrictionProps) {
+export function Restriction({type, details}: restrictionProps) {
     return (
         <>
             <ListItem>
@@ -44,93 +44,94 @@ export function Restriction({type,details}:restrictionProps) {
 export function AssignmentTeacherPage() {
     return (
         <>
-        <Header variant={"default"} title={"Naam Project"}></Header>
-        <Stack marginTop={15} direction={"column"} spacing={4} sx={{width:"100%" ,height:"100%", backgroundColor:"background.default"}}>
-        
-            {/*opdracht and upload button*/ }
-            <Stack direction={"row"}>
+            <Header variant={"default"} title={"Naam Project"}></Header>
+            <Stack marginTop={15} direction={"column"} spacing={4}
+                   sx={{width: "100%", height: "100%", backgroundColor: "background.default"}}>
+
+                {/*opdracht and upload button*/}
+                <Stack direction={"row"}>
                     <Grid container spacing={2} alignItems="center">
                         <Grid item>
-                            <Typography variant="h6" sx={{ textDecoration: 'underline' }} color="text.primary">
+                            <Typography variant="h6" sx={{textDecoration: 'underline'}} color="text.primary">
                                 Naam Opdracht:
                             </Typography>
                         </Grid>
                         <Grid item>
-                            <TextField variant="outlined" />
+                            <TextField variant="outlined"/>
                         </Grid>
                     </Grid>
-                    <div style={{ flexGrow: 1 }} />
-                    <Button sx={{ bgcolor: 'secondary.main', textTransform: 'none' }}>
+                    <div style={{flexGrow: 1}}/>
+                    <Button sx={{bgcolor: 'secondary.main', textTransform: 'none'}}>
                         <Typography color="secondary.contrastText">upload opgavebestand</Typography>
                         <UploadIcon></UploadIcon>
                     </Button>
-            </Stack>
-            
+                </Stack>
 
-            <Grid container spacing={2} alignItems="center">
-                <Grid item>
-                    <Typography variant="h6" sx={{ textDecoration: 'underline' }} color="text.primary">
-                        Deadline:
-                    </Typography>
-                </Grid>
-                <Grid item>
-                    <LocalizationProvider dateAdapter={AdapterDayjs}>
-                        <DatePicker />
-                    </LocalizationProvider>
+
+                <Grid container spacing={2} alignItems="center">
+                    <Grid item>
+                        <Typography variant="h6" sx={{textDecoration: 'underline'}} color="text.primary">
+                            Deadline:
+                        </Typography>
+                    </Grid>
+                    <Grid item>
+                        <LocalizationProvider dateAdapter={AdapterDayjs}>
+                            <DatePicker/>
+                        </LocalizationProvider>
+                    </Grid>
                 </Grid>
-            </Grid>
-            
-            {/*Opgave*/ }
-            <Card elevation={1} sx={{
-                color:"text.primary", 
-                padding: '20px',
-                backgroundColor: "background.default",
-                borderRadius:5,
+
+                {/*Opgave*/}
+                <Card elevation={1} sx={{
+                    color: "text.primary",
+                    padding: '20px',
+                    backgroundColor: "background.default",
+                    borderRadius: 5,
                 }}
-            >
-                <Stack direction={"column"}>
-                    <Typography sx={{ textDecoration: 'underline' }}>Opgave</Typography>
-                    <Typography>{text}</Typography>
-                </Stack>
-            </Card>
+                >
+                    <Stack direction={"column"}>
+                        <Typography sx={{textDecoration: 'underline'}}>Opgave</Typography>
+                        <Typography>{text}</Typography>
+                    </Stack>
+                </Card>
 
-            {/*Restricties*/ }
-            <Card elevation={1} sx={{ 
-                    color:"text.primary", 
+                {/*Restricties*/}
+                <Card elevation={1} sx={{
+                    color: "text.primary",
                     backgroundColor: "background.default",
-                    borderRadius:5,
-                    padding: '20px' 
+                    borderRadius: 5,
+                    padding: '20px'
                 }}
-            >
-                <List>
-                    <ListItem>
-                        <ListItemText><strong>Type restrictie</strong></ListItemText>
-                        <ListItemText><strong>Details</strong></ListItemText>
-                    </ListItem>
-                    <Divider/>
-                    
-                    {restrictions.map((res) =>
-                        <Restriction type={res.type} details={res.details}></Restriction>
-                    )}
-                    
-                </List>
-
-                <Button sx={{ bgcolor: 'secondary.main'}}>
-                    <AddIcon sx={{ color: "secondary.contrastText" }}></AddIcon>
-                </Button>
-                
-            </Card>
-
-            <Stack direction={"row"}>
-                <Button sx={{ bgcolor: 'secondary.main', textTransform: 'none' }}>
-                    <Typography color="secondary.contrastText">groepen</Typography>
-                </Button>
-                <div style={{ flexGrow: 1 }} />
-                <Button sx={{ bgcolor: 'secondary.main', textTransform: 'none' }}>
-                <   SaveIcon sx={{ color: "secondary.contrastText" }} ></SaveIcon>
-                </Button>
+                >
+                    <List>
+                        <ListItem>
+                            <ListItemText><strong>Type restrictie</strong></ListItemText>
+                            <ListItemText><strong>Details</strong></ListItemText>
+                        </ListItem>
+                        <Divider/>
+
+                        {restrictions.map((res) =>
+                            <Restriction type={res.type} details={res.details}></Restriction>
+                        )}
+
+                    </List>
+
+                    <Button sx={{bgcolor: 'secondary.main'}}>
+                        <AddIcon sx={{color: "secondary.contrastText"}}></AddIcon>
+                    </Button>
+
+                </Card>
+
+                <Stack direction={"row"}>
+                    <Button sx={{bgcolor: 'secondary.main', textTransform: 'none'}}>
+                        <Typography color="secondary.contrastText">groepen</Typography>
+                    </Button>
+                    <div style={{flexGrow: 1}}/>
+                    <Button sx={{bgcolor: 'secondary.main', textTransform: 'none'}}>
+                        <   SaveIcon sx={{color: "secondary.contrastText"}}></SaveIcon>
+                    </Button>
+                </Stack>
             </Stack>
-        </Stack>    
         </>
     );
 }
\ No newline at end of file
diff --git a/frontend/frontend/src/pages/groupsPage/groupsPage.tsx b/frontend/frontend/src/pages/groupsPage/groupsPage.tsx
index 99cbf84a..e20645cc 100644
--- a/frontend/frontend/src/pages/groupsPage/groupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/groupsPage.tsx
@@ -1,5 +1,5 @@
 import {Header} from "../../components/Header.tsx";
-import {Grid ,TextField,Box,List, Button, Stack, Typography, Card, Divider, ListItem, ListItemText} from "@mui/material";
+import {Card, Divider, Grid, List, ListItem, ListItemText, Stack, TextField, Typography} from "@mui/material";
 import Switch from '@mui/material/Switch';
 
 
@@ -41,15 +41,15 @@ interface GroupListItemProps {
     name: string,
 }
 
-export function GroupListItem({name}:GroupListItemProps) {
+export function GroupListItem({name}: GroupListItemProps) {
     return (
         <>
-         <Card elevation={1} sx={{
-                color:"text.primary", 
+            <Card elevation={1} sx={{
+                color: "text.primary",
                 padding: '0px',
                 backgroundColor: "background.default",
-                borderRadius:5,
-                }}
+                borderRadius: 5,
+            }}
             >
                 <ListItem>
                     <ListItemText>{name}</ListItemText>
@@ -64,47 +64,48 @@ export function GroupListItem({name}:GroupListItemProps) {
 export function GroupsPage() {
     return (
         <>
-        <Header variant={"default"} title={"Project 1: groepen"}></Header>
-            <Stack marginTop={15} direction={"column"} spacing={4} sx={{width:"100%" ,height:"100%", backgroundColor:"background.default"}}>
-            <Typography variant="h6" sx={{ textDecoration: 'underline' }} color="text.primary">
-                                Groepen:
-            </Typography>
-            <Stack direction={"row"}>
+            <Header variant={"default"} title={"Project 1: groepen"}></Header>
+            <Stack marginTop={15} direction={"column"} spacing={4}
+                   sx={{width: "100%", height: "100%", backgroundColor: "background.default"}}>
+                <Typography variant="h6" sx={{textDecoration: 'underline'}} color="text.primary">
+                    Groepen:
+                </Typography>
+                <Stack direction={"row"}>
                     <Grid container spacing={2} alignItems="center">
                         <Grid item>
-                            <Typography sx={{ textDecoration: 'underline' }} color="text.primary">
+                            <Typography sx={{textDecoration: 'underline'}} color="text.primary">
                                 Leden per groep:
                             </Typography>
                         </Grid>
                         <Grid item>
-                            <TextField variant="outlined" sx={{ width: "50px"}} />
+                            <TextField variant="outlined" sx={{width: "50px"}}/>
                         </Grid>
                     </Grid>
-            </Stack>
-            <Stack direction="row" alignItems="center" spacing={2}>
-                <Typography sx={{ textDecoration: 'underline' }} color="text.primary">
-                    Willekeurige groepen:
-                </Typography>
-                <Switch />
-                <Typography sx={{ textDecoration: 'underline' }} color="text.primary">
-                    Studenten kunnen kiezen:
-                </Typography>
-                <Switch />
-            </Stack>
+                </Stack>
+                <Stack direction="row" alignItems="center" spacing={2}>
+                    <Typography sx={{textDecoration: 'underline'}} color="text.primary">
+                        Willekeurige groepen:
+                    </Typography>
+                    <Switch/>
+                    <Typography sx={{textDecoration: 'underline'}} color="text.primary">
+                        Studenten kunnen kiezen:
+                    </Typography>
+                    <Switch/>
+                </Stack>
 
-           
-            <List sx={{ '& > :not(style)': { marginBottom: '8px' ,width: "100vh" } }}>
-                <ListItem>
-                    <ListItemText><strong>Naam Student</strong></ListItemText>
-                    <ListItemText><strong>Ingeschreven groep</strong></ListItemText>
-                </ListItem>
-                <Divider/>
-                
-                {groups.map((res) =>
-                    <GroupListItem name={res.name}></GroupListItem>
-                )}
-                
-            </List>
+
+                <List sx={{'& > :not(style)': {marginBottom: '8px', width: "100vh"}}}>
+                    <ListItem>
+                        <ListItemText><strong>Naam Student</strong></ListItemText>
+                        <ListItemText><strong>Ingeschreven groep</strong></ListItemText>
+                    </ListItem>
+                    <Divider/>
+
+                    {groups.map((res) =>
+                        <GroupListItem name={res.name}></GroupListItem>
+                    )}
+
+                </List>
 
             </Stack>
         </>