From ca0584da2a88de8cd4e597254798116f9458e982 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Tue, 11 Apr 2023 22:49:36 +0100
Subject: [PATCH] Corrected some little bugs

---
 src/components/Exercises/FillBlanks.tsx     |  2 +-
 src/components/Exercises/WriteBlanks.tsx    |  2 +-
 src/components/Solutions/FillBlanks.tsx     | 10 ++++++----
 src/components/Solutions/MultipleChoice.tsx |  1 +
 src/components/Solutions/WriteBlanks.tsx    |  2 +-
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Exercises/FillBlanks.tsx b/src/components/Exercises/FillBlanks.tsx
index 622393c5..74f114a3 100644
--- a/src/components/Exercises/FillBlanks.tsx
+++ b/src/components/Exercises/FillBlanks.tsx
@@ -89,7 +89,7 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
 					const userSolution = userSolutions.find((x) => x.id === id);
 
 					return (
-						<button className="border-2 rounded-xl px-4 text-blue-400 border-blue-400" onClick={() => setCurrentBlankId(id)}>
+						<button className="border-2 rounded-xl px-4 text-blue-400 border-blue-400 my-2" onClick={() => setCurrentBlankId(id)}>
 							{userSolution ? userSolution.solution : id}
 						</button>
 					);
diff --git a/src/components/Exercises/WriteBlanks.tsx b/src/components/Exercises/WriteBlanks.tsx
index 810d41f5..c11e4bf3 100644
--- a/src/components/Exercises/WriteBlanks.tsx
+++ b/src/components/Exercises/WriteBlanks.tsx
@@ -33,7 +33,7 @@ function Blank({
 
 	return (
 		<input
-			className={clsx("input border rounded-xl px-2 py-1 bg-white text-blue-400 border-blue-400")}
+			className={clsx("input border rounded-xl px-2 py-1 bg-white text-blue-400 border-blue-400 my-2")}
 			placeholder={id}
 			onChange={(e) => setUserInput(e.target.value)}
 			value={userInput}
diff --git a/src/components/Solutions/FillBlanks.tsx b/src/components/Solutions/FillBlanks.tsx
index b3945e6a..ca0142c5 100644
--- a/src/components/Solutions/FillBlanks.tsx
+++ b/src/components/Solutions/FillBlanks.tsx
@@ -18,20 +18,22 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
 					if (!userSolution) {
 						return (
 							<>
-								<button className={clsx("border-2 rounded-xl px-4 text-gray-500 border-gray-500")}>{solution.solution}</button>
+								<button className={clsx("border-2 rounded-xl px-4 text-gray-500 border-gray-500 my-2")}>{solution.solution}</button>
 							</>
 						);
 					}
 
 					if (userSolution.solution === solution.solution) {
-						return <button className={clsx("border-2 rounded-xl px-4 text-green-500 border-green-500")}>{solution.solution}</button>;
+						return <button className={clsx("border-2 rounded-xl px-4 text-green-500 border-green-500 my-2")}>{solution.solution}</button>;
 					}
 
 					if (userSolution.solution !== solution.solution) {
 						return (
 							<>
-								<button className={clsx("border-2 rounded-xl px-4 text-red-500 border-red-500 mr-1")}>{userSolution.solution}</button>
-								<button className={clsx("border-2 rounded-xl px-4 text-blue-400 border-blue-400")}>{solution.solution}</button>
+								<button className={clsx("border-2 rounded-xl px-4 text-red-500 border-red-500 mr-1 my-2")}>
+									{userSolution.solution}
+								</button>
+								<button className={clsx("border-2 rounded-xl px-4 text-green-400 border-green-400 my-2")}>{solution.solution}</button>
 							</>
 						);
 					}
diff --git a/src/components/Solutions/MultipleChoice.tsx b/src/components/Solutions/MultipleChoice.tsx
index 564c7076..8555d590 100644
--- a/src/components/Solutions/MultipleChoice.tsx
+++ b/src/components/Solutions/MultipleChoice.tsx
@@ -74,6 +74,7 @@ function Question({
 							key={option.id}
 							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
 							className={clsx("flex border-2 p-4 rounded-xl gap-2 cursor-pointer bg-white", optionColor(option.id))}>
+							{showSolution && optionBadge(option.id)}
 							<span className="font-bold">{option.id}.</span>
 							<span>{option.text}</span>
 						</div>
diff --git a/src/components/Solutions/WriteBlanks.tsx b/src/components/Solutions/WriteBlanks.tsx
index f8c7421f..d3ecddd0 100644
--- a/src/components/Solutions/WriteBlanks.tsx
+++ b/src/components/Solutions/WriteBlanks.tsx
@@ -44,7 +44,7 @@ function Blank({
 
 	return (
 		<input
-			className={clsx("input border rounded-xl px-2 py-1 bg-white", !solutions && "text-blue-400 border-blue-400", getSolutionStyling())}
+			className={clsx("input border rounded-xl px-2 py-1 bg-white my-2", !solutions && "text-blue-400 border-blue-400", getSolutionStyling())}
 			placeholder={id}
 			onChange={(e) => setUserInput(e.target.value)}
 			value={!solutions ? userInput : solutions.join(" / ")}