From ee66bdda834321cb5f9d6be7a1d1925755821f32 Mon Sep 17 00:00:00 2001
From: Peter <42907716+MrShack@users.noreply.github.com>
Date: Fri, 18 Apr 2025 19:33:54 +0200
Subject: [PATCH] Add pagination display and update button styling

Introduce a page number display to the pagination controls for better navigation transparency. Update button styles to use CSS variables for improved theme consistency and maintainability.
---
 frontend/src/app/bans/bans.component.html |  1 +
 frontend/src/app/bans/bans.component.scss | 17 +++++++++++------
 frontend/src/styles.scss                  |  2 ++
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index 7c3d4da..f07a54f 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -62,6 +62,7 @@
                   (click)="previousPage()" class="historyPageButton">
             Previous page
           </button>
+          <span class="pageNumber">{{ this.page }} / {{ getMaxPage() }}</span>
           <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
                   [disabled]="!buttonActive(getMaxPage())"
                   (click)="nextPage()" class="historyPageButton">
diff --git a/frontend/src/app/bans/bans.component.scss b/frontend/src/app/bans/bans.component.scss
index 597352b..09c82ed 100644
--- a/frontend/src/app/bans/bans.component.scss
+++ b/frontend/src/app/bans/bans.component.scss
@@ -89,7 +89,8 @@ main .container {
   border-radius: .25rem;
   box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
   box-sizing: border-box;
-  color: rgba(0, 0, 0, 0.85);
+  background-color: var(--history-page-button-background);
+  color: var(--font-color);
   cursor: pointer;
   display: inline-flex;
   font-family: 'opensans', sans-serif;
@@ -114,7 +115,7 @@ main .container {
 .historyPageButton.active:focus {
   border-color: rgba(0, 0, 0, 0.15);
   box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--font-color-hover);
 }
 
 .historyPageButton.active:hover {
@@ -122,18 +123,17 @@ main .container {
 }
 
 .historyPageButton.active:active {
-  background-color: #F0F0F1;
   border-color: rgba(0, 0, 0, 0.15);
   box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--font-color-hover);
   transform: translateY(0);
 }
 
 .historyPageButton.disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  background-color: #f0f0f0;
-  color: #999;
+  background-color: var(--color-quaternary);
+  color: var(--font-color);
   box-shadow: none;
   pointer-events: none;
 }
@@ -147,3 +147,8 @@ main .container {
   color: #999;
 }
 
+.pageNumber {
+  font-family: 'open-sans', sans-serif;
+  margin: 0 25px 0 25px;
+}
+
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 42aac4f..9ebd15e 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -23,6 +23,7 @@
   --link-color: #1F9BDE;
   --history-link-color: #A3A3A3;
   --history-table-head-color: #DADADA;
+  --history-page-button-background: #DEDEDE;
   --hamburger: #232323;
   --dropdown-color: #DFDFDF;
   --footer-color: #202020;
@@ -41,6 +42,7 @@
   --link-color: #20729E;
   --history-link-color: #4A4A4A;
   --history-table-head-color: #4A4A4A;
+  --history-page-button-background: #4A4A4A;
   --hamburger: #CDCDCD;
   --dropdown-color: #303233;
   --footer-color: #242526;