Merge pull request #4638 from OneCommunityGlobal/veda-promotion-eligibility-color-coding-changes

Veda Promotion Eligibility Color Coding Changes

Author: one-community

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>

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;
+  }
 }

src/components/QuestionnaireDashboard/PromotionTable.module.css

@@ -94,11 +94,12 @@
   color: #586069;
 }
 
-.statusMet {
+/* Status colors for Weekly Requirements */
+.promotionTable td.statusMet {
   color: #22863a;
 }
 
-.statusNotMet {
+.promotionTable td.statusNotMet {
   color: #cb2431;
 }
 
@@ -185,6 +186,15 @@
   color: #f85149;
 }
 
+/* Dark mode status colors - higher specificity to override td color */
+[data-theme='dark'] .promotionTable td.statusMet {
+  color: #53d06e !important;
+}
+
+[data-theme='dark'] .promotionTable td.statusNotMet {
+  color: #fa7970 !important;
+}
+
 [data-theme='dark'] .statusMet {
   color: #3fb950 !important;
 }