Updated the changelog

Fixed: Flex layout ObservableMedia is depreciated
Updated Angular to 7.2.1
2025-12-22 16:27:08 +00:00 · 2019-01-17 07:30:26 +03:00 · 2019-01-17 07:29:39 +03:00 · 2019-01-17 07:29:07 +03:00 · 2019-01-09 13:55:58 +03:00 · 2019-01-02 10:34:49 +03:00
463 changed files with 18880 additions and 7857 deletions
--- a/16
+++ b/16
@@ -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
--- a/3
+++ b/3
@@ -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
--- a/README.md
+++ b/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

--- a/angular.json
+++ b/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": {
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@@ -1,14 +1,14 @@
-import { Fuse2Page } from './app.po';
+import { FusePage } from './app.po';

-describe('Fuse2 App', () => {
-    let page: Fuse2Page;
+describe('Fuse App', () => {
+    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!');
    });
 });
--- a/e2e/src/app.po.ts
+++ b/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();
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "fuse",
-  "version": "6.3.0",
+  "version": "7.1.0",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
@@ -18,72 +18,74 @@
  },
  "private": true,
  "dependencies": {
-    "@agm/core": "1.0.0-beta.3",
-    "@angular/animations": "6.1.4",
-    "@angular/cdk": "6.4.6",
-    "@angular/common": "6.1.4",
-    "@angular/compiler": "6.1.4",
-    "@angular/core": "6.1.4",
-    "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.1.4",
-    "@angular/http": "6.1.4",
-    "@angular/material": "6.4.6",
-    "@angular/material-moment-adapter": "6.4.6",
-    "@angular/platform-browser": "6.1.4",
-    "@angular/platform-browser-dynamic": "6.1.4",
-    "@angular/router": "6.1.4",
-    "@ngrx/effects": "6.1.0",
-    "@ngrx/router-store": "6.1.0",
-    "@ngrx/store": "6.1.0",
-    "@ngrx/store-devtools": "6.1.0",
-    "@ngx-translate/core": "10.0.2",
+    "@agm/core": "1.0.0-beta.5",
+    "@angular/animations": "7.2.1",
+    "@angular/cdk": "7.2.1",
+    "@angular/common": "7.2.1",
+    "@angular/compiler": "7.2.1",
+    "@angular/core": "7.2.1",
+    "@angular/flex-layout": "7.0.0-beta.23",
+    "@angular/forms": "7.2.1",
+    "@angular/http": "7.2.1",
+    "@angular/material": "7.2.1",
+    "@angular/material-moment-adapter": "7.2.1",
+    "@angular/platform-browser": "7.2.1",
+    "@angular/platform-browser-dynamic": "7.2.1",
+    "@angular/router": "7.2.1",
+    "@ngrx/effects": "7.0.0",
+    "@ngrx/router-store": "7.0.0",
+    "@ngrx/store": "7.0.0",
+    "@ngrx/store-devtools": "7.0.0",
+    "@ngx-translate/core": "11.0.1",
    "@swimlane/dragula": "3.7.3",
-    "@swimlane/ngx-charts": "9.0.0",
-    "@swimlane/ngx-datatable": "13.1.0",
-    "@swimlane/ngx-dnd": "5.0.6",
+    "@swimlane/ngx-charts": "10.0.0",
+    "@swimlane/ngx-datatable": "14.0.0",
+    "@swimlane/ngx-dnd": "6.0.0",
    "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.25.2",
-    "angular-in-memory-web-api": "0.6.1",
-    "chart.js": "2.7.2",
+    "angular-calendar": "0.26.4",
+    "angular-in-memory-web-api": "0.8.0",
+    "chart.js": "2.7.3",
    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.7",
+    "core-js": "2.6.2",
    "d3": "5.7.0",
+    "date-fns": "1.30.1",
    "hammerjs": "2.0.8",
-    "lodash": "4.17.10",
-    "moment": "2.22.2",
+    "lodash": "4.17.11",
+    "moment": "2.23.0",
    "ng2-charts": "1.6.0",
    "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.6.0",
-    "ngx-cookie-service": "1.0.10",
+    "ngx-color-picker": "7.3.0",
+    "ngx-cookie-service": "2.1.0",
    "perfect-scrollbar": "1.4.0",
    "prismjs": "1.15.0",
-    "rxjs": "6.2.2",
-    "rxjs-compat": "6.2.2",
+    "rxjs": "6.3.3",
+    "rxjs-compat": "6.3.3",
    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.26"
+    "zone.js": "0.8.28"
  },
  "devDependencies": {
-    "@angular/cli": "6.1.5",
-    "@angular/compiler-cli": "6.1.4",
-    "@angular/language-service": "6.1.4",
-    "@angular-devkit/build-angular": "0.7.5",
+    "@angular/cli": "7.2.2",
+    "@angular/compiler-cli": "7.2.1",
+    "@angular/language-service": "7.2.1",
+    "@angular-devkit/build-angular": "0.12.2",
    "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.8",
-    "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.116",
+    "@types/jasmine": "2.8.14",
+    "@types/jasminewd2": "2.0.6",
+    "@types/lodash": "4.14.119",
    "@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.1.4",
    "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",
-    "ts-node": "5.0.1",
-    "tslint": "5.9.1",
-    "typescript": "2.7.2",
-    "webpack-bundle-analyzer": "2.13.1"
+    "protractor": "5.4.2",
+    "ts-node": "7.0.1",
+    "tslib": "1.9.3",
+    "tslint": "5.11.0",
+    "typescript": "3.2.2",
+    "webpack-bundle-analyzer": "3.0.3"
  }
 }
