Task/reset background color of paginators (#6800)

* Reset background color of paginators

* Hide page size

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Modernized the layout of the overview tab in the admin control panel
+- Improved the styling of the paginator across various table components
 
 ### Fixed
 

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -309,6 +309,7 @@
       </div>
 
       <mat-paginator
+        [hidePageSize]="true"
         [length]="totalItems"
         [ngClass]="{
           'd-none': (isLoading && totalItems === 0) || totalItems <= pageSize

apps/client/src/app/components/admin-users/admin-users.html

@@ -273,6 +273,7 @@
       </div>
 
       <mat-paginator
+        [hidePageSize]="true"
         [length]="totalItems"
         [ngClass]="{
           'd-none': (isLoading && totalItems === 0) || totalItems <= pageSize

apps/client/src/styles.scss

@@ -258,10 +258,6 @@ body {
       }
     }
 
-    .mat-mdc-paginator {
-      background-color: rgba(var(--palette-foreground-base-dark), 0.02);
-    }
-
     .mdc-button {
       &.mat-accent,
       &.mat-primary {
@@ -459,15 +455,6 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-mdc-paginator {
-  background-color: rgba(var(--palette-foreground-base-light), 0.02);
-
-  .mat-mdc-paginator-page-size,
-  .mat-mdc-paginator-page-size {
-    display: none;
-  }
-}
-
 .mat-stepper-vertical,
 .mat-stepper-horizontal {
   background: transparent !important;

apps/client/src/styles/theme.scss

@@ -359,6 +359,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     )
   );
 
+  @include mat.paginator-overrides(
+    (
+      container-background-color: transparent
+    )
+  );
+
   @include mat.progress-bar-overrides(
     (
       active-indicator-color: var(--gf-theme-primary-500)

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -536,6 +536,7 @@
 }
 
 <mat-paginator
+  [hidePageSize]="true"
   [length]="totalItems"
   [ngClass]="{
     'd-none': (isLoading() && !totalItems) || totalItems <= pageSize

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -193,7 +193,7 @@
   </table>
 </div>
 
-<mat-paginator class="d-none" [pageSize]="pageSize()" />
+<mat-paginator class="d-none" [hidePageSize]="true" [pageSize]="pageSize()" />
 
 @if (isLoading()) {
   <ngx-skeleton-loader

libs/ui/src/lib/top-holdings/top-holdings.component.html

@@ -155,7 +155,7 @@
   </table>
 </div>
 
-<mat-paginator class="d-none" [pageSize]="pageSize" />
+<mat-paginator class="d-none" [hidePageSize]="true" [pageSize]="pageSize" />
 
 @if (isLoading) {
   <ngx-skeleton-loader