Improve style

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

@@ -11,7 +11,7 @@
           [routerLink]="routerLinkRegister"
         >
           <div
-            class="cursor-pointer d-inline-block info-message px-3 py-2"
+            class="cursor-pointer d-inline-block info-message"
             (click)="onCreateAccount()"
           >
             <span i18n>You are using the Live Demo.</span>
@@ -20,7 +20,7 @@
         >
         <div
           *ngIf="!canCreateAccount && info?.systemMessage && user"
-          class="cursor-pointer d-inline-block info-message px-3 py-2 text-truncate"
+          class="cursor-pointer d-inline-block info-message text-truncate"
           (click)="onShowSystemMessage()"
         >
           {{ info.systemMessage }}

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

@@ -12,18 +12,16 @@
         height: var(--mat-toolbar-standard-height);
 
         .info-message-inner-container {
-          background-color: var(--light-background);
+          background-color: rgba(var(--palette-primary-500), 1);
           height: var(--mat-toolbar-standard-height);
           z-index: 999;
 
           .info-message {
-            background-color: rgba(var(--palette-foreground-text), 0.05);
-            border-radius: 2rem;
+            color: rgba(var(--palette-foreground-text), 1);
             font-size: 80%;
             max-width: 100%;
 
             .a {
-              color: rgba(var(--palette-primary-500), 1);
               font-weight: 500;
             }
           }
@@ -51,20 +49,6 @@
 }
 
 :host-context(.is-dark-theme) {
-  &.has-info-message {
-    header {
-      .info-message-container {
-        .info-message-inner-container {
-          background-color: var(--dark-background);
-
-          .info-message {
-            background-color: rgba(var(--palette-foreground-text-dark), 0.05);
-          }
-        }
-      }
-    }
-  }
-
   footer {
     background-color: rgba(var(--palette-foreground-text-dark), 0.05);
   }