Updated the responsiveness of the profile page for mobile

src/pages/profile.tsx

@@ -17,6 +17,7 @@ import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/us
 import CountrySelect from "@/components/Low/CountrySelect";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import moment from "moment";
+import {BsCamera, BsCameraFill} from "react-icons/bs";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -162,12 +163,13 @@ export default function Home() {
 			<ToastContainer />
 			{user && (
 				<Layout user={user}>
-					<section className="w-full flex flex-col gap-8 px-4 py-8">
+					<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
-						<div className="flex w-full justify-between">
+						<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
-							<div className="flex flex-col gap-8 w-2/3">
+						<div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
-								<h1 className="text-4xl font-bold mb-6">Edit Profile</h1>
+							<div className="flex flex-col gap-8 w-full md:w-2/3">
+								<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
 								<form className="flex flex-col items-center gap-6 w-full">
-									<div className="flex flex-row gap-8 w-full">
+									<div className="flex flex-col md:flex-row gap-8 w-full">
 										<Input
 											label="Name"
 											type="text"
@@ -187,7 +189,7 @@ export default function Home() {
 											required
 										/>
 									</div>
-									<div className="flex flex-row gap-8 w-full">
+									<div className="flex flex-col md:flex-row gap-8 w-full">
 										<Input
 											label="Old Password"
 											type="password"
@@ -205,7 +207,7 @@ export default function Home() {
 										/>
 									</div>
 
-									<div className="flex flex-row gap-8 w-full">
+									<div className="flex flex-col md:flex-row gap-8 w-full">
 										<div className="flex flex-col gap-3 w-full">
 											<label className="font-normal text-base text-mti-gray-dim">Country *</label>
 											<CountrySelect value={country} onChange={setCountry} />
@@ -220,7 +222,7 @@ export default function Home() {
 											required
 										/>
 									</div>
-									<div className="flex flex-row gap-8 w-full">
+									<div className="flex flex-col md:flex-row gap-8 w-full">
 										<div className="relative flex flex-col gap-3 w-full">
 											<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
 											<RadioGroup
@@ -232,7 +234,7 @@ export default function Home() {
 														{({checked}) => (
 															<span
 																className={clsx(
-																	"px-6 py-4 w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+																	"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
 																	"transition duration-300 ease-in-out",
 																	!checked
 																		? "bg-white border-mti-gray-platinum"
@@ -301,7 +303,7 @@ export default function Home() {
 														"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
 														"transition duration-300 ease-in-out",
 														!user.subscriptionExpirationDate
-															? "bg-mti-green-ultralight border-mti-green-light"
+															? "!bg-mti-green-ultralight !border-mti-green-light"
 															: expirationDateColor(user.subscriptionExpirationDate),
 														"bg-white border-mti-gray-platinum",
 													)}>
@@ -313,12 +315,19 @@ export default function Home() {
 									</div>
 								</form>
 							</div>
-							<div className="flex flex-col gap-3 items-center w-48">
+							<div
-								<img
+								className="flex flex-col gap-3 items-center w-48 h-fit cursor-pointer group"
-									src={profilePicture}
+								onClick={() => (profilePictureInput.current as any)?.click()}>
-									alt={user.name}
+								<div className="relative overflow-hidden h-48 w-48 rounded-full">
-									className="aspect-square h-48 w-48 rounded-full drop-shadow-xl self-end object-cover"
+									<div
-								/>
+										className={clsx(
+											"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
+											"transition ease-in-out duration-300",
+										)}>
+										<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
+									</div>
+									<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
+								</div>
 								<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
 								<span
 									onClick={() => (profilePictureInput.current as any)?.click()}

src/pages/record.tsx

@@ -174,17 +174,8 @@ export default function History({user}: {user: User}) {
 			});
 		};
 
-		return (
+		const content = (
-			<div
+			<>
-				key={timestamp}
-				className={clsx(
-					"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300",
-					correct / total >= 0.7 && "hover:border-mti-purple",
-					correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
-					correct / total < 0.3 && "hover:border-mti-rose",
-				)}
-				onClick={selectExam}
-				role="button">
 				<div className="w-full flex justify-between items-center">
 					<div className="flex gap-2 items-center">
 						<span className="font-medium">{formatTimestamp(timestamp)}</span>
@@ -223,7 +214,36 @@ export default function History({user}: {user: User}) {
 						</div>
 					))}
 				</div>
+			</>
+		);
+
+		return (
+			<>
+				<div
+					key={timestamp}
+					className={clsx(
+						"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
+						correct / total >= 0.7 && "hover:border-mti-purple",
+						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+						correct / total < 0.3 && "hover:border-mti-rose",
+					)}
+					onClick={selectExam}
+					role="button">
+					{content}
 				</div>
+				<div
+					key={timestamp}
+					className={clsx(
+						"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
+						correct / total >= 0.7 && "hover:border-mti-purple",
+						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+						correct / total < 0.3 && "hover:border-mti-rose",
+					)}
+					data-tip="Your screen size is too small to view previous exams."
+					role="button">
+					{content}
+				</div>
+			</>
 		);
 	};