From 0782da8abd9d353d72792de5165d982b947dfb1b Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sat, 7 Mar 2026 23:51:13 +0530
Subject: [PATCH] feat: refresh forgot password page UI, integrate new icons,
 and update styling.

---
 public/assets/icons/arrow-back-icon.svg |  1 +
 src/app/(auth)/forgot-password/page.tsx | 86 ++++++++++++++-----------
 2 files changed, 51 insertions(+), 36 deletions(-)
 create mode 100644 public/assets/icons/arrow-back-icon.svg

diff --git a/public/assets/icons/arrow-back-icon.svg b/public/assets/icons/arrow-back-icon.svg
new file mode 100644
index 0000000..6e5206f
--- /dev/null
+++ b/public/assets/icons/arrow-back-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
\ No newline at end of file
diff --git a/src/app/(auth)/forgot-password/page.tsx b/src/app/(auth)/forgot-password/page.tsx
index 8b7bdc7..a5abd4c 100644
--- a/src/app/(auth)/forgot-password/page.tsx
+++ b/src/app/(auth)/forgot-password/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { authService, AuthService } from '@/services';
 
 export default function ForgotPasswordPage() {
@@ -27,34 +28,36 @@ export default function ForgotPasswordPage() {
 
   if (submitted) {
     return (
-      <div className="bg-white rounded-[20px] p-8 shadow-sm">
-        <div className="text-center">
-          <div className="mb-6">
-            <svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-            </svg>
-          </div>
-          <h2 className="text-[24px] font-normal text-[#00293d] mb-3">Check Your Email</h2>
-          <p className="text-sm text-[#00293d]/70 mb-6">
-            We've sent a password reset link to <strong>{email}</strong>. Please check your inbox and spam folder.
-          </p>
-          <Link
-            href="/login"
-            className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center"
-          >
-            Back to Login
-          </Link>
-          <button
-            type="button"
-            onClick={() => {
-              setSubmitted(false);
-              setEmail('');
-            }}
-            className="block w-full mt-4 text-sm text-[#00293d]/70 hover:text-[#00293d] transition-colors"
-          >
-            Try a different email
-          </button>
+      <div className="text-center">
+        <div className="mb-6">
+          <Image
+            src="/assets/icons/email-orange-icon.svg"
+            alt="Email sent"
+            width={64}
+            height={64}
+            className="mx-auto"
+          />
         </div>
+        <h2 className="text-[24px] font-normal text-[#00293d] font-fractul mb-3">Check Your Email</h2>
+        <p className="text-[14px] text-[#00293d]/70 font-serif mb-6">
+          We've sent a password reset link to <strong>{email}</strong>. Please check your inbox and spam folder.
+        </p>
+        <Link
+          href="/login"
+          className="inline-block w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[20px] font-fractul rounded-[7px] transition-colors text-center"
+        >
+          Back to Login
+        </Link>
+        <button
+          type="button"
+          onClick={() => {
+            setSubmitted(false);
+            setEmail('');
+          }}
+          className="block w-full mt-4 text-[14px] text-[#00293d]/70 font-serif hover:text-[#00293d] transition-colors"
+        >
+          Try a different email
+        </button>
       </div>
     );
   }
@@ -63,16 +66,16 @@ export default function ForgotPasswordPage() {
     <>
       {/* Forgot Password Heading */}
       <div className="text-center mb-6">
-        <h2 className="text-[30px] font-normal text-[#00293d] mb-3">Forgot Password</h2>
-        <p className="text-sm text-[#00293d] px-4 leading-relaxed">
-          Enter your email address and we'll send you a link to reset your password
+        <h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Forget Your Password</h2>
+        <p className="text-[14px] text-[#00293d] px-4 leading-[20px] font-fractul">
+          Enter your registered email to reset your password.
         </p>
       </div>
 
       {/* Forgot Password Form */}
       <form onSubmit={handleSubmit} className="space-y-5">
         {error && (
-          <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[20px] text-sm">
+          <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[7px] text-[14px] font-serif">
             {error}
           </div>
         )}
@@ -85,7 +88,7 @@ export default function ForgotPasswordPage() {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
-            className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all"
+            className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all"
           />
         </div>
 
@@ -93,15 +96,26 @@ export default function ForgotPasswordPage() {
         <button
           type="submit"
           disabled={loading}
-          className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[20px] font-fractul rounded-[7px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          {loading ? 'Sending...' : 'Send Reset Link'}
+          {loading ? 'Sending...' : 'Submit'}
         </button>
       </form>
 
+      {/* Divider */}
+      <div className="my-6">
+        <div className="h-px bg-[#00293d]/20"></div>
+      </div>
+
       {/* Back to Login */}
-      <div className="text-center mt-8">
-        <Link href="/login" className="text-[#00293d] text-sm font-light hover:underline">
+      <div className="flex justify-center items-center">
+        <Link href="/login" className="flex items-center gap-2 text-[#00293d] text-[14px] font-fractul hover:underline">
+          <Image
+            src="/assets/icons/arrow-back-icon.svg"
+            alt="Back"
+            width={20}
+            height={20}
+          />
           Back to Login
         </Link>
       </div>