Skip to content

Comments

Linh - Fix: Improve unreadable question text in dark mode on Unanswered FAQs page#4856

Open
linh2020 wants to merge 1 commit intodevelopmentfrom
linh_fix_unanswered_faq_dark_mode_ui_1
Open

Linh - Fix: Improve unreadable question text in dark mode on Unanswered FAQs page#4856
linh2020 wants to merge 1 commit intodevelopmentfrom
linh_fix_unanswered_faq_dark_mode_ui_1

Conversation

@linh2020
Copy link

@linh2020 linh2020 commented Feb 18, 2026

Description

Resolved the UI visibility issue reported on the /unanswered-faqs page where the question text was difficult to read in dark mode.

The problem was caused by hardcoded light-theme colors that produced insufficient contrast against the dark background. The component styling was updated to use theme-aware colors driven by the Redux darkMode state so the UI adapts correctly in both themes.

Related PRS (if any):

To test this backend PR you need to checkout the OneCommunityGlobal/HGNRest#1718

Main changes explained:

  • Replaced fixed light-mode text colors with theme-aware colors
  • Improved contrast for question title (faq.question)
  • Adjusted timestamp (“Logged on”) readability
  • Updated page heading styling
  • Updated loading and empty state messages
  • Updated card background and border styling for dark mode consistency

How to test:

  1. Checkout this branch linh_fix_unanswered_faq_dark_mode_ui_1
  2. Run frontend locally: npm install && npm run dev
  3. Open http://localhost:5173/unanswered-faqs
  4. Toggle dark mode
  5. Confirm:
  • Question text is clearly visible
  • Timestamp remains readable
  • Card background and border match theme
  • No visual regression in light mode

Screenshots or videos of changes:
image

image image image

…aqs page

Replace hardcoded light-theme colors with theme-aware styling.
Updated question text, metadata, headings, loading/empty states,
and card styles to ensure proper contrast and readability in dark mode.
@netlify
Copy link

netlify bot commented Feb 18, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit c22c8f8
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6995632035bffe00080be903
😎 Deploy Preview https://deploy-preview-4856--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

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant