Created a screen for the module exam selection

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),
 			},
 		],
 	};