Feature/set actions columns of tables to stick at end (#2726)

* Set up stickyEnd in actions columns

* Update changelog

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`)

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>

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

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"

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"

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"

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"

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"

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;
+      background-color: #e6e6e6 !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);
     }
   }
 
   @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);
+        background-color: #222222;
-      }
-
-      &: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);
       }
 
       &:hover {
-        background-color: rgba(var(--palette-foreground-base-dark), 0.05);
+        background-color: #303030 !important;
       }
     }
   }

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

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="