fix: (PRIORITY HIGH) Yagna: Volunteer Hours Distribution Chart Shows Incorrect Totals and Misleading Visualization

Author: RoshiniSeelamsetty

src/components/TotalOrgSummary/AccordianWrapper/AccordianWrapper.module.css

@@ -35,12 +35,12 @@
 }
 :global(.Collapsible__trigger:before) {
   display: inline-block;
-  content: '▾';
+  font-family: 'FontAwesome', sans-serif;
+  content: '\f107';
   margin-right: 40px;
   transition: transform 300ms;
-  font-size: 34px;
-  color: currentColor;
-  opacity: 0.7;
+  font-size: 45px;
+  color: #ccc;
   font-weight: normal;
 }
 :global(.Collapsible__trigger.is-open:before) {

src/components/TotalOrgSummary/TotalOrgSummary.module.css

@@ -1,17 +1,21 @@
+/* stylelint-disable no-descending-specificity */
+
 /* Chart labels stay dark in dark mode for readability against light label chips */
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer .recharts-wrapper text,
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer .recharts-wrapper tspan {
   fill: #000 !important;
   color: #000 !important;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25), 0 0 2px #fff;
+  text-shadow: 1px 1px 3px rgb(0 0 0 / 25%), 0 0 2px #fff;
 }
+
 /* Chart and graph titles/text should be white in dark mode for visibility */
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer h3,
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer p,
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer .totalOrgChartTitle,
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer .volunteerStatusGrid h3 {
   color: #fff !important;
 }
+
 .containerTotalOrgWrapper {
   min-height: 100%;
   background-color: #fff;
@@ -109,13 +113,13 @@
   :global(.dropdown-toggle):hover {
   background-color: #5a359a !important;
   transform: translateY(-2px) !important;
-  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.4) !important;
+  box-shadow: 0 4px 12px rgb(111 66 193 / 40%) !important;
 }
 
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .reportHeaderActions :global(.dropdown-menu) {
   background-color: #34495e !important;
   border: 1px solid #6f42c1 !important;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
+  box-shadow: 0 8px 25px rgb(0 0 0 / 30%) !important;
 }
 
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .reportHeaderActions :global(.dropdown-item) {
@@ -135,13 +139,13 @@
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .reportHeaderActions button {
   background-color: #007bff !important;
   color: white !important;
-  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3) !important;
+  box-shadow: 0 2px 6px rgb(0 123 255 / 30%) !important;
 }
 
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .reportHeaderActions button:hover {
   background-color: #0056b3 !important;
   transform: translateY(-2px) !important;
-  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
+  box-shadow: 0 4px 12px rgb(0 123 255 / 40%) !important;
 }
 
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer {
@@ -197,8 +201,8 @@
   .componentContainer
   :global(.hours-distribution-label-dark)
   tspan {
-  fill: #111111 !important;
-  color: #111111 !important;
+  fill: #111 !important;
+  color: #111 !important;
 }
 
 .containerTotalOrgWrapper:global(.bg-oxford-blue)
@@ -208,8 +212,8 @@
   .componentContainer
   :global(.hours-distribution-label-light)
   tspan {
-  fill: #ffffff !important;
-  color: #ffffff !important;
+  fill: #fff !important;
+  color: #fff !important;
 }
 
 .containerTotalOrgWrapper.bg-oxford-blue h3 {
@@ -218,7 +222,7 @@
 
 .pageRow {
   width: 100% !important;
-  margin: 1px 10px 15px 10px;
+  margin: 1px 10px 15px;
 }
 
 /* Header section styles */
@@ -267,8 +271,9 @@
 
 /* Dark mode header styling */
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .reportHeaderTitle h3 {
-  color: #ffffff !important;
+  color: #fff !important;
 }
+
 .reportHeaderActions {
   display: flex;
   align-items: center;
@@ -299,18 +304,18 @@
   min-width: 120px !important;
   background-color: #6f42c1 !important;
   color: white !important;
-  box-shadow: 0 2px 6px rgba(111, 66, 193, 0.3) !important;
+  box-shadow: 0 2px 6px rgb(111 66 193 / 30%) !important;
 }
 
 .reportHeaderActions :global(.dropdown-toggle):hover {
   background-color: #5a359a !important;
   transform: translateY(-2px) !important;
-  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.4) !important;
+  box-shadow: 0 4px 12px rgb(111 66 193 / 40%) !important;
 }
 
 .reportHeaderActions :global(.dropdown-toggle):focus {
   outline: none !important;
-  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.3) !important;
+  box-shadow: 0 0 0 3px rgb(111 66 193 / 30%) !important;
 }
 
 /* Beautiful button styling */
@@ -328,35 +333,35 @@
   min-height: 44px !important;
   background-color: #007bff !important;
   color: white !important;
-  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3) !important;
+  box-shadow: 0 2px 6px rgb(0 123 255 / 30%) !important;
   text-transform: none !important;
   letter-spacing: 0.3px !important;
 }
 
 .reportHeaderActions button:hover {
   background-color: #0056b3 !important;
   transform: translateY(-2px) !important;
-  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
+  box-shadow: 0 4px 12px rgb(0 123 255 / 40%) !important;
 }
 
 .reportHeaderActions button:disabled {
   background-color: #6c757d !important;
   cursor: not-allowed !important;
   opacity: 0.6 !important;
   transform: none !important;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%) !important;
 }
 
 .reportHeaderActions button:focus {
   outline: none !important;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3) !important;
+  box-shadow: 0 0 0 3px rgb(0 123 255 / 30%) !important;
 }
 
 /* Enhanced dropdown menu styling */
 .reportHeaderActions :global(.dropdown-menu) {
   border: none !important;
   border-radius: 12px !important;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+  box-shadow: 0 8px 25px rgb(0 0 0 / 15%) !important;
   padding: 8px 0 !important;
   margin-top: 8px !important;
   min-width: 180px !important;
@@ -379,14 +384,15 @@
 }
 
 /* Dark mode dropdown consistency */
+
 /* Component containers - Clean borderless design */
 .componentContainer {
-  margin: 0 0 15px 0;
+  margin: 0 0 15px;
   padding: 20px;
   background-color: #fff;
   border-radius: 10px;
   border: 1.5px solid #e0e0e0;
-  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1), 0 1.5px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 16px rgb(37 99 235 / 10%), 0 1.5px 4px rgb(0 0 0 / 8%);
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -397,7 +403,7 @@
 .componentBorder {
   border: 1.5px solid #e0e0e0;
   border-radius: 10px;
-  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1), 0 1.5px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 16px rgb(37 99 235 / 10%), 0 1.5px 4px rgb(0 0 0 / 8%);
   background-color: #fff;
   overflow: hidden;
   height: 100%;
@@ -410,10 +416,11 @@
 .componentBorderLoose {
   overflow: visible;
 }
+
 .containerTotalOrgWrapper:global(.bg-oxford-blue) .componentBorder {
   background-color: #1c2541 !important;
   border: 1.5px solid #2f4157 !important;
-  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.13), 0 1.5px 4px rgba(255, 255, 255, 0.1) !important;
+  box-shadow: 0 4px 24px rgb(255 255 255 / 13%), 0 1.5px 4px rgb(255 255 255 / 10%) !important;
 }
 
 /* Grid layouts */
@@ -445,6 +452,7 @@
 }
 
 /* Report Header Styles */
+
 /* .totalOrgReportHeaderRow  {
   display: flex;
   justify-content: space-between;
@@ -695,3 +703,5 @@
     padding-left: 1% !important;
   }
 }
+
+/* stylelint-enable no-descending-specificity */