From 13122559db6b6dd4a4d27cd5f5c5ae7457c7d677 Mon Sep 17 00:00:00 2001
From: Peter <42907716+MrShack@users.noreply.github.com>
Date: Sat, 12 Apr 2025 21:55:25 +0200
Subject: [PATCH] Refactor table and pagination UI components.

Replaced inline styles with reusable classes for better maintainability. Improved pagination button styling and added transitions to the history table header for a polished user experience. Updated SCSS variables for consistent naming conventions.
---
 frontend/src/app/bans/bans.component.html            | 12 ++++++------
 frontend/src/app/bans/bans.component.scss            |  9 +++++++++
 frontend/src/app/bans/history/history.component.html |  2 +-
 frontend/src/app/bans/history/history.component.scss | 12 +++++++++---
 frontend/src/styles.scss                             |  4 ++--
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index df81981..94d8f68 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -30,12 +30,12 @@
           </div>
           <div class="historySearchContainer">
             <input class="historySearch"
-                   type="text"
+                   type="search"
                    placeholder="Search.."
                    [(ngModel)]="searchTerm"
                    (input)="                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                filterNames()"
             >
-            <button class="searchButton" (click)="search()">Search</button>
+            <button type="submit" class="searchButton" (click)="search()">Search</button>
             <div class="search-dropdown" *ngIf="filteredNames.length > 0 && searchTerm">
               <div
                 class="dropdown-item"
@@ -52,19 +52,19 @@
         </div>
         <div class="changePageButtons">
           <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
-                  (click)="setPage(0)">
+                  (click)="setPage(0)" class="pageButton">
             First page
           </button>
           <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
-                  (click)="previousPage()">
+                  (click)="previousPage()" class="pageButton">
             Previous page
           </button>
           <button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
-                  (click)="nextPage()">
+                  (click)="nextPage()" class="pageButton">
             Next page
           </button>
           <button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
-                  (click)="setPage(getMaxPage())">
+                  (click)="setPage(getMaxPage())" class="pageButton">
             Last page
           </button>
         </div>
diff --git a/frontend/src/app/bans/bans.component.scss b/frontend/src/app/bans/bans.component.scss
index 13d7924..fc18d93 100644
--- a/frontend/src/app/bans/bans.component.scss
+++ b/frontend/src/app/bans/bans.component.scss
@@ -77,3 +77,12 @@ main .container {
 .dropdown-item:hover {
   background-color: #f5f5f5;
 }
+
+.changePageButtons {
+  margin: 0 auto;
+  padding: 10px 0 30px 0;
+}
+
+.pageButton {
+  margin: 0 5px 0 5px;
+}
diff --git a/frontend/src/app/bans/history/history.component.html b/frontend/src/app/bans/history/history.component.html
index c302658..fccad7f 100644
--- a/frontend/src/app/bans/history/history.component.html
+++ b/frontend/src/app/bans/history/history.component.html
@@ -4,7 +4,7 @@
 
 <ng-container *ngIf="history.length > 0">
   <table [cellSpacing]="0">
-    <div style="width: 1300px; background-color: #dadada;">
+    <div class="historyTableHead">
       <thead>
       <tr>
         <th class="historyType">Type</th>
diff --git a/frontend/src/app/bans/history/history.component.scss b/frontend/src/app/bans/history/history.component.scss
index bf6539e..40dae5e 100644
--- a/frontend/src/app/bans/history/history.component.scss
+++ b/frontend/src/app/bans/history/history.component.scss
@@ -2,6 +2,7 @@ table {
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
+  border-radius: 5px;
 }
 
 thead {
@@ -59,6 +60,14 @@ table tr td {
   vertical-align: middle;
 }
 
+.historyTableHead {
+  width: 1300px;
+  background-color: var(--history-table-head-color);
+  transition: all 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), 0.5s background ease;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.2), 0 6px 20px -8px rgba(0, 0, 0, 0.19);
+}
+
 .historyType {
   max-width: 100%;
   width: 80px;
@@ -97,6 +106,3 @@ img {
 .historyDate {
   width: 170px;
 }
-
-.changePageButtons {
-}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 9be7e77..42aac4f 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -22,7 +22,7 @@
   --navlink-color: #4B4B4B;
   --link-color: #1F9BDE;
   --history-link-color: #A3A3A3;
-  --history-table-head: #DADADA;
+  --history-table-head-color: #DADADA;
   --hamburger: #232323;
   --dropdown-color: #DFDFDF;
   --footer-color: #202020;
@@ -40,7 +40,7 @@
   --navlink-color: #FFFFFF;
   --link-color: #20729E;
   --history-link-color: #4A4A4A;
-  --history-table-head: #5C5C5C;
+  --history-table-head-color: #4A4A4A;
   --hamburger: #CDCDCD;
   --dropdown-color: #303233;
   --footer-color: #242526;