Merge pull request #4346 from OneCommunityGlobal/VIBGYOR_Colors_Pr_Review_Team_Dashboard

Ramsundar - Fix Default-check PR promotion checkboxes and add VIBGYOR colors

Author: one-community

src/components/PRPromotions/DisplayBox.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import './DisplayBox.css';
+import styles from './DisplayBox.module.css';
 
 export default function DisplayBox({ onClose }) {
   const mockPromotionData = [
@@ -13,6 +13,8 @@ export default function DisplayBox({ onClose }) {
         { week: '2024-06-15', prCount: 10 },
         { week: '2024-06-22', prCount: 18 },
         { week: '2024-06-29', prCount: 14 },
+        { week: '2024-07-06', prCount: 16 },
+        { week: '2024-07-13', prCount: 20 },
       ],
     },
     {
@@ -29,7 +31,7 @@ export default function DisplayBox({ onClose }) {
     },
   ];
 
-  const [checkedItems, setCheckedItems] = useState(Array(mockPromotionData.length).fill(false));
+  const [checkedItems, setCheckedItems] = useState(new Array(mockPromotionData.length).fill(true));
   const allChecked = checkedItems.every(Boolean);
 
   const handleCheckedBoxChange = index => {
@@ -39,14 +41,16 @@ export default function DisplayBox({ onClose }) {
   };
 
   const handleSelectAll = () => {
-    setCheckedItems(Array(mockPromotionData.length).fill(!allChecked));
+    setCheckedItems(new Array(mockPromotionData.length).fill(!allChecked));
   };
 
   return (
-    <div className="overlay">
-      <div className="popup">
-        <h2 className="popup-heading">Are you sure you want to promote these PR reviewers?</h2>
-        <table className="popup-table">
+    <div className={styles.overlay}>
+      <div className={styles.popup}>
+        <h2 className={styles['popup-heading']}>
+          Are you sure you want to promote these PR reviewers?
+        </h2>
+        <table className={styles['popup-table']}>
           <thead>
             <tr>
               <th>
@@ -78,10 +82,10 @@ export default function DisplayBox({ onClose }) {
                 <td>{promotion.teamCode}</td>
                 <td>{promotion.teamReviewerName}</td>
                 <td>
-                  {promotion.weeklyPRs.map(pr => (
+                  {promotion.weeklyPRs.map((pr, prIndex) => (
                     <span
                       key={`${promotion.prReviewer}-${pr.week}`}
-                      className={`pr-count-badge color-${pr.week}`}
+                      className={`${styles['pr-count-badge']} ${styles[`color-${prIndex}`]}`}
                     >
                       {pr.prCount}
                     </span>
@@ -91,11 +95,11 @@ export default function DisplayBox({ onClose }) {
             ))}
           </tbody>
         </table>
-        <div className="button-row">
-          <button type="button" className="button" onClick={onClose}>
+        <div className={styles['button-row']}>
+          <button type="button" className={styles.button} onClick={onClose}>
             Cancel
           </button>
-          <button type="button" className="button" disabled={!checkedItems.some(Boolean)}>
+          <button type="button" className={styles.button} disabled={!checkedItems.some(Boolean)}>
             Confirm
           </button>
         </div>

…c/components/PRPromotions/DisplayBox.css …nents/PRPromotions/DisplayBox.module.csssrc/components/PRPromotions/DisplayBox.css renamed to src/components/PRPromotions/DisplayBox.module.css src/components/PRPromotions/DisplayBox.css renamed to src/components/PRPromotions/DisplayBox.module.css

@@ -15,13 +15,11 @@
   max-width: 800px;
   width: 100%;
   border: 6px solid black;
-  border-radius: 8px;
 }
 
 .popup-heading {
   text-align: center;
   font-size: 20px;
-  /* font-weight: bold; */
   margin-bottom: 16px;
   color: black;
 }
@@ -58,6 +56,21 @@
   color: #000;
 }
 
+.promoteButton {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  background-color: #f0f0f0;
+  color: black;
+  font-weight: bold;
+}
+
+.button-row .button:last-child:not(:disabled):hover {
+  background-color: #2563eb;
+  color: white;
+}
+
 .button:disabled {
   background-color: #ccc;
   cursor: not-allowed;
@@ -82,20 +95,30 @@
 }
 
 .color-0 {
-  background-color: rgb(154, 93, 181);
+  background-color: #9400D3;
 }
+
 .color-1 {
-  background-color: rgb(77, 82, 174);
+  background-color: #4B0082;
 }
 
 .color-2 {
-  background-color: rgb(87, 150, 198);
+  background-color: #0000FF;
 }
 
 .color-3 {
-  background-color: rgb(95, 191, 95);
+  background-color: #00FF00;
 }
 
 .color-4 {
-  background-color: #cbe360;
+  background-color: #FFFF00;
 }
+
+.color-5 {
+  background-color: #FF7F00;
+}
+
+.color-6 {
+  background-color: #FF0000;
+}
+

src/components/PRPromotions/PRPromotionsPage.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import DisplayBox from './DisplayBox';
-import './DisplayBox.css';
+import styles from './DisplayBox.module.css';
 
 export default function PromotionsPage() {
   const [showModal, setShowModal] = useState(false);
@@ -16,7 +16,7 @@ export default function PromotionsPage() {
   return (
     <div>
       <h1>Promotions Page</h1>
-      <button type="button" className="button" onClick={handleOpenModal}>
+      <button type="button" className={styles.promoteButton} onClick={handleOpenModal}>
         Promote ?
       </button>
       {showModal && <DisplayBox onClose={handleCloseModal} />}