Keerthana - Fix Basic Information tab, Volunteering Times Tab Dark Mode Background and Save Button Visibility

[KeerthanaChitturi]

Description

This PR fixes dark mode UI issues on the User Profile page, including incorrect white background colors in the Basic Information tab, Volunteering Times tab and improves the visibility of the Save Changes button in dark mode. It also refactors the Volunteering Time tab styling by migrating from global CSS to CSS modules for better scoped styling and maintainability.

Related PRS (if any):

This frontend PR is related to the #XXX backend PR.
To test this backend PR you need to checkout the #XXX frontend PR.

Main changes explained:

• VolunteeringTimeTab.module.css Created by merging timeTab.css and VolunteeringTimeTab.css into a single CSS module. Converted all class names to camelCase. Added .darkModeRow and .darkMode marker classes to fix white background on rows in dark mode, following the same pattern used in BasicInformationTab.module.css.
• VolunteeringTimeTab.jsx - Replaced global CSS imports with the new CSS module. Updated all className strings to use scoped module references. Applied styles.darkMode and styles.darkModeRow to the root div and all Row components.
• SaveButton.jsx Fixed invisible Save Changes button in dark mode by changing color prop to 'primary' and applying an explicit light background style in dark mode.
• BasicInformationTab Fixed dark mode background for all rows using .dark-mode :global(.row) pattern in BasicInformationTab.module.css. Added .dark-label-col for label column styling and applied styles['dark-mode'] marker class to the root div.

How to test:

1. Check out current branch
2. Run npm install and start the app locally
3. Clear site data/cache
4. Log in as an admin user
5. Navigate to a user profile page
6. Switch to dark mode
7. Click the Volunteering Times tab - verify no white background appears, all rows show the correct dark background
8. Click the Basic Information tab -verify all rows and label columns show the correct dark background
9. Make a change to any field on the Basic Information tab - verify the Save Changes button becomes visible and clickable

Screenshots or videos of changes:

Before fix Basic Information tab

After fix Basic Information tab

Before fix Volunteering Times tab

After fix Volunteering Times tab

Note:

The Save Changes button correctly appears faded when no changes have been made - this is expected behavior. The button becomes fully visible and active once a field is edited.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[Rajasrivatsansrinivasan]

Checked out the PR locally and validated the changes on the User Profile page in dark mode. Verified that the background issues in both the Basic Information and Volunteering Times tabs are resolved, with consistent dark styling across rows and labels. Also confirmed that the Save Changes button is visible and functional after making updates. The changes work as expected with no regressions observed. Approving.

[sundarmachani]

I’ve reviewed this PR, and everything appears to be in order. The page is visible in both the “Basic Information” and “Volunteering Times” components when the dark mode is activated.

Before:

After:

[KeerthanaChitturi]

This PR replaces #5072.

PR #5072 provided a partial fix for dark mode issues in the Basic Information tab.
This PR completes the fix and includes additional improvements:

Fixes for Volunteering Time tab dark mode background
Improved visibility of the "Save Changes" button
#5072

[one-community]

Thank you all, merging!