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

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

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

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

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

@@ -53,14 +53,7 @@ export class HistoryComponent implements OnInit, OnChanges {
 
   public getPunishmentTime(entry: PunishmentHistoryInner) {
     const date = new Date(entry.punishmentTime);
-    return date.toLocaleString(navigator.language, {
+    return date.toLocaleDateString(navigator.language);
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    });
   }
 
   public getExpiredTime(entry: PunishmentHistoryInner) {
@@ -68,13 +61,6 @@ 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.toLocaleString(navigator.language, {
+    return date.toLocaleDateString(navigator.language);
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    });
   }
 }