Glocke Styling

apps/sales/src/app/components/header/header.component.html

@@ -11,27 +11,28 @@
       </div>
       <div class="align-center">
         <div class="icons-grid pt-5">
-          <a class="align-right nav-link" (click)="goToDashboard()" *ngIf="module === 0">
+          <div class="align-center">
+            <button class="header-icon dashboard" type="button" [routerLink]="['/dashboard']" routerLinkActive="active">
+              <ui-icon icon="dashboard" size="26px"></ui-icon>
+            </button>
+          </div>
+          <!-- <a class="align-right nav-link" (click)="goToDashboard()" *ngIf="module === 0">
             <lib-icon *ngIf="router.url !== '/dashboard'" width="25px" height="26px" name="Infoboard_inactive"></lib-icon>
             <lib-icon *ngIf="router.url === '/dashboard'" width="25px" height="26px" name="Infoboard"></lib-icon>
           </a>
           <a class="align-right" *ngIf="module === 1">
             <lib-icon width="25px" height="26px" name="Infoboard-branch"></lib-icon>
-          </a>
-          <div class="align-center" *ngIf="module === 0">
-            <button class="header-icon notification" type="button">
-              <span class="notification-counter" *ngIf="notificationCount$ | async; let count">{{ count }}</span>
+          </a> -->
+          <div class="align-center">
+            <button class="header-icon notification" type="button" [class.active]="notificationCount$ | async">
+              <div class="notification-counter" *ngIf="notificationCount$ | async; let count">{{ count }}</div>
               <ui-icon icon="notification" size="26px"></ui-icon>
             </button>
           </div>
-          <div class="align-center" *ngIf="module === 1" (click)="notificationAction()">
-            <lib-icon width="26px" height="26px" name="Notifictation-branch"></lib-icon>
-          </div>
-          <div class="align-left logout" *ngIf="module === 0" (click)="logoff()">
-            <lib-icon width="27px" height="27px" name="Icon_Logout"></lib-icon>
-          </div>
-          <div class="align-left logout" *ngIf="module === 1" (click)="logoff()">
-            <lib-icon width="27px" height="27px" name="Icon_Logout-branch"></lib-icon>
+          <div class="align-center">
+            <button class="header-icon logout" type="button" (click)="logoff()">
+              <ui-icon icon="logout" size="26px"></ui-icon>
+            </button>
           </div>
         </div>
       </div>

apps/sales/src/app/components/header/header.component.scss

@@ -1,23 +1,39 @@
 @import 'variables';
 
-ui-icon {
-  @apply text-inactive-customer;
-}
-
-ui-icon.active {
-  @apply text-active-customer;
-}
-
 button.header-icon {
   @apply border-none outline-none bg-transparent;
 }
 
+::ng-deep .customer app-header {
+  button.header-icon {
+    ui-icon {
+      @apply text-wild-blue-yonder;
+    }
+
+    &.active ui-icon {
+      @apply text-inactive-customer;
+    }
+  }
+}
+
+::ng-deep .branch app-header {
+  button.header-icon {
+    ui-icon {
+      @apply text-cool-grey;
+    }
+
+    &.active ui-icon {
+      @apply text-active-branch;
+    }
+  }
+}
+
 button.notification {
   @apply relative;
 }
 
 .notification-counter {
-  @apply absolute -top-2 -right-1 bg-brand text-white block rounded-full w-5 h-5;
+  @apply absolute flex items-center justify-center -top-2 -right-1 bg-brand text-white text-sm rounded-full w-6 h-6 font-semibold;
   z-index: 10;
 }