Sayali: resolve dark mode button consistency and name field issue in HGNForm for PR #4072

[sayali-2308]

Description

Fixes #4072 (Priority Urgent) — PR Admin Dashboard: Finish PR 4072 UI issues and Change .css to .module.css in /HGNForm

Related PRs:

Related to PR #3752. This is a frontend-only PR. Use latest backend development branch.

Main changes explained:

• Fixed InfoForm.jsx to resolve "undefined undefined" name field bug by correctly finding the current user from the profiles array
• Fixed InfoForm.module.css, GeneralQuestions.module.css, FollowupQuestions.module.css, FrontendBackendQuestions.module.css to ensure consistent dark mode button styling (Cancel, Next, Back, Submit buttons now all display consistently in dark mode)
• Fixed hgnform.module.css to apply dark background correctly across the entire HGNForm page in dark mode
• All CSS files already converted to .module.css by previous developer (Carlos)

How to test:

1. Check out branch Sayali_Task8_HGNSkillsForm_DarkMode
2. npm install and npm run start:local
3. Clear site data/cache
4. Log in as a user without existing skills data
5. Navigate to /hgnform
6. Verify Name field shows correct user name (not "undefined undefined")
7. Verify dark mode background is dark across entire page
8. Verify Cancel, Next, Back and Submit buttons are all consistent in dark mode
9. Navigate to /hgn/profile/skills and verify dark mode works correctly

Screenshots or videos of changes:

Note:

• The "undefined undefined" bug was caused by the name field reading from an array instead of finding the specific user profile
• Dark mode button inconsistency was reported by reviewer Anusha-Gali — now fixed across all form pages
• All CSS files were already .module.css — no rename needed

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	8178441
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69d88ffc0fec9a0008be1d14
😎 Deploy Preview	https://deploy-preview-5130--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.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud