fix: pagination theming #114
Conversation
WalkthroughThe pull request introduces updates to the pagination controls and styling within three components: Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #114 +/- ##
==========================================
- Coverage 60.13% 60.12% -0.01%
==========================================
Files 146 146
Lines 14441 14443 +2
==========================================
Hits 8684 8684
- Misses 5757 5759 +2 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
components/bank/components/historyBox.tsx (3)
175-177: Add ARIA label for better accessibility.The previous page button should have an aria-label for better screen reader support.
<button onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))} disabled={currentPage === 1 || isLoading} className="p-2 hover:bg-[#0000001A] dark:hover:bg-[#FFFFFF1A] text-black dark:text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed" + aria-label="Previous page" >
203-207: Add aria-hidden for ellipsis.The ellipsis should be marked as hidden from screen readers since it's decorative.
-return ( - <span className="text-black dark:text-white" key={pageNum}> +return ( + <span className="text-black dark:text-white" key={pageNum} aria-hidden="true"> ... </span> );🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 203-204: components/bank/components/historyBox.tsx#L203-L204
Added lines #L203 - L204 were not covered by tests
[warning] 206-206: components/bank/components/historyBox.tsx#L206
Added line #L206 was not covered by tests
215-217: Add ARIA label for better accessibility.The next page button should have an aria-label for better screen reader support.
<button onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))} disabled={currentPage === totalPages || isLoading} className="p-2 hover:bg-[#0000001A] dark:hover:bg-[#FFFFFF1A] text-black dark:text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed" + aria-label="Next page" >components/factory/components/MyDenoms.tsx (1)
276-277: Add test coverage for pagination styling.The pagination button styling logic lacks test coverage. Consider adding tests to verify the correct application of styles in both light and dark modes.
Would you like me to help generate test cases for the pagination styling?
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 276-277: components/factory/components/MyDenoms.tsx#L276-L277
Added lines #L276 - L277 were not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
components/bank/components/historyBox.tsx(2 hunks)components/factory/components/MyDenoms.tsx(3 hunks)components/groups/components/myGroups.tsx(3 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
components/factory/components/MyDenoms.tsx
[warning] 276-277: components/factory/components/MyDenoms.tsx#L276-L277
Added lines #L276 - L277 were not covered by tests
components/bank/components/historyBox.tsx
[warning] 203-204: components/bank/components/historyBox.tsx#L203-L204
Added lines #L203 - L204 were not covered by tests
[warning] 206-206: components/bank/components/historyBox.tsx#L206
Added line #L206 was not covered by tests
🔇 Additional comments (3)
components/bank/components/historyBox.tsx (1)
195-196: LGTM! Consistent theme-aware styling.
The implementation correctly handles both light and dark mode states for active and hover conditions.
components/groups/components/myGroups.tsx (1)
218-218: LGTM! Well-implemented theme-aware pagination.
The pagination styling is consistent with other components and includes proper accessibility attributes. The implementation correctly handles both light and dark mode states.
Also applies to: 238-239, 262-262
components/factory/components/MyDenoms.tsx (1)
256-256: LGTM! Consistent theme-aware pagination implementation.
The pagination styling is well-implemented with proper accessibility attributes and consistent with other components.
Also applies to: 276-277, 300-300
Fix pagination theming in bank, groups, and factory.
Summary by CodeRabbit
New Features
Bug Fixes
Style