Juhitha fix people report page UI

src/components/Reports/LostTime/AddLostTime.jsx

@@ -3,7 +3,7 @@ import { useDispatch, connect, useSelector } from 'react-redux';
 import MemberAutoComplete from '~/components/Teams/MembersAutoComplete';
 import AddProjectsAutoComplete from '~/components/UserProfile/TeamsAndProjects/AddProjectsAutoComplete';
 import AddTeamsAutoComplete from '~/components/UserProfile/TeamsAndProjects/AddTeamsAutoComplete';
-import "../reportsPage.css";
+import '../index.css';
 import { Editor } from '@tinymce/tinymce-react';
 import moment from 'moment-timezone';
 import { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';

src/components/Reports/PeopleTableDetails.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import 'reactjs-popup/dist/index.css';
 import { Container } from 'reactstrap';
-import './PeopleTableDetails.module.css';
+import styles from './PeopleTableDetails.module.css';
 import NewModal from '../common/NewModal';
 import TableFilter from './TableFilter/TableFilter';
 
@@ -145,61 +145,61 @@ function PeopleTableDetails(props) {
 
   const renderMobileFilteredTask = (value) => {
     return (
-      <div className={`task-card ${darkMode ? 'text-dark' : ''}`}>
+      <div className={`${styles['task-card']} ${darkMode ? styles['text-dark'] : ''}`}>
         <div key={value._id} >
-          <div className='task-header'>
+          <div className={styles['task-header']}>
             <div>
-              <div className='task-title people-report-task-name task-name-word-break'>
+              <div className={`${styles['task-title']} ${styles['people-report-task-name']} ${styles['task-name-word-break']}`}>
                 {value.taskName}
               </div>  
             </div>
 
-            <div className='task-status'>
+            <div className={styles['task-status']}>
               {value.status}
             </div>
           </div>
-          <div className='task-details'>
-            <div className='task-info'>
-              <div className='sub-head'>Priority</div>
-              <div className='sub-details'>{value.priority}</div>
+          <div className={styles['task-details']}>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Priority</div>
+              <div className={styles['sub-details']}>{value.priority}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Resources</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Resources</div>
               <div>{value.resources?.map(res =>
                 res.map((resource, index) => {
                   if (index < 2) {
                     return (
-                      <img
-                        key={`${value._id}-${resource.name}`}
-                        alt={resource.name}
-                        src={resource.profilePic || '/pfp-default.png'}
-                        className="img-circle"
-                        title={resource.name}
-                      />
-                    );
-                  }
-                  return null;
-                }),
-              )}</div>
+                    <img
+                      key={`${value._id}-${resource.name}`}
+                      alt={resource.name}
+                      src={resource.profilePic || '/pfp-default.png'}
+                      className={styles['img-circle']}
+                      title={resource.name}
+                    />
+                  );
+                }
+                return null;
+              }),
+            )}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Active</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Active</div>
               <div>{value.active === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Assign</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Assign</div>
               <div>{value.assign === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Estimated Hours</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Estimated Hours</div>
               <div>{value.estimatedHours}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Start Date</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Start Date</div>
               <div>{value.startDate}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>End Date</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>End Date</div>
               <div>{value.endDate}</div>
             </div>
           </div>
@@ -210,8 +210,8 @@ function PeopleTableDetails(props) {
 
   const renderFilteredTask = value => (
     <div>
-      <div key={value._id} className={`people-table-row people-table-body-row ${darkMode ? 'people-table-row-dark' : ''}`}>
-        <div className='people-report-task-name'>{value.taskName}</div>
+      <div key={value._id} className={`${styles['people-table-row']} ${styles['people-table-body-row']} ${darkMode ? styles['people-table-row-dark'] : ''}`}>
+        <div className={styles['people-report-task-name']}>{value.taskName}</div>
         <div>{value.priority}</div>
         <div>{value.status}</div>
         <div>
@@ -223,7 +223,7 @@ function PeopleTableDetails(props) {
                     key={`${value._id}-${resource.name}`}
                     alt={resource.name}
                     src={resource.profilePic || '/pfp-default.png'}
-                    className="img-circle"
+                    className={styles['img-circle']}
                     title={resource.name}
                   />
                 );
@@ -236,15 +236,15 @@ function PeopleTableDetails(props) {
               <button
                 key={res[0]?.name || res[0]?.id}
                 type="button"
-                className="name resourceMoreToggle"
+                className={`${styles.name} ${styles.resourceMoreToggle}`}
                 onClick={() => toggleMoreResources(value._id)}
               >
-                <span className="dot">{res.length - 2}+</span>
+                <span className={styles.dot}>{res.length - 2}+</span>
               </button>
             ) : null,
           )}
-          <div id={value._id} className="extra">
-            <div className="extra1">
+          <div id={value._id} className={styles.extra}>
+            <div className={styles.extra1}>
               {value.resources?.map(res =>
                 // eslint-disable-next-line array-callback-return,consistent-return
                 res.map((resource, index) => {
@@ -254,7 +254,7 @@ function PeopleTableDetails(props) {
                         key={resource.index}
                         alt={resource.name}
                         src={resource.profilePic || '/pfp-default.png'}
-                        className="img-circle"
+                        className={styles['img-circle']}
                         title={resource.name}
                       />
                     );
@@ -265,15 +265,15 @@ function PeopleTableDetails(props) {
           </div>
         </div>
 
-        <div className="people-table-center-cell">
+        <div className={styles['people-table-center-cell']}>
           {value.active === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}
         </div>
-        <div className="people-table-center-cell">
+        <div className={styles['people-table-center-cell']}>
           {value.assign === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}
         </div>
-        <div className="people-table-end-cell">{value.estimatedHours}</div>
-        <div className="people-table-end-cell">{value.startDate}</div>
-        <div className="people-table-end-cell">{value.endDate}</div>
+        <div className={styles['people-table-end-cell']}>{value.estimatedHours}</div>
+        <div className={styles['people-table-end-cell']}>{value.startDate}</div>
+        <div className={styles['people-table-end-cell']}>{value.endDate}</div>
       </div>
     </div>
   );
@@ -285,17 +285,17 @@ function PeopleTableDetails(props) {
   const renderModalContent = (value) => (
     <div>
       <div>Why This Task is important</div>
-      <textarea className="rectangle" type="text" value={value.whyInfo} />
+      <textarea className={styles.rectangle} type="text" value={value.whyInfo} />
       <div>Design Intent</div>
-      <textarea className="rectangle" type="text" value={value.intentInfo} />
+      <textarea className={styles.rectangle} type="text" value={value.intentInfo} />
       <div>End State</div>
-      <textarea className="rectangle" type="text" value={value.endstateInfo} />
+      <textarea className={styles.rectangle} type="text" value={value.endstateInfo} />
     </div>
   )
 
   return (
-    <Container fluid className={`wrapper ${darkMode ? 'text-light' : ''}`}>
-      <div className="table-filter-container">
+    <Container fluid className={`${styles.wrapper} ${darkMode ? styles['text-light'] : ''}`}>
+      <div className={styles['table-filter-container']}>
         <TableFilter
           onTaskNameSearch={onTaskNameSearch}
           searchPriority={searchPriority}
@@ -318,25 +318,26 @@ function PeopleTableDetails(props) {
           UpdateStartDate={updateStartDate}
           EndDate={endDate}
           UpdateEndDate={updateEndDate}
+          darkMode={darkMode}
         />
-        <button type="button" onClick={resetFilters} className="tasks-table-clear-filter-button">
+        <button type="button" onClick={resetFilters} className={styles['tasks-table-clear-filter-button']}>
           Clear Filters
         </button>
       </div>
       {windowWidth > 1020 ? (
         <>
-          <div className={`people-table-row reports-table-head ${darkMode ? 'bg-space-cadet' : ''}`}>
+          <div className={`${styles['people-table-row']} ${styles['reports-table-head']} ${darkMode ? styles['bg-space-cadet'] : ''}`}>
             <div data-testid="task">Task</div>
             <div data-testid="priority">Priority</div>
             <div data-testid="status">Status</div>
-            <div data-testid="resources" className="people-table-center-cell">Resources</div>
-            <div data-testid="active" className="people-table-center-cell">Active</div>
-            <div data-testid="assign" className="people-table-center-cell">Assign</div>
-            <div data-testid="eh" className="people-table-end-cell">Estimated Hours</div>
-            <div data-testid="sd" className="people-table-end-cell">Start Date</div>
-            <div data-testid="ed" className="people-table-end-cell">End Date</div>
+            <div data-testid="resources" className={styles['people-table-center-cell']}>Resources</div>
+            <div data-testid="active" className={styles['people-table-center-cell']}>Active</div>
+            <div data-testid="assign" className={styles['people-table-center-cell']}>Assign</div>
+            <div data-testid="eh" className={styles['people-table-end-cell']}>Estimated Hours</div>
+            <div data-testid="sd" className={styles['people-table-end-cell']}>Start Date</div>
+            <div data-testid="ed" className={styles['people-table-end-cell']}>End Date</div>
           </div>
-          <div className="people-table people-table-scrollable">
+          <div className={`${styles['people-table']} ${styles['people-table-scrollable']}`}>
             {filteredTasks.map(value => (
               <NewModal key={value._id} header="Task info" trigger={() => renderFilteredTask(value)} darkMode={darkMode}>
                 {renderModalContent(value)}
@@ -345,7 +346,7 @@ function PeopleTableDetails(props) {
           </div>
         </>
       ) : (
-        <div className="people-table">
+        <div className={styles['people-table']}>
           {filteredTasks.map(value => (
             <NewModal key={value._id} header="Task info" trigger={() => renderMobileFilteredTask(value)} darkMode={darkMode}>
               {renderModalContent(value)}

src/components/Reports/PeopleTableDetails.module.css

@@ -7,8 +7,8 @@
 
 .reports-table-head {
   display: grid;
-  grid-template-columns: 2.2fr 1fr 1fr 1.2fr 0.6fr 0.6fr 1.2fr 1fr 1fr;
-  justify-content: space-between;
+  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
+  gap: 0;
   align-items: center;
   vertical-align: middle;
   overflow: hidden;
@@ -23,18 +23,18 @@
 
 .people-table-row {
   display: grid;
-  grid-template-columns: 2.2fr 1fr 1fr 1.2fr 0.6fr 0.6fr 1.2fr 1fr 1fr;
-  justify-content: space-between;
+  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
+  gap: 0;
   align-items: center;
   vertical-align: middle;
   min-height: 42px;
-  padding: 0 16px;
+  padding: 8px 16px;
   cursor: pointer;
   border-bottom: 3px solid #f8f7f8;
   width: 100%;
 }
 
-.reports-table-head,
+.reports-table-head > div,
 .people-table-row > div {
   padding: 8px;
   text-align: left;
@@ -43,6 +43,18 @@
   font-size: 16px;
   word-wrap: break-word;
   white-space: normal;
+  overflow: hidden;
+}
+
+/* Profile picture styling */
+.people-table-row .img-circle {
+  border-radius: 50%;
+  height: 30px;
+  width: 30px;
+  object-fit: cover;
+  display: inline-block;
+  margin-right: 4px;
+  vertical-align: middle;
 }
 
 .people-table-row:hover {
@@ -218,6 +230,24 @@
   height: 30px;
   cursor: pointer;
   margin-left: auto;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.tasks-table-clear-filter-button:hover {
+  background-color: #fef5ff;
+  border-color: #ca50db;
+}
+
+/* Dark mode styling for Clear Filters button */
+.text-light .tasks-table-clear-filter-button {
+  background-color: #232946 !important;
+  border: 2px solid #5A67D8 !important;
+  color: #fff !important;
+}
+
+.text-light .tasks-table-clear-filter-button:hover {
+  background-color: #1C2541 !important;
+  border-color: #ca50db !important;
 }
 
 .people-report-task-name {

src/components/Reports/ReportTableSearchPanel.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { SEARCH } from '../../languages/en/ui';
-import './reportsPage.css';
+import './index.css';
 
 /**
  * The search panel stateless component for Report grid

src/components/Reports/Reports.jsx

@@ -5,6 +5,7 @@
 import moment from 'moment-timezone';
 import { Component } from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
+import './index.css';
 import { connect } from 'react-redux';
 import { Button, Container } from 'reactstrap';
 import EditableInfoModal from '~/components/UserProfile/EditableModal/EditableInfoModal';
@@ -25,7 +26,7 @@ import LostTimeHistory from './LostTime/LostTimeHistory';
 import PeopleTable from './PeopleTable';
 import ProjectTable from './ProjectTable';
 import ReportFilter from './ReportFilter/ReportFilter';
-import './reportsPage.css';
+import './reportsPage.module.css';
 import TeamTable from './TeamTable';
 import TotalContributorsReport from './TotalReport/TotalContributorsReport';
 import TotalPeopleReport from './TotalReport/TotalPeopleReport';
@@ -564,7 +565,7 @@ endDate: moment()
               </div>
             </h2>
             <div>
-              <p >Select a Category</p>
+              <p>Select a Category</p>
             </div>
             <div className='report-container-data'>
               <div className='data-container' style={this.state.showCharts ? {width: '50%'} : {width: '100%'}}>

src/components/Reports/TableFilter/TableFilter.jsx

@@ -41,6 +41,7 @@
   EndDate,
   UpdateStartDate,
   UpdateEndDate,
+  darkMode,
 }) {
   const taskPriority = ['Primary', 'Secondary', 'Tertiary'];
   const taskStatus = ['Paused', 'Complete', 'Active'];
@@ -118,6 +119,7 @@
         id="active"
         wrapperClassname="table-filter-item"
         label="Active"
+        darkMode={darkMode}
       />
       <Checkbox
         value={taskAssign}
@@ -128,6 +130,7 @@
         id="assign"
         wrapperClassname="table-filter-item"
         label="Assign"
+        darkMode={darkMode}
       />
     </div>
   );