Updated the design of the WriteBlanks exercise

src/components/Exercises/WriteBlanks.tsx

@@ -35,7 +35,7 @@ function Blank({
 
 	return (
 		<input
-			className={clsx("input border rounded-xl px-2 py-1 bg-white text-blue-400 border-blue-400 my-2")}
+			className="py-2 px-3 rounded-2xl w-48 bg-white focus:outline-none my-2"
 			placeholder={id}
 			onChange={(e) => setUserInput(e.target.value)}
 			onBlur={() => setUserSolution(userInput)}

src/components/Solutions/WriteBlanks.tsx

@@ -3,10 +3,11 @@ import {WriteBlanksExercise} from "@/interfaces/exam";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {useEffect, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import {toast} from "react-toastify";
+import Button from "../Low/Button";
 
 function Blank({
 	id,
@@ -17,7 +18,7 @@ function Blank({
 	setUserSolution,
 }: {
 	id: string;
-	solutions?: string[];
+	solutions: string[];
 	userSolution?: string;
 	maxWords: number;
 	disabled?: boolean;
@@ -34,22 +35,35 @@ function Blank({
 		}
 	}, [maxWords, userInput, setUserSolution]);
 
+	const isUserSolutionCorrect = () => userSolution && solutions.map((x) => x.trim().toLowerCase()).includes(userSolution.trim().toLowerCase());
+
 	const getSolutionStyling = () => {
-		if (solutions && userSolution) {
-			if (solutions.map((x) => x.trim().toLowerCase()).includes(userSolution.trim().toLowerCase())) return "text-green-500 border-green-500";
+		if (!userSolution) {
+			return "bg-mti-blue-ultralight text-mti-blue-light";
 		}
 
-		return "text-red-500 border-red-500";
+		return "bg-mti-green-ultralight text-mti-green-light";
 	};
 
 	return (
+		<span className="inline-flex gap-2">
+			{userSolution && !isUserSolutionCorrect() && (
 				<input
-			className={clsx("input border rounded-xl px-2 py-1 bg-white my-2", !solutions && "text-blue-400 border-blue-400", getSolutionStyling())}
+					className="py-2 px-3 rounded-2xl w-48 focus:outline-none my-2 bg-mti-orange-ultralight text-mti-orange-light"
+					placeholder={id}
+					onChange={(e) => setUserInput(e.target.value)}
+					value={userSolution}
+					contentEditable={disabled}
+				/>
+			)}
+			<input
+				className={clsx("py-2 px-3 rounded-2xl w-48 focus:outline-none my-2", getSolutionStyling())}
 				placeholder={id}
 				onChange={(e) => setUserInput(e.target.value)}
 				value={!solutions ? userInput : solutions.join(" / ")}
 				contentEditable={disabled}
 			/>
+		</span>
 	);
 }
 
@@ -65,7 +79,7 @@ export default function WriteBlanksSolutions({
 }: WriteBlanksExercise & CommonProps) {
 	const renderLines = (line: string) => {
 		return (
-			<span>
+			<span className="text-base leading-5">
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
 					const id = match.replaceAll(/[\{\}]/g, "");
 					const userSolution = userSolutions.find((x) => x.id === id);
@@ -79,31 +93,33 @@ export default function WriteBlanksSolutions({
 
 	return (
 		<>
-			<div className="flex flex-col">
-				<span className="text-lg font-medium text-center px-48">{prompt}</span>
-				<span>
-					{text.split("\\n").map((line) => (
-						<>
+			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+				<span className="text-sm w-full leading-6">
+					{prompt.split("\\n").map((line, index) => (
+						<Fragment key={index}>
+							{line}
+							<br />
+						</Fragment>
+					))}
+				</span>
+				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
+					{text.split("\\n").map((line, index) => (
+						<p key={index}>
 							{renderLines(line)}
 							<br />
-						</>
+						</p>
 					))}
 				</span>
 			</div>
 
-			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
-				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
-					<div className="absolute left-4">
-						<Icon path={mdiArrowLeft} color="white" size={1} />
-					</div>
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button color="green" variant="outline" onClick={() => onBack()} className="max-w-[200px] w-full">
 					Back
-				</button>
-				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={onNext}>
+				</Button>
+
+				<Button color="green" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
 					Next
-					<div className="absolute right-4">
-						<Icon path={mdiArrowRight} color="white" size={1} />
-					</div>
-				</button>
+				</Button>
 			</div>
 		</>
 	);