fix: mat-label text color in dashboard widgets for better visibility in light/dark themes

Author: Omar-Nabil2

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.scss

@@ -3,12 +3,30 @@
   padding: 0;
 
   .header {
-    #office {
+    :where(#office) {
       margin-bottom: -1.2em;
+
+      // Make sure mat-label text is visible in light theme
+      :where(mat-label) {
+        color: rgb(0 0 0 / 87%); // Standard Material Design text color for light theme
+      }
     }
   }
 
   .fallback {
     height: 20rem;
   }
 }
+
+// Dark theme specific styles
+:host-context(.dark-theme) {
+  .card {
+    .header {
+      :where(#office) {
+        :where(mat-label) {
+          color: white; // White text color for dark theme
+        }
+      }
+    }
+  }
+}

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.scss

@@ -3,12 +3,30 @@
   padding: 0;
 
   .header {
-    #office {
+    :where(#office) {
       margin-bottom: -1.2em;
+
+      // Make sure mat-label text is visible in light theme
+      :where(mat-label) {
+        color: rgb(0 0 0 / 87%); // Standard Material Design text color for light theme
+      }
     }
   }
 
   .fallback {
     height: 20rem;
   }
 }
+
+// Dark theme specific styles
+:host-context(.dark-theme) {
+  .card {
+    .header {
+      :where(#office) {
+        :where(mat-label) {
+          color: white; // White text color for dark theme
+        }
+      }
+    }
+  }
+}

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.scss

@@ -3,12 +3,17 @@
   padding: 0;
 
   .header {
-    #office {
+    :where(#office) {
       margin-bottom: -1.2em;
+
+      // Make sure mat-label text is visible in light theme
+      :where(mat-label) {
+        color: rgb(0 0 0 / 87%); // Standard Material Design text color for light theme
+      }
     }
   }
 
-  #timescale {
+  :where(#timescale) {
     margin: 2% 50%;
     transform: translateX(-50%);
   }
@@ -19,3 +24,16 @@
     min-height: 16.5rem;
   }
 }
+
+// Dark theme specific styles
+:host-context(.dark-theme) {
+  .card {
+    .header {
+      :where(#office) {
+        :where(mat-label) {
+          color: white; // White text color for dark theme
+        }
+      }
+    }
+  }
+}