From b9ba7ba29cefb0cb2e7838cf93344f74ef85da34 Mon Sep 17 00:00:00 2001 From: shashankm9 Date: Thu, 19 Mar 2026 21:29:49 -0500 Subject: [PATCH 1/2] fix: match no-show insights tab and percentage styling to Figma --- .../Participation/Participation.module.css | 202 ++++++++++-------- 1 file changed, 116 insertions(+), 86 deletions(-) diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css index d250be26a1..6150ff1aba 100644 --- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css +++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css @@ -1,6 +1,6 @@ /* ---------- General Styling ---------- */ .body { - font-family: 'Arial', sans-serif; + font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; @@ -15,7 +15,7 @@ max-width: 90%; margin: 0 auto; background-color: #1b2a41; - color: #ffffff; + color: #fff; } /* ---------- Page Header ---------- */ @@ -38,7 +38,7 @@ .landingPageHeaderDark { font-size: 2.2rem; font-weight: 700; - color: #ffffff !important; + color: #fff !important; letter-spacing: 0.5px; } @@ -75,7 +75,7 @@ transform: translateY(-1px); } -@media (max-width: 768px) { +@media (width <= 768px) { .landingPageHeaderContainer { flex-direction: column; align-items: center; @@ -138,7 +138,7 @@ background: white; border: 1px solid #ddd; border-radius: 5px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 4px rgb(0 0 0 / 10%); } /* ---------- Analytics Section ---------- */ @@ -155,9 +155,9 @@ .insights { flex: 1; min-width: 48%; - background-color: #ffffff; + background-color: #fff; border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 8px rgb(0 0 0 / 10%); padding: 20px; box-sizing: border-box; } @@ -167,15 +167,15 @@ flex: 1; min-width: 48%; background-color: #1c2541; - color: #ffffff; + color: #fff; border-radius: 10px; border: 1px solid #ddd; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 8px rgb(0 0 0 / 10%); padding: 20px; box-sizing: border-box; } -@media (max-width: 768px) { +@media (width <= 768px) { .analyticsSection { flex-wrap: wrap; } @@ -199,7 +199,7 @@ justify-content: space-between; align-items: center; margin-bottom: 20px; - color: #ffffff; + color: #fff; } .trackingHeader h3 { @@ -209,7 +209,7 @@ } .trackingHeaderDark h3 { - color: #ffffff; + color: #fff; font-size: 1.3rem; margin: 0; } @@ -272,12 +272,12 @@ border-radius: 10px; width: 48%; padding: 10px; - color: #ffffff; + color: #fff; } .trackingRateDark .trackingRateSubheading span, .trackingRateDark .trackingRateValue span { - color: #ffffff; + color: #fff; } .trackingRateValue { @@ -295,6 +295,7 @@ padding: 10px; background: #fff; } + .trackingListContainerDark { max-height: 600px; overflow-y: auto; @@ -302,14 +303,14 @@ border-radius: 10px; padding: 10px; background: #3a506b; - color: #ffffff; + color: #fff; } .trackingTable { width: 100%; border-collapse: collapse; table-layout: fixed; - word-wrap: break-word; + overflow-wrap: break-word; } .trackingTable thead th { @@ -320,7 +321,7 @@ .trackingTableDark thead th { background: #1c2541; - color: #ffffff; + color: #fff; } .trackingTable tbody td { @@ -345,8 +346,9 @@ display: flex; justify-content: space-between; } + .insightsHeaderDark { - color: #ffffff; + color: #fff; font-weight: bold; margin-bottom: 15px; display: flex; @@ -358,8 +360,9 @@ color: #333; margin: 0; } + .insightsHeaderDark h3 { - color: #ffffff; + color: #fff; font-size: 1.3rem; margin: 0; } @@ -392,10 +395,13 @@ .insightsTabs { flex: 1; display: flex; - border: 1px solid #ccc; - border-radius: 5px; - overflow: hidden; + background-color: #f0f0f0; + border-radius: 8px; + padding: 4px; + gap: 2px; max-width: 60%; + border: none; + overflow: visible; } .insightsTabsContainer{ @@ -413,11 +419,14 @@ .insightsTab { flex: 1; text-align: center; - padding: 10px 0; + padding: 6px 12px; font-size: 0.9rem; border: none; + border-radius: 6px; cursor: pointer; - transition: background-color 0.3s, color 0.3s; + background-color: transparent; + color: #374151 !important; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .insightsTabLight{ @@ -439,33 +448,42 @@ } .insightsTab:not(:last-child) { - border-right: 1px solid #ccc; + border-right: none; } .insightsTab.activeTab { - border-radius: 4px; - background-color: #007bff; - color: #fff; - font-weight: bold; + background-color: #fff; + color: #111 !important; + font-weight: 600; + box-shadow: 0 1px 4px rgb(0 0 0 / 15%); } -.insightsTab:hover { - background-color: #e0e0e0; +.insightsDark .insightsTab { + background-color: transparent; + color: #94a3b8 !important; + border-right: none; } -.insightsDark .insightsTab { - background-color: #3A506B; - color: #ffffff; - border-right: 1px solid #555; +.insightsTab:hover:not(.activeTab) { + background-color: #e4e4e4; } -.insightsDark .insightsTab:hover { - background-color: #4A607B; +.insightsDark .insightsTab:hover:not(.activeTabDarkMode) { + background-color: rgb(255 255 255 / 8%); } .insightsDark .insightsTab.activeTab { - background-color: #007bff; - color: #fff; + background-color: #e2e8f0; + color: #1e293b !important; + font-weight: 600; + box-shadow: 0 1px 6px rgb(0 0 0 / 50%); +} + +.insightsDark .insightsTab.activeTabDarkMode { + background-color: #e2e8f0 !important; + color: #1e293b !important; + font-weight: 600; + box-shadow: 0 1px 6px rgb(0 0 0 / 50%); } .insightsContent { @@ -487,12 +505,14 @@ color: #555; margin-right: 10px; } + .insightLabelDark { - color: #ffffff; + color: #fff; font-size: 0.9rem; flex: 1; margin-right: 10px; } + .insightBar { flex: 2; height: 8px; @@ -511,15 +531,15 @@ transition: width 0.3s ease-in-out; } -.insightPercentage { +.insightsPercentage { font-size: 0.9rem; - font-weight: bold; - color: #333; + color: red; } .insightsPercentageDark { - color: #ffffff; - } + font-size: 0.9rem; + color: red; +} .tooltipWrapper { position: relative; @@ -552,7 +572,7 @@ .modalOverlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.45); + background: rgb(0 0 0 / 45%); display: flex; justify-content: center; align-items: center; @@ -648,9 +668,17 @@ /* ---------- PDF/Print helpers ---------- */ -.pageBreakBefore { break-before: page; page-break-before: always; } -.pageBreakAfter { break-after: page; page-break-after: always; } -.avoidBreak { break-inside: avoid; page-break-inside: avoid; } +.pageBreakBefore { + break-before: page; +} + +.pageBreakAfter { + break-after: page; +} + +.avoidBreak { + break-inside: avoid; +} /* Use :global for data attributes and print styles */ :global(html[data-exporting="true"]) .caseCards:global(.expanded), @@ -663,18 +691,19 @@ /* Dark mode container */ .insightsTabsDarkMode { - border: 1px solid #555; - background-color: #1e293b; /* Dark background */ + border: none; + background-color: #334155; } + /* Dark mode tab */ .insightsTabDarkMode { - color: #ddd; - background-color: #1e293b; + color: #94a3b8 !important; + background-color: transparent; } /* Dark mode divider */ .insightsTabDarkMode:not(:last-child) { - border-right: 1px solid #555; + border-right: none; } .printOnly { @@ -682,9 +711,9 @@ } /* Print styles using global selectors */ + /* Print styles using global selectors */ @media print { - /* Hide everything except the participation component */ :global(body > *:not(#root)) { display: none !important; @@ -694,6 +723,19 @@ display: none !important; } + /* Force proper backgrounds for all elements */ + .participationLandingPage, + .participationLandingPage * { + -webkit-print-color-adjust: exact !important; + print-color-adjust: exact !important; + } + + /* Light mode styles for print */ + .participationLandingPage { + background: white !important; + color: #333 !important; + } + /* Sonar fix: avoid duplicate selector by scoping the print version */ :global(#root) .participationLandingPage { max-width: 100% !important; @@ -705,6 +747,7 @@ @page { size: auto; + /* Use auto instead of Letter to allow multiple pages */ margin: 0.5in; } @@ -736,24 +779,24 @@ display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; - page-break-inside: auto !important; + break-inside: auto !important; } /* Allow cards to break across pages */ :global(.case-card-global) { break-inside: avoid-page !important; - page-break-inside: avoid !important; + break-inside: avoid !important; height: auto !important; } /* Allow list items to break across pages */ :global(.case-list-global) { - page-break-inside: auto !important; + break-inside: auto !important; } :global(.case-list-item-global) { break-inside: avoid-page !important; - page-break-inside: avoid !important; + break-inside: avoid !important; } /* Remove scroll containers for print */ @@ -767,12 +810,10 @@ /* Avoid breaking elements */ :global(.tracking-table-global) tr { break-inside: avoid; - page-break-inside: avoid; } .insightItem { break-inside: avoid; - page-break-inside: avoid; } /* Hide non-print elements */ @@ -796,26 +837,13 @@ :global(.tracking-table-global-dark) thead th { background: #1C2541 !important; - color: #ffffff !important; + color: #fff !important; } .printOnly { display: block !important; } - /* Force proper backgrounds for all elements */ - .participationLandingPage, - .participationLandingPage * { - -webkit-print-color-adjust: exact !important; - print-color-adjust: exact !important; - } - - /* Light mode styles for print */ - .participationLandingPage { - background: white !important; - } - - :global(#root) .case-card-global { background: white !important; color: #333 !important; @@ -837,40 +865,40 @@ /* Dark mode styles for print */ .participationLandingPageDark { background: #1B2A41 !important; - color: #ffffff !important; + color: #fff !important; } .participationLandingPageDark :global(.case-card-global) { background: #3A506B !important; - color: #ffffff !important; + color: #fff !important; border: 1px solid #555 !important; } .participationLandingPageDark .trackingContainerDark { background: #1C2541 !important; - color: #ffffff !important; + color: #fff !important; border: 1px solid #555 !important; } .participationLandingPageDark .insightsDark { background: #1C2541 !important; - color: #ffffff !important; + color: #fff !important; border: 1px solid #555 !important; } .participationLandingPageDark .trackingListContainerDark { background: #3A506B !important; - color: #ffffff !important; + color: #fff !important; } .participationLandingPageDark :global(.tracking-table-global-dark) thead th { background: #1C2541 !important; - color: #ffffff !important; + color: #fff !important; } .participationLandingPageDark .trackingRateDark { background: #3A506B !important; - color: #ffffff !important; + color: #fff !important; } /* Event badge colors for print */ @@ -918,14 +946,16 @@ .participationLandingPageDark .attendeesCountDark, .participationLandingPageDark .insightsLabelDark, .participationLandingPageDark .insightsPercentageDark { - color: #ffffff !important; + color: #fff !important; } } + /* Active tab dark mode */ .activeTabDarkMode { - background-color: #3b82f6; - color: #fff; - font-weight: bold; + background-color: #e2e8f0; + color: #1e293b !important; + font-weight: 600; + box-shadow: 0 1px 6px rgb(0 0 0 / 50%); } /* Hover effect dark mode */ From 19d85c84a4b5b799ec376aec60e5219e293aee42 Mon Sep 17 00:00:00 2001 From: shashankm9 Date: Tue, 21 Apr 2026 21:55:57 -0500 Subject: [PATCH 2/2] Fix lint errors in DropOffTracking --- .../Reports/Participation/DropOffTracking.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx index b1b8def2bf..fb41263ef3 100644 --- a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx +++ b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx @@ -136,8 +136,12 @@ function DropOffTracking() { {filteredEvents.map(event => ( {event.eventName} - {event.noShowRate} - {event.dropOffRate} + + {event.noShowRate} + + + {event.dropOffRate} +