Make system message expandable

apps/client/src/app/app.component.html

@@ -31,7 +31,8 @@
         >
         <div
           *ngIf="!canCreateAccount && info?.systemMessage && user"
-          class="d-inline-block info-message px-3 py-2"
+          class="cursor-pointer d-inline-block info-message px-3 py-2 text-truncate"
+          (click)="onShowSystemMessage()"
         >
           {{ info.systemMessage }}
         </div>

apps/client/src/app/app.component.scss

@@ -13,9 +13,10 @@
       margin-top: -0.5rem;
 
       .info-message {
-        background-color: rgba(0, 0, 0, $alpha-hover);
+        background-color: rgba(var(--palette-foreground-text), 0.05);
         border-radius: 2rem;
         font-size: 80%;
+        max-width: 100%;
 
         .a {
           color: rgba(var(--palette-primary-500), 1);
@@ -30,3 +31,13 @@
     line-height: 1;
   }
 }
+
+:host-context(.is-dark-theme) {
+  main {
+    .info-message-container {
+      .info-message {
+        background-color: rgba(var(--palette-foreground-text-dark), 0.05);
+      }
+    }
+  }
+}

apps/client/src/app/app.component.ts

@@ -100,6 +100,10 @@ export class AppComponent implements OnDestroy, OnInit {
     this.tokenStorageService.signOut();
   }
 
+  public onShowSystemMessage() {
+    alert(this.info.systemMessage);
+  }
+
   public onSignOut() {
     this.tokenStorageService.signOut();
     this.userService.remove();