From 81807b107c015f950ce09dfcd24cfc8f53d9d30e Mon Sep 17 00:00:00 2001
From: Peter <42907716+MrShack@users.noreply.github.com>
Date: Sat, 12 Apr 2025 17:41:29 +0200
Subject: [PATCH] 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.
---
 .../src/app/bans/history/history.component.html  | 16 ++++++++++++----
 .../src/app/bans/history/history.component.scss  | 11 ++++++++++-
 .../src/app/bans/history/history.component.ts    |  4 ++--
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/bans/history/history.component.html b/frontend/src/app/bans/history/history.component.html
index 12bd301..c302658 100644
--- a/frontend/src/app/bans/history/history.component.html
+++ b/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>
diff --git a/frontend/src/app/bans/history/history.component.scss b/frontend/src/app/bans/history/history.component.scss
index 084a1e6..2d8ff44 100644
--- a/frontend/src/app/bans/history/history.component.scss
+++ b/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;
 }
 
diff --git a/frontend/src/app/bans/history/history.component.ts b/frontend/src/app/bans/history/history.component.ts
index 62a9a53..5975931 100644
--- a/frontend/src/app/bans/history/history.component.ts
+++ b/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`;
   }
 }