--- a/src/@fuse/components/demo/demo-content/demo-content.component.html
+++ b/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>
--- a/src/@fuse/components/navigation/navigation.component.ts
+++ b/src/@fuse/components/navigation/navigation.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@@ -8,7 +8,8 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
    selector       : 'fuse-navigation',
    templateUrl    : './navigation.component.html',
    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();
         });
    }
 }
--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/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);
    }
 }
--- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts
+++ b/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();
    }

--- a/src/@fuse/components/navigation/vertical/group/group.component.ts
+++ b/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();
    }

 }
--- a/src/@fuse/components/navigation/vertical/item/item.component.ts
+++ b/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();
    }
 }
--- a/src/@fuse/components/search-bar/search-bar.component.scss
+++ b/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;
                }
--- a/src/@fuse/components/shortcuts/shortcuts.component.html
+++ b/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">

--- a/src/@fuse/components/shortcuts/shortcuts.component.scss
+++ b/src/@fuse/components/shortcuts/shortcuts.component.scss
@@ -2,7 +2,7 @@

 :host {

-    @include media-breakpoint-down('sm') {
+    @include media-breakpoint('lt-md') {

        #fuse-shortcuts {

--- a/src/@fuse/components/shortcuts/shortcuts.component.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { CookieService } from 'ngx-cookie-service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -35,17 +35,17 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
    /**
     * Constructor
     *
-     * @param {Renderer2} _renderer
     * @param {CookieService} _cookieService
     * @param {FuseMatchMediaService} _fuseMatchMediaService
     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
+     * @param {Renderer2} _renderer
     */
    constructor(
        private _cookieService: CookieService,
        private _fuseMatchMediaService: FuseMatchMediaService,
        private _fuseNavigationService: FuseNavigationService,
-        private _observableMedia: ObservableMedia,
+        private _mediaObserver: MediaObserver,
        private _renderer: Renderer2
    )
    {
@@ -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 ( cookieExists )
+        if ( this._cookieService.check('FUSE2.shortcuts') )
        {
            this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
        }
@@ -107,10 +105,11 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
            ];
        }

+        // Subscribe to media changes
        this._fuseMatchMediaService.onMediaChange
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(() => {
-                if ( this._observableMedia.isActive('gt-sm') )
+                if ( this._mediaObserver.isActive('gt-sm') )
                {
                    this.hideMobileShortcutsPanel();
                }
--- a/src/@fuse/components/sidebar/sidebar.component.scss
+++ b/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;
--- a/src/@fuse/components/sidebar/sidebar.component.ts
+++ b/src/@fuse/components/sidebar/sidebar.component.ts
@@ -1,8 +1,8 @@
 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';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@@ -87,7 +87,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     * @param {FuseConfigService} _fuseConfigService
     * @param {FuseMatchMediaService} _fuseMatchMediaService
     * @param {FuseSidebarService} _fuseSidebarService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
     * @param {Renderer2} _renderer
     */
    constructor(
@@ -97,7 +97,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        private _fuseConfigService: FuseConfigService,
        private _fuseMatchMediaService: FuseMatchMediaService,
        private _fuseSidebarService: FuseSidebarService,
-        private _observableMedia: ObservableMedia,
+        private _mediaObserver: MediaObserver,
        private _renderer: Renderer2
    )
    {
@@ -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...
@@ -319,7 +319,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            .subscribe(() => {

                // Get the active status
-                const isActive = this._observableMedia.isActive(this.lockedOpen);
+                const isActive = this._mediaObserver.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');
    }

--- a/src/@fuse/components/theme-options/theme-options.component.scss
+++ b/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;

--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/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
--- a/src/@fuse/components/widget/widget.component.scss
+++ b/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;
--- a/src/@fuse/components/widget/widget.theme.scss
+++ b/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);
        }
    }
 }
--- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts
+++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts
@@ -1,6 +1,6 @@
 import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
 import { MatSidenav } from '@angular/material';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@@ -30,13 +30,13 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
     * @param {FuseMatchMediaService} _fuseMatchMediaService
     * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
     * @param {MatSidenav} _matSidenav
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
     */
    constructor(
        private _fuseMatchMediaService: FuseMatchMediaService,
        private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
        private _matSidenav: MatSidenav,
-        private _observableMedia: ObservableMedia
+        private _mediaObserver: MediaObserver
    )
    {
        // Set the defaults
@@ -58,7 +58,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
        // Register the sidenav to the service
        this._fuseMatSidenavHelperService.setSidenav(this.fuseMatSidenavHelper, this._matSidenav);

-        if ( this._observableMedia.isActive(this.matIsLockedOpen) )
+        if ( this._mediaObserver.isActive(this.matIsLockedOpen) )
        {
            this.isLockedOpen = true;
            this._matSidenav.mode = 'side';
@@ -74,7 +74,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
        this._fuseMatchMediaService.onMediaChange
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(() => {
-                if ( this._observableMedia.isActive(this.matIsLockedOpen) )
+                if ( this._mediaObserver.isActive(this.matIsLockedOpen) )
                {
                    this.isLockedOpen = true;
                    this._matSidenav.mode = 'side';
--- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
+++ b/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]);
+            }
+        });
    }

    /**
--- a/src/@fuse/scss/core.scss
+++ b/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
--- a/src/@fuse/scss/fuse.scss
+++ b/src/@fuse/scss/fuse.scss
@@ -2,4 +2,4 @@
@import '~@angular/material/theming';

 // Breakpoint mixins
-@import "mixins/breakpoints";
+@import "partials/breakpoints";
--- a/src/@fuse/scss/mixins/_breakpoints.scss
+++ b/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;
-    }
-}
--- a/src/@fuse/scss/partials/_angular-material-fix.scss
+++ b/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 {
--- a/src/@fuse/scss/partials/_breakpoints.scss
+++ b/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
+        }
+    }
+}
--- a/src/@fuse/scss/partials/_cards.scss
+++ b/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;
-    @include mat-elevation(2);
+    border-radius: 8px;
+    border: 1px solid;

    &.variable-width {
        min-width: 0;
--- a/src/@fuse/scss/partials/_general.scss
+++ b/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;
+}
--- a/src/@fuse/scss/partials/_global.scss
+++ b/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);
-    }
-}
--- a/src/@fuse/scss/partials/_helpers.scss
+++ b/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) {

--- a/src/@fuse/scss/partials/_icons.scss
+++ b/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 {

--- a/src/@fuse/scss/partials/_material.scss
+++ b/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: #FFFFFF;
+        color: #FFC107;

        &: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 {
--- a/src/@fuse/scss/partials/_navigation.scss
+++ b/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 {
+    // Material 2 style
+    &.material2,
+    .material2 & {

        .nav-subheader {
-            border-top: 1px solid rgba(0, 0, 0, 0.12);
-
-            &:first-child {
-                border-top: none;
-            }
+            height: 40px;
        }

+        .nav-group {
+
+            > .group-title {
+                height: 40px;
+            }
+        }
        .nav-item {

            .nav-link {
                height: 40px;
-                padding: 0 16px;
-                margin: 4px 8px;
-                border-radius: 4px;
+                padding: 0 12px 0 24px;
+                border-radius: 0 20px 20px 0;
+                margin-right: 16px;
            }
        }
    }
--- a/src/@fuse/scss/partials/_page-layouts.scss
+++ b/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 {
--- a/src/@fuse/scss/partials/_print.scss
+++ b/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;
        }
--- a/src/@fuse/scss/partials/_reset.scss
+++ b/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;
-}
--- a/src/@fuse/scss/partials/_scrollbars.scss
+++ b/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);
-        border-radius: 24px;
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.37);
+        border-radius: 12px;
    }

    ::-webkit-scrollbar-thumb:active {
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-        border-radius: 24px;
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
+        border-radius: 12px;
    }
 }
--- a/src/@fuse/scss/partials/_toolbar.scss
+++ b/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;
-    }
-}
--- a/src/@fuse/scss/partials/_typography.scss
+++ b/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;
+                    }
                }
            }
        }
--- a/src/@fuse/scss/partials/plugins/_ngx-datatable.scss
+++ b/src/@fuse/scss/partials/plugins/_ngx-datatable.scss
@@ -95,6 +95,11 @@
                min-height: 48px;
                font-size: 13px;
                padding: 0 24px;
+
+                .datatable-header-cell-template-wrap {
+                    display: inline-flex;
+                    align-items: center;
+                }
            }
        }

@@ -172,7 +177,7 @@
 }

 [class*="datatable-icon-"] {
-    font-family: 'Material Icons';
+    font-family: 'material-outline-icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
@@ -204,11 +209,11 @@
 }

 .datatable-icon-up:before {
-    content: "keyboard_arrow_up";
+    content: "arrow_drop_up";
 }

 .datatable-icon-down:before {
-    content: "keyboard_arrow_down";
+    content: "arrow_drop_down";
 }

 .datatable-icon-sort:before {
--- a/src/@fuse/services/config.service.ts
+++ b/src/@fuse/services/config.service.ts
@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { Router, RoutesRecognized } from '@angular/router';
+import { ResolveEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -96,7 +96,7 @@ export class FuseConfigService
        // Reload the default layout config on every RoutesRecognized event
        // if the current layout config is different from the default one
        this._router.events
-            .pipe(filter(event => event instanceof RoutesRecognized))
+            .pipe(filter(event => event instanceof ResolveEnd))
            .subscribe(() => {
                if ( !_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout) )
                {
--- a/src/@fuse/services/match-media.service.ts
+++ b/src/@fuse/services/match-media.service.ts
@@ -1,4 +1,4 @@
-import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -14,10 +14,10 @@ export class FuseMatchMediaService
    /**
     * Constructor
     *
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
     */
    constructor(
-        private _observableMedia: ObservableMedia
+        private _mediaObserver: MediaObserver
    )
    {
        // Set the defaults
@@ -39,7 +39,7 @@ export class FuseMatchMediaService
     */
    private _init(): void
    {
-        this._observableMedia.asObservable()
+        this._mediaObserver.media$
            .pipe(
                debounceTime(500),
                distinctUntilChanged()
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -25,7 +25,7 @@

        &.right-side-panel {

-            @include media-breakpoint-up('lg') {
+            @include media-breakpoint('gt-md') {
                right: 70px;
            }
        }
--- a/src/app/app.component.ts
+++ b/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
--- a/src/app/app.theme.scss
+++ b/src/app/app.theme.scss
@@ -61,9 +61,13 @@ $custom_palettes: (
 // @ Typography
 // -----------------------------------------------------------------------------------------------------

-// Force the input field font sizes to 16px
+// Angular Material typography
 $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
-    @include docs-components-cards-theme($theme);
+    // UI
+    @include ui-cards-theme($theme);

    // Example Viewer
    @include example-viewer-theme($theme);
--- a/src/app/fake-db/calendar.ts
+++ b/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',
-                        secondary: '#FAE3E3'
+                        primary  : '#F44336',
+                        secondary: '#FFCDD2'
                    },
                    resizable: {
                        beforeStart: true,
@@ -40,8 +40,8 @@ export class CalendarFakeDb
                    title    : 'An event with no end date',
                    allDay   : false,
                    color    : {
-                        primary  : '#e3bc08',
-                        secondary: '#FDF1BA'
+                        primary  : '#FF9800',
+                        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',
-                        secondary: '#FDF1BA'
+                        primary  : '#673AB7',
+                        secondary: '#D1C4E9'
                    },
                    resizable: {
                        beforeStart: true,
--- a/src/app/fake-db/contacts.ts
+++ b/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'   : ''
        }
    ];
--- a/src/app/fake-db/dashboard-analytics.ts
+++ b/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],
--- a/src/app/fake-db/e-commerce.ts
+++ b/src/app/fake-db/e-commerce.ts
--- a/src/app/fake-db/fake-db.service.ts
+++ b/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-table'  : SearchFakeDb.table,
+            'search': SearchFakeDb.search,

            // FAQ
            'faq': FaqFakeDb.data,
--- a/src/app/fake-db/file-manager.ts
+++ b/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'
        }
    ];

--- a/src/app/fake-db/icons.ts
+++ b/src/app/fake-db/icons.ts
--- a/src/app/fake-db/invoice.ts
+++ b/src/app/fake-db/invoice.ts
@@ -15,8 +15,8 @@ export class InvoiceFakeDb
            'email'  : 'johndoe@mail.com'
        },
        'number'  : 'P9-0004',
-        'date'    : 'Jul 19, 2015',
-        'dueDate' : 'Aug 24, 2015',
+        'date'    : 'Jul 19, 2018',
+        'dueDate' : 'Aug 24, 2018',
        'services': [
            {
                'title'    : 'Prototype & Design',
--- a/src/app/fake-db/mail.ts
+++ b/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',
-                    'url'     : 'assets/images/etc/early-sunrise.jpg',
-                    'size'    : '17Mb'
+                    'preview' : 'assets/images/mail/attachment-3.jpg',
+                    'size': '17Mb'
                }
            ],
            'labels'        : [
--- a/src/app/fake-db/profile.ts
+++ b/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',
-                    'subtitle': 'Kotaku',
-                    '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.',
+                    'title'   : 'Never stop changing!',
+                    'subtitle': 'John Westrock',
+                    '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',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'title'  : 'A Walk Amongst Friends',
+                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'title'  : 'Braies Lake',
+                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'title'  : 'Fall Glow',
+                    'preview': 'assets/images/profile/fall-glow-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Cactus',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'title'  : 'First Snow',
+                    'preview': 'assets/images/profile/first-snow-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Road Trip',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'title'  : 'Lago di Braies',
+                    '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',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'title'  : 'Lago di Sorapis',
+                    'preview': 'assets/images/profile/lago-di-sorapis-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'title'  : 'Morain Lake',
+                    'preview': 'assets/images/profile/morain-lake-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'title'  : 'Never Stop Changing',
+                    'preview': 'assets/images/profile/never-stop-changing-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Cactus',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'title'  : 'Reaching',
+                    'preview': 'assets/images/profile/reaching-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Road Trip',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'title'  : 'Yosemite',
+                    'preview': 'assets/images/profile/yosemite-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'title'  : 'A Walk Amongst Friends',
+                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'title'  : 'Braies Lake',
+                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'title'  : 'Fall Glow',
+                    'preview': 'assets/images/profile/fall-glow-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Cactus',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'title'  : 'First Snow',
+                    'preview': 'assets/images/profile/first-snow-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Road Trip',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'title'  : 'Lago di Braies',
+                    'preview': 'assets/images/profile/lago-di-braies-small.jpg'
                }
            ]
        },
        {
-            'name' : 'April 2015',
-            'info' : '5 Photos',
+            'name' : 'April 2018',
+            'info' : '7 Photos',
            'media': [
                {
                    'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'title'  : 'Lago di Sorapis',
+                    'preview': 'assets/images/profile/lago-di-sorapis-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'title'  : 'Morain Lake',
+                    'preview': 'assets/images/profile/morain-lake-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'title'  : 'Never Stop Changing',
+                    'preview': 'assets/images/profile/never-stop-changing-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Cactus',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'title'  : 'Reaching',
+                    'preview': 'assets/images/profile/reaching-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Road Trip',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'title'  : 'Yosemite',
+                    'preview': 'assets/images/profile/yosemite-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'title'  : 'A Walk Amongst Friends',
+                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                },
                {
                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'title'  : 'Braies Lake',
+                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                }
            ]
        }
@@ -270,10 +270,10 @@ export class ProfileFakeDb

    public static about = {
        'general': {
-            'gender'   : 'Female',
-            'birthday' : 'May 8th, 1988',
+            'gender'   : 'Male',
+            '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'
--- a/src/app/fake-db/quick-panel.ts
+++ b/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'
        }
    ];

--- a/src/app/fake-db/scrumboard.ts
+++ b/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'
                        }
                    ],
--- a/src/app/fake-db/search.ts
+++ b/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'
-        }
-    ];
-
 }
--- a/src/app/fake-db/todo.ts
+++ b/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',
-            'dueDate'  : 'Friday, December 30, 2016 10:07 AM',
+            'startDate': 'Sunday, February 1, 2018 1:30 PM',
+            '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',
-            'dueDate'  : 'Friday, July 8, 2016 10:49 AM',
+            'startDate': 'Sunday, August 23, 2018 11:19 PM',
+            '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',
-            'dueDate'  : 'Sunday, August 21, 2016 10:48 PM',
+            'startDate': 'Saturday, October 18, 2017 4:25 AM',
+            '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',
-            'dueDate'  : 'Wednesday, June 15, 2016 1:53 PM',
+            'startDate': 'Friday, August 8, 2017 5:45 AM',
+            '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',
-            'dueDate'  : 'Thursday, March 3, 2016 2:26 PM',
+            'startDate': 'Monday, July 13, 2018 1:55 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',
-            'dueDate'  : 'Tuesday, August 9, 2016 7:18 AM',
+            'startDate': 'Tuesday, November 11, 2017 6:36 PM',
+            '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',
-            'dueDate'  : 'Wednesday, October 19, 2016 3:38 PM',
+            'startDate': 'Monday, June 9, 2017 3:15 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',
-            'dueDate'  : 'Friday, March 25, 2016 12:29 AM',
+            'startDate': 'Wednesday, December 10, 2017 9:25 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',
-            'dueDate'  : 'Saturday, November 7, 2015 2:00 PM',
+            'startDate': 'Saturday, March 1, 2017 3:59 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',
-            'dueDate'  : 'Wednesday, February 10, 2016 10:47 AM',
+            'startDate': 'Sunday, June 14, 2018 4:40 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',
-            'dueDate'  : 'Monday, September 12, 2016 9:16 PM',
+            'startDate': 'Saturday, May 3, 2017 1:32 AM',
+            'dueDate'  : 'Monday, September 12, 2019 9:16 PM',
            'completed': true,
            'starred'  : false,
            'important': true,
