From 4f9a5f034069c2a0ba6b85a2c16f1b245a1233fa Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 6 Dec 2023 18:35:03 +0100
Subject: [PATCH] Feature/set actions columns of tables to stick at end (#2726)

* Set up stickyEnd in actions columns

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../access-table/access-table.component.html  |  2 +-
 .../accounts-table.component.html             |  2 +-
 .../app/components/admin-jobs/admin-jobs.html |  2 +-
 .../admin-market-data/admin-market-data.html  |  2 +-
 .../admin-platform.component.html             |  2 +-
 .../admin-tag/admin-tag.component.html        |  2 +-
 .../components/admin-users/admin-users.html   |  2 +-
 apps/client/src/styles/table.scss             | 43 +++----------------
 .../account-balances.component.html           |  2 +-
 .../activities-table.component.html           |  2 +-
 11 files changed, 17 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ebfd8462..ff0111ba7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Set the actions columns of various tables to stick at the end
 - Increased the height of the tabs on mobile
 - Improved the language localization for German (`de`)
 - Improved the language localization for Türkçe (`tr`)
diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index 589c67e1f..e9138717d 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/apps/client/src/app/components/access-table/access-table.component.html
@@ -37,7 +37,7 @@
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="actions">
+  <ng-container matColumnDef="actions" stickyEnd>
     <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
 
     <td *matCellDef="let element" class="px-1 text-center" mat-cell>
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.html b/apps/client/src/app/components/accounts-table/accounts-table.component.html
index b8c9ac4f7..97a87b716 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.html
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.html
@@ -241,7 +241,7 @@
     ></td>
   </ng-container>
 
-  <ng-container matColumnDef="actions">
+  <ng-container matColumnDef="actions" stickyEnd>
     <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
     <td *matCellDef="let element" class="px-1 text-center" mat-cell>
       <button
diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.html b/apps/client/src/app/components/admin-jobs/admin-jobs.html
index 55224b51c..81e758ba6 100644
--- a/apps/client/src/app/components/admin-jobs/admin-jobs.html
+++ b/apps/client/src/app/components/admin-jobs/admin-jobs.html
@@ -120,7 +120,7 @@
           </td>
         </ng-container>
 
-        <ng-container matColumnDef="actions">
+        <ng-container matColumnDef="actions" stickyEnd>
           <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
             <button
               class="mx-1 no-min-width px-2"
diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.html b/apps/client/src/app/components/admin-market-data/admin-market-data.html
index 4fabde56d..99572cb4e 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.html
@@ -129,7 +129,7 @@
           </td>
         </ng-container>
 
-        <ng-container matColumnDef="actions">
+        <ng-container matColumnDef="actions" stickyEnd>
           <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
             <button
               class="mx-1 no-min-width px-2"
diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.html b/apps/client/src/app/components/admin-platform/admin-platform.component.html
index fd860d440..6d5c84b0f 100644
--- a/apps/client/src/app/components/admin-platform/admin-platform.component.html
+++ b/apps/client/src/app/components/admin-platform/admin-platform.component.html
@@ -68,7 +68,7 @@
           </td>
         </ng-container>
 
-        <ng-container matColumnDef="actions">
+        <ng-container matColumnDef="actions" stickyEnd>
           <th
             *matHeaderCellDef
             class="px-1 text-center"
diff --git a/apps/client/src/app/components/admin-tag/admin-tag.component.html b/apps/client/src/app/components/admin-tag/admin-tag.component.html
index b08ae96d4..905c2190c 100644
--- a/apps/client/src/app/components/admin-tag/admin-tag.component.html
+++ b/apps/client/src/app/components/admin-tag/admin-tag.component.html
@@ -48,7 +48,7 @@
           </td>
         </ng-container>
 
-        <ng-container matColumnDef="actions">
+        <ng-container matColumnDef="actions" stickyEnd>
           <th
             *matHeaderCellDef
             class="px-1 text-center"
diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index 2071e058e..e6efb4ebf 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -178,7 +178,7 @@
             </td>
           </ng-container>
 
-          <ng-container matColumnDef="actions">
+          <ng-container matColumnDef="actions" stickyEnd>
             <th
               *matHeaderCellDef
               class="mat-mdc-header-cell px-1 py-2"
diff --git a/apps/client/src/styles/table.scss b/apps/client/src/styles/table.scss
index 057253095..f232cb1af 100644
--- a/apps/client/src/styles/table.scss
+++ b/apps/client/src/styles/table.scss
@@ -1,5 +1,5 @@
 @mixin gf-table($darkTheme: false) {
-  background: transparent !important;
+  --mat-table-background-color: var(--light-background);
 
   .mat-footer-row,
   .mat-row {
@@ -21,29 +21,17 @@
 
   .mat-mdc-row {
     &:nth-child(even) {
-      background-color: rgba(var(--palette-foreground-base), 0.02);
+      background-color: whitesmoke;
     }
 
     &:hover {
-      background-color: rgba(var(--palette-foreground-base), 0.05) !important;
-    }
-
-    .mat-mdc-cell {
-      background: none;
-    }
-  }
-
-  .mat-row {
-    &:nth-child(even) {
-      background-color: rgba(var(--palette-foreground-base), 0.02);
-    }
-
-    &:hover {
-      background-color: rgba(var(--palette-foreground-base), 0.05);
+      background-color: #e6e6e6 !important;
     }
   }
 
   @if $darkTheme {
+    --mat-table-background-color: var(--dark-background);
+
     .mat-mdc-footer-row {
       .mat-mdc-footer-cell {
         border-top-color: rgba(
@@ -55,28 +43,11 @@
 
     .mat-mdc-row {
       &:nth-child(even) {
-        background-color: rgba(var(--palette-foreground-base-dark), 0.02);
-      }
-
-      &:hover {
-        background-color: rgba(
-          var(--palette-foreground-base-dark),
-          0.05
-        ) !important;
-      }
-
-      .mat-mdc-cell {
-        background: none;
-      }
-    }
-
-    .mat-row {
-      &:nth-child(even) {
-        background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+        background-color: #222222;
       }
 
       &:hover {
-        background-color: rgba(var(--palette-foreground-base-dark), 0.05);
+        background-color: #303030 !important;
       }
     }
   }
diff --git a/libs/ui/src/lib/account-balances/account-balances.component.html b/libs/ui/src/lib/account-balances/account-balances.component.html
index 291f11529..5c0c6b2a1 100644
--- a/libs/ui/src/lib/account-balances/account-balances.component.html
+++ b/libs/ui/src/lib/account-balances/account-balances.component.html
@@ -31,7 +31,7 @@
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="actions">
+  <ng-container matColumnDef="actions" stickyEnd>
     <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
     <td *matCellDef="let element" class="px-1 text-center" mat-cell>
       <button
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index d6a5e05af..18d918006 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@@ -428,7 +428,7 @@
       ></td>
     </ng-container>
 
-    <ng-container matColumnDef="actions">
+    <ng-container matColumnDef="actions" stickyEnd>
       <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
         <button
           *ngIf="