Skip to content

Commit d697200

Browse files
shashank-madanshashank-madan
committed
added module.css files
1 parent 44604da commit d697200

9 files changed

Lines changed: 210 additions & 160 deletions

‎src/components/Reports/TotalReport/TotalContributorsReport.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState, useMemo, useCallback } from 'react';
22
import axios from 'axios';
33
import { ENDPOINTS } from '~/utils/URL';
4-
import './TotalReport.css';
4+
import styles from './TotalReport.module.css';
55
import TotalReportBarGraph from './TotalReportBarGraph';
66
import Loading from '../../common/Loading';
77
import EditableInfoModal from '../../UserProfile/EditableModal/EditableInfoModal';
@@ -204,9 +204,9 @@ function TotalContributorsReport({ startDate, endDate, userProfiles, darkMode, u
204204
const totalTangibleTime = contributors.reduce((acc, obj) => acc + Number(obj.tangibleTime), 0);
205205

206206
return (
207-
<div className={`total-container ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}>
207+
<div className={`${styles.totalContainer} ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}>
208208
<div className="d-flex align-items-center">
209-
<h2 className={`total-title ${darkMode ? 'text-azure' : ''}`}>Contributors Report</h2>
209+
<h2 className={`${styles.totalTitle} ${darkMode ? 'text-azure' : ''}`}>Contributors Report</h2>
210210
<EditableInfoModal
211211
areaName="contributorsReportInfo"
212212
areaTitle="Contributors Report"
@@ -217,16 +217,16 @@ function TotalContributorsReport({ startDate, endDate, userProfiles, darkMode, u
217217
darkMode={darkMode}
218218
/>
219219
</div>
220-
<div className="total-period">
220+
<div className={styles.totalPeriod}>
221221
In the period from {startDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })} to {endDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })}:
222222
</div>
223-
<div className="total-item">
224-
<div className="total-number">{contributors.length}</div>
225-
<div className="total-text">members have contributed more than 10 hours.</div>
223+
<div className={styles.totalItem}>
224+
<div className={styles.totalNumber}>{contributors.length}</div>
225+
<div className={styles.totalText}>members have contributed more than 10 hours.</div>
226226
</div>
227-
<div className="total-item">
228-
<div className="total-number">{totalTangibleTime.toFixed(2)}</div>
229-
<div className="total-text">hours of tangible time have been logged.</div>
227+
<div className={styles.totalItem}>
228+
<div className={styles.totalNumber}>{totalTangibleTime.toFixed(2)}</div>
229+
<div className={styles.totalText}>hours of tangible time have been logged.</div>
230230
</div>
231231
<div>
232232
{showMonthly && contributorsInMonth.length > 0 && (

‎src/components/Reports/TotalReport/TotalPeopleReport.jsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
22
import { useEffect, useState, useMemo, useCallback } from 'react';
33
import { ENDPOINTS } from '~/utils/URL';
44
import axios from 'axios';
5-
import './TotalReport.css';
5+
import styles from './TotalReport.module.css';
66
import { Button } from 'reactstrap';
77
import ReactTooltip from 'react-tooltip';
88
import TotalReportBarGraph from './TotalReportBarGraph';
@@ -320,9 +320,9 @@ function TotalPeopleReport(props) {
320320
const totalPeopleInfo = totalPeople => {
321321
const totalTangibleTime = totalPeople.reduce((acc, obj) => acc + Number(obj.tangibleTime), 0);
322322
return (
323-
<div className={`total-container ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}>
324-
<div className={`total-title ${darkMode ? 'text-azure' : ''}`}>Total People Report</div>
325-
<div className="total-period">
323+
<div className={`${styles.totalContainer} ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}>
324+
<div className={`${styles.totalTitle} ${darkMode ? 'text-azure' : ''}`}>Total People Report</div>
325+
<div className={styles.totalPeriod}>
326326
In the period from{' '}
327327
{startDate.toLocaleDateString('en-US', {
328328
month: '2-digit',
@@ -337,13 +337,13 @@ function TotalPeopleReport(props) {
337337
})}
338338
:
339339
</div>
340-
<div className="total-item">
341-
<span className="total-number">{allPeople.length}</span>
342-
<span className="total-text">members have contributed more than 10 hours.</span>
340+
<div className={styles.totalItem}>
341+
<span className={styles.totalNumber}>{allPeople.length}</span>
342+
<span className={styles.totalText}>members have contributed more than 10 hours.</span>
343343
</div>
344-
<div className="total-item">
345-
<span className="total-number">{totalTangibleTime.toFixed(2)}</span>
346-
<span className="total-text">hours of tangible time have been logged.</span>
344+
<div className={styles.totalItem}>
345+
<span className={styles.totalNumber}>{totalTangibleTime.toFixed(2)}</span>
346+
<span className={styles.totalText}>hours of tangible time have been logged.</span>
347347
</div>
348348
<div>
349349
{showMonthly && peopleInMonth.length > 0 ? (
@@ -352,10 +352,10 @@ function TotalPeopleReport(props) {
352352
{showYearly && peopleInYear.length > 0 ? (
353353
<TotalReportBarGraph barData={peopleInYear} range="year" />
354354
) : null}
355-
{showWarning && <div className='total-warning'>Graphs are shown only if the selected date range is greater than one month.</div>}
355+
{showWarning && <div className={styles.totalWarning}>Graphs are shown only if the selected date range is greater than one month.</div>}
356356
</div>
357357
{allPeople.length ? (
358-
<div className="total-detail">
358+
<div className={styles.totalDetail}>
359359
<Button onClick={onClickTotalPeopleDetail}>
360360
{showTotalPeopleTable ? 'Hide Details' : 'Show Details'}
361361
</Button>
@@ -399,7 +399,7 @@ function TotalPeopleReport(props) {
399399
) : (
400400
<div>
401401
<div>{totalPeopleInfo(allPeople)}</div>
402-
<div className='tables'>{showTotalPeopleTable ? totalPeopleTable(allPeople) : null}</div>
402+
<div className={styles.tables}>{showTotalPeopleTable ? totalPeopleTable(allPeople) : null}</div>
403403
</div>
404404
)}
405405
</div>

‎src/components/Reports/TotalReport/TotalProjectReport.jsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
22
import { useEffect, useState, useMemo, useCallback } from 'react';
33
import { ENDPOINTS } from '~/utils/URL';
44
import axios from 'axios';
5-
import './TotalReport.css';
5+
import styles from './TotalReport.module.css';
66
import { Button } from 'reactstrap';
77
import ReactTooltip from 'react-tooltip';
88
import TotalReportBarGraph from './TotalReportBarGraph';
@@ -299,9 +299,9 @@ function TotalProjectReport(props) {
299299
return acc + Number(obj.tangibleTime);
300300
}, 0);
301301
return (
302-
<div className={`total-container ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}>
303-
<div className={`total-title ${darkMode ? 'text-azure' : ''}`}>Total Project Report</div>
304-
<div className="total-period">
302+
<div className={`${styles.totalContainer} ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}>
303+
<div className={`${styles.totalTitle} ${darkMode ? 'text-azure' : ''}`}>Total Project Report</div>
304+
<div className={styles.totalPeriod}>
305305
In the period from{' '}
306306
{startDate.toLocaleDateString('en-US', {
307307
month: '2-digit',
@@ -316,13 +316,13 @@ function TotalProjectReport(props) {
316316
})}
317317
:
318318
</div>
319-
<div className="total-item">
320-
<span className="total-number">{allProject.length}</span>
321-
<span className="total-text">projects have been worked on more than 1 hours.</span>
319+
<div className={styles.totalItem}>
320+
<span className={styles.totalNumber}>{allProject.length}</span>
321+
<span className={styles.totalText}>projects have been worked on more than 1 hours.</span>
322322
</div>
323-
<div className="total-item">
324-
<span className="total-number">{totalTangibleTime.toFixed(2)}</span>
325-
<span className="total-text">hours of tangible time have been logged.</span>
323+
<div className={styles.totalItem}>
324+
<span className={styles.totalNumber}>{totalTangibleTime.toFixed(2)}</span>
325+
<span className={styles.totalText}>hours of tangible time have been logged.</span>
326326
</div>
327327
<div>
328328
{showMonthly && projectInMonth.length > 0 ? (
@@ -331,10 +331,10 @@ function TotalProjectReport(props) {
331331
{showYearly && projectInYear.length > 0 ? (
332332
<TotalReportBarGraph barData={projectInYear} range="year" />
333333
) : null}
334-
{showWarning && <div className='total-warning'>Graphs are shown only if the selected date range is greater than one month.</div>}
334+
{showWarning && <div className={styles.totalWarning}>Graphs are shown only if the selected date range is greater than one month.</div>}
335335
</div>
336336
{allProject.length ? (
337-
<div className="total-detail">
337+
<div className={styles.totalDetail}>
338338
{/* eslint-disable-next-line no-unused-vars */}
339339
<Button onClick={e => onClickTotalProjectDetail()}>
340340
{showTotalProjectTable ? 'Hide Details' : 'Show Details'}
@@ -379,7 +379,7 @@ function TotalProjectReport(props) {
379379
) : (
380380
<div>
381381
<div>{totalProjectInfo(allProject)}</div>
382-
<div className='tables'>{showTotalProjectTable ? totalProjectTable(allProject) : null}</div>
382+
<div className={styles.tables}>{showTotalProjectTable ? totalProjectTable(allProject) : null}</div>
383383
</div>
384384
)}
385385
</div>

‎src/components/Reports/TotalReport/TotalReport.css‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

0 commit comments

Comments
 (0)