Created a screen for the module exam selection

src/components/Navbar.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable @next/next/no-img-element */
 export default function Navbar() {
 	return (
-		<div className="navbar bg-base-100">
+		<div className="navbar bg-neutral-100 drop-shadow-md text-black">
 			<div className="flex-1">
 				<a className="btn btn-ghost normal-case text-xl">IELTS GPT</a>
 			</div>
 			<div className="flex-none gap-2">
 				<div className="form-control">
-					<input type="text" placeholder="Search" className="input input-bordered" />
+					<input type="text" placeholder="Search" className="input input-bordered bg-white" />
 				</div>
 				<div className="dropdown dropdown-end">
 					<label tabIndex={0} className="btn btn-ghost btn-circle avatar">

src/components/UserResultChart.tsx

@@ -1,5 +1,6 @@
 import {Module} from "@/interfaces";
 import {UserResults} from "@/interfaces/results";
+import {SEMI_TRANSPARENT} from "@/resources/colors";
 import {moduleLabels} from "@/utils/moduleUtils";
 import {Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend} from "chart.js";
 import clsx from "clsx";
@@ -22,7 +23,7 @@ export default function UserResultChart({results, resultKey, label, className =
 			{
 				label,
 				data: Object.keys(results).map((module) => results[module as Module][resultKey]),
-				backgroundColor: ["rgba(255, 99, 132, 0.5)", "rgba(54, 162, 235, 0.5)", "rgba(255, 206, 86, 0.5)", "rgba(75, 192, 192, 0.5)"],
+				backgroundColor: Object.values(SEMI_TRANSPARENT),
 			},
 		],
 	};