Carlos - HGN Skills Non-doc Task: User Skills Module CSS and Dark Mode

[sircarmart]

Description

This pull request updates the HGN Skills form and the HGN Skills page to support dark mode and make some minor changes to finish transferring the CSS to module CSS in these folders. This was originally a small change for the HGNForm to have css converted into module CSS but the changes were small enough that support for dark mode was approved by Jae.

Related PRS (if any):

This frontend pr is not related to any backend pr. Use latest backend development branch.

Main changes explained:

• Updates components in HGNSkillsDashboard/SkillsProfile to support Dark Mode styling.
• Updates components in HGNForm/pages and HGNForm/questionpages to support Dark Mode styling
• Renames/Updates HGNSkillsDashboard/SkillsProfile/styles/AdditionalInfo.css into HGNSkillsDashboard/SkillsProfile/styles/AdditionInfo.module.css

How to test:

1. check into current branch
2. do yarn install and yarn start:local to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to HGNForm
6. Inspect pages while filling out form to ensure it is all supported in dark mode.
7. After completing form proceed to HGN Profile Skills
8. verify the profile skills page works in dark mode

Screenshots or videos of changes:

Skills Form Dark Mode

Skills Profile Dark Mode

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	47c2f6c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68c609943f615b000814afb6
😎 Deploy Preview	https://deploy-preview-4072--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[RitzzzZ2021]

The User Skills form works well in dark mode. Also checked the profile, looks good.

[akshith312]

Verified the changes. Pages work in the dark mode.

[Swetha-1306]

Tested the PR, the form can be seen in dark mode and I am able to submit it, However I am not able to see the profile page after submitting the form.

[KurtisIvey]

Looks good and everything works as expected. Thanks for all your hard work. Approved!

[beblicarl]

This functionality works as intended, and the code is great

[Anusha-Gali]

Hi Carlos,

I reviewed your PR locally and can confirm that all form and profile functionality works as expected. However, I noticed two minor UI issues in dark mode. As shown below, the Next and Submit buttons appear in black, while the Back button displays in white. This creates an inconsistency in the button styling under dark mode.

[rohanrastogi311]

Hi Carlos,

I'm unable to get past the first page on the form. The name keeps going back to undefined undefined too.

Please have a look and let me know to re-review.