frontend/public/img/random/search.svg

@@ -1,4 +0,0 @@
-<?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,15 +27,6 @@
               <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"
@@ -43,9 +34,9 @@
                    placeholder="Search.."
                    [(ngModel)]="searchTerm"
                    (input)="filterNames()"
-                   (keyup.enter)="search()"
             >
-            <div class="dropdown-results" *ngIf="filteredNames.length > 0 && searchTerm">
+            <button type="submit" class="searchButton" (click)="search()">Search</button>
+            <div class="search-dropdown" *ngIf="filteredNames.length > 0 && searchTerm">
               <div
                 class="dropdown-item"
                 *ngFor="let name of filteredNames"

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

@@ -12,19 +12,14 @@ main .container {
 }
 
 .historyButtonContainer {
-  width: 80%;
+  width: 70%;
   box-sizing: border-box;
 }
 
 .historySearchContainer {
-  width: 20%;
+  width: 30%;
   box-sizing: border-box;
   text-align: right;
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
 }
 
 .button-outer {
@@ -43,14 +38,8 @@ main .container {
   border-radius: 5px;
 }
 
-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;
+.historySearch {
+  vertical-align: -15px;
 }
 
 .searchButton {
@@ -64,24 +53,20 @@ input.historySearch {
   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: 35px;
+  top: 100%;
   left: 0;
   width: 100%;
   max-height: 300px;
   overflow-y: auto;
-  background-color: #DEDEDE;
+  background-color: white;
   border: 1px solid #ddd;
   border-top: none;
-  z-index: 1050;
+  z-index: 1000;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
 }
 
 .dropdown-item {
@@ -165,7 +150,5 @@ input.historySearch {
 .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,13 +74,6 @@ 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 = [];
@@ -95,7 +88,6 @@ export class BansComponent implements OnInit {
   public selectName(name: string) {
     this.searchTerm = name;
     this.filteredNames = [];
-    this.search();
   }
 
   public search() {
@@ -124,13 +116,10 @@ export class BansComponent implements OnInit {
     ).subscribe();
   }
 
-  public changeUserType(type: 'player' | 'staff') {
+  public changeHistoryType(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 class="historyPlayerRow" *ngFor="let entry of history">
+      <tr *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,10 +60,6 @@ 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,7 +23,6 @@
   --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;
@@ -43,7 +42,6 @@
   --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;