Merge pull request #4951 from OneCommunityGlobal/Sayali_PR_Grading_Task_38_DarkMode_ReviewerName

Sayali: dark mode visibility for reviewer name in PR grading dashboard

Author: one-community

src/components/PRGradingDashboard/GradingTable.jsx

@@ -1,14 +1,16 @@
+import PropTypes from 'prop-types';
 import React from 'react';
-import ReviewerRow from './ReviewerRow';
 import AddPRModal from './AddPRModal';
 import styles from './GradingTable.module.css';
+import ReviewerRow from './ReviewerRow';
 
 function GradingTable({
   gradings,
   onUpdatePRsReviewed,
   onAddPRClick,
   openAddModal,
   onAddGradedPR,
+  darkMode,
 }) {
   return (
     // <div className={styles.tableWrapper}>
@@ -28,6 +30,7 @@ function GradingTable({
               grading={grading}
               onUpdatePRsReviewed={onUpdatePRsReviewed}
               onAddPRClick={onAddPRClick}
+              darkMode={darkMode}
             />
             {openAddModal === grading.reviewer && (
               <tr className={styles.modalRow}>
@@ -47,5 +50,24 @@ function GradingTable({
     // </div>
   );
 }
+GradingTable.propTypes = {
+  gradings: PropTypes.arrayOf(
+    PropTypes.shape({
+      reviewer: PropTypes.string.isRequired,
+      prsReviewed: PropTypes.number.isRequired,
+      prsNeeded: PropTypes.number.isRequired,
+    }),
+  ).isRequired,
+  onUpdatePRsReviewed: PropTypes.func.isRequired,
+  onAddPRClick: PropTypes.func.isRequired,
+  openAddModal: PropTypes.string,
+  onAddGradedPR: PropTypes.func.isRequired,
+  darkMode: PropTypes.bool,
+};
+
+GradingTable.defaultProps = {
+  openAddModal: null,
+  darkMode: false,
+};
 
 export default GradingTable;

src/components/PRGradingDashboard/PRGradingDashboard.jsx

@@ -1,12 +1,13 @@
-import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
-import GradingTable from './GradingTable';
-import SummaryList from './SummaryList';
-import ConfirmationModal from './ConfirmationModal';
 import AddReviewerModal from './AddReviewerModal';
+import ConfirmationModal from './ConfirmationModal';
+import GradingTable from './GradingTable';
 import styles from './PRGradingDashboard.module.css';
 import { SelectionProvider } from './SelectionContext';
+import SummaryList from './SummaryList';
 
 const TEAM_CODE = 'TeamA';
 const TEAM_NAME = 'Team Alpha';
@@ -34,6 +35,7 @@ const mockData = [
 ];
 
 function PRGradingDashboard() {
+  const darkMode = useSelector(state => state.theme.darkMode);
   const [gradings, setGradings] = useState([]);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -267,6 +269,7 @@ function PRGradingDashboard() {
               onAddPRClick={setOpenAddModal}
               openAddModal={openAddModal}
               onAddGradedPR={requestAddGradedPR}
+              darkMode={darkMode}
             />
           </div>
 

src/components/PRGradingDashboard/ReviewerRow.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import { Plus } from 'lucide-react';
+import PropTypes from 'prop-types';
 import styles from './ReviewerRow.module.css';
 import { useRowSelection } from './SelectionContext';
 
-function ReviewerRow({ grading, onUpdatePRsReviewed, onAddPRClick }) {
+function ReviewerRow({ grading, onUpdatePRsReviewed, onAddPRClick, darkMode }) {
   const { activeId, selectRow } = useRowSelection();
 
   const handlePRsReviewedChange = e => {
@@ -24,7 +24,11 @@ function ReviewerRow({ grading, onUpdatePRsReviewed, onAddPRClick }) {
   return (
     <tr className={styles.row}>
       <td className={styles.cell}>
-        <button className={styles.reviewerName} onClick={() => selectRow(grading.reviewer)}>
+        <button
+          className={styles.reviewerName}
+          onClick={() => selectRow(grading.reviewer)}
+          style={darkMode ? { color: '#f9fafb' } : {}}
+        >
           {grading.reviewer}
         </button>
       </td>
@@ -36,6 +40,9 @@ function ReviewerRow({ grading, onUpdatePRsReviewed, onAddPRClick }) {
           onChange={handlePRsReviewedChange}
           onBlur={handleBlur}
           className={styles.prsReviewedInput}
+          style={
+            darkMode ? { backgroundColor: '#374151', color: '#f9fafb', borderColor: '#4b5563' } : {}
+          }
         />
       </td>
       <td className={styles.cell}>
@@ -54,5 +61,19 @@ function ReviewerRow({ grading, onUpdatePRsReviewed, onAddPRClick }) {
     </tr>
   );
 }
+ReviewerRow.propTypes = {
+  grading: PropTypes.shape({
+    reviewer: PropTypes.string.isRequired,
+    prsReviewed: PropTypes.number.isRequired,
+    prsNeeded: PropTypes.number.isRequired,
+  }).isRequired,
+  onUpdatePRsReviewed: PropTypes.func.isRequired,
+  onAddPRClick: PropTypes.func.isRequired,
+  darkMode: PropTypes.bool,
+};
+
+ReviewerRow.defaultProps = {
+  darkMode: false,
+};
 
 export default ReviewerRow;

src/components/PRGradingDashboard/ReviewerRow.module.css

@@ -16,6 +16,9 @@
   font-weight: 500;
   color: #111827;
   cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
 }
 
 .prsReviewedInput {
@@ -30,7 +33,7 @@
 .prsReviewedInput:focus {
   outline: none;
   border-color: #2563eb;
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5);
+  box-shadow: 0 0 0 2px rgb(37 99 235 / 50%);
 }
 
 .prsNeeded {
@@ -50,17 +53,17 @@
   border: none;
   cursor: pointer;
   transition: all 0.2s;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
 }
 
 .addButton:hover {
   background-color: #1d4ed8;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%);
 }
 
 .addButton:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 0 0 4px rgba(37, 99, 235, 0.1);
+  box-shadow: 0 0 0 2px rgb(37 99 235 / 50%), 0 0 0 4px rgb(37 99 235 / 10%);
 }
 
 .addButtonIcon {
@@ -90,7 +93,7 @@
 
 :global(.dark-mode) .prsReviewedInput:focus {
   border-color: #3b82f6;
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 50%);
 }
 
 :global(.dark-mode) .addButton {
@@ -103,6 +106,5 @@
 }
 
 :global(.dark-mode) .addButton:focus {
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 0 0 4px rgba(37, 99, 235, 0.1);
-}
-
+  box-shadow: 0 0 0 2px rgb(37 99 235 / 50%), 0 0 0 4px rgb(37 99 235 / 10%);
+}