Jaden Taking Over for Peterson - Added improvements to the badge management page (DONE Jaden) - #3517
Conversation
peterson337
added
the
do not review
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
peterson337
removed
the
do not review
vaibhavkoladiya
left a comment
vaibhavkoladiya
left a comment
There was a problem hiding this comment.
Checked out the current branch, ran npm install, and cleared site data before logging in as an admin user. Navigated to Other Links → Badge Management → Badge Development, activated dark mode, and tested the "Add Filters" button. Verified that the text color is white and the button label updates correctly when toggled. Everything works as expected — approving the PR.
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Peterson,
I tried to review your PR locally and was unable to do so cause of node version discrepancy.
…arkmode-filter-test
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi Peterson,
I tested this locally and the entire Badge Management filter section is not aligned properly in dark mode. The text color and button label changes need to be fixed for dark mode.
Convert filter rows from inline paragraph + input to flex rows with align-items: center so labels and inputs sit on the same baseline in both light and dark mode.
…ment-badge-management-darkmode-filter-test
Jaden300
changed the title
Jaden300
changed the title
…velopment - Replace inline style objects with getBoxStyling(darkMode) and .btn CSS class - Extract getDark helper to eliminate repeated darkMode ternaries - Precompute labelClass and inputClass to reduce JSX branching
kzou55
left a comment
kzou55
left a comment
There was a problem hiding this comment.
Hi Jaden,
I ran and tested the PR locally.
Verified
- Add Filters button present
-
Clicking "Add Filters" causes the search, filter by type, and filter by rank inputs to apear and the Remove Filters button is present
-
"Add Filters" button looks goo in Dark Mode
Issues
-
The inputs and the text are not applied in Dark Mode consistently.
- The input field is white and doesn't have dark mode applied to it.
- Note: The text is white for some of them which is correct but the issue is that the input field doesn't have dark mode applied to them making it difficult to see
- The drop down for "Filter by type" also has dark mode issues
- The "choose a rank" input's placeholder text is not white(doesn't have dark mode applied to it) and the input field for it(white box) needs to have dark mode applied to it
Recording.2026-07-26.220130.mp4
- The input field is white and doesn't have dark mode applied to it.
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Hi @Jaden300,
I tested the PR locally in dark mode and verified that the "Add Filters" button is present and functioning properly. However, there are a few dark mode styling inconsistencies with the input fields that need to be fixed before merging:
Input Field Backgrounds: The text input boxes remain white in dark mode while the typed text turns white, making the text unreadable against the background. Please apply dark mode styling to the input container backgrounds.
"Filter by Type" Dropdown: The dropdown menu options are missing dark mode styling and have contrast issues.
"Choose a Rank" Placeholder: The placeholder text isn't adapting to dark mode and lacks proper contrast against the input field.
Once these contrast/theme fixes are in place, this should be ready to go. Thanks!
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
- Tested the PR locally, on clicking the button Add filter changes to Remove Filter and filter input loads.
- The dark mode implementation needs improvement as they are not consistent across the inputs and the page.
- On selecting/highlighting a row goes white in dark mode, makes text invisible.
- Remove inline styles from buttons; move box-shadow to CSS module - Add ::placeholder rule so placeholder text inherits white color in dark mode - Add ::selection rule to fix invisible text when highlighting rows in dark mode
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Local Testing & PR Review
I checked out the branch and tested the changes locally on Node 20.
Verified:
- Filter Toggle: The "Add Filters" button correctly toggles to "Remove Filters" and displays the search/filter controls as expected.
- Dark Mode Input Styling: Checked the dark mode implementation across input fields, placeholders, and the "Filter by type" dropdown. Dark mode backgrounds apply correctly with readable text contrast.
- Row Highlighting: Verified that selected/highlighted rows keep high contrast and readable text in dark mode without turning white.
- Layout & Alignment: The filter section flexbox alignment renders cleanly in both Light and Dark modes.
All checks pass and all previously requested dark mode contrast issues have been resolved. LGTM! Approving the PR.
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
Tested the PR locally, the dark mode issues are not fixed yet. The dropdown and hover still needs improvement.
…dge Development page
|
8 participants
Description
This PR improves the Badge Management - Badge Development page by styling the filter inputs, making filter label text white in dark mode, toggling the filter button label between "Add Filters" and "Remove Filters", and fixing alignment of the filter section in dark mode.
Jaden took over from Peterson to resolve a Node version mismatch (branch was authored against Node 14, project is on Node 20), fix a SonarQube cognitive complexity violation (score 16, max 15) by extracting module-level helper functions, and fix the filter section alignment issue flagged by reviewers.
Related PRs:
None
Main changes explained:
BadgeDevelopment.jsx- filter button label toggles between "Add Filters" / "Remove Filters"; filter label text usestext-light/text-darkfor dark mode; filter rows use flexbox for proper alignment; filter logic extracted to module-levelbadgeMatchesFiltersandnormalizehelpers to satisfy SonarQube complexity limitBadgeDevelopment.module.css- new CSS module for filter section layout and input styling (replaces inline styles)BadgeManagement.jsx- heading text usestext-light/text-darkfor dark modeHow to test:
npm installthennpm startNote:
None
vod.mov