Refactor table and pagination UI components.

Replaced inline styles with reusable classes for better maintainability. Improved pagination button styling and added transitions to the history table header for a polished user experience. Updated SCSS variables for consistent naming conventions.

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

@@ -4,7 +4,7 @@
 
 <ng-container *ngIf="history.length > 0">
   <table [cellSpacing]="0">
-    <div style="width: 1300px; background-color: #dadada;">
+    <div class="historyTableHead">
       <thead>
       <tr>
         <th class="historyType">Type</th>

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

@@ -2,6 +2,7 @@ table {
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
+  border-radius: 5px;
 }
 
 thead {
@@ -59,6 +60,14 @@ table tr td {
   vertical-align: middle;
 }
 
+.historyTableHead {
+  width: 1300px;
+  background-color: var(--history-table-head-color);
+  transition: all 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), 0.5s background ease;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.2), 0 6px 20px -8px rgba(0, 0, 0, 0.19);
+}
+
 .historyType {
   max-width: 100%;
   width: 80px;
@@ -97,6 +106,3 @@ img {
 .historyDate {
   width: 170px;
 }
-
-.changePageButtons {
-}