Enhance user and punisher avatar display in history table

Refactored the layout for player and punisher avatars by adding a container around usernames and aligning elements vertically. Updated the `getAvatarUrl` method to accept only UUID strings, streamlining its usage. Improved styling for better alignment and presentation.

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

@@ -21,11 +21,19 @@
       <tr *ngFor="let entry of history">
         <td class="historyType">{{ getType(entry) }}</td>
         <td class="historyPlayer">
-          <img class="avatar" [ngSrc]="getAvatarUrl(entry)" width="25"
-               height="25" alt="">
-          {{ entry.username }}
+          <div class="playerContainer">
+            <img class="avatar" [ngSrc]="getAvatarUrl(entry.uuid)" width="25" height="25"
+                 alt="{{entry.username}}'s Minecraft skin">
+            <span class="username">{{ entry.username }}</span>
+          </div>
+        </td>
+        <td class="historyPlayer">
+          <div class="playerContainer">
+            <img class="avatar" [ngSrc]="getAvatarUrl(entry.punishedByUuid)" width="25" height="25"
+                 alt="{{entry.punishedBy}}'s Minecraft skin">
+            <span>{{ entry.punishedBy }}</span>
+          </div>
         </td>
-        <td class="historyPlayer">{{ entry.punishedBy }}</td>
         <td class="historyReason">{{ entry.reason }}</td>
         <td class="historyDate">{{ getPunishmentTime(entry) }}</td>
         <td class="historyDate">{{ getExpiredTime(entry) }}</td>

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

@@ -38,6 +38,16 @@ table tr td {
   text-overflow: clip;
 }
 
+.playerContainer {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.username {
+  text-align: center;
+}
+
 img {
   vertical-align: middle;
   border-style: none;
@@ -45,7 +55,6 @@ img {
 
 .avatar {
   margin-bottom: 5px;
-  margin-right: 5px;
   border-radius: 2px;
 }
 

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

@@ -90,8 +90,8 @@ export class HistoryComponent implements OnInit, OnChanges {
     });
   }
 
-  public getAvatarUrl(entry: PunishmentHistoryInner): string {
-    let uuid = entry.uuid.replace('-', '');
+  public getAvatarUrl(entry: string): string {
+    let uuid = entry.replace('-', '');
     return `https://crafatar.com/avatars/${uuid}?size=25&overlay`;
   }
 }