From 77b07688009a85456538b75b2709029d0205e6cd Mon Sep 17 00:00:00 2001
From: rayaanr <rayaannsn@gmail.com>
Date: Wed, 12 Aug 2026 12:22:37 +0530
Subject: [PATCH 1/4] fix: update theme colors for KYC form components

---
 src/app/verification/details/page.tsx | 13 +++-----
 src/app/verification/page.tsx         | 45 ++++++++++++++++-----------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/app/verification/details/page.tsx b/src/app/verification/details/page.tsx
index be6341a..0ecfd8b 100644
--- a/src/app/verification/details/page.tsx
+++ b/src/app/verification/details/page.tsx
@@ -94,20 +94,17 @@ export default function VerificationDetailsPage() {
   };
 
   return (
-    <div className="flex min-h-screen w-full flex-col bg-[#0b0f14]">
+    <div className="bg-surface-main flex min-h-screen w-full flex-col">
       <div className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-5 pt-8 pb-6">
         <div className="flex flex-col items-center gap-1 text-center">
-          <h1 className="text-[24px] leading-7 font-bold text-white">Your Details</h1>
-          <p className="text-[14px] leading-4.5 text-[#94a3b8]">
+          <h1 className="text-tma-text-primary text-[24px] leading-7 font-bold">Your Details</h1>
+          <p className="text-tma-text-secondary text-[14px] leading-4.5">
             We need a few details before starting verification
           </p>
         </div>
 
         <form onSubmit={handleSubmit(onSubmit)} className="flex flex-1 flex-col gap-3">
-          <div
-            className="flex flex-col gap-3"
-            style={{ "--tgui--bg_color": "#0b0f14" } as React.CSSProperties}
-          >
+          <div className="flex flex-col gap-3">
             {FIELDS.map((field) => (
               <div key={field.name} className="w-full">
                 <Input
@@ -137,7 +134,7 @@ export default function VerificationDetailsPage() {
               <p className="text-[13px] leading-4 font-semibold text-[#f13131]">
                 Verification Error
               </p>
-              <p className="mt-1 text-[13px] leading-4.5 text-[#94a3b8]">{error}</p>
+              <p className="text-tma-text-secondary mt-1 text-[13px] leading-4.5">{error}</p>
             </div>
           )}
 
diff --git a/src/app/verification/page.tsx b/src/app/verification/page.tsx
index 5ea0722..199a6f4 100644
--- a/src/app/verification/page.tsx
+++ b/src/app/verification/page.tsx
@@ -150,13 +150,13 @@ export default function VerificationIntroPage() {
   const showSteps = SHOW_STEPS_FOR.includes(status);
 
   return (
-    <div className="flex min-h-screen w-full flex-col bg-[#0b0f14]">
+    <div className="bg-surface-main flex min-h-screen w-full flex-col">
       <div className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-5 pt-8 pb-6">
         <div className="flex flex-col items-center gap-1 text-center">
-          <h1 className="text-[24px] leading-7 font-bold text-white">
+          <h1 className="text-tma-text-primary text-[24px] leading-7 font-bold">
             {content?.title ?? "Verify Your Identity"}
           </h1>
-          <p className="text-[14px] leading-4.5 text-[#94a3b8]">
+          <p className="text-tma-text-secondary text-[14px] leading-4.5">
             {content?.description ?? "Complete verification to continue with Bitcoin දීප"}
           </p>
         </div>
@@ -174,12 +174,19 @@ export default function VerificationIntroPage() {
         {showSteps && (
           <div className="flex flex-col gap-3">
             {STEPS.map((step, index) => (
-              <div key={step.title} className="rounded-2xl bg-[#12161d] px-4 py-4">
+              <div
+                key={step.title}
+                className="rounded-2xl border border-transparent bg-white px-4 py-4 shadow-[0px_2px_10px_0px_rgba(0,0,0,0.07)] dark:border-white/6 dark:bg-[#0B0F14] dark:shadow-[0px_2px_10px_0px_rgba(0,0,0,0.3)]"
+              >
                 <p className="text-[13px] leading-4 font-semibold text-[#fa7119]">
                   Step {String(index + 1).padStart(2, "0")}
                 </p>
-                <p className="mt-1 text-[16px] leading-5 font-bold text-white">{step.title}</p>
-                <p className="mt-0.5 text-[13px] leading-4.25 text-[#94a3b8]">{step.description}</p>
+                <p className="text-tma-text-primary mt-1 text-[16px] leading-5 font-bold">
+                  {step.title}
+                </p>
+                <p className="text-tma-text-secondary mt-0.5 text-[13px] leading-4.25">
+                  {step.description}
+                </p>
               </div>
             ))}
           </div>
@@ -188,35 +195,35 @@ export default function VerificationIntroPage() {
         {status === "KYC_EXPIRED" && (
           <div className="rounded-2xl bg-[#fa7119]/10 px-4 py-4">
             <p className="text-[13px] leading-4 font-semibold text-[#fa7119]">KYC Expired</p>
-            <p className="mt-1 text-[13px] leading-4.5 text-[#94a3b8]">
+            <p className="text-tma-text-secondary mt-1 text-[13px] leading-4.5">
               Your previous verification has expired, please verify again.
             </p>
           </div>
         )}
 
         {status === "IN_REVIEW" && (
-          <div className="flex flex-col items-center gap-2 rounded-2xl bg-[#12161d] px-4 py-5 text-center">
+          <div className="flex flex-col items-center gap-2 rounded-2xl border border-transparent bg-white px-4 py-5 text-center shadow-[0px_2px_10px_0px_rgba(0,0,0,0.07)] dark:border-white/6 dark:bg-[#0B0F14] dark:shadow-[0px_2px_10px_0px_rgba(0,0,0,0.3)]">
             <p className="text-[15px] leading-5 font-bold text-[#fa7119]">
               We&apos;re reviewing your documents.
             </p>
-            <p className="text-[16px] leading-5 font-bold text-white">
+            <p className="text-tma-text-primary text-[16px] leading-5 font-bold">
               This usually takes up to 24 hours.
             </p>
-            <p className="text-[13px] leading-4.5 text-[#94a3b8]">
+            <p className="text-tma-text-secondary text-[13px] leading-4.5">
               You&apos;ll receive a notification once approved.
             </p>
           </div>
         )}
 
         {showSteps && (
-          <p className="text-center text-sm font-medium text-white">
+          <p className="text-tma-text-primary text-center text-sm font-medium">
             Your Data is Secured and never Shared
           </p>
         )}
 
         <div className="mt-auto flex flex-col gap-3">
           {showSteps && (
-            <p className="text-center text-[12px] text-[#64748b]">Takes less than 2 minutes</p>
+            <p className="text-muted text-center text-[12px]">Takes less than 2 minutes</p>
           )}
 
           {status === "APPROVED" ? (
@@ -296,7 +303,7 @@ export default function VerificationIntroPage() {
           <Modal.Header
             after={
               <Modal.Close>
-                <X size={20} className="text-[#94a3b8]" />
+                <X size={20} className="text-muted" />
               </Modal.Close>
             }
           >
@@ -318,14 +325,16 @@ export default function VerificationIntroPage() {
                 unoptimized
               />
             </div>
-            <h2 className="text-[16px] leading-5 font-bold text-white">Use Mobile Device</h2>
-            <p className="text-[14px] leading-4.5 text-[#94a3b8]">
+            <h2 className="text-tma-text-primary text-[16px] leading-5 font-bold">
+              Use Mobile Device
+            </h2>
+            <p className="text-tma-text-secondary text-[14px] leading-4.5">
               Identity verification works best on mobile devices for security and camera access.
             </p>
           </div>
 
-          <div className="flex flex-col gap-3 rounded-2xl bg-[#12161d] px-4 py-4">
-            <p className="text-[13px] leading-4 font-semibold text-white">
+          <div className="flex flex-col gap-3 rounded-2xl border border-transparent bg-white px-4 py-4 shadow-[0px_2px_10px_0px_rgba(0,0,0,0.07)] dark:border-white/6 dark:bg-[#0B0F14] dark:shadow-[0px_2px_10px_0px_rgba(0,0,0,0.3)]">
+            <p className="text-tma-text-primary text-[13px] leading-4 font-semibold">
               How to verify on mobile:
             </p>
             {MOBILE_STEPS.map((step, index) => (
@@ -333,7 +342,7 @@ export default function VerificationIntroPage() {
                 <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#fa7119] text-[12px] font-bold text-white">
                   {index + 1}
                 </span>
-                <p className="text-[13px] leading-4.5 text-[#94a3b8]">{step}</p>
+                <p className="text-tma-text-secondary text-[13px] leading-4.5">{step}</p>
               </div>
             ))}
           </div>

From 18ae1912549d2599c0b36db6a22eb2303ac427b7 Mon Sep 17 00:00:00 2001
From: rayaanr <rayaannsn@gmail.com>
Date: Wed, 12 Aug 2026 12:36:43 +0530
Subject: [PATCH 2/4] fix: adjust KYC form layout and styling

---
 src/app/verification/details/page.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/verification/details/page.tsx b/src/app/verification/details/page.tsx
index 0ecfd8b..9300b9b 100644
--- a/src/app/verification/details/page.tsx
+++ b/src/app/verification/details/page.tsx
@@ -104,7 +104,10 @@ export default function VerificationDetailsPage() {
         </div>
 
         <form onSubmit={handleSubmit(onSubmit)} className="flex flex-1 flex-col gap-3">
-          <div className="flex flex-col gap-3">
+          <div
+            className="flex flex-col gap-3 [&_.tgui-8ca550c2fc85eff5]:px-0!"
+            style={{ "--tgui--bg_color": "var(--color-surface-main)" } as React.CSSProperties}
+          >
             {FIELDS.map((field) => (
               <div key={field.name} className="w-full">
                 <Input
@@ -121,9 +124,7 @@ export default function VerificationDetailsPage() {
                   {...register(field.name)}
                 />
                 {errors[field.name] && (
-                  <p className="pt-1 pl-6 text-[12px] text-[#f13131]">
-                    {errors[field.name]?.message}
-                  </p>
+                  <p className="pt-1 text-[12px] text-[#f13131]">{errors[field.name]?.message}</p>
                 )}
               </div>
             ))}

From a2af671a31e58522cf95b2c7c359a3508ff1705e Mon Sep 17 00:00:00 2001
From: rayaanr <rayaannsn@gmail.com>
Date: Wed, 12 Aug 2026 14:18:15 +0530
Subject: [PATCH 3/4] fix: update KYC form background color to primary theme

---
 src/app/verification/details/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/verification/details/page.tsx b/src/app/verification/details/page.tsx
index 9300b9b..80f461d 100644
--- a/src/app/verification/details/page.tsx
+++ b/src/app/verification/details/page.tsx
@@ -94,7 +94,7 @@ export default function VerificationDetailsPage() {
   };
 
   return (
-    <div className="bg-surface-main flex min-h-screen w-full flex-col">
+    <div className="bg-surface-primary flex min-h-screen w-full flex-col">
       <div className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-5 pt-8 pb-6">
         <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-tma-text-primary text-[24px] leading-7 font-bold">Your Details</h1>
@@ -106,7 +106,7 @@ export default function VerificationDetailsPage() {
         <form onSubmit={handleSubmit(onSubmit)} className="flex flex-1 flex-col gap-3">
           <div
             className="flex flex-col gap-3 [&_.tgui-8ca550c2fc85eff5]:px-0!"
-            style={{ "--tgui--bg_color": "var(--color-surface-main)" } as React.CSSProperties}
+            style={{ "--tgui--bg_color": "var(--color-surface-primary)" } as React.CSSProperties}
           >
             {FIELDS.map((field) => (
               <div key={field.name} className="w-full">

From ec68e23c33bce24eda082f4620b1c4f8c925864d Mon Sep 17 00:00:00 2001
From: rayaanr <rayaannsn@gmail.com>
Date: Wed, 12 Aug 2026 15:24:01 +0530
Subject: [PATCH 4/4] fix: remove unnecessary class modification for KYC form
 styling

---
 src/app/verification/details/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/verification/details/page.tsx b/src/app/verification/details/page.tsx
index 80f461d..ba7ce6b 100644
--- a/src/app/verification/details/page.tsx
+++ b/src/app/verification/details/page.tsx
@@ -105,7 +105,7 @@ export default function VerificationDetailsPage() {
 
         <form onSubmit={handleSubmit(onSubmit)} className="flex flex-1 flex-col gap-3">
           <div
-            className="flex flex-col gap-3 [&_.tgui-8ca550c2fc85eff5]:px-0!"
+            className="flex flex-col gap-3"
             style={{ "--tgui--bg_color": "var(--color-surface-primary)" } as React.CSSProperties}
           >
             {FIELDS.map((field) => (