Skip to content

Ajay fixed view, dark mode longest open issues #4499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
one-community merged 2 commits into from
Jan 4, 2026
Merged

Ajay fixed view, dark mode longest open issues #4499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58c478f
Line chart fix
naiduajaykumar Dec 5, 2025
3de6a5d
Updated yarn file
naiduajaykumar Jan 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 29 additions & 181 deletions src/components/BMDashboard/Issues/issueChart.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading
Loading