fixed dark mode and mobile responsiveness for weekly project summary

Author: JuliaHa0902

src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx

@@ -214,14 +214,14 @@ function TotalMaterialCostPerProject() {
         whiteSpace: 'nowrap',
         maxWidth: '100%',
         position: 'relative',
-        scrollbarWidth: 'thin',
+        scrollbarWidth: 'none',
       }),
     }),
     [darkMode],
   );
 
   return (
-    <div style={{ maxWidth: '300px', minWidth: '200px' }}>
+    <div>
       <div className={styles.totalMaterialCostPerProjectChartTitle}>
         Total Material Cost Per Project
       </div>

src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx

@@ -247,7 +247,7 @@ function WeeklyProjectSummary() {
       {
         title: 'Material Consumption',
         key: 'Material Consumption',
-        className: 'large',
+        className: 'full',
         content: [1, 2, 3].map((_, index) => {
           let content;
           if (index === 1) {
@@ -474,7 +474,7 @@ function WeeklyProjectSummary() {
   };
 
   return (
-    <div className={`weekly-project-summary-container ${darkMode ? 'dark-mode' : ''}`}>
+    <div className={`${styles.weeklyProjectSummaryContainer} ${darkMode ? styles.darkMode : ''}`}>
       <WeeklyProjectSummaryHeader handleSaveAsPDF={handleSaveAsPDF} />
       <div className={`${styles.weeklyProjectSummaryDashboardContainer}`}>
         <div className={`${styles.weeklyProjectSummaryDashboardGrid}`}>

src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css

@@ -12,10 +12,6 @@
   padding: 0;
 }
 
-.weeklyProjectSummaryDashboardContainer {
-  width: 100%;
-  background: var(--bg-color);
-}
 
 .weeklyProjectSummaryHeaderWrapper {
   background-color: var(--bg-color) !important;
@@ -120,12 +116,6 @@
 }
 
 /* ---------------- CARDS ---------------- */
-.projectStatusGrid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: repeat(2, auto);
-  gap: 10px;
-}
 
 .weeklyProjectSummaryCard {
   background: var(--card-bg);
@@ -223,7 +213,7 @@
 .weeklyProjectSummaryDashboardCategoryContent {
   padding: 15px;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
   border-top: 1px solid var(--card-shadow);
   animation: fadeIn 0.3s ease-in-out;
@@ -284,19 +274,22 @@
   color: var(--text-color);
 }
 
-.weeklySummaryShareBtn {
+/* .weeklySummaryShareBtn {
   background-color: var(--button-bg) !important;
 }
 
 .weeklySummaryShareBtn:hover {
   background-color: var(--button-hover) !important;
-}
+} */
 
 /* First, set a max-height and make it scrollable */
 .quantityOfMaterialsUsedChartTooltip {
   max-height: 80vh !important; /* Limit to 80% of viewport height */
   overflow-y: auto !important; /* Enable vertical scrolling */
   padding-right: 15px !important; /* Add some padding for the scrollbar */
+  /* Support for Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
 }
 
 /* Style the scrollbar for better visibility */
@@ -314,11 +307,7 @@
   border-radius: 4px;
 }
 
-/* Support for Firefox */
-.quantityOfMaterialsUsedChartTooltip {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
-}
+
 
 /* Additional adjustments for dark mode if needed */
 .darkMode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-track {
@@ -419,6 +408,12 @@
   max-width: 1600px;
   margin: auto;
 }
+/* .projectStatusGrid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(2, auto);
+  gap: 10px;
+} */
 
 /* ---------------- OVAL STATUS BUTTON ---------------- */
 .weeklyStatusButton {