Merge pull request #4499 from OneCommunityGlobal/Ajay-darkmode-longest-open-summarycards

Ajay fixed view, dark mode longest open issues

Author: one-community

src/components/BMDashboard/Issues/issueChart.module.css

@@ -180,209 +180,57 @@
   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;
-}
+/* ---------- LIGHT MODE – FIX FADED DAYS ---------- */
 
-.dateLabelDark {
-  font-size: 14px;
-  font-weight: 500;
-  color: #cfd7e3;
+:global(.react-datepicker.lightCalendar .react-datepicker__day) {
+  color: #0f172a;
 }
 
-/* Date picker */
-.dateField {
-  width: 100%;
+:global(.react-datepicker.lightCalendar .react-datepicker__day--outside-month) {
+  color: #94a3b8; /* visible light gray */
 }
 
-.dateLight,
-.dateDark {
-  width: 100%;
-  padding: 8px 10px;
-  border-radius: 6px;
-  border: 1px solid #ccc;
-  font-size: 14px;
+:global(.react-datepicker.lightCalendar .react-datepicker__day--disabled) {
+  color: #cbd5e1;
+  opacity: 1; /* IMPORTANT */
 }
 
-.dateDark {
-  background: #22272e;
-  color: #cfd7e3;
-  border-color: #3d444d;
-}
 
-/* React select */
-.selectReact {
-  width: 100%;
-}
+/* ---------- LIGHT MODE – FIX HEADER ---------- */
 
-:global(.react-datepicker__close-icon::after) {
-  background: none;
-  color: #b9b9b9;
-  font-size: 18px;
+:global(.react-datepicker.lightCalendar .react-datepicker__header) {
+  background: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
 }
 
-/* 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;
+:global(.react-datepicker.lightCalendar .react-datepicker__current-month) {
+  color: #0f172a;
+  font-weight: 600;
 }
 
-.multiValueLabelLight {
-  color: black !important;
+:global(.react-datepicker.lightCalendar .react-datepicker__day-name) {
+  color: #475569;
 }
 
-.multiValueRemoveLight {
-  color: black !important;
+:global(.react-datepicker.lightCalendar
+  .react-datepicker__navigation-icon::before) {
+  border-color: #0f172a;
 }
 
+/* ---------- LIGHT MODE – FIX BLACK GRID BACKGROUND ---------- */
 
-/* No data text */
-.noData {
-  text-align: center;
-  color: #888;
-  font-size: 16px;
-  padding: 40px 0;
+:global(.react-datepicker.lightCalendar) {
+  background-color: #ffffff;
 }
 
-/* Loading/Error */
-.loading,
-.error {
-  text-align: center;
-  padding: 20px 0;
-  font-size: 16px;
+:global(.react-datepicker.lightCalendar .react-datepicker__month-container) {
+  background-color: #ffffff;
 }
 
-.rowLabel {
-  margin: 8px 0 8px;
-  font-weight: 600;
-  font-size: 16px;
+:global(.react-datepicker.lightCalendar .react-datepicker__month) {
+  background-color: #ffffff;
 }
 
-
-/* Responsive */
-@media (max-width: 650px) {
-  .dateRow {
-    grid-template-columns: 1fr;
-    gap: 10px;
-  }
-
-  .dateRow span.dateLabel {
-    display: none; /* hide labels for small screens */
-  }
+:global(.react-datepicker.lightCalendar .react-datepicker__week) {
+  background-color: #ffffff;
 }