Punishment page styling

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

@@ -18,6 +18,7 @@
           </div>
           <div class="historySearchContainer">
             <input class="historySearch" type="text" placeholder="Search..">
+            <button class="searchButton">Search</button>
           </div>
         </div>
         <div class="historyTable">

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

@@ -3,12 +3,12 @@ main .container {
 }
 
 .container {
-  max-width: 1200px;
+  max-width: 1300px;
 }
 
 .columnSection {
   padding: 20px 0 20px 0;
-  max-width: 1200px;
+  max-width: 1300px;
 }
 
 .historyTypeContainer {
@@ -22,15 +22,23 @@ main .container {
   text-align: right;
 }
 
-.historySearch {
+.button-outer {
+  margin-right: 15px;
+}
 
+.historySearch {
+  vertical-align: -15px;
+}
+
+.searchButton {
+  vertical-align: -15px;
 }
 
 .historyTable {
   font-family: 'open-sans', sans-serif;
   margin-bottom: 20px;
-}
-
-.button-outer {
-  margin-right: 15px;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  border-radius: 5px;
 }

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

@@ -3,25 +3,29 @@
 </ng-container>
 
 <ng-container *ngIf="history.length > 0">
-  <table>
-    <thead>
-    <tr>
-      <th>Player</th>
-      <th>Banned By</th>
-      <th>Reason</th>
-      <th>Date</th>
-      <th>Expires</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr *ngFor="let entry of history">
-      <td>{{ entry.username }}</td>
-      <td>{{ entry.punishedBy }}</td>
-      <td>{{ entry.reason }}</td>
-      <td>{{ getPunishmentTime(entry) }}</td>
-      <td>{{ getExpiredTime(entry) }}</td>
-    </tr>
-    </tbody>
+  <table [cellSpacing]="0">
+    <div style="width: 1300px; background-color: #dadada;">
+      <thead>
+      <tr>
+        <th class="historyPlayer">Player</th>
+        <th class="historyPlayer">Banned By</th>
+        <th class="historyReason">Reason</th>
+        <th class="historyDate">Date</th>
+        <th class="historyDate">Expires</th>
+      </tr>
+      </thead>
+    </div>
+    <div>
+      <tbody>
+      <tr *ngFor="let entry of history">
+        <td class="historyPlayer">{{ entry.username }}</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>
+      </tr>
+      </tbody>
+    </div>
   </table>
 </ng-container>
 

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

@@ -0,0 +1,34 @@
+table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+thead {
+  height: 25px;
+  font-size: 1.1em;
+}
+
+tbody {
+  font-size: 0.9em;
+}
+
+td {
+  padding: 5px 0 5px 0;
+}
+
+th, td {
+  text-overflow: ellipsis;
+}
+
+.historyPlayer {
+  width: 200px;
+  text-overflow: clip;
+}
+
+.historyReason {
+  width: 940px;
+}
+
+.historyDate {
+  width: 160px;
+}