Adapt style of inactive users (#3114)

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">{{
+                <span
-                  element.id
+                  class="d-none d-sm-inline-block text-monospace"
-                }}</span>
+                  [ngClass]="{
-                <span class="d-inline-block d-sm-none text-monospace">{{
+                    'text-line-through': element.role === 'INACTIVE'
-                  (element.id | slice: 0 : 5) + '...'
+                  }"
-                }}</span>
+                  >{{ 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"

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));