devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved the responsiveness of the login and register pages on mobile

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/login.tsx
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">

12
src/pages/register.tsx
View File

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

8
tailwind.config.js
View File

@@ -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")],