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/public/img/random/search.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/app/bans/bans.component.html

@@ -27,6 +27,15 @@
               <span class="button-inner"
                     [ngClass]="active">Warnings</span>
             </div>
+            <div [id]="getCurrentUserTypeButtonId('player')" class="button-outer" (click)="changeUserType('player')"
+                 style="margin-left: 120px;">
+              <span class="button-inner"
+                    [ngClass]="active">Player</span>
+            </div>
+            <div [id]="getCurrentUserTypeButtonId('staff')" class="button-outer" (click)="changeUserType('staff')">
+              <span class="button-inner"
+                    [ngClass]="active">Staff</span>
+            </div>
           </div>
           <div class="historySearchContainer">
             <input class="historySearch"
@@ -34,9 +43,9 @@
                    placeholder="Search.."
                    [(ngModel)]="searchTerm"
                    (input)="filterNames()"
+                   (keyup.enter)="search()"
             >
-            <button type="submit" class="searchButton" (click)="search()">Search</button>
-            <div class="search-dropdown" *ngIf="filteredNames.length > 0 && searchTerm">
+            <div class="dropdown-results" *ngIf="filteredNames.length > 0 && searchTerm">
               <div
                 class="dropdown-item"
                 *ngFor="let name of filteredNames"

frontend/src/app/bans/bans.component.scss

@@ -12,14 +12,19 @@ main .container {
 }
 
 .historyButtonContainer {
-  width: 70%;
+  width: 80%;
   box-sizing: border-box;
 }
 
 .historySearchContainer {
-  width: 30%;
+  width: 20%;
   box-sizing: border-box;
   text-align: right;
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 .button-outer {
@@ -38,8 +43,14 @@ main .container {
   border-radius: 5px;
 }
 
-.historySearch {
-  vertical-align: -15px;
+input.historySearch {
+  font-family: 'open-sans', sans-serif;
+  width: 260px;
+  border: 1px solid #DEDEDE;
+  padding: 9px 4px 9px 40px;
+  background: #DEDEDE url(/public/img/random/search.svg) no-repeat 10px;
+  background-size: 18px 18px;
+  border-radius: 5px;
 }
 
 .searchButton {
@@ -53,20 +64,24 @@ main .container {
   text-align: center;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 5px;
+  z-index: 1;
 }
 
 .dropdown-results {
+  font-family: 'open-sans', sans-serif;
   position: absolute;
-  top: 100%;
+  top: 35px;
   left: 0;
   width: 100%;
   max-height: 300px;
   overflow-y: auto;
-  background-color: white;
+  background-color: #DEDEDE;
   border: 1px solid #ddd;
   border-top: none;
-  z-index: 1000;
+  z-index: 1050;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
 }
 
 .dropdown-item {
@@ -150,5 +165,7 @@ main .container {
 .pageNumber {
   font-family: 'open-sans', sans-serif;
   margin: 0 25px 0 25px;
+  color: var(--font-color);
+  transition: 0.5s ease;
 }
 

frontend/src/app/bans/bans.component.ts

@@ -74,6 +74,13 @@ export class BansComponent implements OnInit {
     return null;
   }
 
+  public getCurrentUserTypeButtonId(options: 'player' | 'staff') {
+    if (options == this.userType) {
+      return 'currentButton'
+    }
+    return null;
+  }
+
   public filterNames() {
     if (!this.searchTerm) {
       this.filteredNames = [];
@@ -88,6 +95,7 @@ export class BansComponent implements OnInit {
   public selectName(name: string) {
     this.searchTerm = name;
     this.filteredNames = [];
+    this.search();
   }
 
   public search() {
@@ -116,10 +124,13 @@ export class BansComponent implements OnInit {
     ).subscribe();
   }
 
-  public changeHistoryType(type: 'player' | 'staff') {
+  public changeUserType(type: 'player' | 'staff') {
     this.pushState();
     this.userType = type;
     this.page = 0;
+    this.finalSearchTerm = '';
+    this.searchTerm = '';
+    this.filteredNames = [];
   }
 
   public changeHistoryPunishment(type: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {

frontend/src/app/bans/history/history.component.html

@@ -18,7 +18,7 @@
     </div>
     <div>
       <tbody>
-      <tr *ngFor="let entry of history">
+      <tr class="historyPlayerRow" *ngFor="let entry of history">
         <td class="historyType">{{ getType(entry) }}</td>
         <td class="historyPlayer">
           <div class="playerContainer">

frontend/src/app/bans/history/history.component.scss

@@ -60,6 +60,10 @@ table tr td {
   vertical-align: middle;
 }
 
+.historyPlayerRow:hover {
+  background-color: var(--history-table-row-color);
+}
+
 .historyTableHead {
   width: 1300px;
   background-color: var(--history-table-head-color);

frontend/src/styles.scss

@@ -23,6 +23,7 @@
   --link-color: #1F9BDE;
   --history-link-color: #A3A3A3;
   --history-table-head-color: #DADADA;
+  --history-table-row-color: #E6E6E6;
   --history-page-button-background: #DEDEDE;
   --hamburger: #232323;
   --dropdown-color: #DFDFDF;
@@ -42,6 +43,7 @@
   --link-color: #20729E;
   --history-link-color: #4A4A4A;
   --history-table-head-color: #4A4A4A;
+  --history-table-row-color: #363636;
   --history-page-button-background: #4A4A4A;
   --hamburger: #CDCDCD;
   --dropdown-color: #303233;