Skip to content

hotfix: update theme colors for KYC form components - #89

Merged
helloscoopa merged 4 commits into
mainfrom
rr/fix-kyc-form-theme
Aug 12, 2026
Merged

hotfix: update theme colors for KYC form components#89
helloscoopa merged 4 commits into
mainfrom
rr/fix-kyc-form-theme

Conversation

@rayaanr

@rayaanr rayaanr commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Summary by CodeRabbit

  • Style
    • Updated verification pages to support light and dark themes more consistently.
    • Improved themed colors for text, surfaces, borders, shadows, notices, and dialogs.
    • Refined verification error message styling and spacing.
    • Updated the mobile-device warning modal and close control for improved theme consistency.
    • Verification behavior and user flows remain unchanged.

@vercel

vercel Bot commented Aug 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
bitcoin-deepa-tma-bot Ready Ready Preview Aug 12, 2026 9:54am

Request Review

@coderabbitai

coderabbitai Bot commented Aug 12, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 67c42986-8d5d-4060-8c45-2a70894a4ac3

📥 Commits

Reviewing files that changed from the base of the PR and between a2af671 and ec68e23.

📒 Files selected for processing (1)
  • src/app/verification/details/page.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/app/verification/details/page.tsx

📝 Walkthrough

Walkthrough

The verification pages now use theme-aware styling for surfaces, text, borders, and shadows. Verification behavior, content, and control flow remain unchanged.

Changes

Verification theme migration

Layer / File(s) Summary
Apply theme-aware verification page styling
src/app/verification/page.tsx
Headers, steps, messages, notices, and mobile-warning modal content now use theme-based classes instead of fixed colors.
Apply theme-aware details styling
src/app/verification/details/page.tsx
The details page uses themed page and error text, removes the inline Telegram background variable, and removes validation-message left padding.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

Suggested labels: Review effort 2/5

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: updating theme-aware colors in the KYC verification form components.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch rr/fix-kyc-form-theme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with 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.

Inline comments:
In `@src/app/verification/page.tsx`:
- Around line 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.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a3c6828a-36b6-4616-bc17-5bb2d8ef42a8

📥 Commits

Reviewing files that changed from the base of the PR and between 3b24741 and 77b0768.

📒 Files selected for processing (2)
  • src/app/verification/details/page.tsx
  • src/app/verification/page.tsx

Comment on lines +177 to +189
<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>

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.

@helloscoopa
helloscoopa merged commit 750f6bc into main Aug 12, 2026
6 checks passed
@helloscoopa
helloscoopa deleted the rr/fix-kyc-form-theme branch August 12, 2026 10:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants