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>
<section className="h-full w-full flex flex-col items-center justify-center gap-2"> <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"> <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" /> <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-4xl">Login to your account</h1> <h1 className="font-bold text-2xl lg: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> <p className="self-start text-sm lg:text-base font-normal text-mti-gray-cool">with your registered Email Address</p>
</div> </div>
<Divider className="max-w-md" /> <Divider className="max-w-xs lg:max-w-md" />
<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={login}> <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="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" /> <Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
<div className="flex justify-between w-full px-4"> <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" /> <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" /> <img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
</section> </section>
<section className="h-full w-full flex flex-col items-center justify-center gap-12"> <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"> <div className="flex flex-col gap-2 items-center relative mb-4">
<img src="/logo_title.png" alt="EnCoach's Logo" className="w-64 absolute -top-64" /> <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-4xl">Create new account</h1> <h1 className="font-bold text-2xl lg:text-4xl">Create new account</h1>
</div> </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="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="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 /> <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" placeholder="Confirm your password"
required 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 && "Create account"}
{isLoading && ( {isLoading && (
<div className="flex items-center justify-center"> <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)"}, 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")], plugins: [require("daisyui")],