Updated styling and components for punishment history

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

@@ -1,8 +1,9 @@
 <ng-container>
-  <app-header [current_page]="'bans'" height="200px" background_image="/public/img/backgrounds/staff.png"
+  <app-header [current_page]="'bans'" height="250px" background_image="/public/img/backgrounds/staff.png"
               [overlay_gradient]="0.5">>
     <div class="title" header-content>
       <h1>Punishment History</h1>
+      <h2>Minecraft</h2>
     </div>
   </app-header>
 
@@ -10,11 +11,23 @@
     <section class="darkmodeSection">
       <div class="container">
         <div class="columnSection">
-          <div class="historyTypeContainer">
-            <button class="button-outer" (click)="changeHistoryPunishment('all')">All</button>
-            <button class="button-outer" (click)="changeHistoryPunishment('ban')">Bans</button>
-            <button class="button-outer" (click)="changeHistoryPunishment('mute')">Mutes</button>
-            <button class="button-outer" (click)="changeHistoryPunishment('warn')">Warnings</button>
+          <div class="historyButtonContainer">
+            <div [id]="getCurrentButtonId('all')" class="button-outer">
+              <span class="button-inner" (click)="changeHistoryPunishment('all')"
+                    [ngClass]="active">All</span>
+            </div>
+            <div [id]="getCurrentButtonId('ban')" class="button-outer">
+              <span class="button-inner" (click)="changeHistoryPunishment('ban')"
+                    [ngClass]="active">Bans</span>
+            </div>
+            <div [id]="getCurrentButtonId('mute')" class="button-outer">
+              <span class="button-inner" (click)="changeHistoryPunishment('mute')"
+                    [ngClass]="active">Mutes</span>
+            </div>
+            <div [id]="getCurrentButtonId('warn')" class="button-outer">
+              <span class="button-inner" (click)="changeHistoryPunishment('warn')"
+                    [ngClass]="active">Warnings</span>
+            </div>
           </div>
           <div class="historySearchContainer">
             <input class="historySearch"

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

@@ -11,7 +11,7 @@ main .container {
   max-width: 1300px;
 }
 
