diff --git a/config-overrides.js b/config-overrides.js index afa2c65e4a..5642ee368a 100644 --- a/config-overrides.js +++ b/config-overrides.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line import/no-extraneous-dependencies const webpack = require('webpack'); module.exports = function override(config) { diff --git a/src/components/ApplicantsChart/AgeChart.jsx b/src/components/ApplicantsChart/AgeChart.jsx index 90df74219b..999e89df77 100644 --- a/src/components/ApplicantsChart/AgeChart.jsx +++ b/src/components/ApplicantsChart/AgeChart.jsx @@ -8,77 +8,187 @@ import { ResponsiveContainer, LabelList, } from 'recharts'; -import { useSelector } from 'react-redux'; -import styles from './ApplicationChart.module.css'; +import styles from './ApplicantsChart.module.css'; -function AgeChart({ data, compareLabel }) { - const darkMode = useSelector(state => state.theme.darkMode); - const axisColor = darkMode ? '#f3f4f6' : '#111827'; - const axisLineColor = darkMode ? '#d1d5db' : '#374151'; - const gridColor = darkMode ? '#9ca3af' : '#d1d5db'; - const tickFontSize = 14; +function AgeChart({ data, compareLabel, darkMode }) { + // Guard against invalid data + if (!data || !Array.isArray(data) || data.length === 0) { + return null; + } - const formatTooltip = (value, name, props) => { - const { change } = props.payload; - if (compareLabel && change !== undefined) { - let changeText = ''; + // Validate data structure + const validData = data.filter( + item => item && item.ageGroup && typeof item.applicants === 'number' && !isNaN(item.applicants), + ); + + if (validData.length === 0) { + return null; + } + + // Custom tooltip content component + const CustomTooltip = ({ active, payload, label }) => { + if (!active || !payload || !payload.length) { + return null; + } + + const dataPoint = payload[0]; + if (!dataPoint) { + return null; + } + + // Try multiple ways to access the data - Recharts passes data in payload[0].payload + const payloadData = dataPoint.payload || {}; + // Also check if label is passed directly (from XAxis) + const ageGroup = label || payloadData.ageGroup || dataPoint.name || ''; + const applicants = + dataPoint.value !== undefined && dataPoint.value !== null + ? dataPoint.value + : payloadData.applicants !== undefined + ? payloadData.applicants + : 0; + const change = payloadData.change; + + // Debug: log to see what we're getting (remove in production) + // console.log('Tooltip data:', { active, payload, label, dataPoint, payloadData, ageGroup, applicants, change }); + + let changeText = ''; + if (compareLabel && change !== undefined && change !== null) { if (change > 0) { - changeText = `${change}% more than ${compareLabel}`; + changeText = `(${change}% more than ${compareLabel})`; } else if (change < 0) { - changeText = `${Math.abs(change)}% less than ${compareLabel}`; + changeText = `(${Math.abs(change)}% less than ${compareLabel})`; } else { - changeText = `No change from ${compareLabel}`; + changeText = `(No change from ${compareLabel})`; } - return [`${value} (${changeText})`, 'Applicants']; } - return [`${value}`, 'Applicants']; + + // Ensure we always render content, even if some values are missing + const displayAgeGroup = ageGroup || 'N/A'; + const displayApplicants = applicants !== undefined && applicants !== null ? applicants : 0; + + return ( +
+
+ {displayAgeGroup} +
+
+ Applicants :{' '} + {displayApplicants} +
+ {changeText && ( +
+ {changeText} +
+ )} +
+ ); }; return ( -
-

Applicants grouped by Age

- - - - - - +
+ + - - - - - + barSize={60} + > + + + + + + + + + +
); } diff --git a/src/components/ApplicantsChart/ApplicantsChart.module.css b/src/components/ApplicantsChart/ApplicantsChart.module.css new file mode 100644 index 0000000000..f8b662ed55 --- /dev/null +++ b/src/components/ApplicantsChart/ApplicantsChart.module.css @@ -0,0 +1,184 @@ +/* Dark mode hover styles for DatePicker calendar */ +.text-light .hgn-datepicker-dark-calendar .react-datepicker { + background-color: #1f2937 !important; + border: 1px solid #374151 !important; + border-radius: 0 !important; +} + +.text-light .hgn-datepicker-dark-calendar .react-datepicker__header { + background-color: #111827 !important; + border-bottom: 1px solid #374151 !important; + border-radius: 0 !important; +} + +.text-light .hgn-datepicker-dark-calendar .react-datepicker__month-container { + background-color: #1f2937 !important; + border-radius: 0 !important; +} + +.text-light .hgn-datepicker-dark-calendar .react-datepicker__day { + color: #e5e7eb !important; + border-radius: 0 !important; +} + +.text-light .hgn-datepicker-dark-calendar .react-datepicker__day:hover { + background-color: #374151 !important; + color: #ffffff !important; + border-radius: 0 !important; +} + +.text-light .hgn-datepicker-dark-calendar .react-datepicker__day--selected, +.text-light .hgn-datepicker-dark-calendar .react-datepicker__day--keyboard-selected { + background-color: #2563eb !important; + color: #ffffff !important; + border-radius: 0 !important; +} + +.text-light .hgn-datepicker-dark-calendar .react-datepicker__day--in-range, +.text-light .hgn-datepicker-dark-calendar .react-datepicker__day--in-selecting-range { + background-color: #1e3a8a !important; + color: #ffffff !important; + border-radius: 0 !important; +} + +.text-light .hgn-datepicker-dark-calendar .react-datepicker__current-month, +.text-light .hgn-datepicker-dark-calendar .react-datepicker__day-name { + color: #e5e7eb !important; +} + +.text-light .hgn-datepicker-dark-calendar .react-datepicker__navigation-icon::before { + border-color: #e5e7eb !important; +} + +/* Dark mode hover for DatePicker input */ +.text-light .hgn-datepicker-dark:hover { + background-color: #374151 !important; + border-color: #4b5563 !important; +} + +.text-light .hgn-datepicker-dark:focus { + background-color: #374151 !important; + border-color: #3b82f6 !important; + outline: none; +} + +/* Dark mode hover for select dropdown */ +.text-light select:hover { + background-color: #374151 !important; + border-color: #4b5563 !important; +} + +.text-light select:focus { + background-color: #374151 !important; + border-color: #3b82f6 !important; + outline: none; +} + +.datePickerWrapper { + display: inline-block; +} + +/* Ensure date picker input text is visible in dark mode */ +:global(.text-light) :global(.hgn-datepicker-dark), +:global(.text-light) :global(.hgn-datepicker-dark) input, +:global(.text-light) :global(.hgn-datepicker-dark) input[type="text"] { + color: #e5e7eb !important; + background-color: #1f2937 !important; +} + +:global(.text-light) :global(.hgn-datepicker-dark)::placeholder, +:global(.text-light) :global(.hgn-datepicker-dark) input::placeholder { + color: #9ca3af !important; + opacity: 1 !important; +} + +:global(.text-light) :global(.hgn-datepicker-dark):focus, +:global(.text-light) :global(.hgn-datepicker-dark):focus input, +:global(.text-light) :global(.hgn-datepicker-dark):focus input[type="text"] { + color: #e5e7eb !important; + background-color: #374151 !important; +} + +/* Additional styles for react-datepicker input in dark mode */ +:global(.text-light) .datePickerWrapper :global(input.react-datepicker-ignore-onclickoutside), +:global(.text-light) .datePickerWrapper :global(.react-datepicker__input-container input), +:global(.text-light) .datePickerWrapper :global(.react-datepicker__input-container) :global(input) { + color: #e5e7eb !important; + background-color: #1f2937 !important; +} + +:global(.text-light) .datePickerWrapper :global(input.react-datepicker-ignore-onclickoutside)::placeholder, +:global(.text-light) .datePickerWrapper :global(.react-datepicker__input-container input)::placeholder, +:global(.text-light) .datePickerWrapper :global(.react-datepicker__input-container) :global(input)::placeholder { + color: #9ca3af !important; + opacity: 1 !important; +} + +/* More specific targeting for react-datepicker input wrapper */ +:global(.text-light) :global(.react-datepicker-wrapper) :global(.hgn-datepicker-dark), +:global(.text-light) :global(.react-datepicker-wrapper) :global(input) { + color: #e5e7eb !important; + background-color: #1f2937 !important; +} + +:global(.text-light) :global(.react-datepicker-wrapper) :global(.hgn-datepicker-dark)::placeholder, +:global(.text-light) :global(.react-datepicker-wrapper) :global(input)::placeholder { + color: #9ca3af !important; + opacity: 1 !important; +} + +/* Dark mode styles for recharts surface */ +:global(.bg-oxford-blue) :global(.recharts-surface) { + background-color: #1b2a41 !important; +} + +:global(.bg-oxford-blue) :global(.recharts-wrapper) { + background-color: #1b2a41 !important; +} + +:global(.bg-oxford-blue) :global(.recharts-cartesian-grid) { + stroke: #555 !important; +} + +/* Custom tooltip styles - ensure text is always visible */ +.customTooltip { + background-color: #ffffff !important; + color: #000000 !important; +} + +.customTooltip * { + color: #000000 !important; +} + +.tooltipAgeGroup { + color: #000000 !important; + font-weight: 600 !important; +} + +.tooltipApplicants { + color: #000000 !important; +} + +.tooltipApplicants strong { + color: #000000 !important; + font-weight: 700 !important; +} + +.tooltipChange { + color: #000000 !important; +} + +/* Global tooltip styles to override any parent dark mode styles */ +:global(.recharts-tooltip-wrapper) .customTooltip, +:global(.recharts-tooltip-wrapper) .customTooltip * { + color: #000000 !important; + background-color: #ffffff !important; +} + +/* Override text-light class for tooltip */ +:global(.text-light) :global(.recharts-tooltip-wrapper) .customTooltip, +:global(.text-light) :global(.recharts-tooltip-wrapper) .customTooltip * { + color: #000000 !important; + background-color: #ffffff !important; +} + diff --git a/src/components/ApplicantsChart/index.jsx b/src/components/ApplicantsChart/index.jsx index 8c9a324d1a..8a3ad91b39 100644 --- a/src/components/ApplicantsChart/index.jsx +++ b/src/components/ApplicantsChart/index.jsx @@ -1,40 +1,322 @@ import { useState, useEffect } from 'react'; -import TimeFilter from './TimeFilter'; +import { useSelector } from 'react-redux'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; import AgeChart from './AgeChart'; import fetchApplicantsData from './api'; -import styles from './ApplicationChart.module.css'; -import { useSelector } from 'react-redux'; +import styles from './ApplicantsChart.module.css'; -function ApplicantsChart() { +function ApplicantsDashboard() { + const [selectedOption, setSelectedOption] = useState('weekly'); + const [startDate, setStartDate] = useState(null); + const [endDate, setEndDate] = useState(null); const [chartData, setChartData] = useState([]); const [compareLabel, setCompareLabel] = useState('last week'); const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + // dark mode from Redux const darkMode = useSelector(state => state.theme.darkMode); - const handleFilterChange = async filter => { + // Extract validation logic + const validateCustomDates = (start, end) => { + if (!start || !end) { + return { valid: false, error: null }; + } + if (start > end) { + return { valid: false, error: 'Start date cannot be after end date.' }; + } + return { valid: true, error: null }; + }; + + // Extract data fetching logic + const fetchData = async (option, start, end) => { + try { + const filter = { selectedOption: option, startDate: start, endDate: end }; + const data = await fetchApplicantsData(filter); + + if (!data || data.length === 0) { + setError('⚠️ No data available for the selected filter.'); + setChartData([]); + return; + } + + setChartData(data); + const label = option === 'custom' ? null : `last ${option.slice(0, -2)}`; + setCompareLabel(label); + setError(null); + } catch (err) { + // Handle exception properly + const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred'; + // eslint-disable-next-line no-console + console.error('Failed to fetch applicants data:', errorMessage); + setError('❌ Failed to load data. Please try again.'); + setChartData([]); + } + }; + + const handleFilterChange = async (option, start, end) => { setLoading(true); - const data = await fetchApplicantsData(filter); - setChartData(data); + setError(null); - setCompareLabel( - filter.selectedOption === 'custom' ? null : `last ${filter.selectedOption.slice(0, -2)}`, - ); + // validation for custom dates + if (option === 'custom') { + const validation = validateCustomDates(start, end); + if (!validation.valid) { + if (validation.error) { + setError(validation.error); + setChartData([]); + } + setLoading(false); + return; + } + } + + await fetchData(option, start, end); setLoading(false); }; + // Extract select change handler + const handleSelectChange = e => { + const val = e.target.value; + setSelectedOption(val); + setStartDate(null); + setEndDate(null); + handleFilterChange(val, null, null); + }; + + // Extract start date change handler + const handleStartDateChange = date => { + setStartDate(date); + handleFilterChange('custom', date, endDate); + }; + + // Extract end date change handler + const handleEndDateChange = date => { + setEndDate(date); + handleFilterChange('custom', startDate, date); + }; + + // Extract loading state rendering + const renderLoadingState = () => ( +
+

+ Loading... +

+
+ ); + + // Extract empty state rendering + const renderEmptyState = () => { + // Check if it's a validation error (start date > end date) + const isValidationError = error && error.includes('Start date cannot be after end date'); + + return ( +
+

