From c22c8f8391c92c94c6acc3975a2e58c98bf5cf99 Mon Sep 17 00:00:00 2001
From: Linh Huynh <cdev.linh@gmail.com>
Date: Tue, 17 Feb 2026 22:53:45 -0800
Subject: [PATCH] fix(faq-ui): improve question visibility in dark mode on
 unanswered-faqs 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.
---
 src/components/Faq/UnansweredFaqs.jsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/Faq/UnansweredFaqs.jsx b/src/components/Faq/UnansweredFaqs.jsx
index 1f2ff6f821..492e87e92c 100644
--- a/src/components/Faq/UnansweredFaqs.jsx
+++ b/src/components/Faq/UnansweredFaqs.jsx
@@ -1,10 +1,12 @@
 import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import { Button } from 'reactstrap';
 import { getUnansweredFAQs, deleteUnansweredFAQ } from './api';
 
 function UnansweredFaqs() {
   const [unansweredFaqs, setUnansweredFaqs] = useState([]);
   const [loading, setLoading] = useState(true);
+  const darkMode = useSelector(state => state.theme?.darkMode);
 
   useEffect(() => {
     let isMounted = true;
@@ -40,16 +42,24 @@ function UnansweredFaqs() {
   };
 
   if (loading) {
-    return <p style={{ textAlign: 'center', color: '#666' }}>Loading unanswered FAQs...</p>;
+    return (
+      <p style={{ textAlign: 'center', color: darkMode ? '#d1d5db' : '#666' }}>
+        Loading unanswered FAQs...
+      </p>
+    );
   }
 
   if (unansweredFaqs.length === 0) {
-    return <p style={{ textAlign: 'center', color: '#888' }}>No unanswered FAQs found.</p>;
+    return (
+      <p style={{ textAlign: 'center', color: darkMode ? '#d1d5db' : '#888' }}>
+        No unanswered FAQs found.
+      </p>
+    );
   }
 
   return (
     <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px', textAlign: 'center' }}>
-      <h2>Unanswered FAQs</h2>
+      <h2 style={{ color: darkMode ? '#f3f4f6' : '#111827' }}>Unanswered FAQs</h2>
       <ul style={{ listStyle: 'none', padding: 0, textAlign: 'left' }}>
         {unansweredFaqs.map(faq => (
           <li
@@ -57,16 +67,21 @@ function UnansweredFaqs() {
             style={{
               marginBottom: '15px',
               padding: '10px',
-              border: '1px solid #ddd',
+              border: `1px solid ${darkMode ? '#4b5563' : '#ddd'}`,
               borderRadius: '5px',
+              backgroundColor: darkMode ? '#1f2937' : '#fff',
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
             }}
           >
             <div style={{ flex: 1 }}>
-              <strong style={{ color: '#333', fontSize: '16px' }}>{faq.question}</strong>
-              <p style={{ fontSize: '12px', color: '#777', marginTop: '4px' }}>
+              <strong style={{ color: darkMode ? '#f9fafb' : '#333', fontSize: '16px' }}>
+                {faq.question}
+              </strong>
+              <p
+                style={{ fontSize: '12px', color: darkMode ? '#d1d5db' : '#777', marginTop: '4px' }}
+              >
                 Logged on: {new Date(faq.createdAt).toLocaleString()}
               </p>
             </div>