From c2acb3985906b5bdc34b93a08c6876bf020f8e08 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Tue, 7 Nov 2023 22:44:26 +0000
Subject: [PATCH] Improved the responsiveness of the assignment creator

---
 src/dashboards/AssignmentCreator.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/dashboards/AssignmentCreator.tsx b/src/dashboards/AssignmentCreator.tsx
index d69a4479..7e172b7c 100644
--- a/src/dashboards/AssignmentCreator.tsx
+++ b/src/dashboards/AssignmentCreator.tsx
@@ -33,8 +33,8 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 	const [assignees, setAssignees] = useState<string[]>(assignment?.assignees || []);
 	const [name, setName] = useState(assignment?.name || generate({minLength: 6, maxLength: 8, min: 2, max: 3, join: " ", formatter: capitalize}));
 	const [isLoading, setIsLoading] = useState(false);
-	const [startDate, setStartDate] = useState<Date | null>(assignment ? moment(assignment.startDate).toDate() : new Date());
-	const [endDate, setEndDate] = useState<Date | null>(assignment ? moment(assignment.endDate).toDate() : moment().add(1, "week").toDate());
+	const [startDate, setStartDate] = useState<Date | null>(assignment ? moment(assignment.startDate).toDate() : moment().add(1, "day").toDate());
+	const [endDate, setEndDate] = useState<Date | null>(assignment ? moment(assignment.endDate).toDate() : moment().add(8, "day").toDate());
 
 	const toggleModule = (module: Module) => {
 		const modules = selectedModules.filter((x) => x !== module);
@@ -99,11 +99,11 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 	return (
 		<Modal isOpen={isCreating} onClose={cancelCreation} title="New Assignment">
 			<div className="w-full flex flex-col gap-4">
-				<section className="w-full grid grid-cols-4 -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
+				<section className="w-full grid -md:grid-cols-1 md:grid-cols-2 place-items-center lg:grid-cols-4 -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
 					<div
 						onClick={() => toggleModule("reading")}
 						className={clsx(
-							"w-fit relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
 							selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
@@ -116,7 +116,7 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 					<div
 						onClick={() => toggleModule("listening")}
 						className={clsx(
-							"w-fit relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
 							selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
@@ -129,34 +129,34 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 					<div
 						onClick={() => toggleModule("writing")}
 						className={clsx(
-							"w-fit relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							"w-52 relative max-w-xs flex lg:flex-row-reverse items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
 							selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
-						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 right-0 translate-x-1/2">
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 -lg:left-0 -lg:-translate-x-1/2 lg:right-0 lg:translate-x-1/2">
 							<BsPen className="text-white w-7 h-7" />
 						</div>
+						<span className="lg:mr-8 -lg:ml-8 font-semibold">Writing</span>
 						{!selectedModules.includes("writing") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />}
 						{selectedModules.includes("writing") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						<span className="mr-8 font-semibold">Writing</span>
 					</div>
 					<div
 						onClick={() => toggleModule("speaking")}
 						className={clsx(
-							"w-fit relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							"w-52 relative max-w-xs flex lg:flex-row-reverse items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
 							selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
-						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 right-0 translate-x-1/2">
-							<BsMegaphone className="text-white w-7 h-7 -scale-x-100" />
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 -lg:left-0 -lg:-translate-x-1/2 lg:right-0 lg:translate-x-1/2">
+							<BsMegaphone className="text-white w-7 h-7 lg:-scale-x-100" />
 						</div>
+						<span className="lg:mr-8 -lg:ml-8 font-semibold">Speaking</span>
 						{!selectedModules.includes("speaking") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />}
 						{selectedModules.includes("speaking") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						<span className="mr-8 font-semibold">Speaking</span>
 					</div>
 				</section>
 
 				<Input type="text" name="name" onChange={(e) => setName(e)} defaultValue={name} label="Assignment Name" required />
 
-				<div className="w-full grid grid-cols-2 gap-8">
+				<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
 					<div className="flex flex-col gap-2">
 						<label className="font-normal text-base text-mti-gray-dim">Start Date *</label>
 						<ReactDatePicker
@@ -215,7 +215,7 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 							</button>
 						))}
 					</div>
-					<div className="flex flex-wrap gap-4">
+					<div className="flex flex-wrap -md:justify-center gap-4">
 						{users.map((user) => (
 							<div
 								onClick={() => toggleAssignee(user)}