Linlin - fix(profile): resolve dark mode background gaps and visual artifacts

[linlin-husky]

Description

This PR addresses and fixes critical UI/UX visual regressions and accessibility issues within the User Profile (Basic Information tab) under Dark Mode, specifically resolving background inconsistencies and toggle switch visibility defects.

Detailed Issues Resolved:

1. Background Discrepancies & Layout Gaps:
   • In dark mode, various profile sections (#myTabContent, .tab-pane, .right-column, .profile-functions-desktop) suffered from mismatched background tones or persistent black horizontal strips and right-edge spacing gaps.
2. Toggle Switch Visibility & Contrast Defects:
   • Custom toggle switches ([class*="toggleDark"]) lacked sufficient contrast in dark mode. Both checked and unchecked states (such as public/private and subscribed/unsubscribed toggles) blended into the background, making it extremely difficult for users to determine their active status.
3. Text Readability & Hierarchy:
   • Certain field labels, user values, and descriptive texts lost their contrast or defaulted to dark text over dark backgrounds in dark mode, hindering overall readability.

Summary of Fixes:

• Normalized Theme Colors: Unified background colors across all profile containers to align seamlessly with the standard dark mode theme (#1c2541).
• Edge-Gap Elimination: Implemented a right-side extension pseudo-element (::after) on #containerProfile to thoroughly cover persistent layout gaps and right-edge spacing issues.
• Enhanced Toggle Styling: Applied targeted high-contrast style overrides to custom toggleDark components, ensuring crystal-clear borders and visual distinction for both active and inactive states.
• Forced High-Contrast Text: Ensured all field labels, values, and switch descriptions remain crisp, legible pure white (#ffffff) in dark mode while preserving zero impact on light mode styling.

Fixes # (bug list priority medium: Yeshwanth – Fix User Profile Dark Mode Styling and Toggle Visibility)

Related PRs (if any):

This frontend PR is standalone and focuses entirely on fixing dark mode CSS modules and toggle visibility in the User Profile component.

Main changes explained:

• Updated BasicInformationTab.module.css:
  • Normalized background colors for #myTabContent, .tab-pane, .right-column, and .profile-functions-desktop to match the consistent dark mode theme (#1c2541).
  • Added a right-side extension pseudo-element (::after) on #containerProfile to thoroughly cover persistent right-edge spacing and layout gaps.
  • Applied targeted high-contrast styling overrides to the custom toggleDark switch components ([class*="toggleDark"]) so that both checked and unchecked states are clearly visible and legible in dark mode.
  • Ensured all field labels, values, and toggle descriptions maintain high-contrast white text (#ffffff) in dark mode.

How to test:

1. Check out to the current branch: Linlin-fix-userprofile-darkmode
2. Run npm install and npm run start:local to run this PR locally.
3. Clear site data/cache if necessary.
4. Log in as an admin/user.
5. Go to Dashboard → View Profile (Basic Information tab).
6. Toggle Dark Mode on and verify:
   • No unintended black horizontal strips or right-edge gaps appear between profile sections.
   • The public/private and subscribed/unsubscribed toggle switches display with clear contrast and clearly indicate their selected states.
   • All profile text, inputs, labels, and buttons remain fully readable.
7. Verify that light mode behavior and styling remain completely unchanged.

Screenshots or videos of changes:

Screen.Recording.2026-09-03.at.9.03.34.AM.mov

Note:

• Scope: Frontend-only fix focusing entirely on User Profile dark mode styling and toggle control visibility.
• Key UI Fixes:
  • Eliminated unwanted black horizontal strips and right-edge spacing/gaps in the profile tab.
  • Aligned section background colors to the consistent dark mode theme (#1c2541).
  • Patched the custom toggle components ([class*="toggleDark"]) so that both checked and unchecked states maintain high contrast, clear borders, and high visibility in dark mode.
  • Ensured all field labels, values, and toggle descriptions remain crisp white (#ffffff) under dark mode.
• Testing & Verification:
  • Verified across desktop, tablet, and mobile layouts.
  • Confirmed light mode styling and general profile functionality remain completely unaffected with zero console errors.
• Jae merges; text Jae if this needs an urgent merge.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	f767c45
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a9b261b2cb3b00008f11e70
😎 Deploy Preview	https://deploy-preview-5500--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[sonarqubecloud]

Quality Gate passed

Issues
2 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

[devangsaraogi]

Tested the current PR locally on the User Profile - Basic Information tab in both light and dark mode.

Verified the dark mode background fixes across the Basic Information section. This includes the lower profile fields where the black horizontal gaps were previously visible. The updated styling now keeps the section backgrounds consistent and the text remains readable throughout.

The public/private and subscribed/unsubscribed toggles in both states. The checked and unchecked states now have clear visual contrast and continue to function correctly.

I compared the other profile tabs against development and confirmed the darker sections visible there are pre-existing and not introduced by this PR. Light mode also remains visually consistent with no spacing or layout regression from the updated row styling.

No blocking issues found. Approved.