--- a/src/app/layout/components/chat-panel/chat-panel.component.html
+++ b/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>

--- a/src/app/layout/components/chat-panel/chat-panel.component.scss
+++ b/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;
--- a/src/app/layout/components/content/content.module.ts
+++ b/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
    ]
 })
--- a/src/app/layout/components/footer/footer.component.html
+++ b/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>
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
+++ b/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>
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/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;
+                                    }
+                                }
+                            }
                        }
                    }
                }
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
+++ b/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;
+                                }
+                            }
+                        }
+                    }
                }
            }
        }
--- a/src/app/layout/components/toolbar/toolbar.component.html
+++ b/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>
--- a/src/app/layout/components/toolbar/toolbar.component.scss
+++ b/src/app/layout/components/toolbar/toolbar.component.scss
@@ -12,8 +12,8 @@ toolbar {

    .mat-toolbar {
        position: relative;
-        background: inherit;
-        color: inherit;
+        background: inherit !important;
+        color: inherit !important;
    }

    .logo {
@@ -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;
        }
    }
--- a/src/app/layout/components/toolbar/toolbar.theme.scss
+++ b/src/app/layout/components/toolbar/toolbar.theme.scss
@@ -2,7 +2,10 @@

    $foreground: map-get($theme, foreground);

+    toolbar {
+
        .toolbar-separator {
            background: map-get($foreground, divider);
        }
+    }
 }
--- a/src/app/layout/horizontal/layout-1/layout-1.component.html
+++ b/src/app/layout/horizontal/layout-1/layout-1.component.html
@@ -90,7 +90,7 @@
 <!-- / QUICK PANEL -->

 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->

 <!-- TOOLBAR -->
--- a/src/app/layout/vertical/layout-1/layout-1.component.html
+++ b/src/app/layout/vertical/layout-1/layout-1.component.html
@@ -102,7 +102,7 @@
 <!-- / QUICK PANEL -->

 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->

 <!-- TOOLBAR -->
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/src/app/layout/vertical/layout-2/layout-2.component.html
@@ -102,7 +102,7 @@
 <!-- / QUICK PANEL -->

 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->

 <!-- TOOLBAR -->
--- a/src/app/layout/vertical/layout-3/layout-3.component.html
+++ b/src/app/layout/vertical/layout-3/layout-3.component.html
@@ -88,7 +88,7 @@
 <!-- / QUICK PANEL -->

 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->

 <!-- TOOLBAR -->
--- a/src/app/main/angular-material-elements/angular-material-elements.component.html
+++ b/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>
--- a/src/app/main/angular-material-elements/example-components.ts
+++ b/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
@@ -981,6 +991,10 @@ 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
@@ -1005,6 +1019,14 @@ export const EXAMPLE_COMPONENTS = {
        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
@@ -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,
--- a/src/app/main/angular-material-elements/material.module.ts
+++ b/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,
--- a/src/app/main/apps/academy/course/course.component.html
+++ b/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">
--- a/src/app/main/apps/academy/course/course.component.scss
+++ b/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);
                }
            }
        }
--- a/src/app/main/apps/academy/courses/courses.component.html
+++ b/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">
-
-                    <input matInput placeholder="Search for a course" [(ngModel)]="searchTerm"
+                <mat-form-field appearance="outline" floatLabel="always" class="course-search">
+                    <mat-label>Search for a course</mat-label>
+                    <input matInput placeholder="Enter a keyword..."
+                           [(ngModel)]="searchTerm"
                           (input)="filterCoursesByTerm()">
-
                </mat-form-field>

-                <mat-form-field class="category-selector">
-
-                    <mat-select placeholder="Select Category" [(ngModel)]="currentCategory"
+                <mat-form-field appearance="outline" class="category-selector">
+                    <mat-label>Category</mat-label>
+                    <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>
--- a/src/app/main/apps/academy/courses/courses.component.scss
+++ b/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') {
-                    margin-bottom: 16px;
-                }
-
-                @include media-breakpoint-up('sm') {
+                @include media-breakpoint('gt-xs') {
                    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;
-
-                    @include mat-elevation(3);
+                    border-radius: 4px;
+                    overflow: hidden;
+                    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;
                        }
                    }
--- a/src/app/main/apps/calendar/calendar.component.scss
+++ b/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 {
-            @include mat-elevation(3);
+        &.cal-selected {
+            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;
@@ -37,7 +38,7 @@
            display: flex;
            flex-direction: row;
            align-items: center;
-            justify-content: start;
+            justify-content: flex-start;
            @include mat-elevation(1);
            transition: box-shadow 300ms ease;

@@ -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;
                }
            }
        }
--- a/src/app/main/apps/calendar/calendar.component.ts
+++ b/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';
        }

    }
--- a/src/app/main/apps/calendar/calendar.module.ts
+++ b/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,
--- a/src/app/main/apps/calendar/event-form/event-form.component.html
+++ b/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">
-                <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" formGroupName="color">

-            <div class="py-16" fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row" formGroupName="color">
-
-                <mat-form-field class="mr-sm-24" fxFlex>
+                <mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
+                    <mat-label>Primary color</mat-label>
                    <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>
-                    <input matInput [matDatepicker]="startDatePicker" placeholder="Start Date"
-                           name="start"
-                           formControlName="start">
+                <mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
+                    <mat-label>Start date</mat-label>
+                    <input matInput [matDatepicker]="startDatePicker" name="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>
-                    <input matInput placeholder="Start Time">
+                <mat-form-field appearance="outline" class="pl-sm-8 no-errors-spacer" fxFlex="50">
+                    <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>
-                    <input matInput [matDatepicker]="endDatePicker" placeholder="End Date"
-                           name="end"
-                           formControlName="end">
+                <mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
+                    <mat-label>End date</mat-label>
+                    <input matInput [matDatepicker]="endDatePicker" name="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>
-                    <input matInput placeholder="End Time">
+                <mat-form-field appearance="outline" class="pl-sm-8 no-errors-spacer" fxFlex="50">
+                    <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"
-                       placeholder="Location">
+                       formControlName="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">
-
-        <button *ngIf="action !=='edit'"
-                mat-raised-button
-                (click)="_matDialogRef.close(eventForm)"
-                class="save-button mat-accent"
-                [disabled]="eventForm.invalid"
-                aria-label="SAVE">
-            SAVE
-        </button>
+    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">

        <button *ngIf="action ==='edit'"
