Part intro's, modals between parts and some fixes

src/pages/(exam)/ExamPage.tsx

@@ -23,6 +23,7 @@ import {toast, ToastContainer} from "react-toastify";
 import {v4 as uuidv4} from "uuid";
 import useSessions from "@/hooks/useSessions";
 import ShortUniqueId from "short-unique-id";
+import clsx from "clsx";
 
 interface Props {
 	page: "exams" | "exercises";
@@ -54,6 +55,7 @@ export default function ExamPage({page}: Props) {
 	const {showSolutions, setShowSolutions} = useExamStore((state) => state);
 	const {selectedModules, setSelectedModules} = useExamStore((state) => state);
 	const {inactivity, setInactivity} = useExamStore((state) => state);
+	const {bgColor, setBgColor} = useExamStore((state) => state);
 
 	const {user} = useUser({redirectTo: "/login"});
 	const router = useRouter();
@@ -280,6 +282,13 @@ export default function ExamPage({page}: Props) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [statsAwaitingEvaluation]);
 
+	useEffect(()=> {
+
+		if(exam && exam.module === "level" && exam.parts[0].intro && !showSolutions) {
+			setBgColor("bg-ielts-level-light");
+		}
+	}, [exam])
+
 	const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
 		setTimeout(async () => {
 			try {
@@ -513,6 +522,7 @@ export default function ExamPage({page}: Props) {
 			{user && (
 				<Layout
 					user={user}
+					bgColor={bgColor}
 					className="justify-between"
 					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
 					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>