fix(admin): logout button with icon

Logout button was moved out of drop-down menu.

Author: sarkapalkovicova

libs/perun/components/src/lib/header-menu/header-menu.component.html

@@ -12,17 +12,11 @@
     </button>
   </mat-menu>
 
-  <button mat-button [matMenuTriggerFor]="menu">
-    <mat-icon class="mb-1 me-3" [ngStyle]="{'color': iconColor, 'font-size': '24px'}">
-      person
-    </mat-icon>
-    <span *ngIf="user !== null" [ngStyle]="{'color': textColor}" class="d-none d-lg-inline">
-      {{user | userFullName}}
-    </span>
+  <button
+    mat-icon-button
+    *ngIf="logoutEnabled"
+    (click)="onLogOut()"
+    [matTooltip]="'NAV.LOGOUT'|translate">
+    <mat-icon>logout</mat-icon>
   </button>
-  <mat-menu #menu="matMenu">
-    <button mat-menu-item *ngIf="logoutEnabled" (click)="onLogOut()">
-      {{'NAV.LOGOUT' | translate}}
-    </button>
-  </mat-menu>
 </div>

libs/perun/components/src/lib/perun-header/perun-header.component.html

@@ -35,6 +35,13 @@
       </mat-menu>
     </div>
 
+    <span
+      *ngIf="principal.user !== null"
+      [ngStyle]="{'color': textColor}"
+      class="d-none d-lg-inline displayed-name me-1">
+      {{principal.user | userFullName}}
+    </span>
+
     <button
       *ngIf="showNotifications"
       [matTooltip]="'NAV.NOTIFICATIONS_TOOLTIP'|translate"

libs/perun/components/src/lib/perun-header/perun-header.component.scss

@@ -50,3 +50,8 @@
   align-items: center;
   padding-right: 16px;
 }
+
+.displayed-name {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  font-size: 80%;
+}