From 2d54c7cf868617bb8a1cfbe898b4bea4190ab040 Mon Sep 17 00:00:00 2001 From: Alekya Jogini Date: Sat, 24 Oct 2026 17:27:08 -0400 Subject: [PATCH 1/3] Fix dark mode date inputs in Financials charts --- .../CostBreakDown/CostBreakDown.module.css | 7 +++++++ .../Financials/CostVarianceTrendGraph.module.css | 16 ++++++++-------- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css index 7f1a0490e4e..702915e7c4a 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css +++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css @@ -430,3 +430,10 @@ display: none; } } + +/* Dark mode date inputs: two classes so the global input[type='date'] rule does not override them */ +.wrapperDark .filterInput { + background-color: var(--cb-input-bg); + color: var(--cb-text-color); + color-scheme: dark; +} diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css index d7f4d28260c..f0e70146043 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css +++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css @@ -35,7 +35,7 @@ width: 100%; } -@media (max-width: 900px) { +@media (width <= 900px) { .filtersGrid { grid-template-columns: 1fr; } @@ -90,15 +90,15 @@ border-color: #4285F4; } -.darkDateInput { - background-color: #253342; - color: #fff; - border-color: #2d4059; +.dateInput.darkDateInput { + background-color: #253342 !important; + color: #fff !important; + border-color: #2d4059 !important; color-scheme: dark; } -.darkDateInput:focus { - border-color: #3a506b; +.dateInput.darkDateInput:focus { + border-color: #3a506b !important; } .dateSeparator { @@ -174,7 +174,7 @@ } .varianceOverLight { color: #e74c3c !important; } -.varianceOverDark { color: #ff4444 !important; } +.varianceOverDark { color: #f44 !important; } .varianceUnderLight { color: #2ecc71 !important; } .varianceUnderDark { color: #4ade80 !important; } \ No newline at end of file From 59d3860d0aa2f3f052d356009e90c0edbdc0b11c Mon Sep 17 00:00:00 2001 From: Alekya Jogini Date: Thu, 29 Oct 2026 21:27:51 -0400 Subject: [PATCH 2/3] Scope global date picker rule to Reason of Stoppage chart and remove important flags --- .../Financials/CostVarianceTrendGraph.module.css | 12 ++++++------ .../ToolsStoppageHorizontalBarChart.module.css | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css index f0e70146043..328a5629de6 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css +++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css @@ -75,7 +75,7 @@ width: 100%; } -.dateInput { +.datePickerWrapper .dateInput { width: 100%; padding: 8px 30px 8px 12px; border-radius: 6px; @@ -86,19 +86,19 @@ outline: none; } -.dateInput:focus { +.datePickerWrapper .dateInput:focus { border-color: #4285F4; } .dateInput.darkDateInput { - background-color: #253342 !important; - color: #fff !important; - border-color: #2d4059 !important; + background-color: #253342; + color: #fff; + border-color: #2d4059; color-scheme: dark; } .dateInput.darkDateInput:focus { - border-color: #3a506b !important; + border-color: #3a506b; } .dateSeparator { diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css index bcbb1248044..6617401682c 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css +++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css @@ -8,7 +8,7 @@ /* Base styles define size - dark mode only changes colors */ :global(.datePickerInput), -:global(.react-datepicker-wrapper input), +.datepickerWrapper :global(.react-datepicker-wrapper input), :global(.react-datepicker-wrapper .datePickerInput) { font-size: 13px !important; padding: 8px 12px !important; From d67561c7cdd4a05af0e3328d0878ee8c4ccf0def Mon Sep 17 00:00:00 2001 From: Alekya Jogini Date: Thu, 5 Nov 2026 23:22:10 -0500 Subject: [PATCH 3/3] Remove invert filter so the Cost Breakdown calendar icon stays light in dark mode --- .../Financials/CostBreakDown/CostBreakDown.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css index 702915e7c4a..3923a7283cf 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css +++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css @@ -347,7 +347,7 @@ } .wrapperDark .filterInput[type='date']::-webkit-calendar-picker-indicator { - filter: invert(1) opacity(0.8); + filter: opacity(0.8); } /* ===================== Responsive ===================== */