From 03882d2a7e3c92ed748305b173d3267673c2cd76 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Fri, 23 Feb 2024 15:18:45 +0000
Subject: [PATCH] Improved some visual things requested by the client

---
 src/components/UserCard.tsx | 6 +++---
 src/dashboards/Student.tsx  | 7 ++++---
 src/exams/Selection.tsx     | 5 +++++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index 73a33110..cd5faaaf 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -224,9 +224,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							defaultValue={monthlyDuration}
 							disabled={disabled}
 						/>
-						<div className="flex flex-col gap-3 w-full lg:col-span-2">
+						<div className="flex flex-col gap-3 w-full lg:col-span-3">
 							<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
-							<div className="w-full grid grid-cols-5 gap-2">
+							<div className="w-full grid grid-cols-6 gap-2">
 								<Input
 									name="paymentValue"
 									onChange={(e) => setPaymentValue(e ? parseInt(e) : undefined)}
@@ -237,7 +237,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								/>
 								<Select
 									className={clsx(
-										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+										"px-4 py-4 col-span-3 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
 										disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
 									)}
 									options={CURRENCIES_OPTIONS}
diff --git a/src/dashboards/Student.tsx b/src/dashboards/Student.tsx
index f3c6eca4..1365f67f 100644
--- a/src/dashboards/Student.tsx
+++ b/src/dashboards/Student.tsx
@@ -14,6 +14,7 @@ import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import {getUserCorporate} from "@/utils/groups";
 import {MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
+import {getLevelScore} from "@/utils/score";
 import {averageScore, groupBySession} from "@/utils/stats";
 import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
 import {PayPalButtons} from "@paypal/react-paypal-js";
@@ -227,8 +228,7 @@ export default function StudentDashboard({user}: Props) {
 			<section className="flex flex-col gap-3">
 				<span className="text-lg font-bold">Score History</span>
 				<div className="-md:grid-rows-4 grid gap-6 md:grid-cols-2">
-					{MODULE_ARRAY
-						.map((module) => {
+					{MODULE_ARRAY.map((module) => {
 						const desiredLevel = user.desiredLevels[module] || 9;
 						const level = user.levels[module] || 0;
 						return (
@@ -244,7 +244,8 @@ export default function StudentDashboard({user}: Props) {
 									<div className="flex w-full justify-between">
 										<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
 										<span className="text-mti-gray-dim text-sm font-normal">
-											Level {level} / Level 9 (Desired Level: {desiredLevel})
+											{module === "level" && `English Level: ${getLevelScore(level).join(" / ")}`}
+											{module !== "level" && `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`}
 										</span>
 									</div>
 								</div>
diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx
index 0b5fd985..95169e27 100644
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -66,26 +66,31 @@ export default function Selection({user, page, onStart, disableSelection = false
 								icon: <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />,
 								label: "Reading",
 								value: totalExamsByModule(stats, "reading"),
+								tooltip: "The amount of reading exams performed.",
 							},
 							{
 								icon: <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />,
 								label: "Listening",
 								value: totalExamsByModule(stats, "listening"),
+								tooltip: "The amount of listening exams performed.",
 							},
 							{
 								icon: <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />,
 								label: "Writing",
 								value: totalExamsByModule(stats, "writing"),
+								tooltip: "The amount of writing exams performed.",
 							},
 							{
 								icon: <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />,
 								label: "Speaking",
 								value: totalExamsByModule(stats, "speaking"),
+								tooltip: "The amount of speaking exams performed.",
 							},
 							{
 								icon: <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />,
 								label: "Level",
 								value: totalExamsByModule(stats, "level"),
+								tooltip: "The amount of level exams performed.",
 							},
 						]}
 					/>