-                mat-raised-button
-                (click)="_matDialogRef.close(['save',eventForm])"
-                class="save-button mat-accent"
-                [disabled]="eventForm.invalid"
-                aria-label="SAVE">
-            SAVE
-        </button>
-
-        <button *ngIf="action ==='edit'"
-                mat-icon-button
-                (click)="_matDialogRef.close(['delete',eventForm])"
+                mat-button color="primary"
+                class="mr-8"
+                (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>
--- a/src/app/main/apps/calendar/event-form/event-form.component.scss
+++ b/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;
    }

--- a/src/app/main/apps/calendar/event.model.ts
+++ b/src/app/main/apps/calendar/event.model.ts
@@ -38,7 +38,7 @@ export class CalendarEventModel
            primary  : data.color && data.color.primary || '#1e90ff',
            secondary: data.color && data.color.secondary || '#D1E8FF'
        };
-        this.draggable = data.draggable || true;
+        this.draggable = data.draggable;
        this.resizable = {
            beforeStart: data.resizable && data.resizable.beforeStart || true,
            afterEnd   : data.resizable && data.resizable.afterEnd || true
--- a/src/app/main/apps/chat/chat-start/chat-start.component.html
+++ b/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!
--- a/src/app/main/apps/chat/chat-start/chat-start.component.scss
+++ b/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;
    }

--- a/src/app/main/apps/chat/chat-view/chat-view.component.scss
+++ b/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;
--- a/src/app/main/apps/chat/chat.component.scss
+++ b/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;
                }
            }
--- a/src/app/main/apps/chat/chat.theme.scss
+++ b/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);
--- a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.html
+++ b/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>search</mat-icon>
-
+                    <mat-icon class="s-16 secondary-text">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'"
-                             class="avatar"
+                        <img class="avatar" [src]="contacts | getById:chat.contactId:'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-->

--- a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss
+++ b/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;
-                    height: 24px;
-                    line-height: 24px;
+                    width: 20px;
+                    height: 20px;
+                    line-height: 20px;
                }
            }
        }
--- a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts
+++ b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@@ -31,12 +31,12 @@ export class ChatChatsSidenavComponent implements OnInit, OnDestroy
     *
     * @param {ChatService} _chatService
     * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
     */
    constructor(
        private _chatService: ChatService,
        private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
-        public _observableMedia: ObservableMedia
+        public _mediaObserver: MediaObserver
    )
    {
        // Set the defaults
@@ -98,7 +98,7 @@ export class ChatChatsSidenavComponent implements OnInit, OnDestroy
    {
        this._chatService.getChat(contact);

-        if ( !this._observableMedia.isActive('gt-md') )
+        if ( !this._mediaObserver.isActive('gt-md') )
        {
            this._fuseMatSidenavHelperService.getSidenav('chat-left-sidenav').toggle();
        }
--- a/src/app/main/apps/chat/sidenavs/left/user/user.component.html
+++ b/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">
-            <textarea matInput placeholder="Mood" name="mood"
-                      formControlName="mood" rows="3"></textarea>
+        <mat-form-field appearance="outline" fxFlex="0 1 auto">
+            <mat-label>Mood</mat-label>
+            <textarea matInput name="mood" formControlName="mood" rows="3"></textarea>
        </mat-form-field>

        <mat-radio-group formControlName="status" fxLayout="column">
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sercan	8c555a1fb5	Updated the changelog	2019-01-17 07:30:26 +03:00
sercan	3827b10fc5	Fixed: Flex layout ObservableMedia is depreciated	2019-01-17 07:29:39 +03:00
sercan	6f3ce4059d	Updated Angular to 7.2.1 Updated various other packages	2019-01-17 07:29:07 +03:00
sercan	8dbd71f122	Updated Angular to 7.2.0 Updated Angular Material to 7.2.1 Updated AngularCLI related files (Calendar) Small style tweak	2019-01-09 13:55:58 +03:00
sercan	5870131ab2	(Layouts) Close the html comment properly	2019-01-02 10:34:49 +03:00
sercan	c764089061	(Layouts) Close the html comment properly	2019-01-02 10:34:02 +03:00
sercan	a7cf8c236b	Changelog updates	2019-01-02 10:33:22 +03:00
sercan	79d2ed8cfe	Fixed: ngx datatable sort arrow icons are not working correctly and they are not aligned Small comment tweak	2019-01-02 10:05:21 +03:00
sercan	84696aed79	Updated packages and version number	2019-01-02 10:04:31 +03:00
sercan	44550ecdd8	Import cleanup	2018-11-27 11:11:07 +03:00
sercan	68bd4436f4	Fixed: 'draggable' cannot be set to false. Closes #100	2018-11-27 10:47:55 +03:00
sercan	6db86a6b25	Use 'ResolveEnd' to reset the config. Closes #101	2018-11-27 10:44:11 +03:00
sercan	8e4e4bf401	Updated the changelog navigation item badge	2018-11-16 10:29:35 +03:00
sercan	b184c839da	Updated Angular, Angular Material and various other packages Upadte the changelog Increased the Fuse version	2018-11-16 10:21:37 +03:00
sercan	017ce59254	(FuseNavigation) Trigger observables on item add (Docs) Fixed Material Color Picker input for the documentation	2018-11-16 09:53:31 +03:00
sercan	842cb37fcb	Fixed: Wrong link to the fuse-config service docs page Removed no-redundant-jsdoc rule from the tslint	2018-10-24 11:20:05 +03:00
sercan	430fe0c0c1	Fixed: Forgot to change the font families	2018-10-19 10:43:48 +03:00
sercan	8118f94b50	Small tweaks	2018-10-19 10:19:39 +03:00
sercan	83ba318fb7	Updated the main config files	2018-10-19 08:59:46 +03:00
sercan	1dd59db09f	Added images for Angular Material examples	2018-10-19 08:59:35 +03:00
sercan	60ab983730	Updated Angular Material elements Updated the changelog	2018-10-19 00:31:01 +03:00
sercan	6fadc29e4c	Updated Angular, Angular Material and various other libraries	2018-10-19 00:30:39 +03:00
sercan	4da339cef1	(FusePerfectScrollbar) Unbind 'keydown' events of the PerfectScrollbar instances. This fixes the Angular Material inputs' high CPU usage.. The real problem is in the Angular Material library but we cannot do anything about it so we have removed the keyboard events of the PerfectScrollbar which resolves this years long issue.	2018-10-12 23:59:03 +03:00
sercan	cbd1c3e21c	(Mail) Small tweaks (Mail-ngrx) Small tweaks (FAQ) Small tweaks (KnowledgeBase) Small tweaks	2018-10-11 20:03:57 +03:00
sercan	e67887f379	(Mail-ngrx) Fixed a small issue	2018-10-11 19:28:06 +03:00
sercan	eeed00b30e	(E-Commerce) Matched search fields styles to the rest of the apps (Contacts) Search field doesn't span to the full width of its container	2018-10-11 19:27:38 +03:00
sercan	06c8903f91	(Navigation) Added missing icon for UI/Cards menu	2018-10-10 12:25:01 +03:00
sercan	23b943a765	Modernizations	2018-10-10 12:20:12 +03:00
sercan	8961d75241	(FuseNavigation) Merge the subscriptions (FuseNavigationDocs) Updated the docs	2018-10-08 19:01:49 +03:00
sercan	ab7bd882a0	(FuseNavigation) Moved the changeDetection strategy to OnPush to improve the performance and allow for huge amounts of navigation items (FuseNavigation) Use service to update the menu items (FuseNavigationDocs) Updated the docs	2018-10-08 12:36:15 +03:00
sercan	63bd95ea1e	(Coming Soon) Simplified the form error messages	2018-10-04 12:21:46 +03:00
sercan	98297ea787	Fuse Modernization continues...	2018-10-04 12:14:54 +03:00
sercan	5251a6305f	Used 'Muli' as the primary font Increased the font-weight 500s to 600s Small tweaks	2018-09-24 11:18:07 +03:00
sercan	790549a92d	Update Angular, Angular Material and various other packages Set the Fuse version to 7.0.0	2018-09-21 12:21:58 +03:00
sercan	0643d8c348	(Global) Use 'Nunito' as a primary font (Global) Use outline Material Icons (Global) Removed some unnecessary styles and moved some of them to the related places	2018-09-21 12:21:04 +03:00
sercan	c2d5a5a2a5	(Scrumboard) Fixed: Undefined matDialogRef (Calendar) Fixed: Undefined matDialogRef (Calendar) Updated angular-calendar	2018-09-21 11:38:11 +03:00
Sercan Yemen	94275c507f	Fixed: Extra padding on print layout because of the sidebar	2018-09-03 11:34:02 +03:00
Sercan Yemen	31b4c300f0	Updated the changelog navigation item tag	2018-08-30 11:20:04 +03:00
Sercan Yemen	768d20c481	Updated the changelog	2018-08-30 10:57:23 +03:00
Sercan Yemen	b2a28c36ed	Updated the changelog	2018-08-30 10:56:57 +03:00
Sercan Yemen	7dc0892c83	(Toolbar) Fixed: Custom bg color cannot be applied to the toolbar background	2018-08-30 10:56:46 +03:00
Sercan Yemen	ef216718b9	Updated Angular to 6.1.6	2018-08-30 10:51:13 +03:00