From 40c82a796f0600fc54f1c745e52556a3313e5640 Mon Sep 17 00:00:00 2001
From: Test <test@example.com>
Date: Sat, 27 Dec 2025 15:17:54 -0500
Subject: [PATCH] Fix dark mode color coding for Weekly Requirements in
 Promotion Eligibility tables

---
 .../HGNPRDashboard/PromotionEligibility.jsx   |  7 ++++-
 .../PromotionEligibility.module.css           | 29 +++++++++++++++++++
 .../PromotionTable.module.css                 | 14 +++++----
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/components/HGNPRDashboard/PromotionEligibility.jsx b/src/components/HGNPRDashboard/PromotionEligibility.jsx
index bd272ff52b..246dc96f61 100644
--- a/src/components/HGNPRDashboard/PromotionEligibility.jsx
+++ b/src/components/HGNPRDashboard/PromotionEligibility.jsx
@@ -109,7 +109,12 @@ function PromotionEligibility({ currentUser }) {
   }) => (
     <tr key={id}>
       <td data-label="Reviewer Name">{reviewerName}</td>
-      <td data-label="Weekly Requirements">{weeklyRequirementsMet ? '✔️' : '❌'}</td>
+      <td
+        data-label="Weekly Requirements"
+        className={weeklyRequirementsMet ? 'status-met' : 'status-not-met'}
+      >
+        {weeklyRequirementsMet ? '✓ Has Met' : '✗ Has not Met'}
+      </td>
       <td data-label="Required PRs">{requiredPRs}</td>
       <td data-label="Total Reviews Done">{totalReviews}</td>
       <td data-label="Remaining Weeks">{remainingWeeks}</td>
diff --git a/src/components/HGNPRDashboard/PromotionEligibility.module.css b/src/components/HGNPRDashboard/PromotionEligibility.module.css
index 67b25615d6..67d80a802a 100644
--- a/src/components/HGNPRDashboard/PromotionEligibility.module.css
+++ b/src/components/HGNPRDashboard/PromotionEligibility.module.css
@@ -151,6 +151,26 @@
   color: white;
 }
 
+/* Status colors for Weekly Requirements */
+.promo-table td.status-met {
+  color: #22863a;
+  font-weight: 500;
+}
+
+.promo-table td.status-not-met {
+  color: #cb2431;
+  font-weight: 500;
+}
+
+/* Dark mode status colors - higher specificity to override td color */
+.promo-table-container.dark .promo-table td.status-met {
+  color: #53d06e !important;
+}
+
+.promo-table-container.dark .promo-table td.status-not-met {
+  color: #fa7970 !important;
+}
+
 /* mobile */
 
 @media screen and (max-width: 768px) {
@@ -221,4 +241,13 @@
     background-color: transparent;
     color: #f0f0f0;
   }
+
+  /* Mobile dark mode status colors */
+  .promo-table-container.dark .promo-table td.status-met {
+    color: #53d06e !important;
+  }
+
+  .promo-table-container.dark .promo-table td.status-not-met {
+    color: #fa7970 !important;
+  }
 }
\ No newline at end of file
diff --git a/src/components/QuestionnaireDashboard/PromotionTable.module.css b/src/components/QuestionnaireDashboard/PromotionTable.module.css
index b88e2c95ba..0f3288dace 100644
--- a/src/components/QuestionnaireDashboard/PromotionTable.module.css
+++ b/src/components/QuestionnaireDashboard/PromotionTable.module.css
@@ -93,11 +93,12 @@
   color: #586069;
 }
 
-.statusMet {
+/* Status colors for Weekly Requirements */
+.promotionTable td.statusMet {
   color: #22863a;
 }
 
-.statusNotMet {
+.promotionTable td.statusNotMet {
   color: #cb2431;
 }
 
@@ -180,12 +181,13 @@
   color: #f0f0f0; 
 }
 
-[data-theme="dark"] .statusMet {
-  color: #53d06e;
+/* Dark mode status colors - higher specificity to override td color */
+[data-theme="dark"] .promotionTable td.statusMet {
+  color: #53d06e !important;
 }
 
-[data-theme="dark"] .statusNotMet {
-  color: #fa7970;
+[data-theme="dark"] .promotionTable td.statusNotMet {
+  color: #fa7970 !important;
 }
 
 @media (max-width: 768px) {