Completed the rest of the Selection screen to the new design

src/components/Low/Button.tsx

@@ -11,19 +11,31 @@ interface Props {
 }
 
 export default function Button({color = "green", variant = "solid", disabled = false, className, children, onClick}: Props) {
-	const colorClassNames: {[key in typeof color]: string} = {
+	const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
-		green: "bg-mti-green-light hover:bg-mti-green disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark",
+		green: {
-		blue: "bg-mti-blue-light hover:bg-mti-blue disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark",
+			solid: "bg-mti-green-light text-white hover:bg-mti-green disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark",
-		orange: "bg-mti-orange-light hover:bg-mti-orange disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark",
+			outline:
+				"bg-transparent text-mti-green-light border border-mti-green-light hover:bg-mti-green-light disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark hover:text-white selection:text-white",
+		},
+		blue: {
+			solid: "bg-mti-blue-light text-white hover:bg-mti-blue disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark",
+			outline:
+				"bg-transparent text-mti-blue-light border border-mti-blue-light hover:bg-mti-blue-light disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark hover:text-white selection:text-white",
+		},
+		orange: {
+			solid: "bg-mti-orange-light text-white hover:bg-mti-orange disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark",
+			outline:
+				"bg-transparent text-mti-orange-light border border-mti-orange-light hover:bg-mti-orange-light disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark hover:text-white selection:text-white",
+		},
 	};
 
 	return (
 		<button
 			onClick={onClick}
 			className={clsx(
-				"py-4 px-6 text-white rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",
+				"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",
 				className,
-				colorClassNames[color],
+				colorClassNames[color][variant],
 			)}
 			disabled={disabled}>
 			{children}

src/exams/Selection.tsx

@@ -13,6 +13,7 @@ import ProgressBar from "@/components/Low/ProgressBar";
 import {BsBook, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
 import {averageScore, formatModuleTotalStats, totalExams, totalExamsByModule} from "@/utils/stats";
 import useStats from "@/hooks/useStats";
+import Button from "@/components/Low/Button";
 
 interface Props {
 	user: User;
@@ -36,7 +37,7 @@ export default function Selection({user, onStart}: Props) {
 
 	return (
 		<>
-			<div className="w-full h-full relative flex flex-col gap-12">
+			<div className="w-full h-full relative flex flex-col gap-16">
 				<section className="w-full flex gap-8">
 					<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
 					<div className="flex flex-col gap-4 py-4 w-full">
@@ -102,6 +103,88 @@ export default function Selection({user, onStart}: Props) {
 						demonstrate your mastery of the English language to the world?
 					</span>
 				</section>
+				<section className="w-full flex justify-between gap-8 mt-8">
+					<div
+						className={clsx(
+							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
+							selectedModules.includes("reading") ? "border-mti-green-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-0 -translate-y-1/2">
+							<BsBook className="text-white w-7 h-7" />
+						</div>
+						<span className="font-semibold">Reading:</span>
+						<p className="text-center text-xs">
+							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
+						</p>
+						<Button
+							color="green"
+							variant={selectedModules.includes("reading") ? "solid" : "outline"}
+							className="mt-4 px-12"
+							onClick={() => toggleModule("reading")}>
+							Select exam
+						</Button>
+					</div>
+					<div
+						className={clsx(
+							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
+							selectedModules.includes("listening") ? "border-mti-green-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-0 -translate-y-1/2">
+							<BsHeadphones className="text-white w-7 h-7" />
+						</div>
+						<span className="font-semibold">Listening:</span>
+						<p className="text-center text-xs">
+							Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
+						</p>
+						<Button
+							color="green"
+							variant={selectedModules.includes("listening") ? "solid" : "outline"}
+							className="mt-4 px-12"
+							onClick={() => toggleModule("listening")}>
+							Select exam
+						</Button>
+					</div>
+					<div
+						className={clsx(
+							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
+							selectedModules.includes("writing") ? "border-mti-green-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-0 -translate-y-1/2">
+							<BsPen className="text-white w-7 h-7" />
+						</div>
+						<span className="font-semibold">Writing:</span>
+						<p className="text-center text-xs">
+							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
+						</p>
+						<Button
+							color="green"
+							variant={selectedModules.includes("writing") ? "solid" : "outline"}
+							className="mt-4 px-12"
+							onClick={() => toggleModule("writing")}>
+							Select exam
+						</Button>
+					</div>
+					<div
+						className={clsx(
+							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12",
+							selectedModules.includes("speaking") ? "border-mti-green-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-0 -translate-y-1/2">
+							<BsMegaphone className="text-white w-7 h-7" />
+						</div>
+						<span className="font-semibold">Speaking:</span>
+						<p className="text-center text-xs">
+							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
+						</p>
+						<Button
+							color="green"
+							variant={selectedModules.includes("speaking") ? "solid" : "outline"}
+							className="mt-4 px-12"
+							onClick={() => toggleModule("speaking")}>
+							Select exam
+						</Button>
+					</div>
+				</section>
 			</div>
 		</>
 	);

tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
 					orange: {DEFAULT: "#FF6000", dark: "#cc4402", light: "#ff790a", ultralight: "#ffdaa5"},
 					green: {DEFAULT: "#307912", dark: "#2a6014", light: "#3d9f11", ultralight: "#c6edaf"},
 					blue: {DEFAULT: "#0696ff", dark: "#007ff8", light: "#1eb3ff", ultralight: "#b5edff"},
+					white: {DEFAULT: "#ffffff", alt: "#FDFDFD"},
 					gray: {
 						seasalt: "#F9F9F9",
 						smoke: "#F5F5F5",