Styling and date changes on punishment page

Some styling changes for the punishments page. Also changes how the dates are displayed - they should display differently depending on what region you're in.

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

@@ -4,6 +4,7 @@
 
 <ng-container *ngIf="history.length > 0">
   <table>
+    <thead>
     <tr>
       <th>Player</th>
       <th>Banned By</th>
@@ -11,6 +12,8 @@
       <th>Date</th>
       <th>Expires</th>
     </tr>
+    </thead>
+    <tbody>
     <tr *ngFor="let entry of history">
       <td>{{ entry.username }}</td>
       <td>{{ entry.punishedBy }}</td>
@@ -18,6 +21,7 @@
       <td>{{ getPunishmentTime(entry) }}</td>
       <td>{{ getExpiredTime(entry) }}</td>
     </tr>
+    </tbody>
   </table>
 </ng-container>
 

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

@@ -53,7 +53,14 @@ export class HistoryComponent implements OnInit, OnChanges {
 
   public getPunishmentTime(entry: PunishmentHistoryInner) {
     const date = new Date(entry.punishmentTime);
-    return date.toLocaleDateString(navigator.language);
+    return date.toLocaleString(navigator.language, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
   }
 
   public getExpiredTime(entry: PunishmentHistoryInner) {
@@ -61,6 +68,13 @@ export class HistoryComponent implements OnInit, OnChanges {
       return "Permanent " + entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
     }
     const date = new Date(entry.punishmentTime + entry.expiryTime);
-    return date.toLocaleDateString(navigator.language);
+    return date.toLocaleString(navigator.language, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
   }
 }