- Add unlock-button

- Clear code

Author: Blari

src/app/pages/dashboard/containers/dashboard-page/dashboard-page.component.html

@@ -1,7 +1,7 @@
 <app-layout>
   <mat-toolbar class="page-header" role="heading">
     <h1>Dashboard</h1>
-    <button mat-flat-button>Latest Reports</button>
+    <button mat-flat-button color="warn">Latest Reports</button>
   </mat-toolbar>
 
   <div class="charts-wrapper">

src/app/pages/ui-elements/components/icons-page/icons-page.component.html

@@ -1,7 +1,7 @@
 <app-layout>
   <mat-toolbar class="page-header" role="heading">
     <h1>Icons</h1>
-    <button mat-flat-button>Actions</button>
+    <button mat-flat-button color="warn">Actions</button>
   </mat-toolbar>
 
   <mat-card class="icons-wrapper">

src/app/pages/ui-elements/containers/charts-page/charts-page.component.html

@@ -1,7 +1,7 @@
 <app-layout>
   <mat-toolbar role="heading" class="page-header">
     <h1>Charts Page - Data Display</h1>
-    <button mat-flat-button>Latest Reports</button>
+    <button mat-flat-button color="warn">Latest Reports</button>
   </mat-toolbar>
 
   <div class="charts-content">

src/app/shared/header/containers/header/header.component.html

@@ -9,9 +9,17 @@ <h6 class="header__title-text">Angular Material Admin</h6>
   </div>
 
   <div class="header-toolbar">
+    <a
+      mat-stroked-button
+      color="error"
+      class="unlock-button"
+      href="https://flatlogic.com/templates/angular-material-admin-full/demo"
+      target="_blank"
+    >Unlock Full Version</a>
     <app-search></app-search>
     <app-notifications></app-notifications>
     <app-email [emails]="emails$ | async"></app-email>
     <app-user [user]="user$ | async" (signOut)="signOut()"></app-user>
   </div>
+
 </mat-toolbar>

src/app/shared/header/containers/header/header.component.scss

@@ -46,4 +46,12 @@
 .header-toolbar {
   display: flex;
   align-items: center;
+
+  .unlock-button {
+    border-color: $pink;
+    margin-right: 16px;
+    @media (max-width: $small) {
+      display: none;
+    }
+  }
 }

src/custom-theme.scss

@@ -142,7 +142,6 @@ button.mat-menu-item:hover:not([disabled]), .mat-menu-item.cdk-program-focused:n
   font-size: 16px;
 }
 
-
 mat-select.mat-select {
   width: auto;
   display: inline;
@@ -265,8 +264,6 @@ mat-toolbar.page-header {
 .mat-toolbar button {
   height: 41.6px;
   width: auto;
-  color: $toolbar-button-font-color;
-  background-color: $toolbar-button-background-color;
   line-height: 1.75;
   font-size: 0.9375rem;
   font-weight: 400;
@@ -276,10 +273,6 @@ mat-toolbar.page-header {
   }
 }
 
-.mat-toolbar button:hover {
-  background-color: $toolbar-button-background-color-active;
-}
-
 mat-tab-header .mat-tab-label, .mat-tab-link {
   text-transform: uppercase;
   color: $tabs-header-font-color;