Skip to content

Commit e01b01d

Browse files
Amanuel-AberaAmanuel-Abera
committed
Login and Registeration Form updated
1 parent f601f2a commit e01b01d

File tree

3 files changed

+53
-23
lines changed

3 files changed

+53
-23
lines changed

‎app/(auth)/login/page.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ const Login = () => {
1616
};
1717

1818
return (
19-
<div className="grid grid-cols-5 items-center gap-8 mx-5 md:gap-12 max-w-screen" style={{ height: 'calc(100vh - 4rem)' }}>
20-
<form action="" method='POST' className="col-span-4 mt-16 sm:col-span-3 md:col-span-2">
19+
<div className="grid grid-cols-5 gap-8 mx-5 md:gap-12 max-w-screen" style={{ height: 'calc(100vh - 4rem)' }}>
20+
<form action="" method='POST' className="col-span-5 max-w-lg sm:max-w-4xl mt-8 sm:mt-16 sm:col-span-3 md:col-span-2">
2121
<h1 className="heading text-2xl font-bold">Welcome!</h1>
2222
<p className="para mb-5 mt-2">Log In your account.</p>
2323
<div className="flex flex-col mb-5">
@@ -26,8 +26,12 @@ const Login = () => {
2626
</div>
2727
<div className="flex flex-col mb-5 relative">
2828
<label className="label" htmlFor="password">Password <span className="asterik">*</span></label>
29-
<input type={togglePassword ?"text" :"password"} className="input value w-full mt-2 pr-8" id="password" placeholder="Password" required/>
30-
<FaEye className="value absolute top-1/2 right-2 translate-x-0 translate-y-1/2 cursor-pointer z-10" onClick={()=>setTogglePassword(!togglePassword)}/>
29+
<div className="flex mt-2 relative">
30+
<input type={togglePassword ?"text" :"password"} className="input value w-full pr-12" id="password" placeholder="Password" required/>
31+
<div className="flex justify-center items-center py-1 px-4 rounded-lg box-border cursor-pointer absolute top-0 right-0 bottom-0" onClick={()=>setTogglePassword(!togglePassword)}>
32+
<FaEye className="value"/>
33+
</div>
34+
</div>
3135
</div>
3236
<div className="flex justify-between items-center">
3337
<label className="label flex justify-between items-center gap-2 w-full">
@@ -46,22 +50,22 @@ const Login = () => {
4650
<input type="checkbox" hidden />
4751
Remember me
4852
</div>
49-
<Link href={""} className="label">Forget Password?</Link>
53+
<Link href={""} className="label hover:underline">Forget Password?</Link>
5054
</label>
5155
</div>
5256
<button className="primaryBtn w-full mt-6">Login</button>
5357
<p className="para text-sm mt-4 text-center">Don&#39;t have any account? <Link href={'/register'} className="heading font-bold">SignUp</Link></p>
5458
</form>
55-
<div className="relative col-span-1 sm:col-span-2 md:col-span-3 h-full">
56-
<Image src="/images/sideImage1.jpg" fill className="w-full h-full object-cover" alt="Side Image" />
59+
<div className="relative hidden sm:block col-span-1 sm:col-span-2 md:col-span-3 h-full">
60+
<Image src="/images/sideImage1.jpg" fill className="w-full h-full object-cover" alt="Side Image" priority />
5761
{/* Text Overlay */}
5862
<div className="absolute inset-0 flex flex-col items-center justify-center bg-black/40 text-white px-4">
59-
<h2 className="hidden sm:flex text-xl font-bold sm:text-3xl md:text-4xl">Welcome Back!</h2>
63+
<h2 className="hidden sm:flex text-white text-xl font-bold sm:text-3xl md:text-4xl">Welcome Back!</h2>
6064
<p className="hidden sm:flex mt-4 text-center text-lg md:text-xl lg:text-2xl max-w-96">
6165
Join our community to share your stories and inspire others!
6266
</p>
6367
</div>
64-
</div>
68+
</div>
6569

6670
</div>
6771

‎app/(auth)/register/page.tsx

+19-10
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const Register = () => {
1818
};
1919

2020
return (
21-
<div className="grid grid-cols-5 gap-8 mx-5 md:gap-12 max-w-screen h-screen">
22-
<form action="" method='POST' className="col-span-4 mt-16 sm:col-span-3 md:col-span-2">
21+
<div className="grid grid-cols-5 gap-8 mx-5 md:gap-12 max-w-screen" style={{ height: 'calc(100vh - 4rem)' }}>
22+
<form action="" method='POST' className="col-span-5 max-w-lg sm:max-w-4xl mt-8 sm:mt-16 sm:col-span-3 md:col-span-2">
2323
<h1 className="heading text-2xl font-bold">Register!</h1>
2424
<p className="para mb-5 mt-2">Create a new account.</p>
2525
<div className="flex flex-col mb-5">
@@ -36,13 +36,22 @@ const Register = () => {
3636
</div>
3737
<div className="flex flex-col mb-5 relative">
3838
<label className="label" htmlFor="password">Password <span className="asterik">*</span></label>
39-
<input type={togglePassword ?"text" :"password"} className="input value w-full mt-2 pr-8" id="password" placeholder="Password" required/>
40-
<FaEye className="value absolute top-1/2 right-2 translate-x-0 translate-y-1/2 cursor-pointer z-10" onClick={()=>setTogglePassword(!togglePassword)}/>
39+
<div className="flex mt-2 relative">
40+
<input type={togglePassword ?"text" :"password"} className="input value w-full pr-12" id="password" placeholder="Password" required/>
41+
<div className="flex justify-center items-center py-1 px-4 rounded-lg box-border cursor-pointer absolute top-0 right-0 bottom-0" onClick={()=>setTogglePassword(!togglePassword)}>
42+
<FaEye className="value"/>
43+
</div>
44+
</div>
45+
4146
</div>
42-
<div className="flex flex-col mb-5 relative">
47+
<div className="flex flex-col mb-5 relative w-full">
4348
<label className="label" htmlFor="confirmPassword">Confirm Password <span className="asterik">*</span></label>
44-
<input type={toggleConfirmPassword ?"text" :"password"} className="input value w-full mt-2 pr-8" id="confirmPassword" placeholder="Confirm Password" required/>
45-
<FaEye className="value absolute top-1/2 right-2 translate-x-0 translate-y-1/2 cursor-pointer z-10" onClick={()=>setToggleConfirmPasword(!toggleConfirmPassword)}/>
49+
<div className="flex mt-2 relative">
50+
<input type={toggleConfirmPassword ?"text" :"password"} className="input value w-full pr-12" id="confirmPassword" placeholder="Confirm Password" required/>
51+
<div className="flex justify-center items-center py-1 px-4 rounded-lg box-border cursor-pointer absolute top-0 right-0 bottom-0" onClick={()=>setToggleConfirmPasword(!toggleConfirmPassword)}>
52+
<FaEye className="value"/>
53+
</div>
54+
</div>
4655
</div>
4756
<div>
4857
<label className="label flex items-center gap-2">
@@ -64,11 +73,11 @@ const Register = () => {
6473
<button className="primaryBtn w-full mt-6">Register</button>
6574
<p className="para text-sm mt-4 text-center">Do you have an account? <Link href={'/login'} className="heading font-bold">SignIn</Link></p>
6675
</form>
67-
<div className="relative col-span-1 sm:col-span-2 md:col-span-3 h-full">
68-
<Image src="/images/sideImage1.jpg" fill className="w-full h-full object-cover" alt="Side Image" />
76+
<div className="relative hidden sm:block col-span-1 sm:col-span-2 md:col-span-3 h-full">
77+
<Image src="/images/sideImage1.jpg" fill className="w-full h-full object-cover" alt="Side Image" priority />
6978
{/* Text Overlay */}
7079
<div className="absolute inset-0 flex flex-col items-center justify-center bg-black/40 text-white px-4">
71-
<h2 className="hidden sm:flex text-xl font-bold sm:text-3xl md:text-4xl">Welcome Back!</h2>
80+
<h2 className="hidden sm:flex text-white text-xl font-bold sm:text-3xl md:text-4xl">Welcome Back!</h2>
7281
<p className="hidden sm:flex mt-4 text-center text-lg md:text-xl lg:text-2xl max-w-96">
7382
Join our community to share your stories and inspire others!
7483
</p>

‎app/globals.css

+21-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
2+
13
@tailwind base;
24
@tailwind components;
35
@tailwind utilities;
@@ -11,11 +13,14 @@
1113
--color-section-bg: #fafafa;
1214
--color-active-status: #54f3ad;
1315
--color-draft-status: #ff4747;
14-
--color-input-label: #646464;
16+
/* --color-input-label: #646464; */
17+
--color-input-label: #494949;
1518
--color-input-value: #5a6082;
1619
--color-input-border: #b5b5b5;
1720
--color-secondary: #f1f1f1;
18-
--color-paragraph: #3e3e3e;
21+
/* --color-paragraph: #3e3e3e; */
22+
--color-paragraph: #333;
23+
1924
}
2025

2126

@@ -39,12 +44,24 @@
3944
--color-paragraph: #e1e1e1;
4045
}
4146

42-
body{
47+
body {
48+
font-family: 'Merriweather', serif;
49+
font-size: 14px;
50+
line-height: 1.6;
4351
background-color: var(--color-background);
52+
color: var(--color-paragraph);
53+
}
54+
55+
h1, h2, h3, h4, h5, h6 {
56+
font-family: 'Playfair Display', serif;
57+
font-weight: 700;
58+
color: var(--color-heading);
4459
}
4560

4661
@layer utilities{
47-
.background{}
62+
.background{
63+
background-color: var(--color-background);
64+
}
4865
.primary{
4966
color: var(--color-primary);
5067
}

0 commit comments

Comments
 (0)