Updated styles and structure for history table and navigation

Refactored the history buttons to include click handlers in the outer div for better clarity and functionality. Improved the table styling in the history component by adding consistent padding, fixing column widths, and ensuring text overflow handling. Added new CSS variables for table header colors to enhance theming consistency.

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

@@ -11,20 +11,20 @@
       <div class="container">
         <div class="columnSection">
           <div class="historyButtonContainer">
-            <div [id]="getCurrentButtonId('all')" class="button-outer">
-              <span class="button-inner" (click)="changeHistoryPunishment('all')"
+            <div [id]="getCurrentButtonId('all')" class="button-outer" (click)="changeHistoryPunishment('all')">
+              <span class="button-inner"
                     [ngClass]="active">All</span>
             </div>
-            <div [id]="getCurrentButtonId('ban')" class="button-outer">
-              <span class="button-inner" (click)="changeHistoryPunishment('ban')"
+            <div [id]="getCurrentButtonId('ban')" class="button-outer" (click)="changeHistoryPunishment('ban')">
+              <span class="button-inner"
                     [ngClass]="active">Bans</span>
             </div>
-            <div [id]="getCurrentButtonId('mute')" class="button-outer">
-              <span class="button-inner" (click)="changeHistoryPunishment('mute')"
+            <div [id]="getCurrentButtonId('mute')" class="button-outer" (click)="changeHistoryPunishment('mute')">
+              <span class="button-inner"
                     [ngClass]="active">Mutes</span>
             </div>
-            <div [id]="getCurrentButtonId('warn')" class="button-outer">
-              <span class="button-inner" (click)="changeHistoryPunishment('warn')"
+            <div [id]="getCurrentButtonId('warn')" class="button-outer" (click)="changeHistoryPunishment('warn')">
+              <span class="button-inner"
                     [ngClass]="active">Warnings</span>
             </div>
           </div>
@@ -50,7 +50,7 @@
           <app-history [userType]="userType" [punishmentType]="punishmentType"
                        [page]="page" [searchTerm]="finalSearchTerm"></app-history>
         </div>
-        <div>
+        <div class="changePageButtons">
           <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
                   (click)="setPage(0)">
             First page

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

@@ -1,6 +1,7 @@
 table {
   width: 100%;
   table-layout: fixed;
+  border-collapse: collapse;
 }
 
 thead {
@@ -23,6 +24,35 @@ th {
 
 th, td {
   text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 5px 0 8px 0;
+  box-sizing: border-box;
+}
+
+th.historyType, td.historyType {
+  width: 100px !important;
+  min-width: 100px;
+  max-width: 100px;
+  white-space: nowrap;
+}
+
+th.historyPlayer, td.historyPlayer {
+  width: 180px !important;
+  min-width: 180px;
+  max-width: 180px;
+}
+
+th.historyReason, td.historyReason {
+  width: 540px !important;
+  min-width: 540px;
+  max-width: 540px;
+}
+
+th.historyDate, td.historyDate {
+  width: 150px !important;
+  min-width: 150px;
+  max-width: 150px;
 }
 
 table tr td {
@@ -30,10 +60,12 @@ table tr td {
 }
 
 .historyType {
-  width: 100px;
+  max-width: 100%;
+  width: 80px;
 }
 
 .historyPlayer {
+  max-width: 100%;
   width: 200px;
   text-overflow: clip;
 }
@@ -59,9 +91,12 @@ img {
 }
 
 .historyReason {
-  width: 920px;
+  width: 650px;
 }
 
 .historyDate {
   width: 170px;
 }
+
+.changePageButtons {
+}

frontend/src/styles.scss

@@ -22,6 +22,7 @@
   --navlink-color: #4B4B4B;
   --link-color: #1F9BDE;
   --history-link-color: #A3A3A3;
+  --history-table-head: #DADADA;
   --hamburger: #232323;
   --dropdown-color: #DFDFDF;
   --footer-color: #202020;
@@ -39,6 +40,7 @@
   --navlink-color: #FFFFFF;
   --link-color: #20729E;
   --history-link-color: #4A4A4A;
+  --history-table-head: #5C5C5C;
   --hamburger: #CDCDCD;
   --dropdown-color: #303233;
   --footer-color: #242526;