From 1ffbd296148f53548257b2f824ac545aafc35464 Mon Sep 17 00:00:00 2001
From: Amaresh Chaudhary Nara <amareshchaudharynara@Amareshs-MacBook-Air.local>
Date: Thu, 9 Jul 2026 12:12:14 -0700
Subject: [PATCH] Fix dark mode contrast on Ready for Review dropdown in Team
 Member Tasks

---
 .../TeamMemberTasks/ReviewButton.jsx          | 20 +++++++++++--------
 .../TeamMemberTasks/reviewButton.module.css   | 16 +++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/TeamMemberTasks/ReviewButton.jsx b/src/components/TeamMemberTasks/ReviewButton.jsx
index 1db07e3081..d40b7ea05d 100644
--- a/src/components/TeamMemberTasks/ReviewButton.jsx
+++ b/src/components/TeamMemberTasks/ReviewButton.jsx
@@ -491,7 +491,9 @@ function ReviewButton({ user, task, updateTask, onTimeOff }) {
             <DropdownMenu
               container="body"
               strategy="fixed"
-              className={style['review-button-dropdown']}
+              className={`${style['review-button-dropdown']} ${
+                darkMode ? style['review-button-dropdown-dark'] : ''
+              }`}
             >
               {task.relatedWorkLinks &&
                 // eslint-disable-next-line no-shadow
@@ -500,14 +502,14 @@ function ReviewButton({ user, task, updateTask, onTimeOff }) {
                     key={sanitizeText(link)}
                     href={handleSafeLink(link)}
                     target="_blank"
-                    className={`${darkMode ? 'text-light' : ''} ${style['dark-mode-btn']}`}
+                    className={darkMode ? `text-light ${style['dark-mode-btn']}` : ''}
                   >
                     <FontAwesomeIcon icon={faExternalLinkAlt} /> View Link
                   </DropdownItem>
                 ))}
               <DropdownItem
                 onClick={toggleEditLinkModal}
-                className={`${darkMode ? 'text-light' : ''} ${style['dark-mode-btn']}`}
+                className={darkMode ? `text-light ${style['dark-mode-btn']}` : ''}
               >
                 <FontAwesomeIcon icon={faPencilAlt} /> Edit Link
               </DropdownItem>
@@ -534,7 +536,9 @@ function ReviewButton({ user, task, updateTask, onTimeOff }) {
             <DropdownMenu
               container="body"
               strategy="fixed"
-              className={style['review-button-dropdown']}
+              className={`${style['review-button-dropdown']} ${
+                darkMode ? style['review-button-dropdown-dark'] : ''
+              }`}
             >
               {task.relatedWorkLinks &&
                 task.relatedWorkLinks.map(dropLink => (
@@ -542,14 +546,14 @@ function ReviewButton({ user, task, updateTask, onTimeOff }) {
                     key={sanitizeText(dropLink)}
                     href={handleSafeLink(dropLink)}
                     target="_blank"
-                    className={`${darkMode ? 'text-light' : ''} ${style['dark-mode-btn']}`}
+                    className={darkMode ? `text-light ${style['dark-mode-btn']}` : ''}
                   >
                     <FontAwesomeIcon icon={faExternalLinkAlt} /> View Link
                   </DropdownItem>
                 ))}
               <DropdownItem
                 onClick={toggleEditLinkModal}
-                className={`${darkMode ? 'text-light' : ''} ${style['dark-mode-btn']}`}
+                className={darkMode ? `text-light ${style['dark-mode-btn']}` : ''}
               >
                 <FontAwesomeIcon icon={faPencilAlt} /> Edit Link
               </DropdownItem>
@@ -558,7 +562,7 @@ function ReviewButton({ user, task, updateTask, onTimeOff }) {
                   setSelectedAction('Complete and Remove');
                   toggleVerify();
                 }}
-                className={`${darkMode ? 'text-light' : ''} ${style['dark-mode-btn']}`}
+                className={darkMode ? `text-light ${style['dark-mode-btn']}` : ''}
               >
                 <div className={styles['review-dropdown-item']}>
                   <FontAwesomeIcon className={styles['team-member-tasks-done']} icon={faCheck} />
@@ -570,7 +574,7 @@ function ReviewButton({ user, task, updateTask, onTimeOff }) {
                   setSelectedAction('More Work Needed');
                   toggleVerify();
                 }}
-                className={`${darkMode ? 'text-light' : ''} ${style['dark-mode-btn']}`}
+                className={darkMode ? `text-light ${style['dark-mode-btn']}` : ''}
               >
                 More work needed, reset this button
               </DropdownItem>
diff --git a/src/components/TeamMemberTasks/reviewButton.module.css b/src/components/TeamMemberTasks/reviewButton.module.css
index 3a9f59a2d3..bb287ded73 100644
--- a/src/components/TeamMemberTasks/reviewButton.module.css
+++ b/src/components/TeamMemberTasks/reviewButton.module.css
@@ -31,6 +31,22 @@
   z-index: 9999;
 }
 
+.review-button-dropdown-dark {
+  background-color: #1c2541 !important;
+  border-color: #3a506b !important;
+}
+
+.dark-mode-btn {
+  background-color: #1c2541 !important;
+  color: #f1f1f1 !important;
+}
+
+.dark-mode-btn:hover,
+.dark-mode-btn:focus {
+  background-color: #3a506b !important;
+  color: #fff !important;
+}
+
 .reviewBtn-dropdown-wrapper {
   display: inline-flex;
   align-items: center;