Skip to content

Commit ee7d64d

Browse files
JuliaHa0902JuliaHa0902
committed
Fixed dark mode
1 parent f7a1930 commit ee7d64d

3 files changed

Lines changed: 96 additions & 100 deletions

File tree

‎src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
.paid-labor-cost-container {
33
font-family: inherit;
44
padding: 10px;
5-
background-color: #fff;
65
border-radius: 8px;
76
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
87
}

‎src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.jsx‎

Lines changed: 95 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -313,109 +313,106 @@ export default function PaidLaborCost() {
313313
};
314314

315315
return (
316-
<div>
317-
<div className={`paid-labor-cost-container ${darkMode ? 'dark-mode' : ''}`}>
318-
<h4 className="paid-labor-cost-title">Paid Labor Cost</h4>
319-
320-
{/* Loading indicator */}
321-
{loading ? (
322-
<div className="paid-labor-cost-loading">Loading data...</div>
323-
) : (
324-
<>
325-
{/* Filter Row */}
326-
<div className="paid-labor-cost-filters">
327-
{/* Task Filter */}
328-
<div className="paid-labor-cost-filter-group">
329-
<label className="paid-labor-cost-filter-label" htmlFor="task-filter">
330-
Tasks
331-
</label>
332-
<select
333-
id="task-filter"
334-
value={taskFilter}
335-
onChange={e => setTaskFilter(e.target.value)}
336-
className="paid-labor-cost-filter-select"
337-
>
338-
<option value="ALL">ALL</option>
339-
{taskOptions.map(option => (
340-
<option key={option.id} value={option.value}>
341-
{option.value}
342-
</option>
343-
))}
344-
</select>
345-
</div>
346-
347-
{/* Project Filter */}
348-
<div className="paid-labor-cost-filter-group">
349-
<label className="paid-labor-cost-filter-label" htmlFor="project-filter">
350-
Project
351-
</label>
352-
<select
353-
id="project-filter"
354-
value={projectFilter}
355-
onChange={e => setProjectFilter(e.target.value)}
356-
className="paid-labor-cost-filter-select"
357-
>
358-
<option value="All Projects">ALL</option>
359-
{projectOptions.map(option => (
360-
<option key={option.id} value={option.value}>
361-
{option.value}
362-
</option>
363-
))}
364-
</select>
365-
</div>
366-
367-
{/* Date Filter */}
368-
<div className="paid-labor-cost-filter-group">
369-
<label className="paid-labor-cost-filter-label" htmlFor="date-filter">
370-
Dates
371-
</label>
372-
<select
373-
id="date-filter"
374-
value={dateMode}
375-
onChange={e => {
376-
setDateMode(e.target.value);
377-
// Reset date range when the date filter changes
378-
setDateRange({ startDate: null, endDate: null });
379-
}}
380-
className="paid-labor-cost-filter-select"
381-
>
382-
{dateOptions.map(option => (
383-
<option key={option.id} value={option.value}>
384-
{option.label}
385-
</option>
386-
))}
387-
</select>
388-
</div>
316+
<div className={`paid-labor-cost-container ${darkMode ? 'dark-mode' : ''}`}>
317+
<h4 className="paid-labor-cost-title">Paid Labor Cost</h4>
318+
319+
{/* Loading indicator */}
320+
{loading ? (
321+
<div className="paid-labor-cost-loading">Loading data...</div>
322+
) : (
323+
<>
324+
{/* Filter Row */}
325+
<div className="paid-labor-cost-filters">
326+
{/* Task Filter */}
327+
<div className="paid-labor-cost-filter-group">
328+
<label className="paid-labor-cost-filter-label" htmlFor="task-filter">
329+
Tasks
330+
</label>
331+
<select
332+
id="task-filter"
333+
value={taskFilter}
334+
onChange={e => setTaskFilter(e.target.value)}
335+
className="paid-labor-cost-filter-select"
336+
>
337+
<option value="ALL">ALL</option>
338+
{taskOptions.map(option => (
339+
<option key={option.id} value={option.value}>
340+
{option.value}
341+
</option>
342+
))}
343+
</select>
344+
</div>
345+
346+
{/* Project Filter */}
347+
<div className="paid-labor-cost-filter-group">
348+
<label className="paid-labor-cost-filter-label" htmlFor="project-filter">
349+
Project
350+
</label>
351+
<select
352+
id="project-filter"
353+
value={projectFilter}
354+
onChange={e => setProjectFilter(e.target.value)}
355+
className="paid-labor-cost-filter-select"
356+
>
357+
<option value="All Projects">ALL</option>
358+
{projectOptions.map(option => (
359+
<option key={option.id} value={option.value}>
360+
{option.value}
361+
</option>
362+
))}
363+
</select>
389364
</div>
390365

391-
{/* Our Custom DateRangePicker shown in CUSTOM mode - replacing Airbnb DateRangePicker */}
392-
{dateMode === 'CUSTOM' && (
393-
<div className="paid-labor-cost-daterange-row">
394-
<PaidLaborCostDatePicker
395-
startDate={dateRange.startDate}
396-
endDate={dateRange.endDate}
397-
onDatesChange={handleDateRangeChange}
398-
minDate={new Date(1980, 0, 1)}
399-
placeholder="Select date range"
400-
/>
401-
</div>
402-
)}
403-
404-
{/* Chart Container */}
405-
<div className="paid-labor-cost-chart-scroll-wrapper">
406-
<div
407-
style={{
408-
width:
409-
tasksToInclude.length > 3 ? `${(tasksToInclude.length + 1) * 50}px` : '100%',
410-
height: '300px',
366+
{/* Date Filter */}
367+
<div className="paid-labor-cost-filter-group">
368+
<label className="paid-labor-cost-filter-label" htmlFor="date-filter">
369+
Dates
370+
</label>
371+
<select
372+
id="date-filter"
373+
value={dateMode}
374+
onChange={e => {
375+
setDateMode(e.target.value);
376+
// Reset date range when the date filter changes
377+
setDateRange({ startDate: null, endDate: null });
411378
}}
379+
className="paid-labor-cost-filter-select"
412380
>
413-
<Bar data={chartData} options={options} />
414-
</div>
381+
{dateOptions.map(option => (
382+
<option key={option.id} value={option.value}>
383+
{option.label}
384+
</option>
385+
))}
386+
</select>
387+
</div>
388+
</div>
389+
390+
{/* Our Custom DateRangePicker shown in CUSTOM mode - replacing Airbnb DateRangePicker */}
391+
{dateMode === 'CUSTOM' && (
392+
<div className="paid-labor-cost-daterange-row">
393+
<PaidLaborCostDatePicker
394+
startDate={dateRange.startDate}
395+
endDate={dateRange.endDate}
396+
onDatesChange={handleDateRangeChange}
397+
minDate={new Date(1980, 0, 1)}
398+
placeholder="Select date range"
399+
/>
400+
</div>
401+
)}
402+
403+
{/* Chart Container */}
404+
<div className="paid-labor-cost-chart-scroll-wrapper">
405+
<div
406+
style={{
407+
width: tasksToInclude.length > 3 ? `${(tasksToInclude.length + 1) * 50}px` : '100%',
408+
height: '300px',
409+
}}
410+
>
411+
<Bar data={chartData} options={options} />
415412
</div>
416-
</>
417-
)}
418-
</div>
413+
</div>
414+
</>
415+
)}
419416
</div>
420417
);
421418
}

‎src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,7 @@ export default function WeeklyProjectSummary() {
391391
};
392392

393393
return (
394-
<div className={`weekly-project-summary-container ${darkMode ? 'dark-mode' : ''}`}>
394+
<div className={`${styles.weeklyProjectSummaryContainer} ${darkMode ? styles.darkMode : ''}`}>
395395
<WeeklyProjectSummaryHeader handleSaveAsPDF={handleSaveAsPDF} />
396396
<div className={`${styles.weeklyProjectSummaryDashboardContainer}`}>
397397
<div className={`${styles.weeklyProjectSummaryDashboardGrid}`}>

0 commit comments

Comments
 (0)