Updated the look of the assignments

src/components/ModuleBadge.tsx

@@ -3,15 +3,21 @@ import {getGradingLabel, getLevelLabel} from "@/utils/score";
 import clsx from "clsx";
 import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
 
-const ModuleBadge: React.FC<{module: string; level?: number; gradingSystem?: Step[]}> = ({module, level, gradingSystem}) => (
+const ModuleBadge: React.FC<{module: string; level?: number; gradingSystem?: Step[]; className?: string}> = ({
+	module,
+	level,
+	gradingSystem,
+	className,
+}) => (
 	<div
 		className={clsx(
-			"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
+			"flex gap-2 justify-center items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
 			module === "reading" && "bg-ielts-reading",
 			module === "listening" && "bg-ielts-listening",
 			module === "writing" && "bg-ielts-writing",
 			module === "speaking" && "bg-ielts-speaking",
 			module === "level" && "bg-ielts-level",
+			className,
 		)}>
 		{module === "reading" && <BsBook className="w-4 h-4" />}
 		{module === "listening" && <BsHeadphones className="w-4 h-4" />}

src/dashboards/Student.tsx

@@ -27,7 +27,8 @@ import {useRouter} from "next/router";
 import {useEffect, useState} from "react";
 import {BsArrowRepeat, BsBook, BsClipboard, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
 import {toast} from "react-toastify";
-import { activeAssignmentFilter } from "@/utils/assignments";
+import {activeAssignmentFilter} from "@/utils/assignments";
+import ModuleBadge from "@/components/ModuleBadge";
 
 interface Props {
 	user: User;
@@ -70,8 +71,7 @@ export default function StudentDashboard({user, users, linkedCorporate}: Props)
 		});
 	};
 
-	const studentAssignments = assignments
+	const studentAssignments = assignments.filter(activeAssignmentFilter);
-	.filter(activeAssignmentFilter);
 
 	return (
 		<>
@@ -123,49 +123,32 @@ export default function StudentDashboard({user, users, linkedCorporate}: Props)
 					</div>
 				</div>
 				<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-					{studentAssignments.length === 0 &&
+					{studentAssignments.length === 0 && "Assignments will appear here. It seems that for now there are no assignments for you."}
-						"Assignments will appear here. It seems that for now there are no assignments for you."}
 					{studentAssignments
 						.sort((a, b) => moment(a.startDate).diff(b.startDate))
 						.map((assignment) => (
 							<div
 								className={clsx(
-									"border-mti-gray-anti-flash flex min-w-[300px] flex-col gap-6 rounded-xl border p-4",
+									"border-mti-gray-anti-flash flex min-w-[350px] flex-col gap-6 rounded-xl border p-4",
 									assignment.results.map((r) => r.user).includes(user.id) && "border-mti-green-light",
 								)}
 								key={assignment.id}>
 								<div className="flex flex-col gap-1">
 									<h3 className="text-mti-black/90 text-xl font-semibold">{assignment.name}</h3>
-									<span className="flex justify-between gap-1">
+									<span className="flex justify-between gap-1 text-lg">
 										<span>{moment(assignment.startDate).format("DD/MM/YY, HH:mm")}</span>
 										<span>-</span>
 										<span>{moment(assignment.endDate).format("DD/MM/YY, HH:mm")}</span>
 									</span>
 								</div>
 								<div className="flex w-full items-center justify-between">
-									<div className="-md:mt-2 grid w-fit min-w-[104px] grid-cols-2 place-items-center justify-center gap-2">
+									<div className="-md:mt-2 grid w-fit min-w-[140px] grid-cols-2 grid-rows-2 place-items-center justify-between gap-4">
 										{assignment.exams
 											.filter((e) => e.assignee === user.id)
 											.map((e) => e.module)
 											.sort(sortByModuleName)
 											.map((module) => (
-												<div
+												<ModuleBadge className="scale-110 w-full" key={module} module={module} />
-													key={module}
-													data-tip={capitalize(module)}
-													className={clsx(
-														"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
-														module === "reading" && "bg-ielts-reading",
-														module === "listening" && "bg-ielts-listening",
-														module === "writing" && "bg-ielts-writing",
-														module === "speaking" && "bg-ielts-speaking",
-														module === "level" && "bg-ielts-level",
-													)}>
-													{module === "reading" && <BsBook className="h-4 w-4" />}
-													{module === "listening" && <BsHeadphones className="h-4 w-4" />}
-													{module === "writing" && <BsPen className="h-4 w-4" />}
-													{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
-													{module === "level" && <BsClipboard className="h-4 w-4" />}
-												</div>
 											))}
 									</div>
 									{!assignment.results.map((r) => r.user).includes(user.id) && (
@@ -173,12 +156,11 @@ export default function StudentDashboard({user, users, linkedCorporate}: Props)
 											<div
 												className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
 												data-tip="Your screen size is too small to perform an assignment">
-												<Button  className="h-full w-full !rounded-xl" variant="outline">
+												<Button className="h-full w-full !rounded-xl" variant="outline">
 													Start
 												</Button>
 											</div>
 											<Button
-												
 												className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
 												onClick={() => startAssignment(assignment)}
 												variant="outline">