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

@@ -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"