Refactor ban details layout and enhanced formatting.

Updated the HTML structure and styling for a clearer, responsive layout and better user experience.

frontend/src/app/about/about.component.ts

@@ -2,13 +2,15 @@ import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
 import {CommonModule} from '@angular/common';
 import {HeaderComponent} from '../header/header.component';
+import {RemoveTrailingPeriodPipe} from "../util/RemoveTrailingPeriodPipe";
 
 @Component({
   selector: 'app-about',
   standalone: true,
   imports: [
     CommonModule,
-    HeaderComponent
+    HeaderComponent,
+    RemoveTrailingPeriodPipe
   ],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'

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

@@ -6,57 +6,91 @@
     </div>
   </app-header>
 
-  <ng-container *ngIf="punishment === undefined">
+  <main>
-    <p>Loading...</p>
+    <section class="darkmodeSection">
-  </ng-container>
+      <section class="columnSection">
+        <div class="detailsBackButton">
+          <ng-container *ngIf="punishment === undefined">
+            <p>Loading...</p>
+          </ng-container>
 
-  <ng-container *ngIf="punishment">
+          <a [routerLink]="['/bans']">< Back</a>
-    <table [cellSpacing]="0">
+        </div>
-      <div>
+      </section>
-        <p>type: {{ this.historyFormat.getType(punishment) }}</p>
+      <section class="columnSection center">
-        <p>is active: {{ this.historyFormat.isActive(punishment) }}</p>
+        <ng-container *ngIf="punishment">
-        <tbody>
+          <div>
-        <tr>
+            <span class="tag tagInfo tagActive">{{ this.historyFormat.getType(punishment) }}</span>
-          <td>Player</td>
+          </div>
-          <td>
+          <div>
-            <div class="playerContainer">
+            <span class="tag tagInfo tagPermanent">{{ this.historyFormat.isActive(punishment) }}</span>
-              <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.uuid)" width="25" height="25"
+          </div>
-                   alt="{{punishment.username}}'s Minecraft skin">
-              <span class="username">{{ punishment.username }}</span>
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td>Moderator</td>
-          <td>
-            <div class="playerContainer">
-              <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.punishedByUuid)" width="25"
-                   height="25"
-                   alt="{{punishment.punishedBy}}'s Minecraft skin">
-              <span class="username">{{ punishment.punishedBy }}</span>
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td>Reason</td>
-          <td>{{ punishment.reason | removeTrailingPeriod }}</td>
-        </tr>
-        <tr>
-          <td>Date</td>
-          <td>{{ this.historyFormat.getPunishmentTime(punishment) }}</td>
-        </tr>
-        <tr>
-          <td>Expires</td>
-          <td>{{ this.historyFormat.getExpiredTime(punishment) }}</td>
-        </tr>
-        <ng-container *ngIf="punishment.removedBy !== undefined && punishment.removedBy.length > 0">
-          <tr>
-            <td>Un{{ this.historyFormat.getType(punishment).toLocaleLowerCase() }} reason</td>
-            <td>{{ punishment.removedReason == null ? 'No reason specified' : punishment.removedReason }}</td>
-          </tr>
         </ng-container>
-        </tbody>
+      </section>
-      </div>
+      <section class="columnSection">
-    </table>
+        <div class="columnContainer">
-  </ng-container>
+          <div class="columnParagraph">
+            <ng-container *ngIf="punishment">
+              <div class="playerContainer">
+                <h2>Player</h2>
+                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.uuid)"
+                     width="150"
+                     height="150"
+                     alt="{{punishment.username}}'s Minecraft skin"
+                >
+                <h3 class="detailsUsername">{{ punishment.username }}</h3>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <ng-container *ngIf="punishment">
+              <div class="playerContainer">
+                <h2>Moderator</h2>
+                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.punishedByUuid)"
+                     width="150"
+                     height="150"
+                     alt="{{punishment.punishedBy}}'s Minecraft skin"
+                >
+                <h3 class="detailsUsername">{{ punishment.punishedBy }}</h3>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <ng-container *ngIf="punishment">
+              <div class="detailsInfo">
+                <h2>Reason</h2>
+                <p>{{ punishment.reason | removeTrailingPeriod }}</p>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <ng-container *ngIf="punishment">
+              <div class="detailsInfo">
+                <h2>Date</h2>
+                <p>{{ this.historyFormat.getPunishmentTime(punishment) }}</p>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
 </ng-container>
+
+
+<section class="columnSection">
+  <ng-container *ngIf="punishment">
+    <span>Expires</span>
+    <span>{{ this.historyFormat.getExpiredTime(punishment) }}</span>
+    <ng-container *ngIf="punishment.removedBy !== undefined && punishment.removedBy.length > 0">
+      <span>Un{{ this.historyFormat.getType(punishment).toLocaleLowerCase() }} reason</span>
+      <span>{{ punishment.removedReason == null ? 'No reason specified' : punishment.removedReason }}</span>
+    </ng-container>
+  </ng-container>
+</section>

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

@@ -0,0 +1,60 @@
+.detailsBackButton {
+  font-family: open-sans, sans-serif;
+}
+
+.columnSection {
+  padding-top: 30px;
+}
+
+h2 {
+  text-align: center;
+}
+
+h3 {
+  text-align: center;
+}
+
+.avatar {
+  padding: 10px 0;
+}
+
+.detailsUsername {
+  font-size: 1.2em;
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.detailsInfo {
+  padding-top: 50px;
+}
+
+.detailsInfo p {
+  text-align: center;
+}
+
+.tag {
+  display: inline-block;
+  padding: 5px 10px;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.tagInfo {
+  margin: 0 20px;
+  font-size: 1.1em;
+}
+
+.tagActive {
+  color: #FFFFFF;
+  background-color: #EE5555 /*Should be #F79720 if Inactive*/
+;
+}
+
+.tagPermanent {
+  color: #FFFFFF;
+  background-color: #EE5555 /*Should be #777777 if Expired*/
+;
+}

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

@@ -3,7 +3,7 @@ import {HistoryService, PunishmentHistory} from '../../../api';
 import {NgIf, NgOptimizedImage} from '@angular/common';
 import {RemoveTrailingPeriodPipe} from '../../util/RemoveTrailingPeriodPipe';
 import {HistoryFormatService} from '../history-format.service';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, RouterLink} from '@angular/router';
 import {catchError, map} from 'rxjs';
 import {HeaderComponent} from '../../header/header.component';
 
@@ -13,7 +13,8 @@ import {HeaderComponent} from '../../header/header.component';
     NgIf,
     NgOptimizedImage,
     RemoveTrailingPeriodPipe,
-    HeaderComponent
+    HeaderComponent,
+    RouterLink
   ],
   templateUrl: './details.component.html',
   styleUrl: './details.component.scss'