Conversation
Task 1342 - HGN Questionnaire Dashboard followup for PR #4214. - Add dark-mode overrides for .lowScore / .highScore so the score text meets WCAG 4.5:1 contrast on the dark table background (previous #e53e3e / #38a169 failed against the dark surface). - Darken the light-mode red/green slightly for 4.5:1 on white. - Move the trailing /10 score-cell styling into a .scoreCell CSS module class instead of leaving it unstyled inline.
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Jaden300
changed the title
one-community
changed the title
one-community
added
the
High Priority - Please Review First
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
devangsaraogi
left a comment
devangsaraogi
left a comment
There was a problem hiding this comment.
Tested locally on /topcommunitymembers in both light and dark mode and checked the available skill options.
Light mode is working as expected: the Skill Score styling is applied correctly, the /10 presentation remains aligned and changing the selected skill updates the table normally.
I found one issue in dark mode and left an inline comment with testing evidence. All of the available scores in the current dataset are 10/10, so they should use the new highScore green styling but they continue to render white. The global dark-mode rule in public/index.css uses color: #ffffff !important which appears to override the new CSS Module selector.
Requesting changes so the intended Skill Score color formatting is actually applied in dark mode.
| color: #fc8181; | ||
| } | ||
|
|
||
| .darkMode .highScore { |
There was a problem hiding this comment.
The new dark-mode highScore color is not taking effect at runtime.
I reproduced this locally on the current PR head at /topcommunitymembers. All of the available scores are 10/10, so they meet the >= 5 condition and should render green but they are still displayed in white in dark mode.
It looks like the global dark-mode rule in public/index.css (body.dark-mode * { color: #ffffff !important; }) is overriding this selector.
Could we make this override strong enough to take precedence so the Skill Score column actually uses the intended green color in dark mode?
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
- Tested the PR in dark mode.
- The Skill Score values do not appear to follow the expected color styling — scores >= 5 should display in green, but the 10/10 scores are currently rendering in white.
- Please fix the Skill Score color styling and ensure the colors are clearly legible in both light and dark modes.
- Additionally, the email links are rendering in white rather than blue, which appears to be a dark-mode styling inconsistency. Please review this as well if it is affected by the changes in this PR.
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Dark Mode QA Feedback:
Skill Score Color Coding: Scores ≥ 5 should be green, but 10/10 values render as white. Please correct the color logic and verify legibility in both light and dark modes.
Link Styling: Email links appear white instead of blue in dark mode. Please check if this regression stems from this PR and update it accordingly.
The global rule body.dark-mode * { color: #fff !important } in public/index.css
outranked the plain CSS Module dark-mode selectors, so score colors and link
colors rendered white in dark mode.
- Add !important to .darkMode .lowScore / .highScore so >=5 scores show green
and <5 show red in dark mode
- Add .darkMode overrides for .iconLinkDark / .underlineLinkDark so email,
phone and Slack links render blue instead of white
- All colors clear WCAG AA 4.5:1 on the dark table surface
Jaden300
changed the title
MahalakshmiPFW
left a comment
MahalakshmiPFW
left a comment
There was a problem hiding this comment.
Hey Jaden! Everything works well and the score styling looks good.
A couple of minor suggestions:
Light Mode Contrast: Could you make the green and red text colors slightly brighter or higher contrast? In light mode, the dark shade looks almost black and is hard to distinguish at a glance.
Score Suffix Formatting: The /10 suffix is currently unstyled. It might look cleaner and more consistent if the entire score (including /10) shares the same green/red color.
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Looks great overall, @Jaden300! The dark mode issue is resolved on my end.
Just one quick observation in Light Mode: The green and red text shades feel a bit too dark—they almost look black at a glance. Could we bump the brightness/saturation slightly to make the distinction pop better while maintaining WCAG contrast?
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
Tested the PR locally in dark mode. The Skill Score values are still displaying white instead of the intended green/red colors. DevTools shows the .highScore dark-mode styling is present, but the global body.dark-mode * { color: #fff !important; } rule is overriding the intended score colors. Could you please update the styling so the red/green score colors take precedence in dark mode?
Note: I tried to fetch latest changes multiple times and cleared cache and check mulitiple times and not sure how it worked for reviewers.
…r for score/link colors, improve contrast
086915a
|
6 participants
Jaden - HGN Questionnaire Dashboard: Fix Skill Score column coloring (followup for PR #4214) (DONE Jaden)- #5498
Description
Followup fix for PR #4214 (HGN Questionnaire Dashboard: Display Community Members' Skill & Contact - Top 15 Ranking).
Fixes the code coloring for the Skill Score column on
/topcommunitymembers.Priority: Medium
Changes
.lowScore/.highScorehad no dark-mode variant, so the red (#e53e3e) and green (#38a169) score text rendered against the dark table background (~#243447) at roughly 3:1 - below the WCAG AA 4.5:1 minimum. Added.darkMode .lowScore/.darkMode .highScoreoverrides (#fc8181/#68d391) that clear 4.5:1 on the dark surface.#c53030/#2f855aso they also clear 4.5:1 on white./10presentation into a.scoreCellCSS Module class instead of leaving the<td>unstyled.No behavior change to the <5 / >=5 threshold or the ranking logic.
How to test
npm install,npm run dev/topcommunitymembersNote
CSS Modules only, dark mode via
useSelector(state => state.theme.darkMode)(already wired on the container). No new dependencies, no backend changes.vod.mov