Ken Fix Project Report Page Follow Up Issues

src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx

@@ -66,15 +66,15 @@ function DateInput({ id, ariaLabel, placeholder, value, onChange, disabled, dark
         onFocus={() => !disabled && setIsOpen(true)}
         readOnly
         disabled={disabled}
-        className={disabled && darkMode ? 'bg-darkmode-liblack text-light border-0' : ''}
+        className={darkMode ? styles.darkDateInput : ''}
         style={{ 
           cursor: disabled ? 'default' : 'pointer',
-          backgroundColor: disabled ? (darkMode ? '' : '#e9ecef') : 'white',
+          backgroundColor: disabled ? (darkMode ? '#1c1c1c' : '#e9ecef') : undefined,
           opacity: 1
         }}
       />
       {isOpen && !disabled && (
-        <div style={{ position: 'absolute', right: 0, overflow: 'auto', zIndex: 10, backgroundColor: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', borderRadius: '4px' }}>
+        <div style={{ position: 'absolute', right: 0, overflow: 'auto', zIndex: 10, backgroundColor: darkMode ? '#1e293b' : 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', borderRadius: '4px' }}>
           <DayPicker 
             mode="single"
             selected={selectedDate}
@@ -84,14 +84,7 @@ function DateInput({ id, ariaLabel, placeholder, value, onChange, disabled, dark
           <button
             type="button"
             onClick={() => setIsOpen(false)}
-            style={{ 
-              width: '100%', 
-              padding: '8px', 
-              border: 'none', 
-              borderTop: '1px solid #ddd',
-              background: '#f5f5f5',
-              cursor: 'pointer'
-            }}
+            className={`${styles.datePickerClose} ${darkMode ? styles.datePickerCloseDark : ''}`}
           >
             Close
           </button>
@@ -491,7 +484,7 @@ function EditTaskModal(props) {
         </ModalHeader>
         <ModalBody className={darkMode ? 'bg-yinmn-blue dark-mode no-hover' : ''}>
           <table
-            className={`table table-bordered responsive
+            className={`table table-bordered responsive ${darkMode ? styles.editTaskTableDark : ''}
             ${canUpdateTask || canSuggestTask ? null : 'disable-div'} 
             ${darkMode ? 'text-light' : ''}`}
           >
@@ -517,7 +510,7 @@ function EditTaskModal(props) {
                       rows="2"
                       type="text"
                       className={`task-name border border-dark rounded ${
-                        darkMode ? 'bg-darkmode-liblack text-light border-0' : ''
+                        darkMode ? `${styles.editTaskTextareaDark} text-light` : ''
                       }`}
                       onChange={e => setTaskName(e.target.value)}
                       onKeyPress={e => setTaskName(e.target.value)}

src/components/Projects/WBS/WBSDetail/components/TagsSearch.jsx

@@ -123,15 +123,15 @@ function TagsSearch(props) {
           )}
 
           {shouldShowDropdown && (
-            <ul className={`my-element dropdown-menu d-flex flex-column align-items-start justify-content-start w-100 ${styles.scrollbar} shadow-lg rounded-3 position-absolute top-100 start-0 z-3 bg-light ${styles['scrollable-menu']}`}>
+            <ul className={`my-element dropdown-menu d-flex flex-column align-items-start justify-content-start w-100 ${styles.scrollbar} shadow-lg rounded-3 position-absolute top-100 start-0 z-3 ${darkMode ? styles.darkDropdown : 'bg-light'} ${styles['scrollable-menu']}`}>
               {filteredMembers.map((member, index) => (
                 <li
-                key={member._id || member.userID || index}
-                className="dropdown-item border-bottom fs-6 w-100 p-1"
-              >
+                key={member._id || member.userID || index} 
+                className={`dropdown-item border-bottom fs-6 w-100 p-1 ${darkMode ? styles.darkDropdownItem : ''}`}
+                >
                 <button
                   type="button"
-                  className="btn w-100 text-left p-1 text-dark"
+                  className={`btn w-100 text-left p-1 ${darkMode ? 'text-light' : 'text-dark'}`}
                   onMouseDown={event => handleClick(event, member)}
                 >
                   {`${member.firstName || member.first} ${member.lastName || member.last}`}
@@ -142,7 +142,6 @@ function TagsSearch(props) {
           )}
         </div>
       </div>
-
       <div className="d-flex flex-wrap align-items-start justify-content-start">
         {resourceItems?.map((elm, index) => (
           <ul

src/components/Projects/WBS/WBSDetail/components/TagsSearch.module.css

@@ -13,3 +13,18 @@
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
 }
+
+
+:global(body.dark-mode:not(.no-global-theme)) .darkDropdown {
+  background-color: #1e293b;
+}
+
+.darkDropdownItem {
+  background-color: #1e293b;
+  color: #ffffff;
+}
+
+.darkDropdownItem:hover {
+  background-color: #111831;
+  color: #ffffff;
+}

src/components/Projects/WBS/WBSDetail/wbs.module.css

@@ -342,6 +342,17 @@
   margin: 5px;
 }
 
+
+.datePicker :global(.rdp-day:hover) {
+  background-color: #111831;
+  color: #fff;
+}
+
+.datePicker :global(.rdp-button:hover:not([disabled])) {
+  background-color: #2d3748;
+  color: #fff;
+}
+
 @media (width <= 968px) {
   .wbs-button-group {
     align-items: flex-start;
@@ -393,4 +404,36 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+}
+
+.editTaskTableDark tr:hover {
+  background: #111831;
+}
+
+.editTaskTextareaDark {
+  background-color: #1e293b;
+  border: 1px solid #334155;
+}
+
+.darkDateInput {
+  background-color: #1e293b;
+  color: #fff;
+}
+
+
+.datePickerClose {
+  width: 100%;
+  padding: 8px;
+  border: none;
+  background-color: #f5f5f5;
+  cursor: pointer;
+}
+
+.datePickerCloseDark {
+  background-color: #1e293b;
+  color: #fff;
+}
+
+.datePickerCloseDark:hover {
+  background-color: #111831;
 }

src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import CopyToClipboard from '~/components/common/Clipboard/CopyToClipboard';
 import { Stub } from '../../common/Stub';
-import './ProjectMemberTable.module.css';
+import styles from './ProjectMemberTable.module.css';
 
 export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCount, darkMode, counts }) {
   const [allMemberList, setAllMemberList] = useState([]);
@@ -51,11 +51,11 @@ export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCou
 }, [fetched, members, foundUsers]);
 
   const activeMemberTable = activeMemberList.slice(skip, skip + take).map((member, index) => (
-    <div className="project-member-table-row" id={`tr_${  member._id}`} key={`ac_${  member._id}`}>
+    <div className={styles['project-member-table-row']} id={`tr_${  member._id}`} key={`ac_${  member._id}`}>
       <div>
         <div>{skip + index + 1}</div>
       </div>
-      <Link to={`/userprofile/${member._id}`} title="View Profile"  className={`project-member-table-name-column ${darkMode ? "text-light" : ""}`}>
+      <Link to={`/userprofile/${member._id}`} title="View Profile"  className={`${styles['project-member-table-name-column']} ${darkMode ? "text-light" : ""}`}>
         <div>
         {window.innerWidth >= 1100 ? `${member.firstName} ${member.lastName}` : `${member.firstName.substring(0, 10)} ${member.lastName.substring(0, 1)}`}          
         </div>
@@ -71,19 +71,19 @@ export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCou
           </div>
         )}
       </div>
-      <div className='project-member-table-id-column'>
+      <div className={styles['project-member-table-id-column']}>
         <CopyToClipboard writeText={member._id} message={`Copied "${member._id}".`} />
         {member._id}
       </div> 
     </div>
   ));
 
   const allMemberTable = allMemberList.slice(skip, skip + take).map((member, index) => (
-    <div className="project-member-table-row" id={`tr_${  member._id}`} key={`al_${  member._id}`}>
+    <div className={styles['project-member-table-row']} id={`tr_${  member._id}`} key={`al_${  member._id}`}>
       <div>
         <div>{skip + index + 1}</div>
       </div>
-      <Link to={`/userprofile/${member._id}`} title="View Profile" className={`project-member-table-name-column ${darkMode ? 'text-light' : ''}`}>
+      <Link to={`/userprofile/${member._id}`} title="View Profile" className={`${styles['project-member-table-name-column']} ${darkMode ? 'text-light' : ''}`}>
         <div>
         {window.innerWidth >= 1100 ? `${member.firstName} ${member.lastName}` : `${member.firstName.substring(0, 10)} ${member.lastName.substring(0, 1)}`} 
         </div>
@@ -99,39 +99,39 @@ export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCou
           </div>
         )}
       </div>
-      <div className='project-member-table-id-column'>
+      <div className={styles['project-member-table-id-column']}>
         <CopyToClipboard writeText={member._id} message={`Copied "${member._id}".`} />
         {member._id}
       </div>     
     </div>
   ));
 
   return (
-    <div className={`project-member-table ${darkMode ? 'text-light' : ''}`}>
-      <h5 className="project-member-table-title">Members</h5>
-      <div className="project-member-count-head">
-      <div className="filter-members-mobile"
-        onChange={e => {
-          const val = e.target.value;
-          setMemberFilter(val);
-          handleMemberCount(val === 'all-time' ? allMemberList.length : activeMemberList.length);
-        }}
-      >
-        <input type="radio" name="memberFilter" value="active" id="active" defaultChecked />
-        <label htmlFor="active" id="project-active-member-count" className={`project-member-count ${darkMode ? 'text-light' : ''}`}>
-          ACTIVE: {counts.activeMemberCount}
-        </label>
-        <input type="radio" name="memberFilter" value="all-time" id="all-time" />
-        <label htmlFor="all-time" id="project-all-member-count" className={`project-member-count ${darkMode ? 'text-light' : ''}`}>
-          ALL-TIME: {counts.memberCount}
-        </label>
-      </div>
+    <div className={`${styles['project-member-table']} ${darkMode ? 'text-light' : ''}`}>
+      <h5 className={styles['project-member-table-title']}>Members</h5>
+      <div className={styles['project-member-count-head']}>
+        <div className={styles['filter-members-mobile']}
+          onChange={e => {
+            const val = e.target.value;
+            setMemberFilter(val);
+            handleMemberCount(val === 'all-time' ? allMemberList.length : activeMemberList.length);
+          }
+        }>
+          <input type="radio" name="memberFilter" value="active" id="active" defaultChecked />
+          <label htmlFor="active" id="project-active-member-count" className={`${styles['project-member-count']} ${darkMode ? 'text-light' : ''}`}>
+            ACTIVE: {counts.activeMemberCount}
+          </label>
+          <input type="radio" name="memberFilter" value="all-time" id="all-time" />
+          <label htmlFor="all-time" id="project-all-member-count" className={`${styles['project-member-count']} ${darkMode ? 'text-light' : ''}`}>
+            ALL-TIME: {counts.memberCount}
+          </label>
+        </div>
       </div>
-      <div className={`reports-table-head-members ${darkMode ? 'bg-space-cadet' : ''}`}>
-        <div className="reports-table-head-cell">#</div>
-        <div className="reports-table-head-cell">Name</div>
-        <div className="reports-table-head-cell project-member-table-active-column">Active</div>
-        <div className="reports-table-head-cell">ID</div>
+      <div className={`${styles['reports-table-head-members']} ${darkMode ? 'bg-space-cadet' : ''}`}>
+        <div className={styles['reports-table-head-cell']}>#</div>
+        <div className={styles['reports-table-head-cell']}>Name</div>
+        <div className={`${styles['reports-table-head-cell']} ${styles['project-member-table-active-column']}`}>Active</div>
+        <div className={styles['reports-table-head-cell']}>ID</div>
       </div>
       <div>
         {memberFilter === 'all-time' && allMemberTable.length > 0 && allMemberTable}

src/components/Reports/ProjectReport/ProjectReport.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
 import { useDispatch, useSelector } from 'react-redux';
 import { FiBox } from 'react-icons/fi';
 import {WbsPieChart}  from './WbsPiechart/WbsPieChart';
@@ -16,11 +15,10 @@ import { WbsTable } from '../WbsTable';
 import hasPermission from '../../../utils/permissions';
 import viewWBSpermissionsRequired from '../../../utils/viewWBSpermissionsRequired';
 import { projectReportViewData } from './selectors';
-import '../../Teams/Team.module.css';
-import './ProjectReport.module.css';
-import { boxStyle, boxStyleDark } from '../../../styles';
 import { PieChartByProject } from './PiechartByProject/PieChartByProject';
-
+import 'react-datepicker/dist/react-datepicker.css';
+import '../../Teams/Team.module.css';
+import styles from './ProjectReport.module.css';
 
 // eslint-disable-next-line import/prefer-default-export
 export function ProjectReport({ match }) {
@@ -128,7 +126,7 @@ export function ProjectReport({ match }) {
   };
 
   return (
-    <div className={`container-project-wrapper ${darkMode ? 'bg-oxford-blue' : ''}`}>
+    <div className={`${styles['container-project-wrapper']} ${darkMode ? 'bg-oxford-blue' : ''}`}>
     <ReportPage
       renderProfile={() => (
         <ReportPage.ReportHeader
@@ -142,8 +140,7 @@ export function ProjectReport({ match }) {
       )}
       darkMode={darkMode}
     >
-      <div className={`project-header ${darkMode ? 'bg-yinmn-blue text-light' : ''}`} style={darkMode ? boxStyleDark : boxStyle}>{projectName}</div>
-      <div className="wbs-and-members-blocks-wrapper">
+      <div className={styles['wbs-and-members-blocks-wrapper']}>
         <ReportPage.ReportBlock className="wbs-and-members-blocks" darkMode={darkMode}>
           <Paging totalElementsCount={wbs.WBSItems.length} darkMode={darkMode}>
             <WbsTable wbs={wbs} match={match} canViewWBS={canViewWBS} darkMode={darkMode}/>

src/components/Reports/ProjectReport/ProjectReport.module.css

@@ -2,6 +2,7 @@
   display: grid;
   grid-auto-flow: row;
   row-gap: 40px;
+  margin-top: 32px;
 }
 
 @media (width >= 1180px) {
@@ -20,4 +21,15 @@
 
 .pie-chart-checkbox {
   margin-right: 8px; /* Space between checkbox and label */
+}
+
+
+.project-header {
+  font-size: 32px;
+  padding: 5px;
+  text-align: center;
+  background-color: white;
+  border-radius: 20px;
+  box-shadow: 0 0 12px #eae1f6;
+  width: 100%;
 }

src/components/Reports/ProjectReport/__tests__/ProjectReport.test.jsx

@@ -50,7 +50,7 @@ describe('ProjectReport component', () => {
     );
   });
 
-  it('should render the project name three times', async () => {
+  it('should render the project name two times', async () => {
     axios.get.mockResolvedValue({
       status: 200,
     });
@@ -62,7 +62,7 @@ describe('ProjectReport component', () => {
     );
 
     const projectNameElements = screen.getAllByText('project 1');
-    expect(projectNameElements).toHaveLength(3);
+    expect(projectNameElements).toHaveLength(2);
   });
 
   it('check if getProjectDetail works as expected', async () => {