-.historyTypeContainer {
+.historyButtonContainer {
   width: 70%;
   box-sizing: border-box;
 }
@@ -24,6 +24,18 @@ main .container {
 
 .button-outer {
   margin-right: 15px;
+  background: var(--history-link-color);
+}
+
+.button-outer.active {
+  color: var(--navlink-color);
+}
+
+#currentButton {
+  text-decoration: none;
+  color: var(--white);
+  background: var(--link-color);
+  border-radius: 5px;
 }
 
 .historySearch {

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

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {HeaderComponent} from "../header/header.component";
 import {HistoryComponent} from './history/history.component';
 import {HistoryCount, HistoryService} from '../../api';
-import {NgForOf, NgIf} from '@angular/common';
+import {NgClass, NgForOf, NgIf} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 
 @Component({
@@ -12,16 +12,26 @@ import {FormsModule} from '@angular/forms';
     HistoryComponent,
     NgIf,
     FormsModule,
-    NgForOf
+    NgForOf,
+    NgClass
   ],
   templateUrl: './bans.component.html',
   styleUrl: './bans.component.scss'
 })
 export class BansComponent implements OnInit {
 
+
+  public getCurrentButtonId(options: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
+    if (options == this.punishmentType) {
+      return 'currentButton'
+    }
+    return null;
+  }
+
   constructor(public historyApi: HistoryService) {
   }
 
+  public active: string = '';
   public userType: 'player' | 'staff' = "player";
   public punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
   public page: number = 0;
@@ -121,17 +131,22 @@ export class BansComponent implements OnInit {
   }
 
   public getMaxPage() {
+    // @ts-ignore
     const all = this.historyCount.bans + this.historyCount.mutes + this.historyCount.warnings;
     switch (this.punishmentType) {
       case 'all':
         return Math.ceil(all / 10);
       case 'ban':
+        // @ts-ignore
         return Math.ceil(this.historyCount.bans / 10);
       case 'mute':
+        // @ts-ignore
         return Math.ceil(this.historyCount.mutes / 10);
       case 'kick':
+        // @ts-ignore
         return Math.ceil(this.historyCount.kicks / 10);
       case 'warn':
+        // @ts-ignore
         return Math.ceil(this.historyCount.warnings / 10);
       default:
         return 0;

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

@@ -7,6 +7,7 @@
     <div style="width: 1300px; background-color: #dadada;">
       <thead>
       <tr>
+        <th class="historyType">Type</th>
         <th class="historyPlayer">Player</th>
         <th class="historyPlayer">Banned By</th>
         <th class="historyReason">Reason</th>
@@ -18,7 +19,12 @@
     <div>
       <tbody>
       <tr *ngFor="let entry of history">
-        <td class="historyPlayer">{{ entry.username }}</td>
+        <td class="historyType">{{ getType(entry) }}</td>
+        <td class="historyPlayer">
+          <img class="avatar" ngSrc="https://cravatar.eu/avatar/cba80e47fcbc407aa5ad37a933b7fe30/25" width="25px"
+               height="25px" alt="">
+          {{ entry.username }}
+        </td>
         <td class="historyPlayer">{{ entry.punishedBy }}</td>
         <td class="historyReason">{{ entry.reason }}</td>
         <td class="historyDate">{{ getPunishmentTime(entry) }}</td>

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

@@ -14,17 +14,41 @@ tbody {
 
 td {
   padding: 5px 0 5px 0;
+  height: 55px;
+}
+
+th {
+  padding: 5px 0 5px 0;
 }
 
 th, td {
   text-overflow: ellipsis;
 }
 
+table tr td {
+  vertical-align: middle;
+}
+
+.historyType {
+  width: 100px;
+}
+
 .historyPlayer {
   width: 200px;
   text-overflow: clip;
 }
 
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+.avatar {
+  margin-bottom: 5px;
+  margin-right: 5px;
+  border-radius: 2px;
+}
+
 .historyReason {
   width: 920px;
 }

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

@@ -1,14 +1,15 @@
 import {Component, Input, OnChanges, OnInit} from '@angular/core';
 import {BASE_PATH, HistoryService, PunishmentHistoryInner} from '../../../api';
 import {map, Observable, shareReplay} from 'rxjs';
-import {NgForOf, NgIf} from '@angular/common';
+import {NgForOf, NgIf, NgOptimizedImage} from '@angular/common';
 import {CookieService} from 'ngx-cookie-service';
 
 @Component({
   selector: 'app-history',
   imports: [
     NgIf,
-    NgForOf
+    NgForOf,
+    NgOptimizedImage
   ],
   templateUrl: './history.component.html',
   styleUrl: './history.component.scss',
@@ -70,9 +71,13 @@ export class HistoryComponent implements OnInit, OnChanges {
     });
   }
 
+  public getType(entry: PunishmentHistoryInner) {
+    return entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
+  }
+
   public getExpiredTime(entry: PunishmentHistoryInner) {
     if (entry.expiryTime === 0) {
-      return "Permanent " + entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
+      return "Permanent " + this.getType(entry);
     }
     const date = new Date(entry.expiryTime);
     return date.toLocaleString(navigator.language, {

frontend/src/app/header/header.component.html

@@ -67,7 +67,7 @@
         </div>
         <a href="/"><img ngSrc="/public/img/logos/logo.png" priority alt="Altitude Server Logo" height="319"
                          width="550"></a>
-        <ul id="nav_list">
+        <ul>
           <li class="nav_li"><a [id]="getCurrentPageId(['home'])" class="nav_link" href="/" [ngClass]="active">Home</a>
           </li>
           <li class="nav_li">

frontend/src/styles.scss

@@ -13,14 +13,15 @@
 .theme-light {
   --color-primary: #FBFBFE;
   --color-secondary: #FBFBFE;
-  --color-tertiary: #e3f1f8;
+  --color-tertiary: #E3F1F8;
   --color-quaternary: #EFEFEF;
   --color-quinary: #FBFBFE;
   --color-accent: #FD6F53;
   --font-color: #000000;
   --font-color-hover: #454545;
-  --navlink-color: #4b4b4b;
-  --link-color: #1f9bde;
+  --navlink-color: #4B4B4B;
+  --link-color: #1F9BDE;
+  --history-link-color: #A3A3A3;
   --hamburger: #232323;
   --dropdown-color: #DFDFDF;
   --footer-color: #202020;
@@ -36,7 +37,8 @@
   --font-color: #FFFFFF;
   --font-color-hover: #9C9C9C;
   --navlink-color: #FFFFFF;
-  --link-color: #20729e;
+  --link-color: #20729E;
+  --history-link-color: #4A4A4A;
   --hamburger: #CDCDCD;
   --dropdown-color: #303233;
   --footer-color: #242526;