From 11700f75d9a3e80f14d299b2883d370b41992736 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 26 Apr 2021 21:54:19 +0200
Subject: [PATCH] Improve colors in dark mode, improve user table (#49)

---
 CHANGELOG.md                                  |  7 +++++++
 .../src/app/pages/admin/admin-page.html       |  8 ++++----
 .../src/app/pages/admin/admin-page.scss       |  2 ++
 apps/client/src/styles.scss                   | 19 ++++++++++++++-----
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f51db0602..9a12a504e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the user table styling of the admin control panel
+- Improved the background colors in the dark mode
+
 ## 0.92.0 - 25.04.2021
 
 ### Added
diff --git a/apps/client/src/app/pages/admin/admin-page.html b/apps/client/src/app/pages/admin/admin-page.html
index 89b744414..af77e5b8a 100644
--- a/apps/client/src/app/pages/admin/admin-page.html
+++ b/apps/client/src/app/pages/admin/admin-page.html
@@ -74,19 +74,19 @@
           <table>
             <thead>
               <tr class="mat-header-row">
-                <th class="mat-header-cell pl-2 py-2" i18n>User</th>
+                <th class="mat-header-cell pl-3 py-2" i18n>User</th>
                 <th class="mat-header-cell pr-2 py-2" i18n>
                   Registration Date
                 </th>
                 <th class="mat-header-cell pr-2 py-2" i18n>Accounts</th>
                 <th class="mat-header-cell pr-2 py-2" i18n>Transactions</th>
                 <th class="mat-header-cell pr-2 py-2" i18n>Engagement</th>
-                <th class="mat-header-cell pr-2 py-2" i18n>Last Activitiy</th>
+                <th class="mat-header-cell pr-3 py-2" i18n>Last Activitiy</th>
               </tr>
             </thead>
             <tbody>
               <tr *ngFor="let userItem of users" class="mat-row">
-                <td class="mat-cell pl-2 py-2">
+                <td class="mat-cell pl-3 py-2">
                   {{ userItem.alias || userItem.id }}
                 </td>
                 <td class="mat-cell pr-2 py-2">
@@ -99,7 +99,7 @@
                 <td class="mat-cell pr-2 py-2">
                   {{ userItem.Analytics?.activityCount }}
                 </td>
-                <td class="mat-cell pr-2 py-2">
+                <td class="mat-cell pr-3 py-2">
                   {{ formatDistanceToNow(userItem.Analytics?.updatedAt) }}
                 </td>
               </tr>
diff --git a/apps/client/src/app/pages/admin/admin-page.scss b/apps/client/src/app/pages/admin/admin-page.scss
index 05f3b94f5..02ea2f3f6 100644
--- a/apps/client/src/app/pages/admin/admin-page.scss
+++ b/apps/client/src/app/pages/admin/admin-page.scss
@@ -7,6 +7,8 @@
       overflow-x: auto;
 
       table {
+        min-width: 100%;
+
         tr {
           &:nth-child(even) {
             background-color: rgba(
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 3ddc76830..2497bcd87 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -57,11 +57,20 @@ body {
       }
     }
 
-    .mat-card:not([class*='mat-elevation-z']) {
-      border-color: rgba(
-        var(--light-primary-text),
-        var(--palette-foreground-divider-alpha)
-      );
+    .mat-card {
+      background: var(--dark-background);
+
+      &:not([class*='mat-elevation-z']) {
+        border-color: rgba(
+          var(--light-primary-text),
+          var(--palette-foreground-divider-alpha)
+        );
+        box-shadow: none;
+      }
+    }
+
+    .mat-dialog-container {
+      background: var(--dark-background);
     }
 
     .mat-fab,