Improved merchant dashboard UI/UX - #75
Conversation
|
Warning Review limit reached
Next review available in: 41 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughThe dashboard adds persisted font-size controls, defaults theme selection to the system setting, introduces Geist Sans, and updates global design tokens, responsive sizing, shared dashboard chrome, transaction surfaces, statistics, and filter-panel styling. ChangesDashboard UI and accessibility controls
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Operator
participant TextSizeControl
participant FontScaleProvider
participant localStorage
participant DocumentRoot
Operator->>TextSizeControl: Select font scale
TextSizeControl->>FontScaleProvider: setFontScale(value)
FontScaleProvider->>DocumentRoot: Set --font-scale
FontScaleProvider->>localStorage: Persist value
FontScaleProvider-->>TextSizeControl: Mark selected option
Possibly related PRs
Suggested labels: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 `@dashboard/components/dashboard/stat/index.tsx`:
- Around line 69-74: Update the direction pill className in the stat component
to include a default background and text color when intent is absent or
unrecognized, while preserving the existing positive, negative, and neutral
styles.
- Around line 76-80: Add an accessible trend-direction name around the icon-only
conditional in the stat component, exposing “up” or “down” text through an
aria-label or screen-reader-only content while hiding the decorative SVG from
assistive technology. Preserve the existing ArrowUpRight and ArrowDownRight
visual rendering.
In `@dashboard/hooks/use-font-scale.tsx`:
- Line 85: Update the FONT_SCALE_SCRIPT construction to derive its inline scale
map from the existing FONT_SCALES constant instead of hardcoding sm, base, lg,
and xl values. Preserve the current localStorage lookup and pre-paint
--font-scale behavior while ensuring future FONT_SCALES changes are reflected
automatically.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: ee72c04a-036f-4dfa-bc4a-5047e252994c
📒 Files selected for processing (15)
.gitignoredashboard/app/globals.cssdashboard/app/layout.tsxdashboard/app/transactions/page.tsxdashboard/components/dashboard/layout/index.tsxdashboard/components/dashboard/mobile-header/index.tsxdashboard/components/dashboard/sidebar/index.tsxdashboard/components/dashboard/stat/index.tsxdashboard/components/text-size-control.tsxdashboard/components/theme-toggle-simple-click.tsxdashboard/components/transactions/filter-panel.tsxdashboard/components/ui/card.tsxdashboard/hooks/use-font-scale.tsxdashboard/hooks/use-theme-permissions.tsdashboard/providers.tsx
💤 Files with no reviewable changes (1)
- dashboard/components/theme-toggle-simple-click.tsx
2 participants
Addressed Issues:
Fixes #(TODO:issue number)
Screenshots/Recordings:
My.Movie.mp4
Additional Notes:
Refreshes the StablePay merchant dashboard into a cleaner, more professional fintech look while keeping the StablePay brand. Focuses on the dashboard's core purpose — letting merchants read payments received through StablePay.
Checklist
AI Usage Disclosure
Check one of the checkboxes below:
I have used the following AI models and tools: Claude
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Summary by CodeRabbit
New Features
UI Improvements
Bug Fixes