From 7a3237f1ff2fa20887c351921a7eae3f27131bb9 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 8 Mar 2024 18:59:23 +0100
Subject: [PATCH] Adapt style of inactive users (#3114)

---
 .../components/admin-users/admin-users.html   | 20 +++++++++++++------
 apps/client/src/styles.scss                   |  4 ++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index 6b83a6ab0..b8eaa28ab 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -35,12 +35,20 @@
               mat-cell
             >
               <div class="d-flex align-items-center">
-                <span class="d-none d-sm-inline-block text-monospace">{{
-                  element.id
-                }}</span>
-                <span class="d-inline-block d-sm-none text-monospace">{{
-                  (element.id | slice: 0 : 5) + '...'
-                }}</span>
+                <span
+                  class="d-none d-sm-inline-block text-monospace"
+                  [ngClass]="{
+                    'text-line-through': element.role === 'INACTIVE'
+                  }"
+                  >{{ element.id }}</span
+                >
+                <span
+                  class="d-inline-block d-sm-none text-monospace"
+                  [ngClass]="{
+                    'text-line-through': element.role === 'INACTIVE'
+                  }"
+                  >{{ (element.id | slice: 0 : 5) + '...' }}</span
+                >
                 <gf-premium-indicator
                   *ngIf="element?.subscription?.type === 'Premium'"
                   class="ml-1"
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index f4a50549b..6d3cffff2 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -587,6 +587,10 @@ ngx-skeleton-loader {
   text-decoration: underline !important;
 }
 
+.text-line-through {
+  text-decoration: line-through;
+}
+
 .with-placeholder-as-option {
   .mat-mdc-select-placeholder {
     color: rgba(var(--dark-primary-text));