From ace4d686f49f64a56aac2518307c991973871a42 Mon Sep 17 00:00:00 2001
From: shuvadeepmondal <121492365+shuvadeepmondal@users.noreply.github.com>
Date: Tue, 23 Jul 2024 00:57:31 +0530
Subject: [PATCH] Ui Update for OTP

---
 apps/frontend/src/components/auth/OTP.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/components/auth/OTP.tsx b/apps/frontend/src/components/auth/OTP.tsx
index 182c4fc..1e361c1 100644
--- a/apps/frontend/src/components/auth/OTP.tsx
+++ b/apps/frontend/src/components/auth/OTP.tsx
@@ -2,17 +2,17 @@ import log_img from '../../assets/enter-otp-animate.svg';
 
 export default function OTP() {
   return (
-    <div className="w-full h-screen flex flex-col dark:bg-slate-800">
+    <div className="w-full h-screen flex flex-col bg-[url('https://pagedone.io/asset/uploads/1691055810.png')] dark:bg-slate-900 bg-center bg-cover">
       <div className="grid grid-cols-1 md:grid-cols-2 m-auto h-[350px] sm:max-w-[800px] rounded-2xl">
         <div className="w-full h-[350px] hidden md:block">
           <img className="w-full h-[100%]" src={log_img} alt="OTP" />
         </div>
         <div className="p-4 flex flex-col justify-around">
-          <h2 className="text-4xl font-medium poppins-medium text-center mb-4 dark:text-white">
+          <h2 className="text-4xl font-medium poppins-medium text-center mb-4 mr-4 dark:text-white">
             Enter Your <span className="text-blue-500">OTP</span>
           </h2>
-          <p className="justify-center items-center dark:text-gray-300">
-            Enter the one-time password (OTP) sent to your registered <br /> email address to verify your identity and
+          <p className="justify-center items-center dark:text-gray-300 mb-4">
+            Enter the OTP sent to your registered email address to verify your identity and
             continue.
           </p>
           <div className="flex flex-col space-y-12">
@@ -63,11 +63,18 @@ export default function OTP() {
           </div>
           <div className="mt-7">
             <button
-              className="ml-[110px] flex flex-row items-center justify-center text-center w-[200px] border rounded-3xl hover:bg-cyan-400 outline-none py-3 bg-cyan-500 border-none text-white shadow-sm text-base font-semibold poppins-extrabold"
+              className="flex flex-row items-center justify-center text-center w-full border rounded-3xl hover:bg-cyan-400 outline-none py-3 bg-cyan-500 border-none text-white shadow-sm text-base font-semibold poppins-extrabold"
             >
               <p>Verify Account</p>
             </button>
           </div>
+          <div className="mt-7">
+            <button
+              className=" flex flex-row items-center justify-center text-center w-full border rounded-3xl py-3 bg-white border-black text-black shadow-sm text-base font-semibold poppins-extrabold"
+            >
+              <p>Resend OTP</p>
+            </button>
+          </div>
         </div>
       </div>
     </div>