Skip to content

hotfix: update theme colors for KYC form components #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
helloscoopa merged 4 commits into from
Aug 12, 2026
Merged

hotfix: update theme colors for KYC form components #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
77b0768
fix: update theme colors for KYC form components
rayaanr Aug 12, 2026
18ae191
fix: adjust KYC form layout and styling
rayaanr Aug 12, 2026
a2af671
fix: update KYC form background color to primary theme
rayaanr Aug 12, 2026
ec68e23
fix: remove unnecessary class modification for KYC form styling
rayaanr Aug 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions src/app/verification/details/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,19 +94,19 @@ export default function VerificationDetailsPage() {
};

return (
<div className="flex min-h-screen w-full flex-col bg-[#0b0f14]">
<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-[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}
style={{ "--tgui--bg_color": "var(--color-surface-primary)" } as React.CSSProperties}
>
{FIELDS.map((field) => (
<div key={field.name} className="w-full">
Expand All @@ -124,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>
))}
Expand All @@ -137,7 +135,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>
)}

Expand Down
45 changes: 27 additions & 18 deletions src/app/verification/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Comment on lines +177 to +189

@coderabbitai coderabbitai Bot Aug 12, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Use Telegram theme tokens for the verification cards.

The cards still use bg-white, dark:bg-[#0B0F14], dark:border-white/6, and fixed black shadows. These values do not adapt to the Telegram CSS variables supplied by src/app/context/theme.tsx. Replace the fixed surface, border, and shadow values with the existing theme tokens.

Also applies to: 204-216, 336-345

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/verification/page.tsx` around lines 177 - 189, Update the
verification card containers in the repeated sections around the visible card
markup and the additional referenced sections to use the existing Telegram theme
tokens from theme.tsx for background, border, and shadow. Replace the fixed
light/dark colors and black shadow values while preserving the cards’ layout and
other styling.

</div>
))}
</div>
Expand All @@ -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" ? (
Expand Down Expand Up @@ -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>
}
>
Expand All @@ -318,22 +325,24 @@ 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) => (
<div key={step} className="flex items-start gap-3">
<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>
Expand Down