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/bans.component.html

@@ -10,18 +10,20 @@
     <section class="darkmodeSection">
       <div class="container">
         <div class="columnSection">
-          <div class="columnContainer">
+          <div class="historyTypeContainer">
-            <button (click)="punishmentType = 'all'">all</button>
+            <button class="button-outer" (click)="punishmentType = 'all'">All</button>
-            <button (click)="punishmentType = 'ban'">bans</button>
+            <button class="button-outer" (click)="punishmentType = 'ban'">Bans</button>
-            <button (click)="punishmentType = 'mute'">mutes</button>
+            <button class="button-outer" (click)="punishmentType = 'mute'">Mutes</button>
-            <button (click)="punishmentType = 'warn'">warnings</button>
+            <button class="button-outer" (click)="punishmentType = 'warn'">Warnings</button>
           </div>
-          <div class="columnContainer bansSearchContainer">
+          <div class="historySearchContainer">
-            <input class="bansSearch" type="text" placeholder="Search..">
+            <input class="historySearch" type="text" placeholder="Search..">
           </div>
         </div>
+        <div class="historyTable">
           <app-history [userType]="userType" [punishmentType]="punishmentType"></app-history>
         </div>
+      </div>
     </section>
   </main>
 </ng-container>

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

@@ -0,0 +1,36 @@
+main .container {
+  padding: 0;
+}
+
+.container {
+  max-width: 1200px;
+}
+
+.columnSection {
+  padding: 20px 0 20px 0;
+  max-width: 1200px;
+}
+
+.historyTypeContainer {
+  width: 70%;
+  box-sizing: border-box;
+}
+
+.searchContainer {
+  width: 30%;
+  box-sizing: border-box;
+  text-align: right;
+}
+
+.historySearch {
+
+}
+
+.historyTable {
+  font-family: 'open-sans', sans-serif;
+  margin-bottom: 20px;
+}
+
+.button-outer {
+  margin-right: 15px;
+}

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
+    });
   }
 }