From 2e252c5a932fcfe6de1d63fe0e84aed194c0b59d Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 26 Apr 2021 21:53:42 +0200
Subject: [PATCH] Improve colors in dark mode, improve user table
---
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,