+ {isValidationError + ? error + : error + ? 'Unable to load chart data.' + : 'No data available to display.'} +

+
+ ); + }; + + // Extract chart content rendering + const renderChartContent = () => { + if (loading) { + return renderLoadingState(); + } + + const hasData = !error && chartData.length > 0; + if (hasData) { + return ; + } + + return renderEmptyState(); + }; + + // Extract date picker styles + const getDatePickerStyles = () => ({ + backgroundColor: darkMode ? '#1f2937' : '#fff', + color: darkMode ? '#e5e7eb' : '#000', + border: `1px solid ${darkMode ? '#374151' : '#ccc'}`, + borderRadius: darkMode ? '0' : '4px', + padding: '6px 12px', + fontSize: '14px', + cursor: 'pointer', + width: '150px', + }); + + // Extract date picker props + const getDatePickerProps = () => ({ + dateFormat: 'yyyy/MM/dd', + className: darkMode ? 'hgn-datepicker-dark' : '', + calendarClassName: darkMode ? 'hgn-datepicker-dark-calendar' : '', + wrapperClassName: darkMode ? styles.datePickerWrapper : '', + style: getDatePickerStyles(), + }); + + // Extract date pickers rendering + const renderDatePickers = () => { + if (selectedOption !== 'custom') { + return null; + } + + return ( + <> + + to + + + ); + }; + + // Extract select styles + const getSelectStyles = () => ({ + padding: '6px 12px', + borderRadius: darkMode ? '0' : '4px', + border: `1px solid ${darkMode ? '#374151' : '#ccc'}`, + backgroundColor: darkMode ? '#1f2937' : '#fff', + color: darkMode ? '#e5e7eb' : '#000', + fontSize: '14px', + cursor: 'pointer', + }); + + // initial load useEffect(() => { - handleFilterChange({ selectedOption: 'weekly' }); + handleFilterChange('weekly', null, null); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( -
-
- - {loading ?

Loading...

: } +
+ {/* Time Filter */} +
+ + + + + {renderDatePickers()} +
+ + {/* Chart Title - Always visible */} +

