Improve colors in dark mode, improve user table (#49)

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

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>

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(

apps/client/src/styles.scss

@@ -57,11 +57,20 @@ body {
       }
     }
 
-    .mat-card:not([class*='mat-elevation-z']) {
+    .mat-card {
-      border-color: rgba(
+      background: var(--dark-background);
-        var(--light-primary-text),
+
-        var(--palette-foreground-divider-alpha)
+      &: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,