fix: roadmap model dark theme#5398
Conversation
sammy200-ui
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR adds dark-mode styling to the Modal component and RoadmapPill component. Modal now applies dark-background color, white/gray text, and hover states in dark mode. RoadmapPill inverts prose typography styling for dark-mode readability. No functional changes to component APIs or behavior. ChangesDark Mode Styling for Modal and RoadmapPill
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
sammy200-ui
force-pushed
the
website-ui-roadmap-dark-theme
branch
from
05ef71b to
e3f28bb
Compare
sammy200-ui
changed the title
There was a problem hiding this comment.
Pull request overview
This PR updates dark-mode styling to ensure the Roadmap item modal and the Finance Summary page components render correctly under the site’s global dark theme rollout (per the referenced comment in #5253).
Changes:
- Add dark-mode styles to the shared
Modalcomponent and Roadmap pill description content. - Apply dark-mode background/text styles across Finance Summary sections (cards, tables, tooltips, etc.).
- Adjust the finance bar chart rendering behavior to avoid client-only rendering issues and improve dark-mode chart readability.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| pages/finance.tsx | Adds a dark background wrapper for the finance page. |
| components/roadmap/RoadmapPill.tsx | Inverts prose colors for the modal description in dark mode. |
| components/Modal.tsx | Adds dark-mode background/text styling for modal UI. |
| components/FinancialSummary/SuccessStories.tsx | Adds dark-mode background and text colors. |
| components/FinancialSummary/SponsorshipTiers.tsx | Adds dark-mode background and text colors for table content. |
| components/FinancialSummary/OtherFormsComponent.tsx | Adds dark-mode background/card styling and improves list keys. |
| components/FinancialSummary/ExpenseBreakdown.tsx | Adds dark-mode background/card styling and text colors. |
| components/FinancialSummary/CustomTooltip.tsx | Updates tooltip styling for dark-mode compatibility. |
| components/FinancialSummary/Card.tsx | Adds dark-mode card background/text styling. |
| components/FinancialSummary/BarChartComponent.tsx | Improves dark-mode text/chart styling and gates client-only rendering. |
| components/FinancialSummary/AsyncAPISummary.tsx | Adds dark-mode text styling and inverts the GitHub logo in dark mode. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## website-ui #5398 +/- ##
============================================
Coverage 100.00% 100.00%
============================================
Files 22 22
Lines 830 830
Branches 159 159
============================================
Hits 830 830 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 `@components/Modal.tsx`:
- Line 64: In the Modal component update the Tailwind variant order in the
className that currently contains "dark:text-white hover:dark:text-gray-300":
change the stacked variant from "hover:dark:text-gray-300" to
"dark:hover:text-gray-300" so the dark mode qualifier appears before the hover
state (i.e., ensure the className string uses "dark:text-white
dark:hover:text-gray-300"); locate this in the Modal.tsx className on the
element rendering the modal close/action text and make the replacement.
🪄 Autofix (Beta)
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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f284cd48-4b7e-4568-ab0a-e836bf1fd457
📒 Files selected for processing (2)
components/Modal.tsxcomponents/roadmap/RoadmapPill.tsx
sammy200-ui
force-pushed
the
website-ui-roadmap-dark-theme
branch
from
e3f28bb to
5b14974
Compare
|
|
@princerajpoot20 ready for review |
|
@sammy200-ui what is the reason behind marking this suggestion as resolved: #5398 (comment) |
|
@princerajpoot20 I have actually taken the review in consideration 5b14974 if you take a look at this its been implemented 🙂 |
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
github-project-automation
Bot
moved this from To Be Triaged
to Done
in Website - Kanban
fixes the Roadmap modal theme #5253 (comment)
Summary by CodeRabbit