From 9cbb5b93c8ff24ec2531591aefd4cb880c4c5353 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Thu, 22 Jun 2023 23:16:07 +0100
Subject: [PATCH] Added a subtitle of the colors

---
 src/components/Solutions/FillBlanks.tsx     | 9 ++++++---
 src/components/Solutions/MatchSentences.tsx | 6 +++---
 src/components/Solutions/MultipleChoice.tsx | 9 ++++++---
 src/components/Solutions/WriteBlanks.tsx    | 9 ++++++---
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/Solutions/FillBlanks.tsx b/src/components/Solutions/FillBlanks.tsx
index 7cd8fe4f..a1607bf9 100644
--- a/src/components/Solutions/FillBlanks.tsx
+++ b/src/components/Solutions/FillBlanks.tsx
@@ -84,13 +84,16 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
 				</span>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-green" />= Correct
+						<div className="w-4 h-4 rounded-full bg-mti-green" />
+						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-blue" />= Unanswered
+						<div className="w-4 h-4 rounded-full bg-mti-blue" />
+						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-orange" />= Wrong
+						<div className="w-4 h-4 rounded-full bg-mti-orange" />
+						Wrong
 					</div>
 				</div>
 			</div>
diff --git a/src/components/Solutions/MatchSentences.tsx b/src/components/Solutions/MatchSentences.tsx
index 9a1daf00..5354da13 100644
--- a/src/components/Solutions/MatchSentences.tsx
+++ b/src/components/Solutions/MatchSentences.tsx
@@ -73,13 +73,13 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
 				</div>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-green" />= Correct
+						<div className="w-4 h-4 rounded-full bg-mti-green" /> Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-blue" />= Unanswered
+						<div className="w-4 h-4 rounded-full bg-mti-blue" /> Unanswered
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-orange" />= Wrong
+						<div className="w-4 h-4 rounded-full bg-mti-orange" /> Wrong
 					</div>
 				</div>
 			</div>
diff --git a/src/components/Solutions/MultipleChoice.tsx b/src/components/Solutions/MultipleChoice.tsx
index afa3aac3..34603a5d 100644
--- a/src/components/Solutions/MultipleChoice.tsx
+++ b/src/components/Solutions/MultipleChoice.tsx
@@ -87,13 +87,16 @@ export default function MultipleChoice({prompt, questions, userSolutions, onNext
 				</div>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-green" />= Correct
+						<div className="w-4 h-4 rounded-full bg-mti-green" />
+						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-blue" />= Unanswered
+						<div className="w-4 h-4 rounded-full bg-mti-blue" />
+						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-orange" />= Wrong
+						<div className="w-4 h-4 rounded-full bg-mti-orange" />
+						Wrong
 					</div>
 				</div>
 			</div>
diff --git a/src/components/Solutions/WriteBlanks.tsx b/src/components/Solutions/WriteBlanks.tsx
index 41f4ef84..8999f5e7 100644
--- a/src/components/Solutions/WriteBlanks.tsx
+++ b/src/components/Solutions/WriteBlanks.tsx
@@ -112,13 +112,16 @@ export default function WriteBlanksSolutions({
 				</span>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-green" />= Correct
+						<div className="w-4 h-4 rounded-full bg-mti-green" />
+						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-blue" />= Unanswered
+						<div className="w-4 h-4 rounded-full bg-mti-blue" />
+						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-orange" />= Wrong
+						<div className="w-4 h-4 rounded-full bg-mti-orange" />
+						Wrong
 					</div>
 				</div>
 			</div>