From f5ec910010a430b797d80cff2e135ac36e369778 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Thu, 15 Jun 2023 15:27:04 +0100
Subject: [PATCH] Did the new designs for the Writing

---
 src/components/Exercises/Writing.tsx | 64 +++++++++++-----------------
 src/exams/Writing.tsx                | 36 ++++++++--------
 2 files changed, 42 insertions(+), 58 deletions(-)

diff --git a/src/components/Exercises/Writing.tsx b/src/components/Exercises/Writing.tsx
index cf2d5063..f61c3a99 100644
--- a/src/components/Exercises/Writing.tsx
+++ b/src/components/Exercises/Writing.tsx
@@ -7,6 +7,7 @@ import clsx from "clsx";
 import {CommonProps} from ".";
 import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
+import Button from "../Low/Button";
 
 export default function Writing({id, prompt, info, type, wordCounter, attachment, onNext, onBack}: WritingExercise & CommonProps) {
 	const [inputText, setInputText] = useState("");
@@ -27,58 +28,43 @@ export default function Writing({id, prompt, info, type, wordCounter, attachment
 	}, [inputText, wordCounter]);
 
 	return (
-		<div className="flex flex-col h-full w-2/3 items-center justify-center gap-8">
-			<div className="flex flex-col max-w-2xl gap-2">
+		<div className="flex flex-col h-full w-full gap-9">
+			<div className="flex flex-col w-full gap-7 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
 				<span>{info}</span>
-				<span className="font-bold ml-8">
+				<span className="font-semibold">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
-							<span>{line}</span>
+							<p>{line}</p>
 							<br />
 						</Fragment>
 					))}
 				</span>
+				{attachment && <img src={attachment} alt="Exercise attachment" className="max-w-md self-center" />}
+			</div>
+
+			<div className="w-full h-full flex flex-col gap-4">
 				<span>
 					You should write {wordCounter.type === "min" ? "at least" : "at most"} {wordCounter.limit} words.
 				</span>
-				{attachment && <img src={attachment} alt="Exercise attachment" />}
+				<textarea
+					className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+					onChange={(e) => setInputText(e.target.value)}
+					value={inputText}
+					placeholder="Write your text here..."
+				/>
 			</div>
 
-			<textarea
-				className="w-full h-1/3 cursor-text p-2 input input-bordered bg-white"
-				onChange={(e) => setInputText(e.target.value)}
-				value={inputText}
-				placeholder="Write your text here..."
-			/>
-
-			<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">
+				<Button color="green" variant="outline" onClick={onBack} className="max-w-[200px] self-end w-full">
 					Back
-				</button>
-				{!isSubmitEnabled && (
-					<div className="tooltip" data-tip={`You have not yet reached your minimum word count of ${wordCounter.limit} words!`}>
-						<button
-							className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-							disabled={!isSubmitEnabled}
-							onClick={() => onNext({exercise: id, solutions: [inputText], score: {correct: 1, total: 1}, type})}>
-							Next
-						</button>
-					</div>
-				)}
-				{isSubmitEnabled && (
-					<button
-						className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-						disabled={!isSubmitEnabled}
-						onClick={() => onNext({exercise: id, solutions: [inputText], score: {correct: 1, total: 1}, type})}>
-						Next
-						<div className="absolute right-4">
-							<Icon path={mdiArrowRight} color="white" size={1} />
-						</div>
-					</button>
-				)}
+				</Button>
+				<Button
+					color="green"
+					disabled={!isSubmitEnabled}
+					onClick={() => onNext({exercise: id, solutions: [inputText], score: {correct: 1, total: 1}, type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
 			</div>
 		</div>
 	);
diff --git a/src/exams/Writing.tsx b/src/exams/Writing.tsx
index 27462ef7..8e5c8daa 100644
--- a/src/exams/Writing.tsx
+++ b/src/exams/Writing.tsx
@@ -1,4 +1,5 @@
 import {renderExercise} from "@/components/Exercises";
+import ModuleTitle from "@/components/Medium/ModuleTitle";
 import {renderSolution} from "@/components/Solutions";
 import {infoButtonStyle} from "@/constants/buttonStyles";
 import {UserSolution, WritingExam} from "@/interfaces/exam";
@@ -38,27 +39,24 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 	};
 
 	const previousExercise = () => {
-		setExerciseIndex((prev) => prev - 1);
+		if (exerciseIndex > 0) {
+			setExerciseIndex((prev) => prev - 1);
+		}
 	};
 
 	return (
-		<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
-			{exerciseIndex > -1 &&
-				exerciseIndex < exam.exercises.length &&
-				!showSolutions &&
-				renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
-			{exerciseIndex > -1 &&
-				exerciseIndex < exam.exercises.length &&
-				showSolutions &&
-				renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
-			{exerciseIndex === -1 && (
-				<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={() => nextExercise()}>
-					Next
-					<div className="absolute right-4">
-						<Icon path={mdiArrowRight} color="white" size={1} />
-					</div>
-				</button>
-			)}
-		</div>
+		<>
+			<div className="flex flex-col h-full w-full gap-8 items-center">
+				<ModuleTitle minTimer={exam.minTimer} exerciseIndex={exerciseIndex + 1} module="writing" totalExercises={exam.exercises.length} />
+				{exerciseIndex > -1 &&
+					exerciseIndex < exam.exercises.length &&
+					!showSolutions &&
+					renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+				{exerciseIndex > -1 &&
+					exerciseIndex < exam.exercises.length &&
+					showSolutions &&
+					renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+			</div>
+		</>
 	);
 }