From ef724fc8f57819f3418d1a6c36adba51aa818e4a Mon Sep 17 00:00:00 2001 From: linlin-husky Date: Thu, 3 Sep 2026 08:38:12 -0400 Subject: [PATCH 1/4] fix(profile): resolve dark mode background gaps and visual artifacts --- .../PRGradingScreen/InlinePRSummary.jsx | 82 +++++++++++++++++++ .../BasicInformationTab.jsx | 12 +-- .../BasicInformationTab.module.css | 63 +++++++++----- 3 files changed, 129 insertions(+), 28 deletions(-) create mode 100644 src/components/PRGradingScreen/InlinePRSummary.jsx diff --git a/src/components/PRGradingScreen/InlinePRSummary.jsx b/src/components/PRGradingScreen/InlinePRSummary.jsx new file mode 100644 index 0000000000..738469e8b3 --- /dev/null +++ b/src/components/PRGradingScreen/InlinePRSummary.jsx @@ -0,0 +1,82 @@ +import PropTypes from 'prop-types'; +import styles from './PRGradingScreen.module.css'; + +const InlinePRSummary = ({ reviewer, onGradeChange, isFinalized, darkMode }) => { + const dm = darkMode ? styles['dark-mode'] : ''; + + if (!reviewer.gradedPrs || reviewer.gradedPrs.length === 0) { + return null; + } + + return ( + + +
+ + + + + + + + + + + + {reviewer.gradedPrs.map(pr => ( + + + + + + + + ))} + +
PR NumberExceptionalOkayUnsatisfactoryCannot find image
{pr.prNumbers} + onGradeChange(reviewer.id, pr.id, 'Exceptional')} + /> + + onGradeChange(reviewer.id, pr.id, 'Okay')} + /> + + onGradeChange(reviewer.id, pr.id, 'Unsatisfactory')} + /> + + onGradeChange(reviewer.id, pr.id, 'Cannot find image')} + /> +
+
+ + + ); +}; + +InlinePRSummary.propTypes = { + reviewer: PropTypes.object.isRequired, + onGradeChange: PropTypes.func.isRequired, + isFinalized: PropTypes.bool.isRequired, + darkMode: PropTypes.bool, +}; + +InlinePRSummary.defaultProps = { + darkMode: false, +}; + +export default InlinePRSummary; diff --git a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx index 64560aa54a..c8de508550 100644 --- a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx +++ b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx @@ -1025,21 +1025,21 @@ const BasicInformationTab = props => { {videoCallPreferenceComponent} - + {roleComponent} - + {locationComponent} - + {timeZoneComponent} - {timeZoneDifferenceComponent} - {statusComponent} - {endDateComponent} + {timeZoneDifferenceComponent} + {statusComponent} + {endDateComponent} ) : ( <> diff --git a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css index 81fdab44f3..af700712e8 100644 --- a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css +++ b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css @@ -1,7 +1,10 @@ -/* stylelint-disable */ +:global(body.dark-mode) :global(#myTabContent) { + background-color: #1c2541 !important; +} + .basic-info-tab-tablet { display: none; -} +} .phone-input-style.phone-input-style { width: 100%; @@ -25,11 +28,6 @@ margin-right: 0 !important; } - - - - - @media (width <= 1024px) { .basic-info-tab-desktop { display: none; @@ -47,52 +45,73 @@ label { font-weight: bold; } - - } .basic-info-tab-desktop { width: 100%; } +.basic-info-tab-desktop.dark-mode { + background-color: #1c2541; +} .basic-info-tab-desktop:not(.dark-mode) :global(.form-control){ background-color: transparent; } -.dark-mode { - /* marker class */ -} - .dark-mode :global(.row) { - background-color: #1c2541 !important; + background-color: #1c2541; + margin-bottom: 8px; + margin-top: 0; + padding-bottom: 4px; + padding-top: 4px; + padding-left: 8px; + border: none; + border-bottom: none; } .dark-label-col { - background-color: #1c2541 !important; + background-color: #1c2541; } .dark-label-col:hover { - background-color: #1c2541 !important; + background-color: #1c2541; } :global(.bg-yinmn-blue) .dark-label-col { - background-color: #1c2541 !important; + background-color: #1c2541; } .darkModeText { color: white; } +.dark-mode :global(.profile-functions-desktop) { + background-color: #1c2541; + border: none; + box-shadow: none; + padding-bottom: 16px; +} + +.dark-mode :global(.container), +.dark-mode :global(#containerProfile) { + background-color: #1c2541; +} + +.dark-mode :global(.tab-pane.active) { + background-color: #1c2541; + padding-bottom: 20px; +} + .darkMode.roleModal.button { - border-color: #2563eb !important; - background-color: #2563eb !important; + border-color: #2563eb; + background-color: #2563eb; } .darkMode.roleModal.button:hover { color: #fff; - background-color: #1d4ed8 !important; - border-color: #1d4ed8 !important; + background-color: #1d4ed8; + border-color: #1d4ed8; } .roleModal.button { @@ -111,4 +130,4 @@ color: #007bff; border-color: #007bff; background-color: transparent; -} \ No newline at end of file +} From ad32d66823ad22ce8b6ce83c8c1b89252fb90d27 Mon Sep 17 00:00:00 2001 From: linlin-husky Date: Thu, 3 Sep 2026 08:59:46 -0400 Subject: [PATCH 2/4] fix(profile): fix dark mode toggle switch visibility and contrast --- .../BasicInformationTab.module.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css index af700712e8..7462eb966c 100644 --- a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css +++ b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css @@ -131,3 +131,15 @@ border-color: #007bff; background-color: transparent; } + +.dark-mode :global([class*="toggleDark"]), +:global(body.dark-mode) :global([class*="toggleDark"]) { + background-color: #475569 !important; + border: 1px solid #94a3b8 !important; +} + +.dark-mode :global([class*="toggleDark"]):checked, +:global(body.dark-mode) :global([class*="toggleDark"]):checked { + background-color: #3b82f6 !important; + border-color: #3b82f6 !important; +} From 50759e426fbaae49671eda037688d292a65d56b3 Mon Sep 17 00:00:00 2001 From: linlin-husky Date: Thu, 3 Sep 2026 09:16:10 -0400 Subject: [PATCH 3/4] refactor: remove unused InlinePRSummary component to resolve duplication --- .../PRGradingScreen/InlinePRSummary.jsx | 82 ------------------- 1 file changed, 82 deletions(-) delete mode 100644 src/components/PRGradingScreen/InlinePRSummary.jsx diff --git a/src/components/PRGradingScreen/InlinePRSummary.jsx b/src/components/PRGradingScreen/InlinePRSummary.jsx deleted file mode 100644 index 738469e8b3..0000000000 --- a/src/components/PRGradingScreen/InlinePRSummary.jsx +++ /dev/null @@ -1,82 +0,0 @@ -import PropTypes from 'prop-types'; -import styles from './PRGradingScreen.module.css'; - -const InlinePRSummary = ({ reviewer, onGradeChange, isFinalized, darkMode }) => { - const dm = darkMode ? styles['dark-mode'] : ''; - - if (!reviewer.gradedPrs || reviewer.gradedPrs.length === 0) { - return null; - } - - return ( - - -
- - - - - - - - - - - - {reviewer.gradedPrs.map(pr => ( - - - - - - - - ))} - -
PR NumberExceptionalOkayUnsatisfactoryCannot find image
{pr.prNumbers} - onGradeChange(reviewer.id, pr.id, 'Exceptional')} - /> - - onGradeChange(reviewer.id, pr.id, 'Okay')} - /> - - onGradeChange(reviewer.id, pr.id, 'Unsatisfactory')} - /> - - onGradeChange(reviewer.id, pr.id, 'Cannot find image')} - /> -
-
- - - ); -}; - -InlinePRSummary.propTypes = { - reviewer: PropTypes.object.isRequired, - onGradeChange: PropTypes.func.isRequired, - isFinalized: PropTypes.bool.isRequired, - darkMode: PropTypes.bool, -}; - -InlinePRSummary.defaultProps = { - darkMode: false, -}; - -export default InlinePRSummary; From f767c454b1a7142692b5720f8f7d0850a1d198af Mon Sep 17 00:00:00 2001 From: linlin-husky Date: Fri, 4 Sep 2026 16:12:03 -0400 Subject: [PATCH 4/4] fix(profile): format code with Prettier and add clear English comments for dark mode styles --- .../UserProfile/BasicInformationTab/BasicInformationTab.jsx | 5 +++++ .../BasicInformationTab/BasicInformationTab.module.css | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx index c8de508550..8350e85f5f 100644 --- a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx +++ b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx @@ -1029,16 +1029,21 @@ const BasicInformationTab = props => { {roleComponent} + {/* Removed inline margins to align with standard CSS spacing and prevent dark mode layout gaps */} {locationComponent} + {/* Removed inline margins to align with standard CSS spacing and prevent dark mode layout gaps */} {timeZoneComponent} + {/* Removed inline margins to align with standard CSS spacing and prevent dark mode layout gaps */} {timeZoneDifferenceComponent} + {/* Removed inline margins to align with standard CSS spacing and prevent dark mode layout gaps */} {statusComponent} + {/* Removed inline margins to align with standard CSS spacing and prevent dark mode layout gaps */} {endDateComponent} ) : ( diff --git a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css index 7462eb966c..ef8fa4bbc8 100644 --- a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css +++ b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css @@ -1,3 +1,4 @@ +/* 1. Normalize background color for main content wrapper in dark mode */ :global(body.dark-mode) :global(#myTabContent) { background-color: #1c2541 !important; } @@ -51,6 +52,7 @@ width: 100%; } +/* 2. Set consistent dark mode background for desktop info container */ .basic-info-tab-desktop.dark-mode { background-color: #1c2541; } @@ -78,6 +80,7 @@ background-color: #1c2541; } +/* 3. Normalize dark label container backgrounds in dark mode */ :global(.bg-yinmn-blue) .dark-label-col { background-color: #1c2541; } @@ -86,6 +89,7 @@ color: white; } +/* 4. Fix profile desktop functions background and layout in dark mode */ .dark-mode :global(.profile-functions-desktop) { background-color: #1c2541; border: none; @@ -93,11 +97,13 @@ padding-bottom: 16px; } +/* 5. Override container and profile wrapper backgrounds to remove right-edge gaps in dark mode */ .dark-mode :global(.container), .dark-mode :global(#containerProfile) { background-color: #1c2541; } +/* 6. Ensure active tab pane background consistency in dark mode */ .dark-mode :global(.tab-pane.active) { background-color: #1c2541; padding-bottom: 20px;