Improved the responsiveness of the login and register pages on mobile

This commit is contained in:
Tiago Ribeiro
2023-08-28 15:47:04 +01:00
parent c879d5d8de
commit 3c711e0279
3 changed files with 19 additions and 11 deletions

View File

@@ -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">