Merge pull request #4301 from OneCommunityGlobal/xinyi_fix_longest_open_issues_chart

Xinyi - fix: longst open issues chart

Author: one-community

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 */
+  }
+}