Skip to content

Sayali: fix dark mode styling issues on Skills Overview page#5143

Open
sayali-2308 wants to merge 1 commit intodevelopmentfrom
Sayali_SkillsOverview_DarkModeFix
Open

Sayali: fix dark mode styling issues on Skills Overview page#5143
sayali-2308 wants to merge 1 commit intodevelopmentfrom
Sayali_SkillsOverview_DarkModeFix

Conversation

@sayali-2308
Copy link
Copy Markdown
Contributor

image

Description

Fixes (Priority Medium) — HGN Questionnaire Dashboard: Team Member's Skill Overview Page – Fix Dark Mode Styling Issues

Related PRs:

PR4977, PR3360

Main changes explained:

  • Updated FilterButtons.jsx to accept darkMode prop and apply dark styles to skill/preference filter pills
  • Fixed FilterButtons.jsx to use SkillsOverviewPage.module.css instead of CommunityMembersPage.module.css
  • Updated SkillsOverviewPage.jsx to pass darkMode prop to SkillFilterButtons and PreferenceFilterButtons
  • Added .darkButton class to SkillsOverviewPage.module.css for proper dark mode pill styling

How to test:

  1. Check out branch Sayali_SkillsOverview_DarkModeFix
  2. npm install && npm run start:local
  3. Clear cache, log in as admin
  4. Navigate to http://localhost:5173/hgnhelp/skills-overview
  5. Switch to dark mode
  6. Verify skill filter pills have dark background with visible text
  7. Verify preference filter pills are correctly styled in dark mode
  8. Toggle dark mode off — verify light mode still works correctly

Screenshots:

image

Note:

Frontend-only change. No backend changes required.

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 13, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit f4def10
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69dd505a051a13000804d9d8
😎 Deploy Preview https://deploy-preview-5143--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@sonarqubecloud
Copy link
Copy Markdown

@one-community one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Apr 13, 2026
Copy link
Copy Markdown

@HemanthNidamanuru HemanthNidamanuru left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Sayali,

I tested this PR locally and the dark mode fix for skill and preference filter pills looks good. Both modes render correctly.

Image Image

@rapolusidhartha
Copy link
Copy Markdown

image image Working as expected

Copy link
Copy Markdown

@rapolusidhartha rapolusidhartha left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working as expected
Well Done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants