Updated the changelog navigation item badge

Upadte the changelog
Increased the Fuse version

CREDITS

@@ -0,0 +1,16 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Image/Vector/Icon Credits
+// -----------------------------------------------------------------------------------------------------
+Avatars - https://uifaces.co/
+Flag icons - http://www.famfamfam.com/lab/icons/flags/
+Frame vector created by Freepik - https://www.freepik.com/free-photos-vectors/frame
+A Walk Amongst Friends - Photo by Kristin Ellis on Unsplash - https://unsplash.com/photos/CbZOGbazDWQ
+Sunrise at Moraine Lake - Photo by Marlon Martinez on Unsplash - https://unsplash.com/photos/woNYcfrnp9M
+Braies Lake - Photo by Luca Nicoletti on Unsplash - https://unsplash.com/photos/dH-L5zPcv3E
+Lago di Sorapis - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/6uDg_zb20EM
+Lago di Braies - Photo by Salmen Bejaoui on Unsplash - https://unsplash.com/photos/uXTozY3CcQg
+Reaching - Photo by Justin Novello on Unsplash - https://unsplash.com/photos/Y14TNvIDllM
+Yosemite - Photo by Tim Mossholder on Unsplash - https://unsplash.com/photos/ZCrtRSSUpGI
+Never Stop Changing - Photo by John Westrock on Unsplash - https://unsplash.com/photos/_GY56uSG70U
+Fall glow - Photo by Casey Horner on Unsplash - https://unsplash.com/photos/gz19zOdgN7w
+First snow - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/LRrGf6dBjA4

LICENSE

@@ -1 +1,2 @@
-https://themeforest.net/licenses/terms/regular
+This project is protected by Envato's Regular License. For more information,
+check the official license page at https://themeforest.net/licenses/terms/regular

README.md

@@ -1,6 +1,6 @@
 # Fuse - Angular
 
-Material Design Admin Template with Angular 6+ and Angular Material
+Material Design Admin Template with Angular 7+ and Angular Material
 
 ## The Community
 

angular.json

@@ -49,7 +49,14 @@
                             "aot": true,
                             "extractLicenses": true,
                             "vendorChunk": false,
-                            "buildOptimizer": true
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                }
+                            ]
                         },
                         "ec": {
                             "sourceMap": true,
@@ -97,7 +104,7 @@
                         "tsConfig": "src/tsconfig.spec.json",
                         "karmaConfig": "src/karma.conf.js",
                         "styles": [
-                            "styles.scss"
+                            "src/styles.scss"
                         ],
                         "scripts": [],
                         "assets": [
@@ -125,12 +132,18 @@
         "fuse-e2e": {
             "root": "e2e/",
             "projectType": "application",
+            "prefix": "",
             "architect": {
                 "e2e": {
                     "builder": "@angular-devkit/build-angular:protractor",
                     "options": {
                         "protractorConfig": "e2e/protractor.conf.js",
                         "devServerTarget": "fuse:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "fuse:serve:production"
+                        }
                     }
                 },
                 "lint": {

e2e/src/app.e2e-spec.ts

@@ -1,14 +1,14 @@
-import { Fuse2Page } from './app.po';
+import { FusePage } from './app.po';
 
-describe('Fuse2 App', () => {
+describe('Fuse App', () => {
-    let page: Fuse2Page;
+    let page: FusePage;
 
     beforeEach(() => {
-        page = new Fuse2Page();
+        page = new FusePage();
     });
 
     it('should display welcome message', () => {
         page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
     });
 });

e2e/src/app.po.ts

@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
-export class Fuse2Page {
+export class FusePage {
     navigateTo(): any {
         return browser.get('/');
     }
 
     getParagraphText(): any {
-        return element(by.css('app-root h1')).getText();
+        return element(by.css('app #main')).getText();
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.3.0",
+  "version": "7.0.1",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -18,72 +18,73 @@
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "1.0.0-beta.3",
+    "@agm/core": "1.0.0-beta.5",
-    "@angular/animations": "6.1.6",
+    "@angular/animations": "7.0.4",
-    "@angular/cdk": "6.4.6",
+    "@angular/cdk": "7.0.4",
-    "@angular/common": "6.1.6",
+    "@angular/common": "7.0.4",
-    "@angular/compiler": "6.1.6",
+    "@angular/compiler": "7.0.4",
-    "@angular/core": "6.1.6",
+    "@angular/core": "7.0.4",
-    "@angular/flex-layout": "6.0.0-beta.16",
+    "@angular/flex-layout": "7.0.0-beta.19",
-    "@angular/forms": "6.1.6",
+    "@angular/forms": "7.0.4",
-    "@angular/http": "6.1.6",
+    "@angular/http": "7.0.4",
-    "@angular/material": "6.4.6",
+    "@angular/material": "7.0.4",
-    "@angular/material-moment-adapter": "6.4.6",
+    "@angular/material-moment-adapter": "7.0.4",
-    "@angular/platform-browser": "6.1.6",
+    "@angular/platform-browser": "7.0.4",
-    "@angular/platform-browser-dynamic": "6.1.6",
+    "@angular/platform-browser-dynamic": "7.0.4",
-    "@angular/router": "6.1.6",
+    "@angular/router": "7.0.4",
-    "@ngrx/effects": "6.1.0",
+    "@ngrx/effects": "6.1.2",
-    "@ngrx/router-store": "6.1.0",
+    "@ngrx/router-store": "6.1.2",
-    "@ngrx/store": "6.1.0",
+    "@ngrx/store": "6.1.2",
-    "@ngrx/store-devtools": "6.1.0",
+    "@ngrx/store-devtools": "6.1.2",
-    "@ngx-translate/core": "10.0.2",
+    "@ngx-translate/core": "11.0.1",
     "@swimlane/dragula": "3.7.3",
-    "@swimlane/ngx-charts": "9.0.0",
+    "@swimlane/ngx-charts": "10.0.0",
-    "@swimlane/ngx-datatable": "13.1.0",
+    "@swimlane/ngx-datatable": "14.0.0",
-    "@swimlane/ngx-dnd": "5.0.6",
+    "@swimlane/ngx-dnd": "6.0.0",
     "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.25.2",
+    "angular-calendar": "0.26.4",
-    "angular-in-memory-web-api": "0.6.1",
+    "angular-in-memory-web-api": "0.7.0",
-    "chart.js": "2.7.2",
+    "chart.js": "2.7.3",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.7",
     "d3": "5.7.0",
+    "date-fns": "1.29.0",
     "hammerjs": "2.0.8",
-    "lodash": "4.17.10",
+    "lodash": "4.17.11",
     "moment": "2.22.2",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.6.0",
+    "ngx-color-picker": "7.0.2",
-    "ngx-cookie-service": "1.0.10",
+    "ngx-cookie-service": "2.0.0",
     "perfect-scrollbar": "1.4.0",
     "prismjs": "1.15.0",
-    "rxjs": "6.2.2",
+    "rxjs": "6.3.3",
-    "rxjs-compat": "6.2.2",
+    "rxjs-compat": "6.3.3",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "6.1.5",
+    "@angular/cli": "7.0.6",
-    "@angular/compiler-cli": "6.1.6",
+    "@angular/compiler-cli": "7.0.4",
-    "@angular/language-service": "6.1.6",
+    "@angular/language-service": "7.0.4",
-    "@angular-devkit/build-angular": "0.7.5",
+    "@angular-devkit/build-angular": "0.10.6",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.8",
+    "@types/jasmine": "2.8.11",
-    "@types/jasminewd2": "2.0.3",
+    "@types/jasminewd2": "2.0.6",
-    "@types/lodash": "4.14.116",
+    "@types/lodash": "4.14.118",
     "@types/node": "8.9.5",
-    "codelyzer": "4.2.1",
+    "codelyzer": "4.5.0",
     "jasmine-core": "2.99.1",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "1.7.1",
+    "karma": "3.0.0",
     "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.2",
+    "karma-coverage-istanbul-reporter": "2.0.4",
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.4.0",
+    "protractor": "5.4.1",
-    "ts-node": "5.0.1",
+    "ts-node": "7.0.1",
-    "tslint": "5.9.1",
+    "tslint": "5.11.0",
-    "typescript": "2.7.2",
+    "typescript": "3.1.6",
-    "webpack-bundle-analyzer": "2.13.1"
+    "webpack-bundle-analyzer": "3.0.3"
   }
 }

src/@fuse/components/demo/demo-content/demo-content.component.html

@@ -37,7 +37,7 @@
         velit.
     </p>
 
-    <img class="mt-24 w-100-p" src="assets/images/etc/early-sunrise.jpg" style="max-width: 640px">
+    <img class="mt-24 w-100-p" src="assets/images/demo-content/morain-lake.jpg" style="max-width: 640px">
 
     <p class="mt-8 mb-24 secondary-text">
         <em>Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor id.</em>

src/@fuse/components/navigation/navigation.component.ts

@@ -1,14 +1,15 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
+import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
-    selector     : 'fuse-navigation',
+    selector       : 'fuse-navigation',
-    templateUrl  : './navigation.component.html',
+    templateUrl    : './navigation.component.html',
-    styleUrls    : ['./navigation.component.scss'],
+    styleUrls      : ['./navigation.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseNavigationComponent implements OnInit
 {
@@ -22,9 +23,12 @@ export class FuseNavigationComponent implements OnInit
     private _unsubscribeAll: Subject<any>;
 
     /**
-     * Constructor
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
      */
     constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService
     )
     {
@@ -48,7 +52,24 @@ export class FuseNavigationComponent implements OnInit
         this._fuseNavigationService.onNavigationChanged
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {
+
+                // Load the navigation
                 this.navigation = this._fuseNavigationService.getCurrentNavigation();
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
             });
+
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
     }
 }

src/@fuse/components/navigation/navigation.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import * as _ from 'lodash';
 
 import { FuseNavigationItem } from '@fuse/types';
 
@@ -15,6 +16,9 @@ export class FuseNavigationService
     private _onNavigationChanged: BehaviorSubject<any>;
     private _onNavigationRegistered: BehaviorSubject<any>;
     private _onNavigationUnregistered: BehaviorSubject<any>;
+    private _onNavigationItemAdded: BehaviorSubject<any>;
+    private _onNavigationItemUpdated: BehaviorSubject<any>;
+    private _onNavigationItemRemoved: BehaviorSubject<any>;
 
     private _currentNavigationKey: string;
     private _registry: { [key: string]: any } = {};
@@ -33,6 +37,9 @@ export class FuseNavigationService
         this._onNavigationChanged = new BehaviorSubject(null);
         this._onNavigationRegistered = new BehaviorSubject(null);
         this._onNavigationUnregistered = new BehaviorSubject(null);
+        this._onNavigationItemAdded = new BehaviorSubject(null);
+        this._onNavigationItemUpdated = new BehaviorSubject(null);
+        this._onNavigationItemRemoved = new BehaviorSubject(null);
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -69,6 +76,36 @@ export class FuseNavigationService
         return this._onNavigationUnregistered.asObservable();
     }
 
+    /**
+     * Get onNavigationItemAdded
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemAdded(): Observable<any>
+    {
+        return this._onNavigationItemAdded.asObservable();
+    }
+
+    /**
+     * Get onNavigationItemUpdated
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemUpdated(): Observable<any>
+    {
+        return this._onNavigationItemUpdated.asObservable();
+    }
+
+    /**
+     * Get onNavigationItemRemoved
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemRemoved(): Observable<any>
+    {
+        return this._onNavigationItemRemoved.asObservable();
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
@@ -295,6 +332,9 @@ export class FuseNavigationService
         {
             navigation.push(item);
 
+            // Trigger the observable
+            this._onNavigationItemAdded.next(true);
+
             return;
         }
 
@@ -302,6 +342,11 @@ export class FuseNavigationService
         if ( id === 'start' )
         {
             navigation.unshift(item);
+
+            // Trigger the observable
+            this._onNavigationItemAdded.next(true);
+
+            return;
         }
 
         // Add it to a specific location
@@ -319,6 +364,33 @@ export class FuseNavigationService
             // Add the item
             parent.children.push(item);
         }
+
+        // Trigger the observable
+        this._onNavigationItemAdded.next(true);
+    }
+
+    /**
+     * Update navigation item with the given id
+     *
+     * @param id
+     * @param properties
+     */
+    updateNavigationItem(id, properties): void
+    {
+        // Get the navigation item
+        const navigationItem = this.getNavigationItem(id);
+
+        // If there is no navigation with the give id, return
+        if ( !navigationItem )
+        {
+            return;
+        }
+
+        // Merge the navigation properties
+        _.merge(navigationItem, properties);
+
+        // Trigger the observable
+        this._onNavigationItemUpdated.next(true);
     }
 
     /**
@@ -346,5 +418,8 @@ export class FuseNavigationService
 
         // Remove the item
         parent.splice(parent.indexOf(item), 1);
+
+        // Trigger the observable
+        this._onNavigationItemRemoved.next(true);
     }
 }

src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts

@@ -1,6 +1,6 @@
-import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { Subject } from 'rxjs';
+import { merge, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationItem } from '@fuse/types';
@@ -30,10 +30,12 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {ChangeDetectorRef} _changeDetectorRef
      * @param {FuseNavigationService} _fuseNavigationService
      * @param {Router} _router
      */
     constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService,
         private _router: Router
     )
@@ -111,6 +113,18 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         {
             this.collapse();
         }
+
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
     }
 
     /**
@@ -154,6 +168,10 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         }
 
         this.isOpen = true;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
         this._fuseNavigationService.onItemCollapseToggled.next();
     }
 
@@ -168,6 +186,10 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         }
 
         this.isOpen = false;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
         this._fuseNavigationService.onItemCollapseToggled.next();
     }
 

src/@fuse/components/navigation/vertical/group/group.component.ts

@@ -1,13 +1,16 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationItem } from '@fuse/types';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-nav-vertical-group',
     templateUrl: './group.component.html',
     styleUrls  : ['./group.component.scss']
 })
-export class FuseNavVerticalGroupComponent
+export class FuseNavVerticalGroupComponent implements OnInit, OnDestroy
 {
     @HostBinding('class')
     classes = 'nav-group nav-item';
@@ -15,11 +18,57 @@ export class FuseNavVerticalGroupComponent
     @Input()
     item: FuseNavigationItem;
 
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
     /**
      * Constructor
      */
-    constructor()
+
+    /**
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 
 }

src/@fuse/components/navigation/vertical/item/item.component.ts

@@ -1,13 +1,16 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationItem } from '@fuse/types';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-nav-vertical-item',
     templateUrl: './item.component.html',
     styleUrls  : ['./item.component.scss']
 })
-export class FuseNavVerticalItemComponent
+export class FuseNavVerticalItemComponent implements OnInit, OnDestroy
 {
     @HostBinding('class')
     classes = 'nav-item';
@@ -15,10 +18,56 @@ export class FuseNavVerticalItemComponent
     @Input()
     item: FuseNavigationItem;
 
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
     /**
      * Constructor
      */
-    constructor()
+
+    /**
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 }

src/@fuse/components/search-bar/search-bar.component.scss

@@ -9,7 +9,7 @@
         height: 64px;
         font-size: 13px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
 
@@ -28,7 +28,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }
@@ -39,7 +39,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }

src/@fuse/components/shortcuts/shortcuts.component.html

@@ -7,7 +7,7 @@
         </button>
     </div>
 
-    <div class="shortcuts" fxHide fxShow.gt-sm>
+    <div class="shortcuts" fxLayout="row" fxHide fxShow.gt-sm>
 
         <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
 

src/@fuse/components/shortcuts/shortcuts.component.scss

@@ -2,7 +2,7 @@
 
 :host {
 
-    @include media-breakpoint-down('sm') {
+    @include media-breakpoint('lt-md') {
 
         #fuse-shortcuts {
 

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -70,9 +70,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         // Get the navigation items and flatten them
         this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation);
 
-        const cookieExists = this._cookieService.check('FUSE2.shortcuts');
+        if ( this._cookieService.check('FUSE2.shortcuts') )
-
-        if ( cookieExists )
         {
             this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
         }
@@ -107,6 +105,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             ];
         }
 
+        // Subscribe to media changes
         this._fuseMatchMediaService.onMediaChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {

src/@fuse/components/sidebar/sidebar.component.scss

@@ -16,7 +16,7 @@ fuse-sidebar {
     z-index: 1000;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
         min-width: 0 !important;
         max-width: 80vw !important;
         width: 80vw !important;

src/@fuse/components/sidebar/sidebar.component.ts

@@ -1,5 +1,5 @@
 import {
-    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation
+    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation
 } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
@@ -174,7 +174,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
 
             // Set the style and class
-            this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+            this._renderer.setStyle(sibling, styleRule, styleValue);
             this._renderer.addClass(this._elementRef.nativeElement, 'folded');
         }
         // If unfolded...
@@ -320,6 +320,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
                 // Get the active status
                 const isActive = this._observableMedia.isActive(this.lockedOpen);
+
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )
                 {
@@ -434,7 +435,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
 
         // Set the style and class
-        this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+        this._renderer.setStyle(sibling, styleRule, styleValue);
         this._renderer.addClass(this._elementRef.nativeElement, 'folded');
     }
 

src/@fuse/components/theme-options/theme-options.component.scss

@@ -30,7 +30,7 @@ fuse-theme-options {
 
             .title {
                 font-size: 20px;
-                font-weight: 500;
+                font-weight: 600;
                 padding-left: 4px;
             }
         }
@@ -56,12 +56,12 @@ fuse-theme-options {
                     margin: 0;
                     padding: 0 8px;
                     font-size: 16px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 h3 {
                     font-size: 14px;
-                    font-weight: 500;
+                    font-weight: 600;
                     margin: 24px 0 16px 0;
                     padding: 0;
 

src/@fuse/components/theme-options/theme-options.component.ts

@@ -118,7 +118,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                 // Reset the form values based on the
                 // selected layout style
                 this._resetFormValues(value);
-
             });
 
         // Subscribe to the form value changes

src/@fuse/components/widget/widget.component.scss

@@ -20,11 +20,13 @@ fuse-widget {
         width: 100%;
         opacity: 1;
         z-index: 10;
-        border-radius: 2px;
+        border-radius: 8px;
         transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
         transform: rotateY(0deg);
         backface-visibility: hidden;
+        border: 1px solid;
     }
+
     > .fuse-widget-back {
         display: block;
         position: absolute;
@@ -36,9 +38,11 @@ fuse-widget {
         visibility: hidden;
         opacity: 0;
         z-index: 10;
+        border-radius: 8px;
         transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
         transform: rotateY(180deg);
         backface-visibility: hidden;
+        border: 1px solid;
 
         [fuseWidgetToggle] {
             position: absolute;

src/@fuse/components/widget/widget.theme.scss

@@ -8,6 +8,7 @@
         > .fuse-widget-front,
         > .fuse-widget-back {
             background: map-get($background, card);
+            border-color: map-get($foreground, divider);
         }
     }
 }

src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -15,7 +15,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 {
     isInitialized: boolean;
     isMobile: boolean;
-    ps: PerfectScrollbar;
+    ps: PerfectScrollbar | any;
 
     // Private
     private _enabled: boolean | '';
@@ -200,6 +200,19 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ps = new PerfectScrollbar(this.elementRef.nativeElement, {
             ...this.fusePerfectScrollbarOptions
         });
+
+        // Unbind 'keydown' events of PerfectScrollbar since it causes an extremely
+        // high CPU usage on Angular Material inputs.
+        // Loop through all the event elements of this PerfectScrollbar instance
+        this.ps.event.eventElements.forEach((eventElement) => {
+
+            // If we hit to the element with a 'keydown' event...
+            if ( typeof eventElement.handlers['keydown'] !== 'undefined' )
+            {
+                // Unbind it
+                eventElement.element.removeEventListener('keydown', eventElement.handlers['keydown'][0]);
+            }
+        });
     }
 
     /**

src/@fuse/scss/core.scss

@@ -17,11 +17,10 @@
 @include mat-core();
 
 // Partials
-@import "partials/reset";
 @import "partials/normalize";
 @import "partials/scrollbars";
 @import "partials/helpers";
-@import "partials/global";
+@import "partials/general";
 @import "partials/icons";
 @import "partials/colors";
 @import "partials/material";
@@ -32,7 +31,6 @@
 @import "partials/cards";
 @import "partials/navigation";
 @import "partials/forms";
-@import "partials/toolbar";
 @import "partials/print";
 
 // Plugins

src/@fuse/scss/fuse.scss

@@ -2,4 +2,4 @@
 @import '~@angular/material/theming';
 
 // Breakpoint mixins
-@import "mixins/breakpoints";
+@import "partials/breakpoints";

src/@fuse/scss/mixins/_breakpoints.scss

@@ -1,126 +0,0 @@
-// Media step breakpoint mixin based on Angular Material lib
-$breakpoints: (
-    xs: 'screen and (max-width: 599px)',
-    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
-    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
-    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
-    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
-    lt-sm: 'screen and (max-width: 599px)',
-    lt-md: 'screen and (max-width: 959px)',
-    lt-lg: 'screen and (max-width: 1279px)',
-    lt-xl: 'screen and (max-width: 1919px)',
-    gt-xs: 'screen and (min-width: 600px)',
-    gt-sm: 'screen and (min-width: 960px)',
-    gt-md: 'screen and (min-width: 1280px)',
-    gt-lg: 'screen and (min-width: 1920px)'
-) !default;
-
-$grid-breakpoints: (
-    xs: 0,
-    sm: 600px,
-    md: 960px,
-    lg: 1280px,
-    xl: 1920px
-) !default;
-
-@mixin media-breakpoint($breakpointName) {
-
-    $mediaQuery: map-get($breakpoints, $breakpointName);
-
-    @if ($mediaQuery != null) {
-
-        @media #{$mediaQuery} {
-            @content
-        }
-    }
-}
-
-//    >> breakpoint-next(sm)
-//    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
-//    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-    $n: index($breakpoint-names, $name);
-    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
-}
-
-// Minimum breakpoint width. Null for the smallest (first) breakpoint.
-//
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-    $min: map-get($breakpoints, $name);
-    @return if($min != 0, $min, null);
-}
-
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.1.
-//
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    767px
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-    $next: breakpoint-next($name, $breakpoints);
-    @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
-}
-
-// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
-// Useful for making responsive utilities.
-//
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
-}
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-min($name, $breakpoints);
-    @if $min {
-        @media (min-width: $min) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-    $max: breakpoint-max($name, $breakpoints);
-    @if $max {
-        @media (max-width: $max) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-max($lower, $breakpoints);
-    $max: breakpoint-max($upper, $breakpoints);
-
-    @media (min-width: $min) and (max-width: $max) {
-        @content;
-    }
-}
-
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-min($name, $breakpoints);
-    $max: breakpoint-max($name, $breakpoints);
-
-    @media (min-width: $min) and (max-width: $max) {
-        @content;
-    }
-}

src/@fuse/scss/partials/_angular-material-fix.scss

@@ -1,3 +1,31 @@
+// Fix: "Remove the cdk-global-scrollblock effects from the HTML"
+// Fuse already blocks the body scroll so it doesn't need this feature. We are disabling it
+// because on Windows, it causes a scrollbar to show up.
+html {
+
+    &.cdk-global-scrollblock {
+        position: relative !important;
+        overflow: hidden !important;
+    }
+}
+
+// Fix: "Inconsistent button heights due to inconsistent line heights"
+button {
+
+    .mat-button-wrapper {
+        line-height: normal;
+    }
+}
+
+.mat-icon {
+
+    // Fix: "Font-weight config affecting the icons"
+    font-weight: 400 !important;
+
+    // Fix: "Inconsistent positioning on custom font icons"
+    line-height: 1;
+}
+
 // Fix: "Icon button ripple radius is not correct on Edge & Safari"
 .mat-icon-button {
 
@@ -30,9 +58,9 @@
     background-color: rgba(0, 0, 0, 0.12);
 }
 
-// Fix: "Table-cell and inline-table in mat-select"
 .mat-form-field {
 
+    // Fix: "Table-cell and inline-table in mat-select"
     &.mat-form-field-type-mat-select {
 
         .mat-form-field-infix {

src/@fuse/scss/partials/_breakpoints.scss

@@ -0,0 +1,38 @@
+// Media step breakpoint mixin based on Angular Material lib
+$breakpoints: (
+    xs: 'screen and (max-width: 599px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
+    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
+    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
+    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
+    lt-sm: 'screen and (max-width: 599px)',
+    lt-md: 'screen and (max-width: 959px)',
+    lt-lg: 'screen and (max-width: 1279px)',
+    lt-xl: 'screen and (max-width: 1919px)',
+    gt-xs: 'screen and (min-width: 600px)',
+    gt-sm: 'screen and (min-width: 960px)',
+    gt-md: 'screen and (min-width: 1280px)',
+    gt-lg: 'screen and (min-width: 1920px)'
+) !default;
+
+// Re-map the breakpoints for the helper classes
+$helper-breakpoints: (
+    xs: null,
+    sm: 'gt-xs',
+    md: 'gt-sm',
+    lg: 'gt-md',
+    xl: 'gt-lg'
+);
+
+@mixin media-breakpoint($breakpointName) {
+
+    $mediaQuery: map-get($breakpoints, $breakpointName);
+
+    @if ($mediaQuery == null) {
+        @content
+    } @else {
+        @media #{$mediaQuery} {
+            @content
+        }
+    }
+}

src/@fuse/scss/partials/_cards.scss

@@ -8,6 +8,7 @@
 
     .fuse-card {
         background: map-get($background, card);
+        border-color: map-get($foreground, divider);
 
         .card-divider {
             border-top: 1px solid map-get($foreground, divider);
@@ -21,8 +22,8 @@
 .fuse-card {
     max-width: 320px;
     min-width: 320px;
-    border-radius: 2px;
+    border-radius: 8px;
-    @include mat-elevation(2);
+    border: 1px solid;
 
     &.variable-width {
         min-width: 0;

src/@fuse/scss/partials/_general.scss

@@ -0,0 +1,70 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Body scroll lock
+// -----------------------------------------------------------------------------------------------------
+html,
+body {
+    display: flex;
+    flex: 1 0 auto;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    min-height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Boxed body
+// -----------------------------------------------------------------------------------------------------
+body {
+
+    // Boxed
+    &.boxed {
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @include mat-elevation(8);
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  @ Text rendering & box sizing
+/*----------------------------------------------------------------*/
+* {
+    text-rendering: optimizeLegibility;
+    -o-text-rendering: optimizeLegibility;
+    -ms-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    -webkit-text-rendering: optimizeLegibility;
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+
+    &:before, &:after {
+        box-sizing: border-box;
+    }
+
+    // Remove focus outline
+    &:focus {
+        outline: none;
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Responsive images
+// -----------------------------------------------------------------------------------------------------
+
+img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: top;
+    border: none;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Input
+// -----------------------------------------------------------------------------------------------------
+input {
+    border: none;
+    padding: 0 16px;
+}

src/@fuse/scss/partials/_global.scss

@@ -1,23 +0,0 @@
-html,
-body {
-    display: flex;
-    flex: 1 0 auto;
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-}
-
-body {
-
-    // Boxed
-    &.boxed {
-        max-width: 1200px;
-        margin: 0 auto;
-
-        @include mat-elevation(8);
-    }
-}

src/@fuse/scss/partials/_helpers.scss

@@ -1,11 +1,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Position helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         .position#{$infix}-relative {
             position: relative;
@@ -24,11 +24,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Absolute position alignment helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         .align#{$infix}-top {
             top: 0;
@@ -78,11 +78,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Spacing helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         @each $prop, $abbrev in (margin: m, padding: p) {
 

src/@fuse/scss/partials/_icons.scss

@@ -7,11 +7,11 @@ mat-icon {
     min-height: 24px;
     line-height: 24px;
 
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-        @include media-breakpoint-up($breakpoint) {
+        @include media-breakpoint($materialBreakpoint) {
 
-            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
             @for $size from 2 through 128 {
 

src/@fuse/scss/partials/_material.scss

@@ -172,7 +172,7 @@
     margin: 0 8px 0 0;
     border-radius: 50%;
     font-size: 17px;
-    font-weight: 500;
+    font-weight: 600;
     text-align: center;
 
     &.square {
@@ -230,13 +230,12 @@ mat-icon.status {
         color: #F44336;
 
         &:before {
-            content: "do_not_disturb_on";
+            content: "remove_circle_outline";
         }
     }
 
     &.away {
-        background-color: #FFC107;
+        color: #FFC107;
-        color: #FFFFFF;
 
         &:before {
             content: "access_time";
@@ -245,7 +244,6 @@ mat-icon.status {
 
     &.offline {
         color: #646464;
-        background-color: #FFFFFF;
 
         &:before {
             content: "not_interested";
@@ -287,14 +285,14 @@ mat-icon.status {
 
         .title {
             font-size: 13px;
-            font-weight: 500;
+            font-weight: 600;
             line-height: 1;
         }
     }
 
     .subheader {
         font-size: 13px;
-        font-weight: 500;
+        font-weight: 600;
         margin-top: 8px;
     }
 
@@ -310,8 +308,9 @@ mat-icon.status {
     position: relative;
     display: inline-flex;
     flex-direction: row;
-    @include mat-elevation(1);
     padding: 0 8px;
+    border-radius: 4px;
+    @include mat-elevation(1);
 
     .pagination-item {
         display: flex;
@@ -364,7 +363,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 24px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -406,14 +405,14 @@ mat-icon.status {
                 left: 50%;
                 transform: translateX(-50%);
                 font-size: 11px;
-                font-weight: 500;
+                font-weight: 600;
                 padding: 6px 8px;
             }
 
             .package-type {
                 padding: 48px 32px 24px 32px;
                 font-size: 20px;
-                font-weight: 500;
+                font-weight: 600;
                 text-align: center;
             }
 
@@ -423,7 +422,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 24px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -436,7 +435,7 @@ mat-icon.status {
             .period {
                 padding: 0 32px;
                 font-size: 15px;
-                font-weight: 500;
+                font-weight: 600;
                 text-align: center;
             }
 
@@ -471,7 +470,7 @@ mat-icon.status {
 
                 .subtitle {
                     font-size: 17px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
             }
 
@@ -481,7 +480,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 15px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -546,7 +545,7 @@ table {
 
                 th {
                     padding: 16px 8px;
-                    font-weight: 500;
+                    font-weight: 600;
                     white-space: nowrap;
 
                     &:first-child {

src/@fuse/scss/partials/_navigation.scss

@@ -4,7 +4,7 @@
         display: flex;
         align-items: center;
         height: 48px;
-        font-weight: 500;
+        font-weight: 600;
         padding-left: 24px;
         margin-top: 8px;
         font-size: 12px;
@@ -19,7 +19,7 @@
             display: flex;
             align-items: center;
             height: 48px;
-            font-weight: 500;
+            font-weight: 600;
             padding-left: 24px;
             margin-top: 8px;
             font-size: 12px;
@@ -53,7 +53,7 @@
                 height: 20px;
                 padding: 0 7px;
                 font-size: 11px;
-                font-weight: 500;
+                font-weight: 600;
                 border-radius: 20px;
                 transition: opacity 0.2s ease-in-out 0.1s;
                 margin-left: 8px;
@@ -85,7 +85,6 @@
 
             .nav-link-icon {
                 margin-right: 16px;
-                opacity: 0.7;
             }
 
             .nav-link-icon,
@@ -220,24 +219,27 @@
         }
     }
 
-    // Material style
+    // Material 2 style
-    &.material {
+    &.material2,
+    .material2 & {
 
         .nav-subheader {
-            border-top: 1px solid rgba(0, 0, 0, 0.12);
+            height: 40px;
-
-            &:first-child {
-                border-top: none;
-            }
         }
 
+        .nav-group {
+
+            > .group-title {
+                height: 40px;
+            }
+        }
         .nav-item {
 
             .nav-link {
                 height: 40px;
-                padding: 0 16px;
+                padding: 0 12px 0 24px;
-                margin: 4px 8px;
+                border-radius: 0 20px 20px 0;
-                border-radius: 4px;
+                margin-right: 16px;
             }
         }
     }

src/@fuse/scss/partials/_page-layouts.scss

@@ -18,6 +18,7 @@
 
                     > .content-card {
                         background: map-get($background, card);
+                        border-radius: 8px 8px 0 0;
 
                         > .toolbar {
                             border-bottom-color: map-get($foreground, divider);
@@ -34,6 +35,7 @@
 
                     > .content-card {
                         background: map-get($background, card);
+                        border-radius: 8px 8px 0 0;
 
                         > .toolbar {
                             border-bottom-color: map-get($foreground, divider);
@@ -79,15 +81,11 @@
 // @ Page Layouts
 // -----------------------------------------------------------------------------------------------------
 $carded-header-height: 200px !default;
-$carded-header-height-sm: 160px !default;
 $carded-toolbar-height: 64px !default;
-
 $header-height: 120px !default;
-$header-height-sm: 100px !default;
 
-// Calculate toolbarless header height
+// Calculate toolbar-less carded header height
 $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
-$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
 
 .page-layout {
     position: relative;
@@ -109,10 +107,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             right: 0;
             left: 0;
             height: $carded-header-height;
-
-            @include media-breakpoint-down('sm') {
-                height: $carded-header-height-sm;
-            }
         }
 
         // Fullwidth
@@ -136,12 +130,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     height: $carded-header-height-without-toolbar !important;
                     min-height: $carded-header-height-without-toolbar !important;
                     max-height: $carded-header-height-without-toolbar !important;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-without-toolbar-sm !important;
-                        min-height: $carded-header-height-without-toolbar-sm !important;
-                        max-height: $carded-header-height-without-toolbar-sm !important;
-                    }
                 }
 
                 > .content-card {
@@ -149,7 +137,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     flex-direction: column;
                     flex: 1 0 auto;
                     overflow: hidden;
-                    @include mat-elevation(7);
+                    @include mat-elevation(1);
 
                     > .toolbar {
                         display: flex;
@@ -303,12 +291,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     height: $carded-header-height;
                     min-height: $carded-header-height;
                     max-height: $carded-header-height;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-sm;
-                        min-height: $carded-header-height-sm;
-                        max-height: $carded-header-height-sm;
-                    }
                 }
 
                 .content {
@@ -334,12 +316,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     height: $carded-header-height-without-toolbar;
                     min-height: $carded-header-height-without-toolbar;
                     max-height: $carded-header-height-without-toolbar;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-without-toolbar-sm;
-                        min-height: $carded-header-height-without-toolbar-sm;
-                        max-height: $carded-header-height-without-toolbar-sm;
-                    }
                 }
 
                 > .content-card {
@@ -347,7 +323,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     flex-direction: column;
                     flex: 1 1 auto;
                     overflow: hidden;
-                    @include mat-elevation(7);
+                    @include mat-elevation(1);
 
                     > .toolbar {
                         display: flex;
@@ -379,7 +355,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     width: calc(100% - 32px);
                     min-width: 0;
 
-                    @include media-breakpoint-down('md') {
+                    @include media-breakpoint('lt-lg') {
                         width: calc(100% - 64px);
                     }
 
@@ -566,7 +542,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 z-index: 3;
                 min-width: 0;
                 width: 100%;
-                @include mat-elevation(7);
+                @include mat-elevation(1);
 
                 > .header {
                     height: $header-height;
@@ -625,6 +601,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         flex: 1 1 auto;
                         overflow: auto;
                         -webkit-overflow-scrolling: touch;
+
+                        > .content {
+                            border-radius: 8px;
+                            @include mat-elevation(1);
+                        }
                     }
                 }
             }
@@ -685,7 +666,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
         min-height: 100%;
     }
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
 
         // Smaller margins
         &.carded {

src/@fuse/scss/partials/_print.scss

@@ -9,7 +9,6 @@
     .page-break-before {
         display: none;
     }
-
 }
 
 @media print {
@@ -47,6 +46,13 @@
             display: none !important;
         }
 
+        #main,
+        #container-1,
+        #container-2,
+        #container-3 {
+            padding: 0 !important;
+        }
+
         .ps {
             overflow: visible !important;
         }

src/@fuse/scss/partials/_reset.scss

@@ -1,76 +0,0 @@
-/*----------------------------------------------------------------*/
-/*  Reset
-/*----------------------------------------------------------------*/
-* {
-    text-rendering: optimizeLegibility;
-    -o-text-rendering: optimizeLegibility;
-    -ms-text-rendering: optimizeLegibility;
-    -moz-text-rendering: optimizeLegibility;
-    -webkit-text-rendering: optimizeLegibility;
-    -webkit-tap-highlight-color: transparent;
-    box-sizing: border-box;
-
-    &:before, &:after {
-        box-sizing: border-box;
-    }
-
-    // Remove focus outline
-    &:focus {
-        outline: none;
-    }
-}
-
-// Reset non angular-material input's default browser/os styles
-*:not(mat-form-field) {
-
-    > input {
-        border: none;
-        border-radius: 0;
-        padding: 0;
-        margin: 0;
-    }
-
-    > input[type="text"],
-    > input[type="tel"],
-    > input[type="email"],
-    > input[type="search"],
-    > input[type="password"],
-    > input[type="button"],
-    > button,
-    > input[type="submit"],
-    > input[type="image"],
-    > textarea {
-        appearance: none;
-        border: none;
-        border-radius: 0;
-        padding: 0;
-        margin: 0;
-    }
-}
-
-*:not(mat-form-field) {
-
-    > input[type="button"],
-    > button,
-    > input[type="submit"] {
-        background: none;
-    }
-}
-
-button {
-    border-radius: 0;
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0;
-    margin: 0;
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
-    vertical-align: top;
-    border: none;
-}

src/@fuse/scss/partials/_scrollbars.scss

@@ -12,12 +12,12 @@ body:not(.is-mobile) {
 
     ::-webkit-scrollbar-thumb {
         border: 2px solid transparent;
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.37);
-        border-radius: 24px;
+        border-radius: 12px;
     }
 
     ::-webkit-scrollbar-thumb:active {
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
-        border-radius: 24px;
+        border-radius: 12px;
     }
 }

src/@fuse/scss/partials/_toolbar.scss

@@ -1,9 +0,0 @@
-.toolbar {
-
-    .toolbar-separator {
-        height: 48px;
-        width: 1px;
-        border-right: 1px solid rgba(0, 0, 0, 0.12);
-        margin: 0 12px;
-    }
-}

src/@fuse/scss/partials/_typography.scss

@@ -41,7 +41,7 @@
 // -----------------------------------------------------------------------------------------------------
 html {
     font-size: 62.5%;
-    font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
+    font-family: 'Muli', 'Helvetica Neue', 'Arial', sans-serif;
     line-height: 1.4 !important;
     letter-spacing: -0.1px !important;
 }
@@ -89,7 +89,7 @@ h6, .h6 {
 a {
     text-decoration: none;
 
-    &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
+    &:not(.mat-button):not(.mat-raised-button):not(.mat-flat-button):not(.mat-stroked-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
 
         &:hover, &:active {
             text-decoration: underline;
@@ -304,7 +304,7 @@ strong {
     padding: 4px 8px;
     margin: 0 8px;
     font-size: 11px;
-    font-weight: 500;
+    font-weight: 600;
     white-space: nowrap;
 }
 
@@ -399,6 +399,10 @@ strong {
                 li {
                     margin-bottom: 6px;
                     letter-spacing: 0.015em;
+
+                    ul {
+                        margin-top: 6px;
+                    }
                 }
             }
         }
@@ -433,4 +437,4 @@ strong {
         border-left-color: #03A9F4;
         color: rgba(0, 0, 0, 0.87);
     }
-}
+}

src/app/app.component.scss

@@ -25,7 +25,7 @@
 
         &.right-side-panel {
 
-            @include media-breakpoint-up('lg') {
+            @include media-breakpoint('gt-md') {
                 right: 70px;
             }
         }

src/app/app.component.ts

@@ -73,9 +73,12 @@ export class AppComponent implements OnInit, OnDestroy
         this._translateService.use('en');
 
         /**
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
          * ngxTranslate Fix Start
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
+         */
+
+        /**
          * If you are using a language other than the default one, i.e. Turkish in this case,
          * you may encounter an issue where some of the components are not actually being
          * translated when your app first initialized.
@@ -97,9 +100,9 @@ export class AppComponent implements OnInit, OnDestroy
          */
 
         /**
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
          * ngxTranslate Fix End
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
          */
 
         // Add is-mobile class to the body if the platform is mobile

src/app/app.theme.scss

@@ -63,7 +63,11 @@ $custom_palettes: (
 
 // Force the input field font sizes to 16px
 $typography: mat-typography-config(
-    $input: mat-typography-level(16px, 1.125, 400)
+    $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+    $title: mat-typography-level(20px, 32px, 600),
+    $body-2: mat-typography-level(14px, 24px, 600),
+    $button: mat-typography-level(14px, 14px, 600),
+    $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
 );
 
 // Setup the typography
@@ -82,6 +86,8 @@ $typography: mat-typography-config(
 @import "src/app/main/apps/chat/chat.theme";
 @import "src/app/main/apps/contacts/contacts.theme";
 @import "src/app/main/apps/dashboards/project/project.theme";
+@import "src/app/main/apps/e-commerce/orders/orders.theme";
+@import "src/app/main/apps/e-commerce/products/products.theme";
 @import "src/app/main/apps/file-manager/file-manager.theme";
 @import "src/app/main/apps/mail/mail.theme";
 @import "src/app/main/apps/mail-ngrx/mail.theme";
@@ -108,10 +114,12 @@ $typography: mat-typography-config(
 @import "src/app/main/pages/profile/tabs/about/about.theme";
 @import "src/app/main/pages/profile/tabs/photos-videos/photos-videos.theme";
 @import "src/app/main/pages/profile/tabs/timeline/timeline.theme";
+@import "src/app/main/pages/search/classic/search-classic.theme";
+@import "src/app/main/pages/search/modern/search-modern.theme";
 @import "src/app/main/pages/faq/faq.theme";
 @import "src/app/main/pages/knowledge-base/knowledge-base.theme";
 
-@import "src/app/main/documentation/components/cards/cards.theme";
+@import "src/app/main/ui/cards/cards.theme";
 
 @import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme";
 
@@ -128,6 +136,8 @@ $typography: mat-typography-config(
     @include chat-theme($theme);
     @include contacts-theme($theme);
     @include dashboards-project-theme($theme);
+    @include e-commerce-orders-theme($theme);
+    @include e-commerce-products-theme($theme);
     @include file-manager-theme($theme);
     @include mail-theme($theme);
     @include mail-ngrx-theme($theme);
@@ -155,11 +165,13 @@ $typography: mat-typography-config(
     @include profile-about-theme($theme);
     @include profile-photos-videos-theme($theme);
     @include profile-timeline-theme($theme);
+    @include search-classic-theme($theme);
+    @include search-modern-theme($theme);
     @include faq-theme($theme);
     @include knowledge-base-theme($theme);
 
-    // Docs
+    // UI
-    @include docs-components-cards-theme($theme);
+    @include ui-cards-theme($theme);
 
     // Example Viewer
     @include example-viewer-theme($theme);
@@ -303,4 +315,4 @@ body.theme-pink-dark {
     );
 
     @include fuse-color-classes($palettes);
-}
+}

src/app/fake-db/calendar.ts

@@ -20,10 +20,10 @@ export class CalendarFakeDb
                     start    : subDays(startOfDay(new Date()), 1),
                     end      : addDays(new Date(), 1),
                     title    : 'A 3 day event',
-                    allDay   : false,
+                    allDay   : true,
                     color    : {
-                        primary  : '#ad2121',
+                        primary  : '#F44336',
-                        secondary: '#FAE3E3'
+                        secondary: '#FFCDD2'
                     },
                     resizable: {
                         beforeStart: true,
@@ -40,8 +40,8 @@ export class CalendarFakeDb
                     title    : 'An event with no end date',
                     allDay   : false,
                     color    : {
-                        primary  : '#e3bc08',
+                        primary  : '#FF9800',
-                        secondary: '#FDF1BA'
+                        secondary: '#FFE0B2'
                     },
                     resizable: {
                         beforeStart: true,
@@ -59,7 +59,7 @@ export class CalendarFakeDb
                     title    : 'A long event that spans 2 months',
                     allDay   : false,
                     color    : {
-                        primary  : '#1e90ff',
+                        primary  : '#1E90FF',
                         secondary: '#D1E8FF'
                     },
                     resizable: {
@@ -78,8 +78,8 @@ export class CalendarFakeDb
                     title    : 'A draggable and resizable event',
                     allDay   : false,
                     color    : {
-                        primary  : '#e3bc08',
+                        primary  : '#673AB7',
-                        secondary: '#FDF1BA'
+                        secondary: '#D1C4E9'
                     },
                     resizable: {
                         beforeStart: true,

src/app/fake-db/contacts.ts

@@ -12,7 +12,7 @@ export class ContactsFakeDb
             'email'   : 'abbott@withinpixels.com',
             'phone'   : '+1-202-555-0175',
             'address' : '933 8th Street Stamford, CT 06902',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -26,7 +26,7 @@ export class ContactsFakeDb
             'email'   : 'arnold@withinpixels.com',
             'phone'   : '+1-202-555-0141',
             'address' : '906 Valley Road Michigan City, IN 46360',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -40,7 +40,7 @@ export class ContactsFakeDb
             'email'   : 'barrera@withinpixels.com',
             'phone'   : '+1-202-555-0196',
             'address' : '183 River Street Passaic, NJ 07055',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -54,7 +54,7 @@ export class ContactsFakeDb
             'email'   : 'blair@withinpixels.com',
             'phone'   : '+1-202-555-0118',
             'address' : '143 Jones Street Eau Claire, WI 54701',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -68,7 +68,7 @@ export class ContactsFakeDb
             'email'   : 'boyle@withinpixels.com',
             'phone'   : '+1-202-555-0177',
             'address' : '218 Pearl Street Brandon, FL 33510',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -82,7 +82,7 @@ export class ContactsFakeDb
             'email'   : 'christy@withinpixels.com',
             'phone'   : '+1-202-555-0136',
             'address' : '329 Bridge Street Desoto, TX 75115',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -96,7 +96,7 @@ export class ContactsFakeDb
             'email'   : 'copeland@withinpixels.com',
             'phone'   : '+1-202-555-0107',
             'address' : '956 6th Avenue North Bergen, NJ 0704',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -110,7 +110,7 @@ export class ContactsFakeDb
             'email'   : 'estes@withinpixels.com',
             'phone'   : '+1-202-555-0113',
             'address' : '664 York Street Cambridge, MA 02138',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -124,7 +124,7 @@ export class ContactsFakeDb
             'email'   : 'harper@withinpixels.com',
             'phone'   : '+1-202-555-0173',
             'address' : '738 Route 11 Cornelius, NC 28031',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -138,7 +138,7 @@ export class ContactsFakeDb
             'email'   : 'helen@withinpixels.com',
             'phone'   : '+1-202-555-0163',
             'address' : '194 Washington Avenue Saint Petersburg, FL 33702',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -152,7 +152,7 @@ export class ContactsFakeDb
             'email'   : 'henderson@withinpixels.com',
             'phone'   : '+1-202-555-0151',
             'address' : '686 Roosevelt Avenue Oviedo, FL 32765',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -166,7 +166,7 @@ export class ContactsFakeDb
             'email'   : 'josefina@withinpixels.com',
             'phone'   : '+1-202-555-0160',
             'address' : '202 Hartford Road Lynchburg, VA 24502',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -180,7 +180,7 @@ export class ContactsFakeDb
             'email'   : 'katina@withinpixels.com',
             'phone'   : '+1-202-555-0186',
             'address' : '219 Woodland Road Valrico, FL 33594',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -194,7 +194,7 @@ export class ContactsFakeDb
             'email'   : 'lily@withinpixels.com',
             'phone'   : '+1-202-555-0115',
             'address' : '305 Willow Drive Superior, WI 54880',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -208,7 +208,7 @@ export class ContactsFakeDb
             'email'   : 'mai@withinpixels.com',
             'phone'   : '+1-202-555-0199',
             'address' : '148 Heather Lane Mcminnville, TN 37110',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -222,7 +222,7 @@ export class ContactsFakeDb
             'email'   : 'nancy@withinpixels.com',
             'phone'   : '+1-202-555-0120',
             'address' : '345 Laurel Lane Union City, NJ 07087',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -236,7 +236,7 @@ export class ContactsFakeDb
             'email'   : 'nora@withinpixels.com',
             'phone'   : '+1-202-555-0172',
             'address' : '572 Rose Street Summerfield, FL 34491',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -250,7 +250,7 @@ export class ContactsFakeDb
             'email'   : 'odessa@withinpixels.com',
             'phone'   : '+1-202-555-0190',
             'address' : '527 Jefferson Court Conyers, GA 30012',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -264,7 +264,7 @@ export class ContactsFakeDb
             'email'   : 'reyna@withinpixels.com',
             'phone'   : '+1-202-555-0116',
             'address' : '297 Strawberry Lane Faribault, MN 55021',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -278,7 +278,7 @@ export class ContactsFakeDb
             'email'   : 'shauna@withinpixels.com',
             'phone'   : '+1-202-555-0159',
             'address' : '928 Canterbury Court Pittsburgh, PA 15206',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -292,7 +292,7 @@ export class ContactsFakeDb
             'email'   : 'shepard@withinpixels.com',
             'phone'   : '+1-202-555-0173',
             'address' : '904 Ridge Road Pickerington, OH 43147',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -306,7 +306,7 @@ export class ContactsFakeDb
             'email'   : 'tillman@withinpixels.com',
             'phone'   : '+1-202-555-0183',
             'address' : '447 Charles Street Dorchester, MA 02125',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -320,7 +320,7 @@ export class ContactsFakeDb
             'email'   : 'trevino@withinpixels.com',
             'phone'   : '+1-202-555-0138',
             'address' : '84 Valley View Road Norman, OK 73072',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -334,7 +334,7 @@ export class ContactsFakeDb
             'email'   : 'tyson@withinpixels.com',
             'phone'   : '+1-202-555-0146',
             'address' : '204 Clark Street Monsey, NY 10952',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -348,7 +348,7 @@ export class ContactsFakeDb
             'email'   : 'velezquez@withinpixels.com',
             'phone'   : '+1-202-555-0146',
             'address' : '261 Cleveland Street Riverside, NJ 08075',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         }
     ];

src/app/fake-db/dashboard-analytics.ts

@@ -4,7 +4,7 @@ export class AnalyticsDashboardDb
         widget1: {
             chartType: 'line',
             datasets : {
-                '2015': [
+                '2016': [
                     {
                         label: 'Sales',
                         data : [1.9, 3, 3.4, 2.2, 2.9, 3.9, 2.5, 3.8, 4.1, 3.8, 3.2, 2.9],
@@ -12,7 +12,7 @@ export class AnalyticsDashboardDb
 
                     }
                 ],
-                '2016': [
+                '2017': [
                     {
                         label: 'Sales',
                         data : [2.2, 2.9, 3.9, 2.5, 3.8, 3.2, 2.9, 1.9, 3, 3.4, 4.1, 3.8],
@@ -20,7 +20,7 @@ export class AnalyticsDashboardDb
 
                     }
                 ],
-                '2017': [
+                '2018': [
                     {
                         label: 'Sales',
                         data : [3.9, 2.5, 3.8, 4.1, 1.9, 3, 3.8, 3.2, 2.9, 3.4, 2.2, 2.9],

src/app/fake-db/fake-db.service.ts

@@ -77,8 +77,7 @@ export class FakeDbService implements InMemoryDbService
             'profile-about'        : ProfileFakeDb.about,
 
             // Search
-            'search-classic': SearchFakeDb.classic,
+            'search': SearchFakeDb.search,
-            'search-table'  : SearchFakeDb.table,
 
             // FAQ
             'faq': FaqFakeDb.data,

src/app/fake-db/file-manager.ts

@@ -48,7 +48,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Shopping list',
@@ -61,7 +61,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Invoices',
@@ -74,7 +74,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Crash logs',
@@ -87,7 +87,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'System logs',
@@ -100,7 +100,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Prices',
@@ -113,7 +113,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Anabelle Manual',
@@ -126,7 +126,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Steam summer sale budget',
@@ -139,7 +139,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         }
     ];
 

src/app/fake-db/invoice.ts

@@ -15,8 +15,8 @@ export class InvoiceFakeDb
             'email'  : 'johndoe@mail.com'
         },
         'number'  : 'P9-0004',
-        'date'    : 'Jul 19, 2015',
+        'date'    : 'Jul 19, 2018',
-        'dueDate' : 'Aug 24, 2015',
+        'dueDate' : 'Aug 24, 2018',
         'services': [
             {
                 'title'    : 'Prototype & Design',

src/app/fake-db/mail.ts

@@ -25,23 +25,22 @@ export class MailFakeDb
                 {
                     'type'    : 'image',
                     'fileName': 'flowers',
-                    'preview' : 'assets/images/etc/flowers-thumb.jpg',
+                    'preview' : 'assets/images/mail/attachment-1.jpg',
                     'url'     : '',
                     'size'    : '1.1Mb'
                 },
                 {
                     'type'    : 'image',
                     'fileName': 'snow',
-                    'preview' : 'assets/images/etc/snow-thumb.jpg',
+                    'preview' : 'assets/images/mail/attachment-2.jpg',
                     'url'     : '',
                     'size'    : '380kb'
                 },
                 {
                     'type'    : 'image',
                     'fileName': 'sunrise',
-                    'preview' : 'assets/images/etc/sunrise-thumb.jpg',
+                    'preview' : 'assets/images/mail/attachment-3.jpg',
-                    'url'     : 'assets/images/etc/early-sunrise.jpg',
+                    'size': '17Mb'
-                    'size'    : '17Mb'
                 }
             ],
             'labels'        : [

src/app/fake-db/profile.ts

@@ -16,7 +16,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/andrew.jpg'
                 },
                 'message': 'sent you a message.',
-                'time'   : 'June 10,2015'
+                'time'   : 'June 10,2018'
             },
             {
                 'user'   : {
@@ -24,7 +24,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/garry.jpg'
                 },
                 'message': 'shared a public post with your group.',
-                'time'   : 'June 9,2015'
+                'time'   : 'June 9,2018'
             },
             {
                 'user'   : {
@@ -32,7 +32,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/carl.jpg'
                 },
                 'message': 'wants to play Fallout Shelter with you.',
-                'time'   : 'June 8,2015'
+                'time'   : 'June 8,2018'
             },
             {
                 'user'   : {
@@ -40,7 +40,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/jane.jpg'
                 },
                 'message': 'started following you.',
-                'time'   : 'June 7,2015'
+                'time'   : 'June 7,2018'
             },
             {
                 'user'   : {
@@ -48,7 +48,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/james.jpg'
                 },
                 'message': 'sent you a message.',
-                'time'   : 'June 6,2015'
+                'time'   : 'June 6,2018'
             },
             {
                 'user'   : {
@@ -56,7 +56,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/joyce.jpg'
                 },
                 'message': 'shared a photo with you.',
-                'time'   : 'June 5,2015'
+                'time'   : 'June 5,2018'
             },
             {
                 'user'   : {
@@ -64,7 +64,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/vincent.jpg'
                 },
                 'message': 'shared a photo with you.',
-                'time'   : 'June 4,2015'
+                'time'   : 'June 4,2018'
             }
         ],
         posts     : [
@@ -80,7 +80,7 @@ export class ProfileFakeDb
                 'share'   : 21,
                 'media'   : {
                     'type'   : 'image',
-                    'preview': 'assets/images/etc/early-sunrise.jpg'
+                    'preview': 'assets/images/profile/morain-lake.jpg'
                 },
                 'comments': [
                     {
@@ -88,7 +88,7 @@ export class ProfileFakeDb
                             'name'  : 'Alice Freeman',
                             'avatar': 'assets/images/avatars/alice.jpg'
                         },
-                        'time'   : 'June 10, 2015',
+                        'time'   : 'June 10, 2018',
                         'message': 'That’s a wonderful place. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat.'
                     }
                 ]
@@ -99,17 +99,17 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/andrew.jpg'
                 },
                 'message' : 'Hey, man! Check this, it’s pretty awesome!',
-                'time'    : 'June 12, 2015',
+                'time'    : 'June 12, 2018',
                 'type'    : 'article',
                 'like'    : 98,
                 'share'   : 6,
                 'article' : {
-                    'title'   : 'The Fallout 4 Pip-Boy Edition Is Back In Stock Now',
+                    'title'   : 'Never stop changing!',
-                    'subtitle': 'Kotaku',
+                    'subtitle': 'John Westrock',
-                    'excerpt' : 'The Fallout 4 Pip-Boy edition is back in stock at Gamestop, for all 3 platforms. Additionally, Walmart also has it in stock for the PS4 and Xbox One as of this writing, as does Best Buy.',
+                    'excerpt' : 'John Westrock\'s new photo album called \'Never stop changing\' is published! It features more than 200 photos that will take you right in.',
                     'media'   : {
                         'type'   : 'image',
-                        'preview': 'assets/images/etc/fallout.jpg'
+                        'preview': 'assets/images/profile/never-stop-changing.jpg'
                     }
                 },
                 'comments': [
@@ -118,7 +118,7 @@ export class ProfileFakeDb
                             'name'  : 'Alice Freeman',
                             'avatar': 'assets/images/avatars/alice.jpg'
                         },
-                        'time'   : 'June 10, 2015',
+                        'time'   : 'June 10, 2018',
                         'message': 'That’s a wonderful place. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat.'
                     }
                 ]
@@ -129,7 +129,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/carl.jpg'
                 },
                 'message': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat. Aenean lorem ex, ultrices sit amet ligula sed...',
-                'time'   : 'June 10, 2015',
+                'time'   : 'June 10, 2018',
                 'type'   : 'something',
                 'like'   : 4,
                 'share'  : 1
@@ -139,130 +139,130 @@ export class ProfileFakeDb
 
     public static photosVideos = [
         {
-            'name' : 'June 2015',
+            'name' : 'June 2018',
             'info' : '5 Photos',
             'media': [
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'A Walk Amongst Friends',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Braies Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
+                    'title'  : 'Fall Glow',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'preview': 'assets/images/profile/fall-glow-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Cactus',
+                    'title'  : 'First Snow',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'preview': 'assets/images/profile/first-snow-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Road Trip',
+                    'title'  : 'Lago di Braies',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'preview': 'assets/images/profile/lago-di-braies-small.jpg'
                 }
             ]
         },
         {
-            'name' : 'May 2015',
+            'name' : 'May 2018',
             'info' : '7 Photos, 3 Videos',
             'media': [
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'Lago di Sorapis',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/lago-di-sorapis-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Morain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/morain-lake-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
+                    'title'  : 'Never Stop Changing',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'preview': 'assets/images/profile/never-stop-changing-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Cactus',
+                    'title'  : 'Reaching',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'preview': 'assets/images/profile/reaching-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Road Trip',
+                    'title'  : 'Yosemite',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'preview': 'assets/images/profile/yosemite-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'A Walk Amongst Friends',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Braies Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
+                    'title'  : 'Fall Glow',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'preview': 'assets/images/profile/fall-glow-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Cactus',
+                    'title'  : 'First Snow',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'preview': 'assets/images/profile/first-snow-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Road Trip',
+                    'title'  : 'Lago di Braies',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'preview': 'assets/images/profile/lago-di-braies-small.jpg'
                 }
             ]
         },
         {
-            'name' : 'April 2015',
+            'name' : 'April 2018',
-            'info' : '5 Photos',
+            'info' : '7 Photos',
             'media': [
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'Lago di Sorapis',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/lago-di-sorapis-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Morain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/morain-lake-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
+                    'title'  : 'Never Stop Changing',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'preview': 'assets/images/profile/never-stop-changing-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Cactus',
+                    'title'  : 'Reaching',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'preview': 'assets/images/profile/reaching-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Road Trip',
+                    'title'  : 'Yosemite',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'preview': 'assets/images/profile/yosemite-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'A Walk Amongst Friends',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Braies Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                 }
             ]
         }
@@ -270,10 +270,10 @@ export class ProfileFakeDb
 
     public static about = {
         'general': {
-            'gender'   : 'Female',
+            'gender'   : 'Male',
-            'birthday' : 'May 8th, 1988',
+            'birthday' : 'February 30th, 1974',
             'locations': [
-                'Istanbul, Turkey',
+                'London, UK',
                 'New York, USA'
             ],
             'about'    : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget pharetra felis, sed ullamcorper dui. Sed et elementum neque. Vestibulum pellente viverra ultrices. Etiam justo augue, vehicula ac gravida a, interdum sit amet nisl. Integer vitae nisi id nibh dictum mollis in vitae tortor.'
@@ -308,19 +308,16 @@ export class ProfileFakeDb
         },
         'groups' : [
             {
-                'logo'    : 'assets/images/logos/android.png',
                 'name'    : 'Android',
                 'category': 'Technology',
                 'members' : '1.856.546'
             },
             {
-                'logo'    : 'assets/images/logos/google.png',
                 'name'    : 'Google',
                 'category': 'Web',
                 'members' : '1.226.121'
             },
             {
-                'logo'    : 'assets/images/logos/fallout.png',
                 'name'    : 'Fallout',
                 'category': 'Games',
                 'members' : '526.142'

src/app/fake-db/quick-panel.ts

@@ -3,11 +3,11 @@ export class QuickPanelFakeDb
     public static notes = [
         {
             'title' : 'Best songs to listen while working',
-            'detail': 'Last edit: May 8th, 2015'
+            'detail': 'Last edit: May 8th, 2018'
         },
         {
             'title' : 'Useful subreddits',
-            'detail': 'Last edit: January 12th, 2015'
+            'detail': 'Last edit: January 12th, 2018'
         }
     ];
 

src/app/fake-db/scrumboard.ts

@@ -94,14 +94,14 @@ export class ScrumboardFakeDb
                             'id'  : '67027cahbe3b52ecf2dc631c',
                             'name': 'mail.jpg',
                             'src' : 'assets/images/scrumboard/mail.jpg',
-                            'time': 'Added Nov 3 at 15:22AM',
+                            'time': 'Nov 3 at 15:22AM',
                             'type': 'image'
                         },
                         {
                             'id'  : '56027cfcbe1b72ecf1fc452a',
                             'name': 'calendar.jpg',
                             'src' : 'assets/images/scrumboard/calendar.jpg',
-                            'time': 'Added Nov 1 at 12:34PM',
+                            'time': 'Nov 1 at 12:34PM',
                             'type': 'image'
                         }
                     ],
@@ -383,14 +383,14 @@ export class ScrumboardFakeDb
                             'id'  : '12027cafbe3b52ecf2ef632c',
                             'name': 'header-.jpg',
                             'src' : 'assets/images/scrumboard/header-1.jpg',
-                            'time': 'Added Nov 3 at 15:22AM',
+                            'time': 'Nov 3 at 15:22AM',
                             'type': 'image'
                         },
                         {
                             'id'  : '55027ced1e1a12ecf1fced2a',
                             'name': 'header-2.jpg',
                             'src' : 'assets/images/scrumboard/header-2.jpg',
-                            'time': 'Added Nov 1 at 12:34PM',
+                            'time': 'Nov 1 at 12:34PM',
                             'type': 'image'
                         }
                     ],
@@ -628,13 +628,13 @@ export class ScrumboardFakeDb
                             'id'  : '56027cfcbe1b72ecf1fc452a',
                             'name': 'calendar-app-design.jpg',
                             'src' : 'assets/images/scrumboard/calendar.jpg',
-                            'time': 'Added Nov 1 at 12:34PM',
+                            'time': 'Nov 1 at 12:34PM',
                             'type': 'image'
                         },
                         {
                             'id'  : '67027cahbe3b52ecf2dc631c',
                             'url' : 'assets/images/scrumboard/calendar.jpg',
-                            'time': 'Added Nov 3 at 15:22AM',
+                            'time': 'Nov 3 at 15:22AM',
                             'type': 'link'
                         }
                     ],
@@ -730,7 +730,7 @@ export class ScrumboardFakeDb
                             'id'  : '5603a2ae2bbd55bb2db57478',
                             'name': 'mail-app-design.jpg',
                             'src' : 'assets/images/scrumboard/mail.jpg',
-                            'time': 'Added Nov 1 at 12:34PM',
+                            'time': 'Nov 1 at 12:34PM',
                             'type': 'image'
                         }
                     ],

src/app/fake-db/search.ts

@@ -1,6 +1,6 @@
 export class SearchFakeDb
 {
-    public static classic = [
+    public static search = [
         {
             'title'  : 'Dynamically Procrastinate B2C',
             'url'    : 'ourwebaddress.com/articles/procrastinate',
@@ -43,97 +43,4 @@ export class SearchFakeDb
         }
     ];
 
-    public static table = [
-        {
-            'name'     : 'Airi Satou',
-            'position' : 'Accountant',
-            'office'   : 'Tokyo',
-            'age'      : '33',
-            'startDate': '2008/11/28',
-            'salary'   : '162700',
-            'email'    : 'a.satou@mail.com'
-        },
-        {
-            'name'     : 'Angellica Ramos',
-            'position' : 'Chief Executive Officer (CEO)',
-            'office'   : 'London',
-            'age'      : '47',
-            'startDate': '2009/10/09',
-            'salary'   : '1200000',
-            'email'    : 'a.ramos@mail.com'
-        },
-        {
-            'name'     : 'Ashton Cox',
-            'position' : 'Hunior Technical Author',
-            'office'   : 'San Fransisco',
-            'age'      : '66',
-            'startDate': '2009/01/12',
-            'salary'   : '86000',
-            'email'    : 'a.cox@mail.com'
-        },
-        {
-            'name'     : 'Bradley Greer',
-            'position' : 'Software Engineer',
-            'office'   : 'London',
-            'age'      : '41',
-            'startDate': '2012/10/13',
-            'salary'   : '132000',
-            'email'    : 'b.greer@mail.com'
-        },
-        {
-            'name'     : 'Brenden Wagner',
-            'position' : 'Software Engineer',
-            'office'   : 'San Fransisco',
-            'age'      : '28',
-            'startDate': '2011/06/07',
-            'salary'   : '206850',
-            'email'    : 'b.wagner@mail.com'
-        },
-        {
-            'name'     : 'Brielle Williamson',
-            'position' : 'Integration Specialist',
-            'office'   : 'New York',
-            'age'      : '61',
-            'startDate': '2012/12/02',
-            'salary'   : '372000',
-            'email'    : 'b.williamson@mail.com'
-        },
-        {
-            'name'     : 'Bruno Nash',
-            'position' : 'Software Engineer',
-            'office'   : 'London',
-            'age'      : '38',
-            'startDate': '2011/05/03',
-            'salary'   : '163500',
-            'email'    : 'b.nash@mail.com'
-        },
-        {
-            'name'     : 'Caesar Vance',
-            'position' : 'Pre-Sales Support',
-            'office'   : 'New York',
-            'age'      : '21',
-            'startDate': '2011/12/12',
-            'salary'   : '106450',
-            'email'    : 'c.vance@mail.com'
-        },
-        {
-            'name'     : 'Cara Stevens',
-            'position' : 'Sales Assistant',
-            'office'   : 'New York',
-            'age'      : '46',
-            'startDate': '2011/12/06',
-            'salary'   : '145600',
-            'email'    : 'c.stevens@mail.com'
-        },
-        {
-            'name'     : 'Cedric Kelly',
-            'position' : 'Senior Javascript Developer',
-            'office'   : 'Edinburg',
-            'age'      : '22',
-            'startDate': '2012/03/29',
-            'salary'   : '433060',
-            'email'    : 'c.kelly@mail.com'
-        }
-    ];
-
 }

src/app/fake-db/todo.ts

@@ -5,7 +5,7 @@ export class TodoFakeDb
             'id'       : '561551bd7fe2ff461101c192',
             'title'    : 'Proident tempor est nulla irure ad est',
             'notes'    : 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.',
-            'startDate': 'Wednesday, January 29, 2014 3:17 PM',
+            'startDate': 'Wednesday, January 29, 2017 3:17 PM',
             'dueDate'  : null,
             'completed': false,
             'starred'  : false,
@@ -17,8 +17,8 @@ export class TodoFakeDb
             'id'       : '561551bd4ac1e7eb77a3a750',
             'title'    : 'Magna quis irure quis ea pariatur laborum',
             'notes'    : '',
-            'startDate': 'Sunday, February 1, 2015 1:30 PM',
+            'startDate': 'Sunday, February 1, 2018 1:30 PM',
-            'dueDate'  : 'Friday, December 30, 2016 10:07 AM',
+            'dueDate'  : 'Friday, December 30, 2019 10:07 AM',
             'completed': false,
             'starred'  : false,
             'important': true,
@@ -29,7 +29,7 @@ export class TodoFakeDb
             'id'       : '561551bd917bfec2ddef2d49',
             'title'    : 'Ullamco duis commodo sint ad aliqua aute',
             'notes'    : 'Sunt laborum enim nostrud ea fugiat cillum mollit aliqua exercitation ad elit.',
-            'startDate': 'Friday, April 11, 2014 3:43 AM',
+            'startDate': 'Friday, April 11, 2017 3:43 AM',
             'dueDate'  : 'Wednesday, July 26, 2017 11:14 AM',
             'completed': false,
             'starred'  : true,
@@ -41,7 +41,7 @@ export class TodoFakeDb
             'id'       : '561551bdeeb2fd6877e18c29',
             'title'    : 'Eiusmod non occaecat pariatur Lorem in ex',
             'notes'    : 'Nostrud anim mollit incididunt qui qui sit commodo duis. Anim amet irure aliquip duis nostrud sit quis fugiat ullamco non dolor labore. Lorem sunt voluptate laboris culpa proident. Aute eiusmod aliqua exercitation irure exercitation qui laboris mollit occaecat eu occaecat fugiat.',
-            'startDate': 'Wednesday, May 7, 2014 4:14 AM',
+            'startDate': 'Wednesday, May 7, 2017 4:14 AM',
             'dueDate'  : 'Friday, December 15, 2017 4:01 AM',
             'completed': true,
             'starred'  : true,
@@ -53,8 +53,8 @@ export class TodoFakeDb
             'id'       : '561551bdf38eae0134ae43d4',
             'title'    : 'Lorem magna cillum consequat consequat mollit',
             'notes'    : 'Velit ipsum proident ea incididunt et. Consectetur eiusmod laborum voluptate duis occaecat ullamco sint enim proident.',
-            'startDate': 'Sunday, August 23, 2015 11:19 PM',
+            'startDate': 'Sunday, August 23, 2018 11:19 PM',
-            'dueDate'  : 'Friday, July 8, 2016 10:49 AM',
+            'dueDate'  : 'Friday, July 8, 2019 10:49 AM',
             'completed': false,
             'starred'  : false,
             'important': false,
@@ -65,7 +65,7 @@ export class TodoFakeDb
             'id'       : '561551bd32f1588c814a0ccd',
             'title'    : 'Quis irure cupidatat ad consequat reprehenderit excepteur',
             'notes'    : 'Esse nisi mollit aliquip mollit aute consequat adipisicing. Do excepteur dolore proident cupidatat pariatur irure consequat incididunt.',
-            'startDate': 'Sunday, June 7, 2015 10:49 AM',
+            'startDate': 'Sunday, June 7, 2018 10:49 AM',
             'dueDate'  : 'Monday, January 9, 2017 8:34 AM',
             'completed': false,
             'starred'  : true,
@@ -77,8 +77,8 @@ export class TodoFakeDb
             'id'       : '561551bd0bb4b08ca77038ef',
             'title'    : 'Officia voluptate tempor ut mollit ea cillum',
             'notes'    : 'Deserunt veniam reprehenderit do elit magna ut.',
-            'startDate': 'Saturday, October 18, 2014 4:25 AM',
+            'startDate': 'Saturday, October 18, 2017 4:25 AM',
-            'dueDate'  : 'Sunday, August 21, 2016 10:48 PM',
+            'dueDate'  : 'Sunday, August 21, 2019 10:48 PM',
             'completed': true,
             'starred'  : false,
             'important': false,
@@ -89,8 +89,8 @@ export class TodoFakeDb
             'id'       : '561551bdf84eec913835ebe5',
             'title'    : 'Sit exercitation cupidatat minim est ipsum excepteur',
             'notes'    : '',
-            'startDate': 'Friday, August 8, 2014 5:45 AM',
+            'startDate': 'Friday, August 8, 2017 5:45 AM',
-            'dueDate'  : 'Wednesday, June 15, 2016 1:53 PM',
+            'dueDate'  : 'Wednesday, June 15, 2019 1:53 PM',
             'completed': true,
             'starred'  : false,
             'important': true,
@@ -101,8 +101,8 @@ export class TodoFakeDb
             'id'       : '561551bd2047cc709af0f670',
             'title'    : 'Sunt fugiat officia nisi minim sunt duis',
             'notes'    : 'Eiusmod eiusmod sint aliquip exercitation cillum. Magna nulla officia ex consectetur ea ad excepteur in qui.',
-            'startDate': 'Monday, July 13, 2015 1:55 PM',
+            'startDate': 'Monday, July 13, 2018 1:55 PM',
-            'dueDate'  : 'Thursday, March 3, 2016 2:26 PM',
+            'dueDate'  : 'Thursday, March 3, 2019 2:26 PM',
             'completed': false,
             'starred'  : false,
             'important': false,
@@ -120,8 +120,8 @@ export class TodoFakeDb
             'id'       : '561551bd73d1a627e97005ce',
             'title'    : 'Non cupidatat enim quis aliquip minim laborum',
             'notes'    : 'Qui cillum eiusmod nostrud sunt dolore velit nostrud labore voluptate ad dolore. Eu Lorem anim pariatur aliqua. Ullamco ut dolor velit esse occaecat dolore eu cillum commodo qui. Nulla dolor consequat voluptate magna ut commodo magna consectetur non aute proident.',
-            'startDate': 'Tuesday, November 11, 2014 6:36 PM',
+            'startDate': 'Tuesday, November 11, 2017 6:36 PM',
-            'dueDate'  : 'Tuesday, August 9, 2016 7:18 AM',
+            'dueDate'  : 'Tuesday, August 9, 2019 7:18 AM',
             'completed': false,
             'starred'  : false,
             'important': false,
@@ -132,8 +132,8 @@ export class TodoFakeDb
             'id'       : '561551bd8f7d793ded0a2353',
             'title'    : 'Dolor ex occaecat magna labore laboris qui',
             'notes'    : 'Incididunt qui excepteur eiusmod elit cillum occaecat voluptate cillum nostrud. Dolor ullamco ullamco eiusmod do sunt adipisicing pariatur. In esse esse labore id reprehenderit sint do. Pariatur culpa dolor tempor qui excepteur duis do anim minim ipsum.',
-            'startDate': 'Monday, June 9, 2014 3:15 PM',
+            'startDate': 'Monday, June 9, 2017 3:15 PM',
-            'dueDate'  : 'Wednesday, October 19, 2016 3:38 PM',
+            'dueDate'  : 'Wednesday, October 19, 2019 3:38 PM',
             'completed': false,
             'starred'  : false,
             'important': true,
@@ -144,7 +144,7 @@ export class TodoFakeDb
             'id'       : '561551bdaa586f72d0be02cc',
             'title'    : 'Ex nisi amet id dolore nostrud esse',
             'notes'    : '',
-            'startDate': 'Thursday, January 15, 2015 6:11 PM',
+            'startDate': 'Thursday, January 15, 2018 6:11 PM',
             'dueDate'  : 'Sunday, August 20, 2017 10:02 AM',
             'completed': false,
             'starred'  : true,
@@ -156,7 +156,7 @@ export class TodoFakeDb
             'id'       : '561551bd9f1c2de5b27f537b',
             'title'    : 'In dolor velit labore dolore ex eiusmod',
             'notes'    : '',
-            'startDate': 'Monday, March 10, 2014 12:50 AM',
+            'startDate': 'Monday, March 10, 2017 12:50 AM',
             'dueDate'  : 'Thursday, January 26, 2017 3:10 PM',
             'completed': false,
             'starred'  : false,
@@ -168,7 +168,7 @@ export class TodoFakeDb
             'id'       : '561551bd26e21bb5e85b35cb',
             'title'    : 'Sunt voluptate aliquip exercitation minim magna sit',
             'notes'    : '',
-            'startDate': 'Tuesday, March 24, 2015 10:54 PM',
+            'startDate': 'Tuesday, March 24, 2018 10:54 PM',
             'dueDate'  : 'Wednesday, August 23, 2017 5:35 PM',
             'completed': false,
             'starred'  : false,
@@ -180,7 +180,7 @@ export class TodoFakeDb
             'id'       : '561551bd719860cf0ad2011a',
             'title'    : 'Nisi et ullamco minim ea proident tempor',
             'notes'    : 'Dolor veniam dolor cillum Lorem magna nisi in occaecat nulla dolor ea eiusmod.',
-            'startDate': 'Friday, February 14, 2014 10:03 AM',
+            'startDate': 'Friday, February 14, 2017 10:03 AM',
             'dueDate'  : 'Saturday, July 8, 2017 11:54 PM',
             'completed': false,
             'starred'  : true,
@@ -192,8 +192,8 @@ export class TodoFakeDb
             'id'       : '561551bd49d800c243264a91',
             'title'    : 'Sit ipsum mollit cupidatat adipisicing officia aliquip',
             'notes'    : '',
-            'startDate': 'Wednesday, December 10, 2014 9:25 AM',
+            'startDate': 'Wednesday, December 10, 2017 9:25 AM',
-            'dueDate'  : 'Friday, March 25, 2016 12:29 AM',
+            'dueDate'  : 'Friday, March 25, 2019 12:29 AM',
             'completed': true,
             'starred'  : false,
             'important': false,
@@ -204,8 +204,8 @@ export class TodoFakeDb
             'id'       : '561551bd061990eaf40fb64f',
             'title'    : 'Amet sunt et quis amet commodo quis',
             'notes'    : 'Nulla dolore consequat aliqua sint consequat elit qui occaecat et.',
-            'startDate': 'Saturday, March 1, 2014 3:59 PM',
+            'startDate': 'Saturday, March 1, 2017 3:59 PM',
-            'dueDate'  : 'Saturday, November 7, 2015 2:00 PM',
+            'dueDate'  : 'Saturday, November 7, 2018 2:00 PM',
             'completed': false,
             'starred'  : false,
             'important': true,
@@ -216,7 +216,7 @@ export class TodoFakeDb
             'id'       : '561551be81d05fa94711e7f3',
             'title'    : 'Ut eiusmod ex ea eiusmod culpa incididunt',
             'notes'    : 'Fugiat non incididunt officia ex incididunt occaecat. Voluptate nostrud culpa aliquip mollit incididunt non dolore.',
-            'startDate': 'Monday, February 2, 2015 3:07 PM',
+            'startDate': 'Monday, February 2, 2018 3:07 PM',
             'dueDate'  : 'Saturday, October 14, 2017 6:57 AM',
             'completed': false,
             'starred'  : false,
@@ -228,8 +228,8 @@ export class TodoFakeDb
             'id'       : '561551be05c093a80e0c8d05',
             'title'    : 'Proident reprehenderit laboris pariatur ut et nisi',
             'notes'    : 'Reprehenderit proident ut ad cillum quis velit quis aliqua ut aliquip tempor ullamco.',
-            'startDate': 'Sunday, June 14, 2015 4:40 AM',
+            'startDate': 'Sunday, June 14, 2018 4:40 AM',
-            'dueDate'  : 'Wednesday, February 10, 2016 10:47 AM',
+            'dueDate'  : 'Wednesday, February 10, 2019 10:47 AM',
             'completed': true,
             'starred'  : true,
             'important': true,
@@ -240,8 +240,8 @@ export class TodoFakeDb
             'id'       : '561551be3bb43a5bd431c2fc',
             'title'    : 'Aliqua aliquip aliquip aliquip et exercitation aute',
             'notes'    : 'Adipisicing Lorem tempor ex anim. Labore tempor laboris nostrud dolore voluptate ullamco. Fugiat ex deserunt anim minim esse velit laboris aute ea duis incididunt. Elit irure id Lorem incididunt laborum aliquip consectetur est irure sunt. Ut labore anim nisi aliqua tempor laborum nulla cillum. Duis irure consequat cillum magna cillum eiusmod ut. Et exercitation voluptate quis deserunt elit quis dolor deserunt ex ex esse ex.',
-            'startDate': 'Saturday, May 3, 2014 1:32 AM',
+            'startDate': 'Saturday, May 3, 2017 1:32 AM',
-            'dueDate'  : 'Monday, September 12, 2016 9:16 PM',
+            'dueDate'  : 'Monday, September 12, 2019 9:16 PM',
             'completed': true,
             'starred'  : false,
             'important': true,

src/app/layout/components/chat-panel/chat-panel.component.html

@@ -4,7 +4,7 @@
 
         <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center"
              (click)="unfoldSidebarTemporarily()">
-            <mat-icon class="s-32 white-fg">chat</mat-icon>
+            <mat-icon class="s-32 fuse-white-fg">chat</mat-icon>
             <h3 class="ml-12">Team Chat</h3>
         </div>
 

src/app/layout/components/chat-panel/chat-panel.component.scss

@@ -10,7 +10,7 @@ chat-panel {
     z-index: 99;
     overflow: hidden;
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
         max-width: none !important;
         width: 100% !important;
     }
@@ -381,7 +381,7 @@ fuse-sidebar {
         min-width: 360px;
         max-width: 360px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             min-width: 0 !important;
             max-width: 100vw !important;
             width: 100vw !important;

src/app/layout/components/content/content.module.ts

@@ -11,9 +11,9 @@ import { ContentComponent } from 'app/layout/components/content/content.componen
     ],
     imports     : [
         RouterModule,
-        FuseSharedModule,
+        FuseSharedModule
     ],
-    exports: [
+    exports     : [
         ContentComponent
     ]
 })

src/app/layout/components/footer/footer.component.html

@@ -6,7 +6,7 @@
            target="_blank" mat-button class="pink" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
             <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
-            <span>Purchase FUSE (Angular 6+)</span>
+            <span>Purchase FUSE (Angular 7+)</span>
         </a>
 
         <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
@@ -15,7 +15,6 @@
             <a mat-button routerLink="/documentation/changelog">Changelog</a>
         </div>
 
-
     </div>
 
 </mat-toolbar>

src/app/layout/components/navbar/vertical/style-1/style-1.component.html

@@ -36,7 +36,7 @@
     </div>
 
     <div class="navbar-content">
-        <fuse-navigation layout="vertical"></fuse-navigation>
+        <fuse-navigation class="material2" layout="vertical"></fuse-navigation>
     </div>
 
 </div>

src/app/layout/components/navbar/vertical/style-1/style-1.component.scss

@@ -61,6 +61,19 @@ fuse-sidebar {
 
                         .navbar-content {
                             padding-top: 0;
+
+                            // Material 2 specific style
+                            .material2 {
+
+                                .nav-item {
+
+                                    .nav-link {
+                                        border-radius: 20px;
+                                        margin: 0 12px;
+                                        padding: 0 12px;
+                                    }
+                                }
+                            }
                         }
                     }
                 }

src/app/layout/components/navbar/vertical/style-2/style-2.component.scss

@@ -22,6 +22,22 @@ fuse-sidebar {
                             }
                         }
                     }
+
+                    .navbar-content {
+
+                        // Material 2 specific style
+                        .material2 {
+
+                            .nav-item {
+
+                                .nav-link {
+                                    border-radius: 20px;
+                                    margin: 0 12px;
+                                    padding: 0 12px;
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }

src/app/layout/components/toolbar/toolbar.component.html

@@ -63,7 +63,7 @@
                     class="language-button"
                     [matMenuTriggerFor]="languageMenu">
                 <div fxLayout="row" fxLayoutAlign="center center">
-                    <img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'">
+                    <img class="flag mr-8" [src]="'assets/icons/flags/'+selectedLanguage.flag+'.png'">
                     <span class="iso text-uppercase">{{selectedLanguage.id}}</span>
                 </div>
             </button>
@@ -72,7 +72,7 @@
 
                 <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <span fxLayout="row" fxLayoutAlign="start center">
-                        <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
+                        <img class="flag mr-16" [src]="'assets/icons/flags/'+lang.flag+'.png'">
                         <span class="iso">{{lang.title}}</span>
                     </span>
                 </button>

src/app/layout/components/toolbar/toolbar.component.scss

@@ -33,7 +33,7 @@ toolbar {
         min-width: 64px;
         height: 64px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
     }
@@ -47,7 +47,7 @@ toolbar {
         height: 64px;
         width: 1px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
     }

src/app/layout/components/toolbar/toolbar.theme.scss

@@ -2,7 +2,10 @@
 
     $foreground: map-get($theme, foreground);
 
-    .toolbar-separator {
+    toolbar {
-        background: map-get($foreground, divider);
+
+        .toolbar-separator {
+            background: map-get($foreground, divider);
+        }
     }
 }

src/app/main/angular-material-elements/angular-material-elements.component.html

@@ -5,7 +5,7 @@
          fxLayoutAlign.gt-xs="space-between center">
 
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
-            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+            <div fxLayout="row" fxLayoutAlign="start center">
                 <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>

src/app/main/angular-material-elements/example-components.ts

@@ -9,7 +9,6 @@ import { ButtonToggleOverviewExample } from 'assets/angular-material-examples/bu
 import { ButtonTypesExample } from 'assets/angular-material-examples/button-types/button-types-example';
 import { CardFancyExample } from 'assets/angular-material-examples/card-fancy/card-fancy-example';
 import { CardOverviewExample } from 'assets/angular-material-examples/card-overview/card-overview-example';
-import { CdkTableBasicExample } from 'assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example';
 import { CheckboxConfigurableExample } from 'assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example';
 import { CheckboxOverviewExample } from 'assets/angular-material-examples/checkbox-overview/checkbox-overview-example';
 import { ChipsInputExample } from 'assets/angular-material-examples/chips-input/chips-input-example';
@@ -111,8 +110,6 @@ import { FormFieldLabelExample } from 'assets/angular-material-examples/form-fie
 import { AutocompleteOptgroupExample } from 'assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example';
 import { BadgeOverviewExample } from 'assets/angular-material-examples/badge-overview/badge-overview-example';
 import { BottomSheetOverviewExample, BottomSheetOverviewExampleSheet } from 'assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example';
-import { CdkTreeFlatExample } from 'assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example';
-import { CdkTreeNestedExample } from 'assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example';
 import { ChipsAutocompleteExample } from 'assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example';
 import { DatepickerColorExample } from 'assets/angular-material-examples/datepicker-color/datepicker-color-example';
 import { DatepickerCustomHeaderExample, ExampleHeader } from 'assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example';
@@ -143,7 +140,6 @@ import { TreeDynamicExample } from 'assets/angular-material-examples/tree-dynami
 import { TreeFlatOverviewExample } from 'assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example';
 import { TreeLoadmoreExample } from 'assets/angular-material-examples/tree-loadmore/tree-loadmore-example';
 import { TreeNestedOverviewExample } from 'assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example';
-import { CdkTableBasicFlexExample } from 'assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example';
 import { StepperVerticalExample } from 'assets/angular-material-examples/stepper-vertical/stepper-vertical-example';
 import { TabGroupBasicExample } from 'assets/angular-material-examples/tab-group-basic/tab-group-basic-example';
 import { TabGroupAsyncExample } from 'assets/angular-material-examples/tab-group-async/tab-group-async-example';
@@ -169,6 +165,14 @@ import { TableStickyComplexExample } from 'assets/angular-material-examples/tabl
 import { TableStickyComplexFlexExample } from 'assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example';
 import { TableStickyFooterExample } from 'assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example';
 import { TableStickyHeaderExample } from 'assets/angular-material-examples/table-sticky-header/table-sticky-header-example';
+import { ButtonToggleAppearanceExample } from 'assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example';
+import { RippleOverviewExample } from 'assets/angular-material-examples/ripple-overview/ripple-overview-example';
+import { StepperLabelPositionBottomExample } from 'assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example';
+import { StepperStatesExample } from 'assets/angular-material-examples/stepper-states/stepper-states-example';
+import { StepperErrorsExample } from 'assets/angular-material-examples/stepper-errors/stepper-errors-example';
+import { TabGroupAlignExample } from 'assets/angular-material-examples/tab-group-align/tab-group-align-example';
+import { SimpleColumn, TableSimpleColumnExample } from 'assets/angular-material-examples/table-simple-column/table-simple-column-example';
+import { TableWrappedExample, WrapperTable } from 'assets/angular-material-examples/table-wrapped/table-wrapped-example';
 
 export const COMPONENT_MAP = {
     'autocomplete'    : [
@@ -191,20 +195,13 @@ export const COMPONENT_MAP = {
     ],
     'button-toggle'   : [
         'button-toggle-overview',
+        'button-toggle-appearance',
         'button-toggle-exclusive'
     ],
     'card'            : [
         'card-overview',
         'card-fancy'
     ],
-    // 'cdk-table'       : [
-    //     'cdk-table-basic',
-    //     'cdk-table-basic-flex',
-    //     'cdk-table-flat'
-    // ],
-    // 'cdk-tree'        : [
-    //     'cdk-tree-nested'
-    // ],
     'checkbox'        : [
         'checkbox-overview',
         'checkbox-configurable'
@@ -307,6 +304,9 @@ export const COMPONENT_MAP = {
         'progress-spinner-overview',
         'progress-spinner-configurable'
     ],
+    'ripples'         : [
+        'ripple-overview'
+    ],
     'radio-button'    : [
         'radio-overview',
         'radio-ng-model'
@@ -357,7 +357,10 @@ export const COMPONENT_MAP = {
     'stepper'         : [
         'stepper-overview',
         'stepper-editable',
+        'stepper-errors',
+        'stepper-label-position-bottom',
         'stepper-optional',
+        'stepper-states',
         'stepper-vertical'
     ],
     'table'           : [
@@ -373,16 +376,19 @@ export const COMPONENT_MAP = {
         'table-pagination',
         'table-row-context',
         'table-selection',
+        'table-simple-column',
         'table-sorting',
         'table-sticky-columns',
         'table-sticky-complex',
         'table-sticky-complex-flex',
         'table-sticky-header',
         'table-sticky-footer',
+        'table-wrapped'
     ],
     'tabs'            : [
         'tab-group-basic',
         'tab-group-async',
+        'tab-group-align',
         'tab-group-custom-label',
         'tab-group-dynamic',
         'tab-group-dynamic-height',
@@ -460,6 +466,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Basic buttons',
         component: ButtonOverviewExample
     },
+    'button-toggle-appearance'             : {
+        title    : 'Button toggle appearance',
+        component: ButtonToggleAppearanceExample
+    },
     'button-toggle-exclusive'              : {
         title    : 'Exclusive selection',
         component: ButtonToggleExclusiveExample
@@ -480,22 +490,6 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Basic cards',
         component: CardOverviewExample
     },
-    'cdk-table-basic'                      : {
-        title    : 'Basic CDK data-table',
-        component: CdkTableBasicExample
-    },
-    'cdk-table-basic-flex'                 : {
-        title    : 'Basic use of `<cdk-table>` (uses display flex)',
-        component: CdkTableBasicFlexExample
-    },
-    'cdk-tree-flat'                        : {
-        title    : 'Tree with flat nodes',
-        component: CdkTreeFlatExample
-    },
-    'cdk-tree-nested'                      : {
-        title    : 'Tree with nested nodes',
-        component: CdkTreeNestedExample
-    },
     'checkbox-configurable'                : {
         title    : 'Configurable checkbox',
         component: CheckboxConfigurableExample
@@ -787,6 +781,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Basic radios',
         component: RadioOverviewExample
     },
+    'ripple-overview'                      : {
+        title    : 'MatRipple basic usage',
+        component: RippleOverviewExample
+    },
     'select-custom-trigger'                : {
         title    : 'Select with custom trigger text',
         component: SelectCustomTriggerExample
@@ -921,6 +919,14 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Stepper with editable steps',
         component: StepperEditableExample
     },
+    'stepper-errors'                       : {
+        title    : 'Stepper that displays errors in the steps\n',
+        component: StepperErrorsExample
+    },
+    'stepper-label-position-bottom'        : {
+        title    : 'Stepper label position bottom',
+        component: StepperLabelPositionBottomExample
+    },
     'stepper-optional'                     : {
         title    : 'Stepper with optional steps',
         component: StepperOptionalExample
@@ -929,6 +935,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Stepper overview',
         component: StepperOverviewExample
     },
+    'stepper-states'                       : {
+        title    : 'Stepper with customized states',
+        component: StepperStatesExample
+    },
     'stepper-vertical'                     : {
         title    : 'Stepper vertical',
         component: StepperVerticalExample
@@ -937,15 +947,15 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Basic table',
         component: TableBasicExample
     },
-    'table-basic-flex'                          : {
+    'table-basic-flex'                     : {
         title    : 'Basic use of `<mat-table>` (uses display flex)',
         component: TableBasicFlexExample
     },
-    'table-dynamic-columns'                          : {
+    'table-dynamic-columns'                : {
         title    : 'Table dynamically changing the columns displayed',
         component: TableDynamicColumnsExample
     },
-    'table-expandable-rows'                          : {
+    'table-expandable-rows'                : {
         title    : 'Table with expandable rows',
         component: TableExpandableRowsExample
     },
@@ -961,7 +971,7 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Table retrieving data through HTTP',
         component: TableHttpExample
     },
-    'table-multiple-header-footer'                           : {
+    'table-multiple-header-footer'         : {
         title    : 'Table with multiple header and footer rows',
         component: TableMultipleHeaderFooterExample
     },
@@ -973,7 +983,7 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Table with pagination',
         component: TablePaginationExample
     },
-    'table-row-context'                     : {
+    'table-row-context'                    : {
         title    : 'Table showing each row context properties',
         component: TableRowContextExample
     },
@@ -981,30 +991,42 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Table with selection',
         component: TableSelectionExample
     },
+    'table-simple-column'                  : {
+        title    : 'Table with a custom column component for easy column definition reuse',
+        component: TableSimpleColumnExample
+    },
     'table-sorting'                        : {
         title    : 'Table with sorting',
         component: TableSortingExample
     },
-    'table-sticky-columns'                        : {
+    'table-sticky-columns'                 : {
         title    : 'Table with a sticky columns',
         component: TableStickyColumnsExample
     },
-    'table-sticky-complex'                        : {
+    'table-sticky-complex'                 : {
         title    : 'Tables with toggle-able sticky headers, footers, and columns',
         component: TableStickyComplexExample
     },
-    'table-sticky-complex-flex'                        : {
+    'table-sticky-complex-flex'            : {
         title    : 'Flex-layout tables with toggle-able sticky headers, footers, and columns',
         component: TableStickyComplexFlexExample
     },
-    'table-sticky-footer'                        : {
+    'table-sticky-footer'                  : {
         title    : 'Table with a sticky footer',
         component: TableStickyFooterExample
     },
-    'table-sticky-header'                        : {
+    'table-sticky-header'                  : {
         title    : 'Table with sticky header',
         component: TableStickyHeaderExample
     },
+    'table-wrapped'                        : {
+        title    : 'Table example that shows how to wrap a table component for definition and behavior reuse',
+        component: TableWrappedExample
+    },
+    'tab-group-align'                      : {
+        title    : 'Tab group with aligned labels',
+        component: TabGroupAlignExample
+    },
     'tab-group-basic'                      : {
         title    : 'Basic use of the tab group',
         component: TabGroupBasicExample
@@ -1065,11 +1087,11 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Basic toolbar',
         component: ToolbarOverviewExample
     },
-    'tooltip-auto-hide'                        : {
+    'tooltip-auto-hide'                    : {
         title    : 'Tooltip that demonstrates auto-hiding when it clips out of its scrolling container',
         component: TooltipAutoHideExample
     },
-    'tooltip-custom-class'                        : {
+    'tooltip-custom-class'                 : {
         title    : 'Tooltip that can have a custom class applied',
         component: TooltipCustomClassExample
     },
@@ -1077,7 +1099,7 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Tooltip with a show and hide delay',
         component: TooltipDelayExample
     },
-    'tooltip-disabled'                        : {
+    'tooltip-disabled'                     : {
         title    : 'Tooltip that can be disabled',
         component: TooltipDisabledExample
     },
@@ -1085,7 +1107,7 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Tooltip that can be manually shown/hidden',
         component: TooltipManualExample
     },
-    'tooltip-message'                       : {
+    'tooltip-message'                      : {
         title    : 'Tooltip with a changing message',
         component: TooltipMessageExample
     },
@@ -1135,13 +1157,10 @@ export const EXAMPLE_LIST = [
     ButtonOverviewExample,
     ButtonToggleExclusiveExample,
     ButtonToggleOverviewExample,
+    ButtonToggleAppearanceExample,
     ButtonTypesExample,
     CardFancyExample,
     CardOverviewExample,
-    CdkTableBasicExample,
-    CdkTableBasicFlexExample,
-    CdkTreeFlatExample,
-    CdkTreeNestedExample,
     CheckboxConfigurableExample,
     CheckboxOverviewExample,
     ChipsAutocompleteExample,
@@ -1212,6 +1231,7 @@ export const EXAMPLE_LIST = [
     ProgressSpinnerOverviewExample,
     RadioNgModelExample,
     RadioOverviewExample,
+    RippleOverviewExample,
     SelectCustomTriggerExample,
     SelectDisabledExample,
     SelectErrorStateMatcherExample,
@@ -1245,8 +1265,11 @@ export const EXAMPLE_LIST = [
     SnackBarPositionExample,
     SortOverviewExample,
     StepperEditableExample,
+    StepperErrorsExample,
+    StepperLabelPositionBottomExample,
     StepperOptionalExample,
     StepperOverviewExample,
+    StepperStatesExample,
     StepperVerticalExample,
     TableBasicExample,
     TableBasicFlexExample,
@@ -1260,12 +1283,15 @@ export const EXAMPLE_LIST = [
     TablePaginationExample,
     TableRowContextExample,
     TableSelectionExample,
+    TableSimpleColumnExample, SimpleColumn,
     TableSortingExample,
     TableStickyColumnsExample,
     TableStickyComplexExample,
     TableStickyComplexFlexExample,
     TableStickyFooterExample,
     TableStickyHeaderExample,
+    TableWrappedExample, WrapperTable,
+    TabGroupAlignExample,
     TabGroupBasicExample,
     TabGroupAsyncExample,
     TabGroupCustomLabelExample,

src/app/main/angular-material-elements/material.module.ts

@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
 
-import { CdkTableModule } from '@angular/cdk/table';
-import { CdkTreeModule } from '@angular/cdk/tree';
 import {
     MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule,
     MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
@@ -15,8 +13,6 @@ import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 @NgModule({
     imports: [
-        CdkTableModule,
-        CdkTreeModule,
         MatAutocompleteModule,
         MatBadgeModule,
         MatBottomSheetModule,
@@ -55,8 +51,6 @@ import { MatMomentDateModule } from '@angular/material-moment-adapter';
         MatTreeModule
     ],
     exports: [
-        CdkTableModule,
-        CdkTreeModule,
         MatAutocompleteModule,
         MatBadgeModule,
         MatBottomSheetModule,

src/app/main/apps/academy/course/course.component.html

@@ -68,14 +68,14 @@
 
         <div class="step-navigation">
 
-            <button mat-fab class="previous mat-accent white-fg"
+            <button mat-fab class="previous mat-accent fuse-white-fg"
                     (click)="gotoPreviousStep()"
                     [disabled]="currentStep === 0"
                     [fxHide]="currentStep === 0">
                 <mat-icon>chevron_left</mat-icon>
             </button>
 
-            <button mat-fab class="next mat-accent white-fg"
+            <button mat-fab class="next mat-accent fuse-white-fg"
                     (click)="gotoNextStep()"
                     [disabled]="currentStep === course.totalSteps - 1"
                     [fxHide]="currentStep === course.totalSteps - 1">

src/app/main/apps/academy/course/course.component.scss

@@ -144,7 +144,8 @@
                     max-width: 720px;
                     margin: 0 auto;
                     width: 100%;
-                    @include mat-elevation(4);
+                    border-radius: 8px;
+                    @include mat-elevation(1);
                 }
             }
         }

src/app/main/apps/academy/courses/courses.component.html

@@ -25,16 +25,16 @@
             <div class="filters" fxLayout="column" fxLayoutAlign="center center"
                  fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 
-                <mat-form-field class="course-search">
+                <mat-form-field appearance="outline" floatLabel="always" class="course-search">
-
+                    <mat-label>Search for a course</mat-label>
-                    <input matInput placeholder="Search for a course" [(ngModel)]="searchTerm"
+                    <input matInput placeholder="Enter a keyword..."
+                           [(ngModel)]="searchTerm"
                            (input)="filterCoursesByTerm()">
-
                 </mat-form-field>
 
-                <mat-form-field class="category-selector">
+                <mat-form-field appearance="outline" class="category-selector">
-
+                    <mat-label>Category</mat-label>
-                    <mat-select placeholder="Select Category" [(ngModel)]="currentCategory"
+                    <mat-select [(ngModel)]="currentCategory"
                                 (selectionChange)="filterCoursesByCategory()">
                         <mat-option [value]="'all'">
                             All
@@ -43,7 +43,6 @@
                             {{ category.label }}
                         </mat-option>
                     </mat-select>
-
                 </mat-form-field>
 
             </div>

src/app/main/apps/academy/courses/courses.component.scss

@@ -35,7 +35,7 @@
                 margin-top: 0;
                 margin-bottom: 16px;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     font-size: 24px;
                 }
             }
@@ -47,7 +47,7 @@
                 letter-spacing: 0.03em;
                 margin: 0;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     font-size: 14px;
                 }
             }
@@ -57,7 +57,7 @@
     .content {
 
         .category-selector {
-            min-width: 200px;
+            min-width: 320px;
         }
 
         .filters {
@@ -66,18 +66,14 @@
             margin: 24px auto;
             padding: 0 20px;
 
-            @include media-breakpoint-down('xs') {
+            @include media-breakpoint('xs') {
                 margin: 0 auto;
             }
 
             .course-search {
-                width: 200px;
+                width: 320px;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('gt-xs') {
-                    margin-bottom: 16px;
-                }
-
-                @include media-breakpoint-up('sm') {
                     margin-right: 16px;
                 }
             }
@@ -100,15 +96,17 @@
                 &:hover {
 
                     .course-content {
-                        @include mat-elevation(8);
+                        border: none;
+                        @include mat-elevation(12);
                     }
                 }
 
                 .course-content {
                     min-height: 240px;
-                    transition: box-shadow 150ms ease-in-out;
+                    border-radius: 4px;
-
+                    overflow: hidden;
-                    @include mat-elevation(3);
+                    transition: box-shadow 200ms ease-in-out;
+                    @include mat-elevation(1);
 
                     .header {
                         padding: 16px 24px;
@@ -135,7 +133,7 @@
                         .category {
                             text-transform: capitalize;
                             text-align: left;
-                            font-weight: 500;
+                            font-weight: 600;
                         }
 
                         .length {
@@ -160,7 +158,7 @@
 
                         .updated {
                             font-size: 13px;
-                            font-weight: 500;
+                            font-weight: 600;
                             margin-top: 4px;
                         }
                     }

src/app/main/apps/calendar/calendar.component.scss

@@ -6,7 +6,7 @@
     .cal-header {
 
         .cal-cell {
-            font-weight: 500;
+            font-weight: 600;
         }
     }
 
@@ -20,13 +20,14 @@
             min-height: 200px;
         }
 
-        &.cal-open {
+        &.cal-selected {
-            @include mat-elevation(3);
+            border: none;
+            @include mat-elevation(9);
         }
     }
 
     .cal-open-day-events {
-        box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
+        box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.54);
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -91,7 +92,7 @@
 .cal-week-view {
 
     .cal-header > b {
-        font-weight: 500;
+        font-weight: 600;
     }
 
     .cal-event {
@@ -135,7 +136,7 @@
 .cal-day-view {
 
     .cal-time {
-        font-weight: 500;
+        font-weight: 600;
     }
 
     .cal-event {
@@ -215,51 +216,51 @@
         }
 
         &.Jan {
-            background-image: url('/assets/images/backgrounds/winter.jpg');
+            background-image: url('/assets/images/calendar/winter.jpg');
             background-position: 0 85%;
         }
         &.Feb {
-            background-image: url('/assets/images/backgrounds/winter.jpg');
+            background-image: url('/assets/images/calendar/winter.jpg');
             background-position: 0 85%;
         }
         &.Mar {
-            background-image: url('/assets/images/backgrounds/spring.jpg');
+            background-image: url('/assets/images/calendar/spring.jpg');
             background-position: 0 40%;
         }
         &.Apr {
-            background-image: url('/assets/images/backgrounds/spring.jpg');
+            background-image: url('/assets/images/calendar/spring.jpg');
             background-position: 0 40%;
         }
         &.May {
-            background-image: url('/assets/images/backgrounds/spring.jpg');
+            background-image: url('/assets/images/calendar/spring.jpg');
             background-position: 0 40%;
         }
         &.Jun {
-            background-image: url('/assets/images/backgrounds/summer.jpg');
+            background-image: url('/assets/images/calendar/summer.jpg');
             background-position: 0 80%;
         }
         &.Jul {
-            background-image: url('/assets/images/backgrounds/summer.jpg');
+            background-image: url('/assets/images/calendar/summer.jpg');
             background-position: 0 80%;
         }
         &.Aug {
-            background-image: url('/assets/images/backgrounds/summer.jpg');
+            background-image: url('/assets/images/calendar/summer.jpg');
             background-position: 0 80%;
         }
         &.Sep {
-            background-image: url('/assets/images/backgrounds/autumn.jpg');
+            background-image: url('/assets/images/calendar/autumn.jpg');
             background-position: 0 40%;
         }
         &.Oct {
-            background-image: url('/assets/images/backgrounds/autumn.jpg');
+            background-image: url('/assets/images/calendar/autumn.jpg');
             background-position: 0 40%;
         }
         &.Nov {
-            background-image: url('/assets/images/backgrounds/autumn.jpg');
+            background-image: url('/assets/images/calendar/autumn.jpg');
             background-position: 0 40%;
         }
         &.Dec {
-            background-image: url('/assets/images/backgrounds/winter.jpg');
+            background-image: url('/assets/images/calendar/winter.jpg');
             background-position: 0 85%;
         }
 
@@ -290,7 +291,7 @@
                     font-size: 20px;
                     min-width: 160px;
                     text-align: center;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
             }
         }

src/app/main/apps/calendar/calendar.component.ts

@@ -111,7 +111,6 @@ export class CalendarComponent implements OnInit
      */
     beforeMonthViewRender({header, body}): void
     {
-        // console.info('beforeMonthViewRender');
         /**
          * Get the selected day
          */
@@ -122,10 +121,10 @@ export class CalendarComponent implements OnInit
         if ( _selectedDay )
         {
             /**
-             * Set selectedday style
+             * Set selected day style
              * @type {string}
              */
-            _selectedDay.cssClass = 'mat-elevation-z3';
+            _selectedDay.cssClass = 'cal-selected';
         }
 
     }

src/app/main/apps/calendar/calendar.module.ts

@@ -4,7 +4,8 @@ import {
     MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule, MatTooltipModule
 } from '@angular/material';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { CalendarModule as AngularCalendarModule } from 'angular-calendar';
+import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseConfirmDialogModule } from '@fuse/components';
@@ -42,7 +43,10 @@ const routes: Routes = [
         MatToolbarModule,
         MatTooltipModule,
 
-        AngularCalendarModule.forRoot(),
+        AngularCalendarModule.forRoot({
+            provide   : DateAdapter,
+            useFactory: adapterFactory
+        }),
         ColorPickerModule,
 
         FuseSharedModule,

src/app/main/apps/calendar/event-form/event-form.component.html

@@ -8,36 +8,26 @@
         </mat-toolbar-row>
     </mat-toolbar>
 
-    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+    <div mat-dialog-content class="p-16 pb-0 m-0" fusePerfectScrollbar>
 
         <form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
 
-            <mat-form-field class="w-100-p">
+            <mat-form-field appearance="outline" class="w-100-p">
+                <mat-label>Title</mat-label>
                 <input matInput
                        name="title"
                        formControlName="title"
-                       placeholder="Title"
                        required>
             </mat-form-field>
 
-            <div class="py-16" fxFlex="1 0 auto" fxLayout="row">
+            <div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row" formGroupName="color">
-                <mat-slide-toggle
-                    name="allDay"
-                    formControlName="allDay"
-                    class="mr-24"
-                    aria-label="All day">
-                    All Day
-                </mat-slide-toggle>
-            </div>
 
-            <div class="py-16" fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row" formGroupName="color">
+                <mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
-
+                    <mat-label>Primary color</mat-label>
-                <mat-form-field class="mr-sm-24" fxFlex>
                     <input matInput
-                           class="primary-color-input"
+                           class="primary-color-input border-radius-4"
                            name="primary color"
                            formControlName="primary"
-                           placeholder="Primary color"
                            [(colorPicker)]="event.color.primary"
                            cpWidth="290px"
                            [cpPresetColors]="presetColors"
@@ -45,12 +35,12 @@
                            (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
                 </mat-form-field>
 
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" class="pl-sm-8" fxFlex="50">
+                    <mat-label>Secondary color</mat-label>
                     <input matInput
-                           class="secondary-color-input"
+                           class="secondary-color-input border-radius-4"
                            name="secondary color"
                            formControlName="secondary"
-                           placeholder="Secondary color"
                            [(colorPicker)]="event.color.secondary"
                            cpWidth="290px"
                            [cpPresetColors]="presetColors"
@@ -60,50 +50,57 @@
 
             </div>
 
+            <div class="pb-32" fxFlex="1 0 auto" fxLayout="row">
+
+                <mat-slide-toggle name="allDay" formControlName="allDay" class="mr-24" aria-label="All day">
+                    All Day
+                </mat-slide-toggle>
+
+            </div>
+
             <div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
 
-                <mat-form-field class="mr-sm-24" fxFlex>
+                <mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
-                    <input matInput [matDatepicker]="startDatePicker" placeholder="Start Date"
+                    <mat-label>Start date</mat-label>
-                           name="start"
+                    <input matInput [matDatepicker]="startDatePicker" name="start" formControlName="start">
-                           formControlName="start">
                     <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
                     <mat-datepicker #startDatePicker></mat-datepicker>
                 </mat-form-field>
 
-                <mat-form-field class="no-errors-spacer" fxFlex mat-no-float>
+                <mat-form-field appearance="outline" class="pl-sm-8 no-errors-spacer" fxFlex="50">
-                    <input matInput placeholder="Start Time">
+                    <mat-label>Start time</mat-label>
+                    <input matInput type="time">
                 </mat-form-field>
 
             </div>
 
             <div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
 
-                <mat-form-field class="mr-sm-24" fxFlex>
+                <mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
-                    <input matInput [matDatepicker]="endDatePicker" placeholder="End Date"
+                    <mat-label>End date</mat-label>
-                           name="end"
+                    <input matInput [matDatepicker]="endDatePicker" name="end" formControlName="end">
-                           formControlName="end">
                     <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
                     <mat-datepicker #endDatePicker></mat-datepicker>
                 </mat-form-field>
 
-                <mat-form-field class="no-errors-spacer" fxFlex mat-no-float>
+                <mat-form-field appearance="outline" class="pl-sm-8 no-errors-spacer" fxFlex="50">
-                    <input matInput placeholder="End Time">
+                    <mat-label>End time</mat-label>
+                    <input matInput type="time">
                 </mat-form-field>
 
             </div>
 
-            <mat-form-field formGroupName="meta" class="w-100-p">
+            <mat-form-field appearance="outline" formGroupName="meta" class="w-100-p">
+                <mat-label>Location</mat-label>
                 <input matInput
                        name="location"
-                       formControlName="location"
+                       formControlName="location">
-                       placeholder="Location">
             </mat-form-field>
 
-            <mat-form-field formGroupName="meta" class="w-100-p">
+            <mat-form-field appearance="outline" formGroupName="meta" class="w-100-p">
-
+                <mat-label>Notes</mat-label>
                 <textarea matInput
                           formControlName="notes"
-                          placeholder="Notes"
                           mat-maxlength="250"
                           max-rows="4">
                 </textarea>
@@ -113,32 +110,34 @@
 
     </div>
 
-    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">
-
-        <button *ngIf="action !=='edit'"
-                mat-raised-button
-                (click)="_matDialogRef.close(eventForm)"
-                class="save-button mat-accent"
-                [disabled]="eventForm.invalid"
-                aria-label="SAVE">
-            SAVE
-        </button>
 
         <button *ngIf="action ==='edit'"
-                mat-raised-button
+                mat-button color="primary"
-                (click)="_matDialogRef.close(['save',eventForm])"
+                class="mr-8"
-                class="save-button mat-accent"
+                (click)="matDialogRef.close(['delete',eventForm])"
-                [disabled]="eventForm.invalid"
-                aria-label="SAVE">
-            SAVE
-        </button>
-
-        <button *ngIf="action ==='edit'"
-                mat-icon-button
-                (click)="_matDialogRef.close(['delete',eventForm])"
                 aria-label="Delete"
                 matTooltip="Delete">
-            <mat-icon>delete</mat-icon>
+            DELETE
         </button>
+
+        <button *ngIf="action !== 'edit'"
+                mat-button color="primary"
+                class="save-button"
+                (click)="matDialogRef.close(eventForm)"
+                [disabled]="eventForm.invalid"
+                aria-label="ADD">
+            ADD
+        </button>
+
+        <button *ngIf="action === 'edit'"
+                mat-button color="primary"
+                class="save-button"
+                (click)="matDialogRef.close(['save', eventForm])"
+                [disabled]="eventForm.invalid"
+                aria-label="SAVE">
+            SAVE
+        </button>
+
     </div>
 </div>

src/app/main/apps/calendar/event-form/event-form.component.scss

@@ -6,7 +6,7 @@
         width: 100%;
     }
 
-    @include media-breakpoint-up('xs') {
+    @include media-breakpoint('gt-xs') {
         width: 480px;
     }
 

src/app/main/apps/chat/chat-start/chat-start.component.html

@@ -1,13 +1,13 @@
 <div fxFlex fxLayout="column" fxLayoutAlign="center center">
 
-    <div class="big-circle mat-elevation-z6 app-logo" fxLayout="column" fxLayoutAlign="center center"
+    <div class="big-circle app-logo" fxLayout="column" fxLayoutAlign="center center"
          [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
-
         <mat-icon class="s-64 s-md-128 mat-accent">chat</mat-icon>
-
     </div>
 
-    <span class="app-title mt-48 mb-16" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>
+    <span class="app-title mt-48 mb-8" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
+        Chat App
+    </span>
 
     <span fxHide fxShow.gt-md class="app-message" [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
         Select a contact to start a chat!

src/app/main/apps/chat/chat-start/chat-start.component.scss

@@ -10,8 +10,9 @@ chat-start {
         height: 240px;
         line-height: 240px;
         text-align: center;
+        border: 1px solid;
 
-        @include media-breakpoint-down('sm') {
+        @include media-breakpoint('lt-md') {
             width: 160px;
             height: 160px;
             line-height: 160px;
@@ -19,7 +20,7 @@ chat-start {
     }
 
     .app-title {
-        font-weight: 500;
+        font-weight: 600;
         font-size: 32px;
     }
 

src/app/main/apps/chat/chat-view/chat-view.component.scss

@@ -190,7 +190,7 @@ chat-view {
                                 padding: 0;
                                 border: none;
                                 border-radius: 20px;
-                                @include mat-elevation(2);
+                                border: 1px solid;
 
                                 textarea {
                                     overflow: hidden;

src/app/main/apps/chat/chat.component.scss

@@ -7,14 +7,15 @@
         max-width: 1400px;
         margin: 0 auto;
 
-        @include media-breakpoint-down(md) {
+        @include media-breakpoint('lt-lg') {
             padding: 0 !important;
         }
 
         .content-card {
+            position: relative;
             display: flex;
             flex: 1;
-            position: relative;
+            border-radius: 8px;
 
             .mat-sidenav-container {
                 display: flex;
@@ -38,7 +39,6 @@
                     flex-direction: column;
                     width: 400px;
                     max-width: 90%;
-                    box-shadow: 0 0 1px rgba(0, 0, 0, 0.37);
                     overflow: hidden;
                 }
             }

src/app/main/apps/chat/chat.theme.scss

@@ -11,6 +11,7 @@
 
         .big-circle {
             background: map-get($background, card);
+            border-color: map-get($foreground, divider);
         }
     }
 
@@ -60,6 +61,8 @@
                             .mat-form-field-flex {
 
                                 .mat-form-field-infix {
+                                    border-color: map-get($foreground, divider);
+
                                     @if ($is-dark == true) {
                                         background-color: map-get($background, hover);
                                     } @else {
@@ -84,6 +87,7 @@
 
                 .search {
                     background: map-get($background, background);
+                    border-color: map-get($foreground, divider);
 
                     input {
                         background: map-get($background, background);

src/app/main/apps/chat/sidenavs/left/chats/chats.component.html

@@ -81,12 +81,10 @@
             <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
 
                 <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
-
+                    <mat-icon class="s-16 secondary-text">search</mat-icon>
-                    <mat-icon>search</mat-icon>
-
                     <input [(ngModel)]="searchText" type="text" placeholder="Search or start new chat" fxFlex>
-
                 </div>
+
             </div>
             <!-- / SEARCH -->
 
@@ -120,27 +118,29 @@
                 <div fxLayout="row" fxLayoutAlign="start center">
 
                     <div class="avatar-wrapper" fxFlex="0 1 auto" fxLayoutAlign="center center">
-                        <img [src]="contacts | getById:chat.contactId:'avatar'"
+                        <img class="avatar" [src]="contacts | getById:chat.contactId:'avatar'"
-                             class="avatar"
                              alt="{{contacts | getById:chat.contactId:'name'}}"/>
                         <mat-icon class="s-16 status" [ngClass]="contacts | getById:chat.contactId:'status'"></mat-icon>
                     </div>
 
                     <div fxLayout="row" fxFlex>
 
-                        <div class="" fxFlex fxLayout="column" fxLayoutAlign="center start">
+                        <div class="pr-4" fxFlex fxLayout="column" fxLayoutAlign="center start">
                             <div class="contact-name">{{contacts | getById:chat.contactId:'name'}}</div>
                             <div class="contact-last-message">{{chat.lastMessage}}</div>
                         </div>
 
-                        <div fxLayout="column" fxLayoutAlign="center end">
+                        <div fxLayout="column" fxLayoutAlign="start end">
                             <div class="contact-last-message-time">
                                 {{chat.lastMessageTime | date}}
                             </div>
-                            <div *ngIf="chat.unread" class="unread-message-count accent">{{chat.unread}}</div>
+                            <div *ngIf="chat.unread" class="mt-4 unread-message-count accent">{{chat.unread}}</div>
                         </div>
+
                     </div>
+
                 </div>
+
             </button>
 
         </div>
@@ -159,17 +159,21 @@
                     [@animate]="{value:'*',params:{y:'100%'}}">
 
                 <div fxLayout="row" fxLayoutAlign="start center">
+
                     <div class="avatar-wrapper" fxFlex="0 1 auto">
                         <img src="{{contact.avatar}}" class="mat-avatar avatar" alt="{{contact.name}}"/>
                         <mat-icon class="s-16 status" [ngClass]="contact.status"></mat-icon>
                     </div>
 
-                    <div class="" fxLayout="column" fxLayoutAlign="center start">
+                    <div fxLayout="column" fxLayoutAlign="start start">
                         <div class="contact-name">{{contact.name}}</div>
                         <p class="contact-mood">{{contact.mood}}</p>
                     </div>
+
                 </div>
+
             </button>
+
         </div>
         <!-- / CONTACTS LIST-->
 

src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss

@@ -23,14 +23,16 @@ chat-chats-sidenav {
                 line-height: 36px;
                 padding: 8px;
                 font-size: 13px;
-                @include mat-elevation(1);
+                border-radius: 18px;
+                border: 1px solid;
+                overflow: hidden;
 
-                .icon {
+                .mat-icon {
                     margin: 0;
                 }
 
                 input {
-                    padding-left: 12px;
+                    padding: 0 12px 0 8px;
                     height: 36px;
                     border: none;
                 }
@@ -61,6 +63,7 @@ chat-chats-sidenav {
                 border-bottom: 1px solid;
                 padding: 16px;
                 font-weight: 400;
+                border-radius: 0;
 
                 .avatar-wrapper {
 
@@ -80,17 +83,23 @@ chat-chats-sidenav {
                     margin-top: 0;
                 }
 
+                .contact-last-message-time {
+                    font-size: 12px;
+                    margin-top: 4px;
+                }
+
                 .contact-mood {
                     line-height: normal;
-                    margin-top: 0;
+                    margin: 0;
                 }
 
                 .unread-message-count {
+                    font-size: 12px;
                     border-radius: 50%;
                     text-align: center;
-                    width: 24px;
+                    width: 20px;
-                    height: 24px;
+                    height: 20px;
-                    line-height: 24px;
+                    line-height: 20px;
                 }
             }
         }

src/app/main/apps/chat/sidenavs/left/user/user.component.html

@@ -33,9 +33,9 @@
     <!-- USER MOOD -->
     <form [formGroup]="userForm" fxLayout="column">
 
-        <mat-form-field class="mb-24" fxFlex="0 1 auto">
+        <mat-form-field appearance="outline" fxFlex="0 1 auto">
-            <textarea matInput placeholder="Mood" name="mood"
+            <mat-label>Mood</mat-label>
-                      formControlName="mood" rows="3"></textarea>
+            <textarea matInput name="mood" formControlName="mood" rows="3"></textarea>
         </mat-form-field>
 
         <mat-radio-group formControlName="status" fxLayout="column">

src/app/main/apps/contacts/contact-form/contact-form.component.html

@@ -14,79 +14,87 @@
         </mat-toolbar-row>
     </mat-toolbar>
 
-    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+    <div mat-dialog-content class="p-24 pb-0 m-0" fusePerfectScrollbar>
 
         <form [formGroup]="contactForm">
 
-            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+            <div fxLayout="row" fxLayoutAlign="start start">
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
+                    <mat-label>Name</mat-label>
-                    <input name="name" formControlName="name" placeholder="Name" matInput required>
+                    <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
+                    <input name="name" formControlName="name" matInput required>
                 </mat-form-field>
             </div>
 
-            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+            <div fxLayout="row" fxLayoutAlign="start start">
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
+                    <mat-label>Lastname</mat-label>
-                    <input name="lastName" formControlName="lastName" placeholder="Lastname" matInput>
+                    <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
+                    <input name="lastName" formControlName="lastName" matInput>
                 </mat-form-field>
             </div>
 
-            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+            <div fxLayout="row" fxLayoutAlign="start start">
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">star</mat-icon>
+                    <mat-label>Nickname</mat-label>
-                    <input name="nickname" formControlName="nickname" matInput placeholder="Nickname">
+                    <mat-icon matSuffix class="secondary-text">star</mat-icon>
+                    <input name="nickname" formControlName="nickname" matInput>
                 </mat-form-field>
             </div>
 
-            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+            <div fxLayout="row" fxLayoutAlign="start start">
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">phone</mat-icon>
+                    <mat-label>Phone number</mat-label>
-                    <input formControlName="phone" matInput placeholder="Phone number">
+                    <mat-icon matSuffix class="secondary-text">phone</mat-icon>
+                    <input formControlName="phone" matInput>
                 </mat-form-field>
             </div>
 
-            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+            <div fxLayout="row" fxLayoutAlign="start start">
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">email</mat-icon>
+                    <mat-label>Email</mat-label>
-                    <input name="email" formControlName="email" matInput type="email" placeholder="Email">
+                    <mat-icon matSuffix class="secondary-text">email</mat-icon>
+                    <input name="email" formControlName="email" matInput type="email">
                 </mat-form-field>
             </div>
 
-            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+            <div fxLayout="row" fxLayoutAlign="start start">
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">domain</mat-icon>
+                    <mat-label>Company</mat-label>
-                    <input name="company" formControlName="company" matInput placeholder="Company">
+                    <mat-icon matSuffix class="secondary-text">domain</mat-icon>
+                    <input name="company" formControlName="company" matInput>
                 </mat-form-field>
             </div>
 
-            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+            <div fxLayout="row" fxLayoutAlign="start start">
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">work</mat-icon>
+                    <mat-label>Job title</mat-label>
-                    <input name="jobTitle" formControlName="jobTitle" matInput placeholder="Job title">
+                    <mat-icon matSuffix class="secondary-text">work</mat-icon>
+                    <input name="jobTitle" formControlName="jobTitle" matInput>
                 </mat-form-field>
             </div>
 
-            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+            <div fxLayout="row" fxLayoutAlign="start start">
-                <mat-form-field class="mr-24" fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">cake</mat-icon>
+                    <mat-label>Birthday</mat-label>
-                    <input matInput [matDatepicker]="birthdayDatePicker" placeholder="Birthday">
+                    <input matInput [matDatepicker]="birthdayDatePicker" name="birthday" formControlName="birthday">
                     <mat-datepicker-toggle matSuffix [for]="birthdayDatePicker"></mat-datepicker-toggle>
                     <mat-datepicker #birthdayDatePicker></mat-datepicker>
                 </mat-form-field>
             </div>
 
-            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+            <div fxLayout="row" fxLayoutAlign="start start">
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">home</mat-icon>
+                    <mat-label>Address</mat-label>
-                    <input name="address" formControlName="address" matInput placeholder="Address">
+                    <mat-icon matSuffix class="secondary-text">home</mat-icon>
+                    <input name="address" formControlName="address" matInput>
                 </mat-form-field>
             </div>
 
             <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
-                <mat-form-field fxFlex>
+                <mat-form-field appearance="outline" fxFlex>
-                    <textarea name="notes" formControlName="notes" placeholder="Notes" matInput type="text"
+                    <mat-label>Notes</mat-label>
-                              max-rows="4"></textarea>
+                    <textarea name="notes" formControlName="notes" matInput type="text" max-rows="4"></textarea>
                 </mat-form-field>
             </div>
 
@@ -94,32 +102,33 @@
 
     </div>
 
-    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">
 
-        <button *ngIf="action !=='edit'"
+        <button *ngIf="action === 'edit'"
-                mat-raised-button
+                mat-button
-                (click)="matDialogRef.close(contactForm)"
+                class="mr-8"
-                class="save-button mat-accent"
-                [disabled]="contactForm.invalid"
-                aria-label="SAVE">
-            SAVE
-        </button>
-
-        <button *ngIf="action ==='edit'"
-                mat-raised-button
-                (click)="matDialogRef.close(['save',contactForm])"
-                class="save-button mat-accent"
-                [disabled]="contactForm.invalid"
-                aria-label="SAVE">
-            SAVE
-        </button>
-
-        <button *ngIf="action ==='edit'"
-                mat-icon-button
                 (click)="matDialogRef.close(['delete',contactForm])"
                 aria-label="Delete"
                 matTooltip="Delete">
-            <mat-icon>delete</mat-icon>
+            DELETE
+        </button>
+
+        <button *ngIf="action !== 'edit'"
+                mat-button
+                class="save-button"
+                (click)="matDialogRef.close(contactForm)"
+                [disabled]="contactForm.invalid"
+                aria-label="SAVE">
+            ADD
+        </button>
+
+        <button *ngIf="action === 'edit'"
+                mat-button
+                class="save-button"
+                (click)="matDialogRef.close(['save',contactForm])"
+                [disabled]="contactForm.invalid"
+                aria-label="SAVE">
+            SAVE
         </button>
 
     </div>

src/app/main/apps/contacts/contact-form/contact-form.component.scss

@@ -6,7 +6,7 @@
         width: 100%;
     }
 
-    @include media-breakpoint-up('xs') {
+    @include media-breakpoint('gt-xs') {
         width: 400px;
     }
 

src/app/main/apps/contacts/contact-list/contact-list.component.html

@@ -74,7 +74,7 @@
             <div fxFlex="row" fxLayoutAlign="end center">
                 <button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
                     <mat-icon class="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
-                    <mat-icon class="secondary-text" *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
+                    <mat-icon class="secondary-text" *ngIf="!user.starred.includes(contact.id)">star_border</mat-icon>
                 </button>
 
                 <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More"

src/app/main/apps/contacts/contact-list/contact-list.component.scss

@@ -51,9 +51,9 @@ contacts-contact-list {
     padding: 0;
     z-index: 99;
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
         position: sticky;
-        top: calc(100vh - 72px);
+        top: calc(100vh - 120px);
         bottom: auto;
     }
 }

src/app/main/apps/contacts/contact.model.ts

@@ -33,7 +33,7 @@ export class Contact
             this.email = contact.email || '';
             this.phone = contact.phone || '';
             this.address = contact.address || '';
-            this.birthday = contact.birhday || '';
+            this.birthday = contact.birthday || '';
             this.notes = contact.notes || '';
         }
     }

src/app/main/apps/contacts/contacts.component.html

@@ -1,13 +1,13 @@
 <div id="contacts" class="page-layout simple left-sidebar inner-sidebar inner-scroll">
 
     <!-- HEADER -->
-    <div class="header accent p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
+    <div class="header accent p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start"
          fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 
         <!-- APP TITLE -->
         <div fxLayout="row" fxLayoutAlign="start center">
 
-            <button mat-icon-button class="sidebar-toggle mr-12" fxHide.gt-md
+            <button mat-icon-button class="sidebar-toggle mr-12" fxHide.gt-sm
                     (click)="toggleSidebar('contacts-main-sidebar')">
                 <mat-icon>menu</mat-icon>
             </button>
@@ -25,13 +25,17 @@
         <!-- / APP TITLE -->
 
         <!-- SEARCH -->
-        <div class="search-input-wrapper mt-16 ml-8 m-sm-0" fxLayout="row" fxLayoutAlign="start center">
+        <div class="ml-sm-32" fxLayout="row" fxLayoutAlign="center center" fxFlex>
-            <label for="search" class="mr-8">
+
-                <mat-icon>search</mat-icon>
+            <div class="search-wrapper mt-16 mt-sm-0">
-            </label>
+
-            <mat-form-field mat-no-float class="m-0" floatLabel="never">
+                <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
-                <input matInput [formControl]="searchInput" id="search" placeholder="Search for anything">
+                    <mat-icon>search</mat-icon>
-            </mat-form-field>
+                    <input [formControl]="searchInput" placeholder="Search for a contact">
+                </div>
+
+            </div>
+
         </div>
         <!-- / SEARCH -->
 
@@ -61,7 +65,7 @@
         <div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
 
             <!-- CONTENT -->
-            <div class="content mat-elevation-z4">
+            <div class="content">
                 <contacts-contact-list></contacts-contact-list>
             </div>
             <!-- / CONTENT -->

src/app/main/apps/contacts/contacts.component.scss

@@ -1,5 +1,35 @@
+@import "src/@fuse/scss/fuse";
+
 #contacts {
 
+    .header {
+
+        .search-wrapper {
+            width: 100%;
+            max-width: 480px;
+            border-radius: 28px;
+            overflow: hidden;
+            @include mat-elevation(1);
+
+            .search {
+                width: 100%;
+                height: 48px;
+                line-height: 48px;
+                padding: 0 18px;
+
+                input {
+                    width: 100%;
+                    height: 48px;
+                    min-height: 48px;
+                    max-height: 48px;
+                    padding: 0 16px;
+                    border: none;
+                    outline: none;
+                }
+            }
+        }
+    }
+
     .content {
         overflow: hidden;
 
@@ -10,4 +40,4 @@
             }
         }
     }
-}
+}

src/app/main/apps/contacts/contacts.theme.scss

@@ -1,10 +1,30 @@
 @mixin contacts-theme($theme) {
 
     $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
     $is-dark: map-get($theme, is-dark);
 
     #contacts {
 
+        .header {
+
+            .search-wrapper {
+                background: map-get($background, card);
+
+                .search {
+
+                    .mat-icon {
+                        color: map-get($foreground, icon);
+                    }
+
+                    input {
+                        background: map-get($background, card);
+                        color: map-get($foreground, text);
+                    }
+                }
+            }
+        }
+
         .content {
 
             .sidebar {

src/app/main/apps/contacts/sidebars/main/main.component.html

@@ -16,7 +16,7 @@
         <!-- SIDEBAR CONTENT -->
         <div class="content py-16" fusePerfectScrollbar>
 
-            <div class="nav">
+            <div class="nav material2">
 
                 <div class="nav-item" aria-label="inbox">
                     <a class="nav-link" matRipple (click)="changeFilter('all')"

src/app/main/apps/contacts/sidebars/main/main.component.scss

@@ -20,9 +20,10 @@
             flex-direction: column;
             flex: 0 1 auto;
             padding: 0;
+            border-radius: 8px;
 
             @include media-breakpoint(gt-sm) {
-                @include mat-elevation(4);
+                @include mat-elevation(1);
             }
 
             > .header {