fix(styles): replace Important in component stylesheets with specificity selectors

Author: sawankshrma

src/app/component/report-config-modal/report-config-modal.component.css

@@ -60,10 +60,10 @@
     gap: 4px;
 }
 
-.info-button {
-  width: 24px !important;
-  height: 24px !important;
-  padding: 0 !important;
+[mat-icon-button].info-button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
   overflow: visible;
   line-height: 24px;
 }

src/app/component/sidenav-buttons/sidenav-buttons.component.css

@@ -1,4 +1,4 @@
-[matListItemIcon] {
-  margin-right: 18px !important;
-  margin-left: 22px !important;
+[matListItemIcon].sidenav-button-icons {
+  margin-right: 18px;
+  margin-left: 22px;
 }

src/app/component/sidenav-buttons/sidenav-buttons.component.html

@@ -1,12 +1,12 @@
 <mat-nav-list>
   <a mat-list-item *ngFor="let option of Options; index as i" routerLink="{{ Routing[i] }}">
-    <span matListItemIcon>
+    <span matListItemIcon class="sidenav-button-icons">
       <mat-icon color="primary">{{ Icons[i] }}</mat-icon>
     </span>
     <h3 matListItemTitle>{{ Options[i] }}</h3>
   </a>
   <a mat-list-item href="https://github.com/wurstbrot/DevSecOps-MaturityModel/" target="_blank">
-    <span matListItemIcon>
+    <span matListItemIcon class="sidenav-button-icons">
       <mat-icon color="primary" svgIcon="github"></mat-icon>
     </span>
     <h3 matListItemTitle>GitHub</h3>
@@ -18,7 +18,7 @@ <h3 matListItemTitle>GitHub</h3>
 
 <mat-list>
   <mat-list-item (click)="toggleTheme()" style="cursor: pointer">
-    <span matListItemIcon>
+    <span matListItemIcon class="sidenav-button-icons">
       <mat-icon color="primary">
         {{ isNightMode() ? 'light_mode' : 'dark_mode' }}
       </mat-icon>

src/app/component/team-selector/team-selector.component.css

@@ -36,8 +36,8 @@
     white-space: nowrap;
 }
 
-:host ::ng-deep .checkbox-grid {
+.checkbox-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 10px)) !important;
-    gap: 2px !important;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 10px));
+    gap: 2px;
 }

src/app/pages/circular-heatmap/circular-heatmap.component.css

@@ -13,10 +13,10 @@
   margin-right: 5px;
 }
 
-.info-button {
-  width: 24px !important;
-  height: 24px !important;
-  padding: 0 !important;
+[mat-icon-button].info-button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
   overflow: visible;
   opacity: 0.6;
   line-height: 24px;
@@ -217,10 +217,9 @@ button.filter-toggle {
   margin-top: 20px;
 }
 
-/* Expansion panel spacing */
-:host ::ng-deep .activity-card mat-expansion-panel {
+.activity-card mat-expansion-panel {
   margin-bottom: 8px;
-  border-radius: 8px !important;
+  border-radius: 8px;
 }
 
 :host ::ng-deep .activity-card .mat-expansion-panel-header {

src/app/pages/report/report.component.css

@@ -314,7 +314,7 @@
     .evidence-view-btn,
     app-top-header,
     .report-toolbar {
-        display: none !important;
+        display: none;
     }
 
     .report-container {