From a904208d061a7fb36a9844932d036b2688571571 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 21 Aug 2021 14:56:50 +0200
Subject: [PATCH] Feature/improve table styling (#307)

* Improve table styling

* Update changelog
---
 CHANGELOG.md                                 |  1 +
 apps/client/src/styles.scss                  | 21 +++++++--------
 apps/client/src/styles/ghostfolio-style.scss | 28 --------------------
 apps/client/src/styles/table.scss            | 27 +++++++++++++++++++
 4 files changed, 37 insertions(+), 40 deletions(-)
 create mode 100644 apps/client/src/styles/table.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7514ff9c..c9363b90f 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index e41b3b0f7..1a81dd9af 100644
--- a/apps/client/src/styles.scss
+++ b/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;
 }
diff --git a/apps/client/src/styles/ghostfolio-style.scss b/apps/client/src/styles/ghostfolio-style.scss
index d6056aca7..aef1f6a12 100644
--- a/apps/client/src/styles/ghostfolio-style.scss
+++ b/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)
-        );
-      }
-    }
-  }
-}
diff --git a/apps/client/src/styles/table.scss b/apps/client/src/styles/table.scss
new file mode 100644
index 000000000..19d9033f5
--- /dev/null
+++ b/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)
+        );
+      }
+    }
+  }
+}