From 040b7b91fc8167db3592cfe1d8e9eced9a685fd3 Mon Sep 17 00:00:00 2001
From: Matt Van Horn <mvanhorn@users.noreply.github.com>
Date: Wed, 29 Apr 2026 11:25:05 -0700
Subject: [PATCH] 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                                        |  1 +
 .../admin-market-data/admin-market-data.html        |  1 +
 .../src/app/components/admin-users/admin-users.html |  1 +
 apps/client/src/styles.scss                         | 13 -------------
 apps/client/src/styles/theme.scss                   |  6 ++++++
 .../activities-table.component.html                 |  1 +
 .../holdings-table/holdings-table.component.html    |  2 +-
 .../lib/top-holdings/top-holdings.component.html    |  2 +-
 8 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d78c31053..48e598492 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.html b/apps/client/src/app/components/admin-market-data/admin-market-data.html
index 28745300d..23615969b 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/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
diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index 529703d9e..3d07eb852 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/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
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index ecb53b9ab..0b7f6f029 100644
--- a/apps/client/src/styles.scss
+++ b/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;
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 7244b007d..dfde47c77 100644
--- a/apps/client/src/styles/theme.scss
+++ b/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)
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index 14089f061..5a4ae641c 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/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
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index dfb39ec8a..46fc0216d 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/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
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.html b/libs/ui/src/lib/top-holdings/top-holdings.component.html
index 6ff4ecf5b..06b27b97f 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/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