@@ -43,63 +43,73 @@ export default function ChangePasswordPage() {
4343 } ;
4444
4545 return (
46- < div className = "max-w-full flex h-screen bg-gradient-to-b from-gray-700 via-green-300 to-gray-800 items-center" >
47- < div className = "max-w-lg mx-auto p-6 shadow-2xl rounded-2xl bg-black/60 " >
48- < h1 className = "text-2xl font-bold mb-4" > Change Password</ h1 >
49- < form onSubmit = { submit } className = "space-y-4" >
46+ < div
47+ className = "w-full min-h-screen flex flex-col items-center justify-center px-3 py-6"
48+ style = { { background : "var(--bg)" } }
49+ >
50+ < div className = "w-full max-w-sm card rounded-lg shadow-sm border p-4" >
51+ < h1
52+ className = "text-xl sm:text-2xl font-bold mb-4 text-center"
53+ style = { { color : "var(--primary)" } }
54+ >
55+ Change Password
56+ </ h1 >
57+ < form onSubmit = { submit } className = "space-y-2" >
5058 < div >
51- < label className = "block text-sm font-medium mb-1" > Email id</ label >
59+ < label className = "block text-xs font-medium mb-1 text-fg-secondary" >
60+ Email
61+ </ label >
5262 < input
5363 type = "email"
5464 value = { email }
55- className = "w-full p-2 rounded border"
65+ className = "w-full p-2 rounded border text-xs input-card outline-none "
5666 onChange = { ( e ) => setEmail ( e . target . value ) }
5767 placeholder = "Email"
5868 />
5969 </ div >
6070 < div >
61- < label className = "block text-sm font-medium mb-1" >
62- Current password
71+ < label className = "block text-xs font-medium mb-1 text-fg-secondary " >
72+ Current Password
6373 </ label >
6474 < input
6575 type = "password"
6676 value = { currentPassword }
6777 onChange = { ( e ) => setCurrentPassword ( e . target . value ) }
68- className = "w-full p-2 border rounded"
78+ className = "w-full p-2 border rounded text-xs input-card outline-none "
6979 />
7080 </ div >
7181
7282 < div >
73- < label className = "block text-sm font-medium mb-1" >
74- New password
83+ < label className = "block text-xs font-medium mb-1 text-fg-secondary " >
84+ New Password
7585 </ label >
7686 < input
7787 type = "password"
7888 value = { newPassword }
7989 onChange = { ( e ) => setNewPassword ( e . target . value ) }
80- className = "w-full p-2 border rounded"
90+ className = "w-full p-2 border rounded text-xs input-card outline-none "
8191 />
8292 </ div >
8393
8494 < div >
85- < label className = "block text-sm font-medium mb-1" >
86- Confirm new password
95+ < label className = "block text-xs font-medium mb-1 text-fg-secondary " >
96+ Confirm Password
8797 </ label >
8898 < input
8999 type = "password"
90100 value = { confirmPassword }
91101 onChange = { ( e ) => setConfirmPassword ( e . target . value ) }
92- className = "w-full p-2 border rounded"
102+ className = "w-full p-2 border rounded text-xs input-card outline-none "
93103 />
94104 </ div >
95105
96106 < div >
97107 < button
98108 type = "submit"
99109 disabled = { loading }
100- className = "px-4 py-2 bg-blue-600 text-white rounded "
110+ className = "w-full px-3 py-2 btn-primary rounded text-xs font-medium mt-2 "
101111 >
102- { loading ? "Saving..." : "Change password " }
112+ { loading ? "Saving..." : "Change Password " }
103113 </ button >
104114 </ div >
105115 </ form >
0 commit comments