Conversation
… app style: update button and border styles for better contrast in History and Subscription pages refactor: temporarily disable KYC status check in Wallet page for testing purposes fix: adjust logo and background colors based on theme in Onboard and Home pages style: enhance visual consistency in Subscription page with updated colors and borders fix: improve user count display with primary text color style: modify theme colors for better accessibility and visual appeal
|
@rayaanr must be a member of the CeyLabs Projects team on Vercel to deploy. Learn more about collaboration on Vercel and other options here. |
WalkthroughThe PR adds dark mode theme support across dashboard and subscription pages by integrating a theme hook and conditional styling. It disables KYC verification checks, introduces a temporary testing button for verification flow, and updates light/dark border and color styling across multiple components. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Free ⛔ Files ignored due to path filters (4)
📒 Files selected for processing (10)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Note 🎁 Summarized by CodeRabbit FreeYour organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login. Comment |
PR Compliance Guide 🔍Below is a summary of compliance checks for this PR:
Compliance status legend🟢 - Fully Compliant🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label |
|||||||||||||||||||||||||
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||||
There was a problem hiding this comment.
Pull Request Overview
This PR fixes theme-related issues in the light theme by improving visual consistency and accessibility across light and dark modes. The changes primarily involve adding proper theme-aware styling using Tailwind's dark: prefix and adjusting color values to work better in light mode.
Key changes:
- Added theme context usage to dynamically switch between light and dark logos
- Updated CSS custom properties for better light theme colors
- Added responsive
dark:classes throughout components for proper theme support - Introduced temporary testing bypass for KYC verification
Reviewed Changes
Copilot reviewed 10 out of 14 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/theme.css | Updated secondary text color for light theme |
| src/components/usercount.tsx | Added primary text color class |
| src/components/bottomNavigation.tsx | Added theme-aware border colors |
| src/app/verification/page.tsx | Added KYC bypass button for testing, wrapped button in fragment |
| src/app/subscription/page.tsx | Updated plan cards and status text with theme-aware colors |
| src/app/page.tsx | Added dynamic logo switching based on theme |
| src/app/onboard/page.tsx | Added dynamic logo and theme-aware card backgrounds |
| src/app/dashboard/subscription/page.tsx | Added theme-aware logos, tabs, borders, and status colors |
| src/app/dashboard/page.tsx | Commented out KYC status check for testing |
| src/app/dashboard/history/page.tsx | Added theme-aware borders and icon colors |
| public/DeepaLogo_Black.svg | Added new black logo variant |
| public/BDLogo_Black.svg | Added new black logo variant |
| package-lock.json | Deleted lock file |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| --tg-color-scheme: light; | ||
| --text-primary: var(--tg-theme-text-color, #000000); | ||
| --text-secondary: var(--tg-theme-hint-color, #666666); | ||
| --text-secondary: var(--tg-theme-hint-color, #a92b2b); |
There was a problem hiding this comment.
The secondary text color #a92b2b is a red color, which is typically used for errors or warnings, not for secondary text. This should likely be a gray color like #666666 (the original value) or another neutral color appropriate for secondary text.
| --text-secondary: var(--tg-theme-hint-color, #a92b2b); | |
| --text-secondary: var(--tg-theme-hint-color, #666666); |
| <Button | ||
| onClick={() => router.push("/dashboard/subscription")} | ||
| className="w-full border border-gray-600 bg-gray-800 px-6 py-3 text-sm font-medium text-gray-300 hover:bg-gray-700" | ||
| > | ||
| Skip Verification (Testing) | ||
| </Button> |
There was a problem hiding this comment.
This testing bypass button allows users to skip KYC verification, which poses a security risk in production. Ensure this is removed before deploying to production or add environment-based conditional rendering to only show in development.
| <Button | |
| onClick={() => router.push("/dashboard/subscription")} | |
| className="w-full border border-gray-600 bg-gray-800 px-6 py-3 text-sm font-medium text-gray-300 hover:bg-gray-700" | |
| > | |
| Skip Verification (Testing) | |
| </Button> | |
| {process.env.NODE_ENV === "development" && ( | |
| <Button | |
| onClick={() => router.push("/dashboard/subscription")} | |
| className="w-full border border-gray-600 bg-gray-800 px-6 py-3 text-sm font-medium text-gray-300 hover:bg-gray-700" | |
| > | |
| Skip Verification (Testing) | |
| </Button> | |
| )} |
| {/* Temporary bypass for testing */} | ||
| <Button | ||
| onClick={() => router.push("/dashboard/subscription")} | ||
| className="w-full border border-gray-600 bg-gray-800 px-6 py-3 text-sm font-medium text-gray-300 hover:bg-gray-700" |
There was a problem hiding this comment.
The bypass button uses hardcoded dark theme colors (gray-600, gray-800) without theme-aware classes. Add dark: prefixes for consistency with the rest of the PR: border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700.
| className="w-full border border-gray-600 bg-gray-800 px-6 py-3 text-sm font-medium text-gray-300 hover:bg-gray-700" | |
| className="w-full border border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700" |
|
|
||
| checkKycStatus(); | ||
| }, [authToken, router]); | ||
| // Temporarily disabled for testing |
There was a problem hiding this comment.
The comment should specify what needs to be done before re-enabling this code and under what conditions it should be restored (e.g., 'Temporarily disabled for testing - re-enable before production deployment').
| // Temporarily disabled for testing | |
| // Temporarily disabled for testing. Re-enable this code before production deployment to ensure KYC status is checked and users are redirected to verification if not approved. |
| selectedPlan === plan.id | ||
| ? "border-orange-500 bg-gradient-to-r from-orange-500/10 to-orange-600/10 shadow-lg shadow-orange-500/20" | ||
| : "border-gray-700 bg-gradient-to-r from-gray-800/50 to-gray-900/50 hover:border-gray-600" | ||
| : "border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800/50 hover:border-gray-600" |
There was a problem hiding this comment.
There is an extra space between dark:bg-gray-800/50 and hover:border-gray-600. Remove the double space for consistency.
| : "border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800/50 hover:border-gray-600" | |
| : "border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800/50 hover:border-gray-600" |
| <div | ||
| className={cn( | ||
| "absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] transform-gpu rounded-xl bg-zinc-800 transition-transform duration-200 ease-out", | ||
| "absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] transform-gpu rounded-xl bg-orange-500 dark:bg-zinc-800 transition-transform duration-200 ease-out", |
There was a problem hiding this comment.
There is an extra space between inset-y-1 and left-1. Remove the double space for consistency.
| "absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] transform-gpu rounded-xl bg-orange-500 dark:bg-zinc-800 transition-transform duration-200 ease-out", | |
| "absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] transform-gpu rounded-xl bg-orange-500 dark:bg-zinc-800 transition-transform duration-200 ease-out", |
| <> | ||
| <Button | ||
| onClick={initiateVerification} | ||
| disabled={isLoading || !userData} |
There was a problem hiding this comment.
This use of variable 'isLoading' always evaluates to false.
| disabled={isLoading || !userData} | ||
| className={cn( | ||
| "w-full px-6 py-4 text-lg font-semibold text-white transition-all duration-300", | ||
| isLoading || !userData |
There was a problem hiding this comment.
This use of variable 'isLoading' always evaluates to false.
| : "bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 hover:shadow-xl" | ||
| )} | ||
| > | ||
| {isLoading ? ( |
There was a problem hiding this comment.
This use of variable 'isLoading' always evaluates to false.
PR Type
Bug fix, Enhancement
Description
Fix light theme contrast issues with updated text and border colors
Add theme-aware logo switching between black and white SVG formats
Enhance visual consistency across pages with dark/light theme support
Temporarily disable KYC status check and add verification bypass for testing
Improve button and border styling for better accessibility in light theme
Diagram Walkthrough
File Walkthrough
3 files
Update light theme text color for better contrastTemporarily disable KYC status check for testingAdd temporary verification bypass button for testing7 files
Add light theme border and text color supportAdd theme-aware logo and improve tab stylingImplement theme-aware logo and feature card backgroundsAdd theme-aware logo selection for home pageUpdate plan card styling for light theme supportAdd light theme border color supportApply primary text color to user count displaySummary by CodeRabbit
New Features
Style
Chores