slicing dashboard

src/app/_layout/header/vertical/vertical.component.html

@@ -1,7 +1,6 @@
 <nav
   class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
   [ngClass]="selectedHeaderNavBarClass"
-  style="background-color: #000000 !important"
 >
   <div class="navbar-wrapper">
     <div
@@ -10,7 +9,7 @@
       [ngClass]="selectedNavBarHeaderClass"
       (mouseenter)="mouseEnter($event)"
       (mouseleave)="mouseLeave($event)"
-      style="background-color: #252525 !important"
+      style="background-color: #fbfbfb !important"
     >
       <ul class="nav navbar-nav flex-row">
         <!-- Remove position relative in responsive -->
@@ -43,7 +42,7 @@
                 text-overflow: ellipsis;
               "
             >
-              <h3 class="brand-text" style="color: #ffffff; margin: 0">
+              <h3 class="brand-text" style="color: #242222; margin: 0">
                 Smart Building
               </h3>
             </div>
@@ -119,7 +118,7 @@
               <span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
             </a> -->
             <a class="nav-link nav-link-label">
-              <i class="ficon la la-bell" style="color: #bef264"></i>
+              <i class="ficon la la-bell" style="color: #242424"></i>
               <!-- <span class="badge badge-pill badge-danger badge-up badge-glow">5</span> -->
             </a>
             <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
@@ -321,7 +320,7 @@
               <span
                 *ngIf="currentUser.displayName"
                 class="mr-1 user-name text-bold-700"
-                style="color: #ffffff"
+                style="color: #242222"
                 >{{ currentUser.displayName }}</span
               >
               <span