+ Applicants Grouped by Age +

+ + {/* Chart */} +
+ {renderChartContent()}
); } -export default ApplicantsChart; +export default ApplicantsDashboard; diff --git a/src/components/BMDashboard/Issues/issueChart.module.css b/src/components/BMDashboard/Issues/issueChart.module.css index 76633c35e7..bf6d4d6a38 100644 --- a/src/components/BMDashboard/Issues/issueChart.module.css +++ b/src/components/BMDashboard/Issues/issueChart.module.css @@ -179,3 +179,210 @@ .errorTextDark { color: #fca5a5; } + +.chartContainer { + width: 100%; + height: 500px; +} + +/* Container for entire chart section */ +.issueChartContainer { + width: 50vw; /* full viewport width */ + padding: 20px; + box-sizing: border-box; /* include padding in width */ + background: #f9f9f9; + border-radius: 8px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); +} + + +.filterCenterWrapper { + max-width: 650px; /* filters centered and constrained */ + margin: 0 auto 20px auto; +} + + +.issueChartContainerDark { + width: 50vw; /* full viewport width */ + padding: 20px; + box-sizing: border-box; /* include padding in width */ + background: #121212; + box-shadow: 0 4px 12px rgba(0,0,0,0.9); + color: #ccd1dc; +} + +/* Chart title */ +.title { + text-align: center; + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; + color: #333; +} + +.titleDark { + text-align: center; + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; + color: #fff; +} + +/* Filter rows */ +.dateRow { + display: grid; + grid-template-columns: auto 1fr auto 1fr; + align-items: center; + gap: 10px; + width: 100%; + margin-bottom: 15px; +} + +.projectRow { + width: 100%; +} + +/* Labels */ +.dateLabelLight { + font-size: 14px; + font-weight: 500; + color: #333; +} + +.dateLabelDark { + font-size: 14px; + font-weight: 500; + color: #cfd7e3; +} + +/* Date picker */ +.dateField { + width: 100%; +} + +.dateLight, +.dateDark { + width: 100%; + padding: 8px 10px; + border-radius: 6px; + border: 1px solid #ccc; + font-size: 14px; +} + +.dateDark { + background: #22272e; + color: #cfd7e3; + border-color: #3d444d; +} + +/* React select */ +.selectReact { + width: 100%; +} + +:global(.react-datepicker__close-icon::after) { + background: none; + color: #b9b9b9; + font-size: 18px; +} + +/* DARK MODE CONTROL */ +.controlDark { + background: #22272e !important; + border-color: #3d444d !important; + color: #cfd7e3 !important; +} + +/* VALUE TEXT */ +.valueDark { + color: #cfd7e3 !important; +} + +/* MENU */ +.menuDark { + background: #22272e !important; +} + +/* OPTIONS — keep only base default color */ +.optionDark { + color: #cfd7e3 !important; +} + +/* MULTI VALUE */ +.multiValueDark { + background: #3a3f45 !important; + color: #cfd7e3 !important; +} + +.multiValueLabelDark { + color: #cfd7e3 !important; +} + +.multiValueRemoveDark { + color: #cfd7e3 !important; +} + +/* ===== LIGHT MODE ===== */ + +.controlLight { + background: white !important; + border-color: #ccc !important; + color: black !important; +} + +.menuLight { + background: white !important; +} + +.optionLight { + color: black !important; +} + +.multiValueLight { + background: #dceeff !important; + color: black !important; +} + +.multiValueLabelLight { + color: black !important; +} + +.multiValueRemoveLight { + color: black !important; +} + + +/* No data text */ +.noData { + text-align: center; + color: #888; + font-size: 16px; + padding: 40px 0; +} + +/* Loading/Error */ +.loading, +.error { + text-align: center; + padding: 20px 0; + font-size: 16px; +} + +.rowLabel { + margin: 8px 0 8px; + font-weight: 600; + font-size: 16px; +} + + +/* Responsive */ +@media (max-width: 650px) { + .dateRow { + grid-template-columns: 1fr; + gap: 10px; + } + + .dateRow span.dateLabel { + display: none; /* hide labels for small screens */ + } +} diff --git a/src/components/BMDashboard/Issues/openIssueCharts.jsx b/src/components/BMDashboard/Issues/openIssueCharts.jsx index 6af97f9248..729cc19032 100644 --- a/src/components/BMDashboard/Issues/openIssueCharts.jsx +++ b/src/components/BMDashboard/Issues/openIssueCharts.jsx @@ -1,4 +1,4 @@ -import { useEffect, useState, useRef } from 'react'; +import { useEffect, useState, useRef, useMemo } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { useDispatch, useSelector } from 'react-redux'; @@ -8,7 +8,6 @@ import { XAxis, YAxis, CartesianGrid, - Tooltip, ResponsiveContainer, LabelList, } from 'recharts'; @@ -18,13 +17,15 @@ import { fetchLongestOpenIssues, setProjectFilter, } from '../../../actions/bmdashboard/issueChartActions'; -import styles from './issueCharts.module.css'; +import styles from './issueChart.module.css'; function IssueCharts() { const dispatch = useDispatch(); - const darkMode = useSelector(state => state.theme.darkMode); + const { issues, loading, error, selectedProjects } = useSelector(state => state.bmissuechart); const projects = useSelector(state => state.bmProjects); + const darkMode = useSelector(state => state.theme?.darkMode); + const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); const chartContainerRef = useRef(null); @@ -36,13 +37,22 @@ function IssueCharts() { const tooltipBg = darkMode ? '#2d3748' : '#ffffff'; const tooltipBorder = darkMode ? '#4a5568' : '#e2e8f0'; + // Normalize issues for chart + const normalizedIssues = useMemo(() => { + return (issues || []).map((item, index) => ({ + issueName: item.issueName || `Issue #${index + 1}`, + durationOpen: item.durationOpen ?? 0, + })); + }, [issues]); + + // Load projects on mount useEffect(() => { dispatch(fetchBMProjects()); }, [dispatch]); + // Fetch issues when filters change useEffect(() => { let dateRange = []; - if (startDate && endDate) { dateRange = [ `${startDate.toISOString().split('T')[0]},${endDate.toISOString().split('T')[0]}`, @@ -57,6 +67,7 @@ function IssueCharts() { dispatch(fetchLongestOpenIssues(dateRange, selectedProjects)); }, [dispatch, startDate, endDate, selectedProjects]); + // Handle chart container width useEffect(() => { function handleResize() { if (chartContainerRef.current) { @@ -64,7 +75,7 @@ function IssueCharts() { } } window.addEventListener('resize', handleResize); - handleResize(); // Initial set + handleResize(); return () => window.removeEventListener('resize', handleResize); }, []); @@ -77,9 +88,7 @@ function IssueCharts() { label: project.name, })); - // Calculate margins and YAxis width based on container width const getChartLayout = () => { - // Margins and YAxis width scale with container width const leftRightMargin = Math.max(20, Math.min(200, containerWidth * 0.12)); const yAxisWidth = Math.max(60, Math.min(180, containerWidth * 0.13)); return { @@ -111,100 +120,132 @@ function IssueCharts() { darkMode ? styles.issueChartContainerDark : '' }`; const labelClass = `${styles.issueChartLabel} ${darkMode ? styles.issueChartLabelDark : ''}`; - const filterSelectClass = `${styles.filterSelect} ${darkMode ? styles.filterSelectDark : ''}`; - const chartContainerClass = `${styles.chartContainer} ${ - darkMode ? styles.chartContainerDark : '' - }`; - const noDataMessageClass = `${styles.noDataMessage} ${darkMode ? styles.noDataMessageDark : ''}`; - const noDataContentClass = `${styles.noDataContent} ${darkMode ? styles.noDataContentDark : ''}`; return (

Longest Open Issues

+ +
+ {/* Label: Date */} +
Date
-
-
- -
+ {/* Row 1: Date picker */} +
+ From +
setStartDate(date)} - selectsStart - startDate={startDate} - endDate={endDate} - maxDate={endDate} placeholderText="Start Date" isClearable - className={filterSelectClass} + className={darkMode ? styles.dateDark : styles.dateLight} /> - to +
+ to +
setEndDate(date)} - selectsEnd - startDate={startDate} - endDate={endDate} - minDate={startDate} - maxDate={new Date()} placeholderText="End Date" isClearable - className={filterSelectClass} + className={darkMode ? styles.dateDark : styles.dateLight} />
-
- + {/* Row 2: Project selector */} + +
setSearchMode(e.target.value)} + className={`form-control ${darkMode ? 'bg-white' : ''}`} + aria-label="Filter by" + > + + + +
+
diff --git a/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx index 881879c028..24d52b111d 100644 --- a/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx +++ b/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx @@ -17,7 +17,7 @@ import { DUE_DATE_MUST_GREATER_THAN_START_DATE , END_DATE_ERROR_MESSAGE, } from '../../../../../languages/en/messages'; import clsx from 'clsx'; -import '../../../../Header/DarkMode.css'; +import '../../../../Header/index.css'; import TagsSearch from '../components/TagsSearch'; import styles from '../wbs.module.css'; // import styles from './AddTaskModal.module.css'; diff --git a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx index 63ee4b171d..0783e93ed9 100644 --- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx +++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx @@ -19,7 +19,7 @@ import { toast } from 'react-toastify'; import UserSearch from './UserSearch'; import UserTag from './UserTag'; import ReadOnlySectionWrapper from './ReadOnlySectionWrapper'; -import '../../../../Header/DarkMode.css'; +import '../../../../Header/index.css'; import styles from '../wbs.module.css'; import TagsSearch from '../components/TagsSearch'; diff --git a/src/components/Projects/WBS/WBSDetail/ImportTask/ImportTask.jsx b/src/components/Projects/WBS/WBSDetail/ImportTask/ImportTask.jsx index 04a8876fbc..b44c98f52e 100644 --- a/src/components/Projects/WBS/WBSDetail/ImportTask/ImportTask.jsx +++ b/src/components/Projects/WBS/WBSDetail/ImportTask/ImportTask.jsx @@ -12,7 +12,7 @@ import { getPopupById } from './../../../../../actions/popupEditorAction'; import { TASK_IMPORT_POPUP_ID } from './../../../../../constants/popupId'; import parse from 'html-react-parser'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../../../../Header/DarkMode.css' +import '../../../../Header/index.css' const ImportTask = props => { /* diff --git a/src/components/Projects/WBS/WBSDetail/Task/Task.jsx b/src/components/Projects/WBS/WBSDetail/Task/Task.jsx index c0aa53e915..1f9d262f2a 100644 --- a/src/components/Projects/WBS/WBSDetail/Task/Task.jsx +++ b/src/components/Projects/WBS/WBSDetail/Task/Task.jsx @@ -10,7 +10,7 @@ import { } from '../../../../../actions/task.js'; import './tagcolor.css'; import './task.css'; -import '../../../../Header/DarkMode.css' +import '../../../../Header/index.css' import { Editor } from '@tinymce/tinymce-react'; import { getPopupById } from './../../../../../actions/popupEditorAction'; import { boxStyle, boxStyleDark } from '~/styles'; diff --git a/src/components/Projects/__tests__/Projects.test.jsx b/src/components/Projects/__tests__/Projects.test.jsx index ecbffd0a76..0b9e574d32 100644 --- a/src/components/Projects/__tests__/Projects.test.jsx +++ b/src/components/Projects/__tests__/Projects.test.jsx @@ -76,7 +76,7 @@ describe("Projects component",()=>{ data: [], }); render() - expect(screen.getByText('Project Name')).toBeInTheDocument(); + expect(screen.getAllByText('Project Name')[0]).toBeInTheDocument(); }) it('check if Category header displays as expected',()=>{ axios.get.mockResolvedValue({ diff --git a/src/components/Reports/LostTime/AddLostTime.jsx b/src/components/Reports/LostTime/AddLostTime.jsx index 3c0fd9b17c..aac0879ace 100644 --- a/src/components/Reports/LostTime/AddLostTime.jsx +++ b/src/components/Reports/LostTime/AddLostTime.jsx @@ -8,7 +8,7 @@ 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'; import { getFontColor, getBoxStyling } from '~/styles'; -import '../../Header/DarkMode.css' +import '../../Header/index.css' import { isEmpty, isEqual } from 'lodash'; import { getUserProfile } from '~/actions/userProfile'; import { postTimeEntry } from '~/actions/timeEntries'; diff --git a/src/components/Reports/LostTime/EditHistoryModal.jsx b/src/components/Reports/LostTime/EditHistoryModal.jsx index 852f286924..70b82a3a7a 100644 --- a/src/components/Reports/LostTime/EditHistoryModal.jsx +++ b/src/components/Reports/LostTime/EditHistoryModal.jsx @@ -7,7 +7,7 @@ import moment from 'moment'; import { isEmpty } from 'lodash'; import { deleteTimeEntry, editTimeEntry } from '~/actions/timeEntries'; import './EditHistoryModal.css'; -import '../../Header/DarkMode.css' +import '../../Header/index.css' import { toast } from 'react-toastify'; function EditHistoryModal(props) { diff --git a/src/components/Reports/Reports.jsx b/src/components/Reports/Reports.jsx index ba6d85c299..d02ba1ff7a 100644 --- a/src/components/Reports/Reports.jsx +++ b/src/components/Reports/Reports.jsx @@ -27,7 +27,7 @@ import TotalProjectReport from './TotalReport/TotalProjectReport'; import TotalContributorsReport from './TotalReport/TotalContributorsReport'; import AddLostTime from './LostTime/AddLostTime'; import LostTimeHistory from './LostTime/LostTimeHistory'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import ViewReportByDate from './ViewReportsByDate/ViewReportsByDate'; import ReportFilter from './ReportFilter/ReportFilter'; import Loading from '../common/Loading'; diff --git a/src/components/Reports/ViewReportsByDate/ViewReportsByDate.jsx b/src/components/Reports/ViewReportsByDate/ViewReportsByDate.jsx index 0ac42e2796..5c4c2ee133 100644 --- a/src/components/Reports/ViewReportsByDate/ViewReportsByDate.jsx +++ b/src/components/Reports/ViewReportsByDate/ViewReportsByDate.jsx @@ -4,7 +4,7 @@ import DatePicker from 'react-datepicker'; import { Button } from 'reactstrap'; import { boxStyle, boxStyleDark } from '~/styles'; import 'react-datepicker/dist/react-datepicker.css'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; class ViewReportByDate extends Component { constructor(props) { diff --git a/src/components/SearchProjectByPerson/SearchProjectByPerson.jsx b/src/components/SearchProjectByPerson/SearchProjectByPerson.jsx index 6a593fcdaf..6bdda67aac 100644 --- a/src/components/SearchProjectByPerson/SearchProjectByPerson.jsx +++ b/src/components/SearchProjectByPerson/SearchProjectByPerson.jsx @@ -1,7 +1,12 @@ import { useState } from 'react'; import { useSelector } from 'react-redux'; -export default function SearchProjectByPerson({ onSearch, suggestions, onSelectSuggestion }) { +export default function SearchProjectByPerson({ + onSearch, + suggestions, + onSelectSuggestion, + searchMode, +}) { const [inputValue, setInputValue] = useState(''); // Keep track of input value const [showSuggestions, setShowSuggestions] = useState(false); // Control whether suggestions are shown const darkMode = useSelector(state => state.theme.darkMode); @@ -39,7 +44,7 @@ export default function SearchProjectByPerson({ onSearch, suggestions, onSelectS diff --git a/src/components/TeamLocations/AddOrEditPopup.jsx b/src/components/TeamLocations/AddOrEditPopup.jsx index 585af44148..f5cfdd54e7 100644 --- a/src/components/TeamLocations/AddOrEditPopup.jsx +++ b/src/components/TeamLocations/AddOrEditPopup.jsx @@ -7,7 +7,7 @@ import Input from '~/components/common/Input'; import { createLocation, editLocation } from '~/services/mapLocationsService'; import { ENDPOINTS } from '~/utils/URL'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import CustomInput from './CustomInput'; const initialLocationData = { diff --git a/src/components/TeamLocations/ListUsersPopUp.jsx b/src/components/TeamLocations/ListUsersPopUp.jsx index dbc53eb1a3..13b3c899bc 100644 --- a/src/components/TeamLocations/ListUsersPopUp.jsx +++ b/src/components/TeamLocations/ListUsersPopUp.jsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { useSelector } from 'react-redux'; import { Button, Modal, ModalHeader, ModalFooter, ModalBody } from 'reactstrap'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; function ListUsersPopUp({ open, onClose, userProfiles, removeUser, setEdit }) { const darkMode = useSelector(state => state.theme.darkMode); diff --git a/src/components/TeamMemberTasks/ReviewButton.jsx b/src/components/TeamMemberTasks/ReviewButton.jsx index b2c30f7841..5e7e91ad1b 100644 --- a/src/components/TeamMemberTasks/ReviewButton.jsx +++ b/src/components/TeamMemberTasks/ReviewButton.jsx @@ -18,7 +18,7 @@ import dompurify from 'dompurify'; import styles from './style.module.css'; import style from './reviewButton.module.css'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCheck, faPencilAlt, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; import httpService from '../../services/httpService'; diff --git a/src/components/TeamMemberTasks/TeamMemberTaskIconsInfo.jsx b/src/components/TeamMemberTasks/TeamMemberTaskIconsInfo.jsx index cfe7c9961e..0b13e401f6 100644 --- a/src/components/TeamMemberTasks/TeamMemberTaskIconsInfo.jsx +++ b/src/components/TeamMemberTasks/TeamMemberTaskIconsInfo.jsx @@ -5,7 +5,7 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; import { boxStyle, boxStyleDark } from '~/styles'; import styles from './style.module.css'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import { useSelector } from 'react-redux'; import infoTaskIconContent from './infoTaskIconContent'; diff --git a/src/components/TeamMemberTasks/components/TaskChangeLogModal.jsx b/src/components/TeamMemberTasks/components/TaskChangeLogModal.jsx index 8aaa00cb93..a268befe7b 100644 --- a/src/components/TeamMemberTasks/components/TaskChangeLogModal.jsx +++ b/src/components/TeamMemberTasks/components/TaskChangeLogModal.jsx @@ -13,7 +13,7 @@ import moment from 'moment-timezone'; import axios from 'axios'; import { boxStyleDark, boxStyle } from '../../../styles'; import { ENDPOINTS } from '../../../utils/URL'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; function TaskChangeLogModal({ isOpen, toggle, task, darkMode }) { const [changeLogs, setChangeLogs] = useState([]); diff --git a/src/components/TeamMemberTasks/components/TaskCompletedModal.jsx b/src/components/TeamMemberTasks/components/TaskCompletedModal.jsx index fe3e7bfa84..a87ac3e8a7 100644 --- a/src/components/TeamMemberTasks/components/TaskCompletedModal.jsx +++ b/src/components/TeamMemberTasks/components/TaskCompletedModal.jsx @@ -1,7 +1,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import React, { useState } from 'react'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; import { toast } from 'react-toastify'; const TaskCompletedModal = React.memo(props => { diff --git a/src/components/TeamMemberTasks/components/TaskDifferenceModal.jsx b/src/components/TeamMemberTasks/components/TaskDifferenceModal.jsx index bba680d9af..534c3b0e24 100644 --- a/src/components/TeamMemberTasks/components/TaskDifferenceModal.jsx +++ b/src/components/TeamMemberTasks/components/TaskDifferenceModal.jsx @@ -1,7 +1,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import DiffedText from './DiffedText'; import { boxStyleDark, boxStyle } from '~/styles'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; export const resourcesToString = resources => { if (!resources) { diff --git a/src/components/Teams/CreateNewTeamPopup.jsx b/src/components/Teams/CreateNewTeamPopup.jsx index 4369564116..8b693bf77e 100644 --- a/src/components/Teams/CreateNewTeamPopup.jsx +++ b/src/components/Teams/CreateNewTeamPopup.jsx @@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Alert } from 'reactstrap'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; export const CreateNewTeamPopup = React.memo(props => { const darkMode = useSelector(state => state.theme.darkMode); diff --git a/src/components/Teams/DeleteTeamPopup.jsx b/src/components/Teams/DeleteTeamPopup.jsx index 45fd05d448..7629e7dcfa 100644 --- a/src/components/Teams/DeleteTeamPopup.jsx +++ b/src/components/Teams/DeleteTeamPopup.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import { connect, useSelector } from 'react-redux'; import hasPermission from '~/utils/permissions'; diff --git a/src/components/Teams/TeamMembersPopup.jsx b/src/components/Teams/TeamMembersPopup.jsx index ce1c658610..ba471cb641 100644 --- a/src/components/Teams/TeamMembersPopup.jsx +++ b/src/components/Teams/TeamMembersPopup.jsx @@ -11,7 +11,7 @@ import { } from 'reactstrap'; import hasPermission from '~/utils/permissions'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import moment from 'moment'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons'; diff --git a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx index 5bd962dd5c..731ad3a4c6 100644 --- a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx +++ b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx @@ -35,7 +35,7 @@ import TangibleInfoModal from './TangibleInfoModal'; import ReminderModal from './ReminderModal'; import TimeLogConfirmationModal from './TimeLogConfirmationModal'; import { ENDPOINTS } from '~/utils/URL'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; import { updateIndividualTaskTime } from '../../TeamMemberTasks/actions'; // Images are not allowed in timelog diff --git a/src/components/Timer/Timer.jsx b/src/components/Timer/Timer.jsx index 1c7dfcc554..3ba66db863 100644 --- a/src/components/Timer/Timer.jsx +++ b/src/components/Timer/Timer.jsx @@ -16,7 +16,7 @@ import { toast } from 'react-toastify'; import cs from 'classnames'; import { connect, useDispatch } from 'react-redux'; import css from './Timer.module.css'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import { ENDPOINTS } from '~/utils/URL'; import config from '../../config.json'; import TimeEntryForm from '../Timelog/TimeEntryForm'; diff --git a/src/components/TotalOrgSummary/TotalOrgSummary.jsx b/src/components/TotalOrgSummary/TotalOrgSummary.jsx index 01a413f525..d7be79d5a5 100644 --- a/src/components/TotalOrgSummary/TotalOrgSummary.jsx +++ b/src/components/TotalOrgSummary/TotalOrgSummary.jsx @@ -27,7 +27,7 @@ import hasPermission from '~/utils/permissions'; // actions import { getTotalOrgSummary } from '~/actions/totalOrgSummary'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import styles from './TotalOrgSummary.module.css'; import { clsx } from 'clsx'; import VolunteerHoursDistribution from './VolunteerHoursDistribution/VolunteerHoursDistribution'; diff --git a/src/components/UserManagement/ActivationDatePopup.jsx b/src/components/UserManagement/ActivationDatePopup.jsx index 3bef216ae5..28beb1490c 100644 --- a/src/components/UserManagement/ActivationDatePopup.jsx +++ b/src/components/UserManagement/ActivationDatePopup.jsx @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Alert } from 'reactstrap'; import { boxStyle, boxStyleDark } from '../../styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; /** * Modal popup to show the user profile in create mode */ diff --git a/src/components/UserManagement/ActiveInactiveConfirmationPopup.jsx b/src/components/UserManagement/ActiveInactiveConfirmationPopup.jsx index ebe2008d71..5e91d35a6b 100644 --- a/src/components/UserManagement/ActiveInactiveConfirmationPopup.jsx +++ b/src/components/UserManagement/ActiveInactiveConfirmationPopup.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import { USER_STATUS_CHANGE_CONFIRMATION } from '../../languages/en/messages'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; /** * Modal popup to show the user profile to confirm activation/deactivtion diff --git a/src/components/UserManagement/DeleteUserPopup.jsx b/src/components/UserManagement/DeleteUserPopup.jsx index 9b940d0d78..224c6cc16d 100644 --- a/src/components/UserManagement/DeleteUserPopup.jsx +++ b/src/components/UserManagement/DeleteUserPopup.jsx @@ -15,7 +15,7 @@ import { import hasPermission from '../../utils/permissions'; import { CLOSE } from '../../languages/en/ui'; import { boxStyle, boxStyleDark } from '../../styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; /** * Modal popup to delete the user profile diff --git a/src/components/UserManagement/NewUserPopup.jsx b/src/components/UserManagement/NewUserPopup.jsx index 8a2d9bc0eb..92a511cdf2 100644 --- a/src/components/UserManagement/NewUserPopup.jsx +++ b/src/components/UserManagement/NewUserPopup.jsx @@ -5,7 +5,7 @@ import { connect } from 'react-redux'; import EditableInfoModal from '../UserProfile/EditableModal/EditableInfoModal'; import AddNewUserProfile from '../UserProfile/AddNewUserProfile'; import { boxStyle, boxStyleDark } from '../../styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; /** * Modal popup to show the user profile in create mode diff --git a/src/components/UserManagement/ResetPasswordPopup.jsx b/src/components/UserManagement/ResetPasswordPopup.jsx index 2906154b13..953291b983 100644 --- a/src/components/UserManagement/ResetPasswordPopup.jsx +++ b/src/components/UserManagement/ResetPasswordPopup.jsx @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, Form } from 'reactstrap'; import Input from '../common/Input'; import { boxStyle, boxStyleDark } from '../../styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; /** * Modal popup to show the reset password action */ diff --git a/src/components/UserManagement/SetUpFinalDayPopUp.jsx b/src/components/UserManagement/SetUpFinalDayPopUp.jsx index db7af6f718..4e919a4b82 100644 --- a/src/components/UserManagement/SetUpFinalDayPopUp.jsx +++ b/src/components/UserManagement/SetUpFinalDayPopUp.jsx @@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from 'react'; // import { useSelector } from 'react-redux'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Alert } from 'reactstrap'; import { boxStyleDark, boxStyle } from '../../styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; /** * Modal popup to show the user profile in create mode */ diff --git a/src/components/UserManagement/SetupHistoryPopup.jsx b/src/components/UserManagement/SetupHistoryPopup.jsx index 1d5c35bcbc..2e8d08bc75 100644 --- a/src/components/UserManagement/SetupHistoryPopup.jsx +++ b/src/components/UserManagement/SetupHistoryPopup.jsx @@ -5,7 +5,7 @@ import { toast } from 'react-toastify'; import Table from 'react-bootstrap/Table'; import { formatDate } from '../../utils/formatDate'; import UserTableFooter from './UserTableFooter'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import { boxStyle, boxStyleDark } from '../../styles'; import { ENDPOINTS } from '~/utils/URL'; import httpService from '../../services/httpService'; diff --git a/src/components/UserManagement/logTimeOffPopUp.jsx b/src/components/UserManagement/logTimeOffPopUp.jsx index 218822b288..aaf83a7de3 100644 --- a/src/components/UserManagement/logTimeOffPopUp.jsx +++ b/src/components/UserManagement/logTimeOffPopUp.jsx @@ -21,7 +21,7 @@ import { } from 'reactstrap'; import DatePicker from 'react-datepicker'; import { boxStyle, boxStyleDark } from '../../styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import 'react-datepicker/dist/react-datepicker.css'; import { addTimeOffRequestThunk, diff --git a/src/components/UserManagement/setupNewUserPopup.jsx b/src/components/UserManagement/setupNewUserPopup.jsx index 0750dd5a47..1796263d24 100644 --- a/src/components/UserManagement/setupNewUserPopup.jsx +++ b/src/components/UserManagement/setupNewUserPopup.jsx @@ -5,7 +5,7 @@ import { toast } from 'react-toastify'; import _ from 'lodash'; import httpService from '../../services/httpService'; import { ENDPOINTS } from '~/utils/URL'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; const SetupNewUserPopupComponent = (props) => { const darkMode = useSelector(state => state.theme.darkMode); diff --git a/src/components/UserProfile/QuickSetupModal/AddNewTitleModal.jsx b/src/components/UserProfile/QuickSetupModal/AddNewTitleModal.jsx index b4d9e521f2..b243e001e2 100644 --- a/src/components/UserProfile/QuickSetupModal/AddNewTitleModal.jsx +++ b/src/components/UserProfile/QuickSetupModal/AddNewTitleModal.jsx @@ -16,7 +16,7 @@ import { addTitle, editTitle } from '../../../actions/title'; import AssignProjectField from './AssignProjectField'; import AssignTeamField from './AssignTeamField'; import AssignTeamCodeField from './AssignTeamCodeField'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; // ---- helpers --------------------------------------------------------------- diff --git a/src/components/UserProfile/QuickSetupModal/AssignSetupModal.jsx b/src/components/UserProfile/QuickSetupModal/AssignSetupModal.jsx index 788e7cfab7..81f76de2e5 100644 --- a/src/components/UserProfile/QuickSetupModal/AssignSetupModal.jsx +++ b/src/components/UserProfile/QuickSetupModal/AssignSetupModal.jsx @@ -3,7 +3,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Label, Input } from import hasPermission from '../../../utils/permissions'; import { deleteTitleById } from '~/actions/title'; import { useSelector } from 'react-redux'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; import { toast } from "react-toastify"; function AssignSetUpModal({ isOpen, setIsOpen, title, userProfile, setUserProfile, setTitleOnSet, refreshModalTitles, updateUserProfile, handleSubmit}) { diff --git a/src/components/UserProfile/QuickSetupModal/QuickSetupModal.jsx b/src/components/UserProfile/QuickSetupModal/QuickSetupModal.jsx index d5bc392d19..40d21f345e 100644 --- a/src/components/UserProfile/QuickSetupModal/QuickSetupModal.jsx +++ b/src/components/UserProfile/QuickSetupModal/QuickSetupModal.jsx @@ -10,7 +10,7 @@ import AddNewTitleModal from './AddNewTitleModal'; import EditTitlesModal from './EditTitlesModal'; import { getAllTitle } from '../../../actions/title'; import './QuickSetupModal.css'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; import styles from '../../SummaryBar/SummaryBar.module.css' function QuickSetupModal(props) { diff --git a/src/components/UserProfile/TeamsAndProjects/AddProjectPopup.jsx b/src/components/UserProfile/TeamsAndProjects/AddProjectPopup.jsx index 3ef5430073..71c6620db5 100644 --- a/src/components/UserProfile/TeamsAndProjects/AddProjectPopup.jsx +++ b/src/components/UserProfile/TeamsAndProjects/AddProjectPopup.jsx @@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, Input } from 'reactstrap'; import AddProjectsAutoComplete from './AddProjectsAutoComplete'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; import { toast } from 'react-toastify'; import axios from 'axios'; import { ENDPOINTS } from '~/utils/URL'; diff --git a/src/components/UserProfile/TeamsAndProjects/AddTeamPopup.jsx b/src/components/UserProfile/TeamsAndProjects/AddTeamPopup.jsx index 6dd6148b5b..9bcbcbf621 100644 --- a/src/components/UserProfile/TeamsAndProjects/AddTeamPopup.jsx +++ b/src/components/UserProfile/TeamsAndProjects/AddTeamPopup.jsx @@ -4,7 +4,7 @@ import AddTeamsAutoComplete from './AddTeamsAutoComplete'; import { useDispatch } from 'react-redux'; import { toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; import { postNewTeam, getAllUserTeams } from '../../../../src/actions/allTeamsAction'; // eslint-disable-next-line import/no-named-as-default-member import axios from 'axios'; diff --git a/src/components/WeeklySummariesReport/PasswordInputModal.jsx b/src/components/WeeklySummariesReport/PasswordInputModal.jsx index da7c972451..a3858f4f4a 100644 --- a/src/components/WeeklySummariesReport/PasswordInputModal.jsx +++ b/src/components/WeeklySummariesReport/PasswordInputModal.jsx @@ -14,7 +14,7 @@ import { useSelector } from 'react-redux'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faEyeSlash, faEye } from '@fortawesome/free-solid-svg-icons'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import axios from 'axios'; import { toast } from 'react-toastify'; import { ENDPOINTS } from '~/utils/URL'; diff --git a/src/components/WeeklySummariesReport/WeeklySummariesToggleFilter.jsx b/src/components/WeeklySummariesReport/WeeklySummariesToggleFilter.jsx index 2f8222dd98..3c6b145722 100644 --- a/src/components/WeeklySummariesReport/WeeklySummariesToggleFilter.jsx +++ b/src/components/WeeklySummariesReport/WeeklySummariesToggleFilter.jsx @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import { Label } from 'reactstrap'; import styles from './WeeklySummariesReport.module.css'; import ReactTooltip from 'react-tooltip'; @@ -9,6 +10,7 @@ export default function WeeklySummariesToggleFilter({ hasPermissionToFilter, editable, formId, + hasPermission, }) { const handleTrophyToggleChange = () => { toggleField(setState, 'selectedTrophies'); @@ -64,7 +66,7 @@ export default function WeeklySummariesToggleFilter({ )} - {(hasPermissionToFilter || props.hasPermission('highlightEligibleBios')) && ( + {(hasPermissionToFilter || hasPermission?.('highlightEligibleBios')) && (
Filter by Bio Status
@@ -129,3 +131,12 @@ export default function WeeklySummariesToggleFilter({
); } + +WeeklySummariesToggleFilter.propTypes = { + state: PropTypes.object.isRequired, + setState: PropTypes.func.isRequired, + hasPermissionToFilter: PropTypes.bool, + editable: PropTypes.bool, + formId: PropTypes.string.isRequired, + hasPermission: PropTypes.func, +}; diff --git a/src/components/WeeklySummariesReport/WeeklySummaryRecepientsPopup.jsx b/src/components/WeeklySummariesReport/WeeklySummaryRecepientsPopup.jsx index 110df5bf6a..a0ea3bd7d2 100644 --- a/src/components/WeeklySummariesReport/WeeklySummaryRecepientsPopup.jsx +++ b/src/components/WeeklySummariesReport/WeeklySummaryRecepientsPopup.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Container, Alert } from 'reactstrap'; import { toast } from 'react-toastify'; // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; diff --git a/src/components/WeeklySummary/CurrentPromptModal.jsx b/src/components/WeeklySummary/CurrentPromptModal.jsx index b4cc558c50..bf2e7bed1d 100644 --- a/src/components/WeeklySummary/CurrentPromptModal.jsx +++ b/src/components/WeeklySummary/CurrentPromptModal.jsx @@ -4,7 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'react import { toast } from 'react-toastify'; import ReactTooltip from 'react-tooltip'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../Header/DarkMode.css'; +import '../Header/index.css'; import './WeeklySummary.css'; import { updateDashboardData, diff --git a/src/components/WhatWeDo/WhatWeDo.jsx b/src/components/WhatWeDo/WhatWeDo.jsx index 3e8de03f8a..4c21257d91 100644 --- a/src/components/WhatWeDo/WhatWeDo.jsx +++ b/src/components/WhatWeDo/WhatWeDo.jsx @@ -78,7 +78,6 @@ function WhatWeDoSection() { src={section.src} alt={section.title} onError={e => { - // console.log(`Failed to load image: ${section.src}`); e.target.style.display = 'none'; }} /> diff --git a/src/components/common/Modal/Modal.jsx b/src/components/common/Modal/Modal.jsx index 75692f5b36..7707171fd9 100644 --- a/src/components/common/Modal/Modal.jsx +++ b/src/components/common/Modal/Modal.jsx @@ -13,7 +13,7 @@ import { } from 'reactstrap'; import parse from 'html-react-parser'; import { boxStyle, boxStyleDark } from '~/styles'; -import '../../Header/DarkMode.css'; +import '../../Header/index.css'; // eslint-disable-next-line react/function-component-definition const ModalExample = props => {