From 3c711e02799df10c0aed5809b31cf44759847d27 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Mon, 28 Aug 2023 15:47:04 +0100
Subject: [PATCH] Improved the responsiveness of the login and register pages
 on mobile

---
 src/pages/login.tsx    | 10 +++++-----
 src/pages/register.tsx | 12 ++++++------
 tailwind.config.js     |  8 ++++++++
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index e1fa0f82..b288c9ef 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -59,12 +59,12 @@ export default function Login() {
 				</section>
 				<section className="h-full w-full flex flex-col items-center justify-center gap-2">
 					<div className="flex flex-col gap-2 items-center relative">
-						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-64 absolute -top-64" />
-						<h1 className="font-bold text-4xl">Login to your account</h1>
-						<p className="self-start text-base font-normal text-mti-gray-cool">with your registered Email Address</p>
+						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-64 absolute -top-36 lg:-top-64" />
+						<h1 className="font-bold text-2xl lg:text-4xl">Login to your account</h1>
+						<p className="self-start text-sm lg:text-base font-normal text-mti-gray-cool">with your registered Email Address</p>
 					</div>
-					<Divider className="max-w-md" />
-					<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={login}>
+					<Divider className="max-w-xs lg:max-w-md" />
+					<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={login}>
 						<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
 						<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
 						<div className="flex justify-between w-full px-4">
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index aa5a2ef1..9e657cb8 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -59,12 +59,12 @@ export default function Register() {
 					<div className="absolute h-full w-full bg-mti-rose-light z-10 bg-opacity-50" />
 					<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
 				</section>
-				<section className="h-full w-full flex flex-col items-center justify-center gap-12">
-					<div className="flex flex-col gap-2 items-center relative">
-						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-64 absolute -top-64" />
-						<h1 className="font-bold text-4xl">Create new account</h1>
+				<section className="h-full w-full flex flex-col items-center justify-center gap-4">
+					<div className="flex flex-col gap-2 items-center relative mb-4">
+						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-64 absolute -top-36 lg:-top-64" />
+						<h1 className="font-bold text-2xl lg:text-4xl">Create new account</h1>
 					</div>
-					<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={register}>
+					<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={register}>
 						<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" required />
 						<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" required />
 						<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Enter your password" required />
@@ -75,7 +75,7 @@ export default function Register() {
 							placeholder="Confirm your password"
 							required
 						/>
-						<Button className="mt-8 w-full" color="purple" disabled={isLoading}>
+						<Button className="lg:mt-8 w-full" color="purple" disabled={isLoading}>
 							{!isLoading && "Create account"}
 							{isLoading && (
 								<div className="flex items-center justify-center">
diff --git a/tailwind.config.js b/tailwind.config.js
index a9771b87..1746dd34 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,6 +31,14 @@ module.exports = {
 					speaking: {DEFAULT: "#EF5DA8", light: "#FEF6FA", transparent: "rgba(75, 192, 192, 0.5)"},
 				},
 			},
+			screens: {
+				"-sm": {max: "639px"},
+				"-md": {max: "767px"},
+				"-lg": {max: "1023px"},
+				"-xl": {max: "1279px"},
+				"-2xl": {max: "1535px"},
+				"-3xl": {max: "1919px"},
+			},
 		},
 	},
 	plugins: [require("daisyui")],