Feature/improve table styling (#307)

* Improve table styling

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the wording for the _Restricted View_: _Presenter View_
+- Improved the styling of the tables
 
 ## 1.40.0 - 19.08.2021
 

apps/client/src/styles.scss

@@ -1,6 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 @import './styles/bootstrap';
+@import './styles/table';
 
 @import '~angular-material-css-vars/main';
 
@@ -68,6 +69,10 @@ body {
       }
     }
 
+    .gf-table {
+      @include gf-table(true);
+    }
+
     .mat-card {
       background: var(--dark-background);
 
@@ -129,6 +134,10 @@ ngx-skeleton-loader {
   }
 }
 
+.gf-table {
+  @include gf-table;
+}
+
 .mat-fab,
 .mat-flat-button {
   &.mat-primary {
@@ -147,18 +156,6 @@ ngx-skeleton-loader {
   margin: 0 !important;
 }
 
-.mat-row {
-  &:last-child {
-    td.mat-cell {
-      border-bottom-width: 0;
-    }
-  }
-}
-
-.mat-table {
-  background: transparent !important;
-}
-
 .no-min-width {
   min-width: unset !important;
 }

apps/client/src/styles/ghostfolio-style.scss

@@ -4,31 +4,3 @@ $mat-css-dark-theme-selector: '.is-dark-theme';
 
 $alpha-disabled-text: 0.38;
 $alpha-hover: 0.04;
-
-.gf-table {
-  td {
-    border: 0;
-  }
-
-  .mat-row {
-    &:nth-child(even) {
-      background-color: rgba(
-        var(--dark-primary-text),
-        var(--palette-background-hover-alpha)
-      );
-    }
-  }
-}
-
-.is-dark-theme {
-  .gf-table {
-    .mat-row {
-      &:nth-child(even) {
-        background-color: rgba(
-          var(--light-primary-text),
-          var(--palette-background-hover-alpha)
-        );
-      }
-    }
-  }
-}

apps/client/src/styles/table.scss

@@ -0,0 +1,27 @@
+@mixin gf-table($darkTheme: false) {
+  background: transparent !important;
+
+  td {
+    border: 0 !important;
+  }
+
+  .mat-row {
+    &:nth-child(even) {
+      background-color: rgba(
+        var(--palette-foreground-base),
+        var(--palette-background-hover-alpha)
+      );
+    }
+  }
+
+  @if $darkTheme {
+    .mat-row {
+      &:nth-child(even) {
+        background-color: rgba(
+          var(--palette-foreground-base-dark),
+          var(--palette-background-hover-alpha)
+        );
+      }
+    }
+  }
+}