Updated styling and components for punishment history

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, {