Merge branch 'master' into skeleton

2025-12-22 17:27:11 +00:00 · 2018-08-28 08:39:08 +03:00 · 2018-08-28 08:11:51 +03:00 · 2018-08-28 08:09:40 +03:00 · 2018-08-26 18:38:11 +03:00 · 2018-08-26 18:37:57 +03:00
1384 changed files with 12274 additions and 94408 deletions
--- a/16
+++ b/16
@@ -1,16 +0,0 @@
 // -----------------------------------------------------------------------------------------------------
 // @ 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,2 +1 @@
-This project is protected by Envato's Regular License. For more information,
+https://themeforest.net/licenses/terms/regular
 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 8 and Angular Material
+Material Design Admin Template with Angular 6+ and Angular Material
 ## The Community
--- a/angular.json
+++ b/angular.json
@@ -4,28 +4,27 @@
    "newProjectRoot": "projects",
    "projects": {
        "fuse": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "styleext": "scss"
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
-                        "outputPath": "dist/fuse",
+                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
-                        "tsConfig": "tsconfig.app.json",
+                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
-                            "src/assets",
+                            "src/assets"
                            "src/app/main/angular-material-elements"
                        ],
                        "styles": [
                            "src/styles.scss"
@@ -49,14 +48,7 @@
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
-                            "buildOptimizer": true,
+                            "buildOptimizer": true
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "4mb",
                                    "maximumError": "6mb"
                                }
                            ]
                        },
                        "ec": {
                            "sourceMap": true,
@@ -101,43 +93,50 @@
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
-                        "tsConfig": "tsconfig.spec.json",
+                        "tsConfig": "src/tsconfig.spec.json",
-                        "karmaConfig": "karma.conf.js",
+                        "karmaConfig": "src/karma.conf.js",
                        "styles": [
                            "styles.scss"
                        ],
                        "scripts": [],
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
-                        ],
+                        ]
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
-                            "tsconfig.app.json",
+                            "src/tsconfig.app.json",
-                            "tsconfig.spec.json",
+                            "src/tsconfig.spec.json"
                            "e2e/tsconfig.json"
                        ],
                        "exclude": [
-                            "**/node_modules/**",
+                            "**/node_modules/**"
                            "**/src/app/fake-db/**/*",
                            "**/src/assets/angular-material-examples/**/*"
                        ]
                    }
-                },
+                }
            }
        },
        "fuse-e2e": {
            "root": "e2e/",
            "projectType": "application",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "fuse:serve"
-                    },
+                    }
-                    "configurations": {
+                },
-                        "production": {
+                "lint": {
-                            "devServerTarget": "fuse:serve:production"
+                    "builder": "@angular-devkit/build-angular:tslint",
-                        }
+                    "options": {
                        "tsConfig": "e2e/tsconfig.e2e.json",
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
--- a/12
+++ b/12
@@ -1,12 +0,0 @@
 # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 > 0.5%
 last 2 versions
 Firefox ESR
 not dead
 not IE 9-11 # For IE 9-11 support, remove 'not'.
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@@ -1,12 +1,8 @@
 // @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
-const { SpecReporter } = require('jasmine-spec-reporter');
+const {SpecReporter} = require('jasmine-spec-reporter');
 /**
 * @type { import("protractor").Config }
 */
 exports.config = {
    allScriptsTimeout: 11000,
    specs            : [
@@ -28,8 +24,8 @@ exports.config = {
    onPrepare()
    {
        require('ts-node').register({
-            project: require('path').join(__dirname, './tsconfig.json')
+            project: require('path').join(__dirname, './tsconfig.e2e.json')
        });
        jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
    }
-};
+};
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@@ -1,23 +1,14 @@
-import { FusePage } from './app.po';
+import { Fuse2Page } from './app.po';
 import { browser, logging } from 'protractor';
-describe('Fuse App', () => {
+describe('Fuse2 App', () => {
-    let page: FusePage;
+    let page: Fuse2Page;
    beforeEach(() => {
-        page = new FusePage();
+        page = new Fuse2Page();
    });
    it('should display welcome message', () => {
        page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
    });
    afterEach(async () => {
        // Assert that there are no errors emitted from the browser
        const logs = await browser.manage().logs().get(logging.Type.BROWSER);
        expect(logs).not.toContain(jasmine.objectContaining({
            level: logging.Level.SEVERE
        } as logging.Entry));
    });
 });
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@@ -1,14 +1,11 @@
 import { browser, by, element } from 'protractor';
-export class FusePage
+export class Fuse2Page {
-{
+    navigateTo(): any {
-    navigateTo(): Promise<any>
+        return browser.get('/');
    {
        return browser.get('/') as Promise<any>;
    }
-    getParagraphText(): Promise<string>
+    getParagraphText(): any {
-    {
+        return element(by.css('app-root h1')).getText();
        return element(by.css('app #main')).getText() as Promise<string>;
    }
 }
--- a/e2e/tsconfig.e2e.json
+++ b/e2e/tsconfig.e2e.json
@@ -1,13 +1,13 @@
 {
-    "extends": "../tsconfig.json",
+  "extends": "../tsconfig.json",
-    "compilerOptions": {
+  "compilerOptions": {
-        "outDir": "../out-tsc/app",
+    "outDir": "../out-tsc/app",
-        "module": "commonjs",
+    "module": "commonjs",
-        "target": "es5",
+    "target": "es5",
-        "types": [
+    "types": [
-            "jasmine",
+      "jasmine",
-            "jasminewd2",
+      "jasminewd2",
-            "node"
+      "node"
-        ]
+    ]
-    }
+  }
-}
+}
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@@ -1,13 +0,0 @@
 {
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/e2e",
        "module": "commonjs",
        "target": "es5",
        "types": [
            "jasmine",
            "jasminewd2",
            "node"
        ]
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,88 +1,89 @@
 {
-    "name": "fuse",
+  "name": "fuse",
-    "version": "8.1.1",
+  "version": "6.3.0",
-    "license": "https://themeforest.net/licenses/terms/regular",
+  "license": "https://themeforest.net/licenses/terms/regular",
-    "scripts": {
+  "scripts": {
-        "ng": "ng",
+    "ng": "ng",
-        "start": "ng serve --open",
+    "start": "ng serve --open",
-        "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
+    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
-        "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
+    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
-        "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
+    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
-        "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
+    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
-        "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
-        "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
+    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
-        "test": "ng test",
+    "test": "ng test",
-        "lint": "ng lint",
+    "lint": "ng lint",
-        "e2e": "ng e2e",
+    "e2e": "ng e2e",
-        "bundle-report": "webpack-bundle-analyzer dist/stats.json"
+    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
-    },
+  },
-    "private": true,
+  "private": true,
-    "dependencies": {
+  "dependencies": {
-        "@agm/core": "1.0.0-beta.5",
+    "@agm/core": "1.0.0-beta.3",
-        "@angular/animations": "8.1.0",
+    "@angular/animations": "6.1.4",
-        "@angular/cdk": "8.0.2",
+    "@angular/cdk": "6.4.6",
-        "@angular/common": "8.1.0",
+    "@angular/common": "6.1.4",
-        "@angular/compiler": "8.1.0",
+    "@angular/compiler": "6.1.4",
-        "@angular/core": "8.1.0",
+    "@angular/core": "6.1.4",
-        "@angular/flex-layout": "8.0.0-beta.26",
+    "@angular/flex-layout": "6.0.0-beta.16",
-        "@angular/forms": "8.1.0",
+    "@angular/forms": "6.1.4",
-        "@angular/material": "8.0.2",
+    "@angular/http": "6.1.4",
-        "@angular/material-moment-adapter": "8.0.2",
+    "@angular/material": "6.4.6",
-        "@angular/platform-browser": "8.1.0",
+    "@angular/material-moment-adapter": "6.4.6",
-        "@angular/platform-browser-dynamic": "8.1.0",
+    "@angular/platform-browser": "6.1.4",
-        "@angular/router": "8.1.0",
+    "@angular/platform-browser-dynamic": "6.1.4",
-        "@ngrx/effects": "8.0.1",
+    "@angular/router": "6.1.4",
-        "@ngrx/router-store": "8.0.1",
+    "@ngrx/effects": "6.1.0",
-        "@ngrx/store": "8.0.1",
+    "@ngrx/router-store": "6.1.0",
-        "@ngrx/store-devtools": "8.0.1",
+    "@ngrx/store": "6.1.0",
-        "@ngx-translate/core": "11.0.1",
+    "@ngrx/store-devtools": "6.1.0",
-        "@swimlane/dragula": "3.8.0",
+    "@ngx-translate/core": "10.0.2",
-        "@swimlane/ngx-charts": "12.0.1",
+    "@swimlane/dragula": "3.7.3",
-        "@swimlane/ngx-datatable": "15.0.2",
+    "@swimlane/ngx-charts": "9.0.0",
-        "@swimlane/ngx-dnd": "8.0.0",
+    "@swimlane/ngx-datatable": "13.1.0",
-        "@types/prismjs": "1.16.0",
+    "@swimlane/ngx-dnd": "5.0.6",
-        "angular-calendar": "0.27.12",
+    "@types/prismjs": "1.9.0",
-        "angular-in-memory-web-api": "0.8.0",
+    "angular-calendar": "0.25.2",
-        "chart.js": "2.8.0",
+    "angular-in-memory-web-api": "0.6.1",
-        "classlist.js": "1.1.20150312",
+    "chart.js": "2.7.2",
-        "d3": "5.9.7",
+    "classlist.js": "1.1.20150312",
-        "date-fns": "1.30.1",
+    "core-js": "2.5.7",
-        "hammerjs": "2.0.8",
+    "d3": "5.7.0",
-        "lodash": "4.17.11",
+    "hammerjs": "2.0.8",
-        "moment": "2.24.0",
+    "lodash": "4.17.10",
-        "ng2-charts": "2.3.0",
+    "moment": "2.22.2",
-        "ngrx-store-freeze": "0.2.4",
+    "ng2-charts": "1.6.0",
-        "ngx-color-picker": "8.0.1",
+    "ngrx-store-freeze": "0.2.4",
-        "ngx-cookie-service": "2.2.0",
+    "ngx-color-picker": "6.6.0",
-        "perfect-scrollbar": "1.4.0",
+    "ngx-cookie-service": "1.0.10",
-        "prismjs": "1.16.0",
+    "perfect-scrollbar": "1.4.0",
-        "rxjs": "6.5.2",
+    "prismjs": "1.15.0",
-        "web-animations-js": "2.3.2",
+    "rxjs": "6.2.2",
-        "zone.js": "0.9.1"
+    "rxjs-compat": "6.2.2",
-    },
+    "web-animations-js": "2.3.1",
-    "devDependencies": {
+    "zone.js": "0.8.26"
-        "@angular/cli": "8.1.0",
+  },
-        "@angular/compiler-cli": "8.1.0",
+  "devDependencies": {
-        "@angular/language-service": "8.1.0",
+    "@angular/cli": "6.1.5",
-        "@angular-devkit/build-angular": "0.801.0",
+    "@angular/compiler-cli": "6.1.4",
-        "@angularclass/hmr": "2.1.3",
+    "@angular/language-service": "6.1.4",
-        "@types/jasmine": "3.3.13",
+    "@angular-devkit/build-angular": "0.7.5",
-        "@types/jasminewd2": "2.0.6",
+    "@angularclass/hmr": "2.1.3",
-        "@types/lodash": "4.14.135",
+    "@types/jasmine": "2.8.8",
-        "@types/node": "8.9.5",
+    "@types/jasminewd2": "2.0.3",
-        "codelyzer": "5.1.0",
+    "@types/lodash": "4.14.116",
-        "jasmine-core": "3.4.0",
+    "@types/node": "8.9.5",
-        "jasmine-spec-reporter": "4.2.1",
+    "codelyzer": "4.2.1",
-        "karma": "4.1.0",
+    "jasmine-core": "2.99.1",
-        "karma-chrome-launcher": "2.2.0",
+    "jasmine-spec-reporter": "4.2.1",
-        "karma-coverage-istanbul-reporter": "2.0.5",
+    "karma": "1.7.1",
-        "karma-jasmine": "2.0.1",
+    "karma-chrome-launcher": "2.2.0",
-        "karma-jasmine-html-reporter": "1.4.2",
+    "karma-coverage-istanbul-reporter": "2.0.2",
-        "protractor": "5.4.2",
+    "karma-jasmine": "1.1.2",
-        "ts-node": "7.0.1",
+    "karma-jasmine-html-reporter": "0.2.2",
-        "tslib": "1.10.0",
+    "protractor": "5.4.0",
-        "tslint": "5.15.0",
+    "ts-node": "5.0.1",
-        "typescript": "3.4.5",
+    "tslint": "5.9.1",
-        "webpack-bundle-analyzer": "3.3.2"
+    "typescript": "2.7.2",
-    }
+    "webpack-bundle-analyzer": "2.13.1"
  }
 }
--- a/src/@fuse/animations/index.ts
+++ b/src/@fuse/animations/index.ts
@@ -51,23 +51,26 @@ export const fuseAnimations = [
    ]),
    trigger('fadeInOut', [
-        state('0, void', style({
+        state('0', style({
            display: 'none',
            opacity: 0
        })),
-        state('1, *', style({
+        state('1', style({
            display: 'block',
            opacity: 1
        })),
        transition('1 => 0', animate('300ms ease-out')),
-        transition('0 => 1', animate('300ms ease-in')),
+        transition('0 => 1', animate('300ms ease-in'))
        transition('void <=> *', animate('300ms ease-in'))
    ]),
    trigger('slideInOut', [
        state('0', style({
-            height: '0px'
+            height : '0px',
            display: 'none'
        })),
        state('1', style({
-            height: '*'
+            height : '*',
            display: 'block'
        })),
        transition('1 => 0', animate('300ms ease-out')),
        transition('0 => 1', animate('300ms ease-in'))
@@ -117,15 +120,17 @@ export const fuseAnimations = [
                    })
                )
            ]
-        )
+        ),
    ]),
    trigger('slideInLeft', [
        state('void', style({
            transform: 'translateX(-100%)',
            display  : 'none'
        })),
        state('*', style({
            transform: 'translateX(0)',
            display  : 'flex'
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
@@ -134,9 +139,11 @@ export const fuseAnimations = [
    trigger('slideInRight', [
        state('void', style({
            transform: 'translateX(100%)',
            display  : 'none'
        })),
        state('*', style({
            transform: 'translateX(0)',
            display  : 'flex'
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
@@ -145,9 +152,11 @@ export const fuseAnimations = [
    trigger('slideInTop', [
        state('void', style({
            transform: 'translateY(-100%)',
            display  : 'none'
        })),
        state('*', style({
            transform: 'translateY(0)',
            display  : 'flex'
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
@@ -157,9 +166,11 @@ export const fuseAnimations = [
        state('void',
            style({
                transform: 'translateY(100%)',
                display  : 'none'
            })),
        state('*', style({
            transform: 'translateY(0)',
            display  : 'flex'
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
@@ -179,7 +190,7 @@ export const fuseAnimations = [
    // -----------------------------------------------------------------------------------------------------
    // @ Router animations
    // -----------------------------------------------------------------------------------------------------
-
+    
    trigger('routerTransitionLeft', [
        transition('* => *', [
--- a/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts
+++ b/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef } from '@angular/material';
@Component({
    selector   : 'fuse-confirm-dialog',
--- a/src/@fuse/components/confirm-dialog/confirm-dialog.module.ts
+++ b/src/@fuse/components/confirm-dialog/confirm-dialog.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatDialogModule } from '@angular/material';
 import { MatDialogModule } from '@angular/material/dialog';
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
--- 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/demo-content/morain-lake.jpg" style="max-width: 640px">
+    <img class="mt-24 w-100-p" src="assets/images/etc/early-sunrise.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/demo/demo.module.ts
+++ b/src/@fuse/components/demo/demo.module.ts
@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatDividerModule } from '@angular/material/divider';
+import { MatDividerModule, MatListModule } from '@angular/material';
 import { MatListModule } from '@angular/material/list';
 import { FuseDemoContentComponent } from './demo-content/demo-content.component';
 import { FuseDemoSidebarComponent } from './demo-sidebar/demo-sidebar.component';
--- a/src/@fuse/components/highlight/highlight.component.ts
+++ b/src/@fuse/components/highlight/highlight.component.ts
@@ -13,7 +13,7 @@ import '@fuse/components/highlight/prism-languages';
 export class FuseHighlightComponent implements OnInit, OnDestroy
 {
    // Source
-    @ContentChild('source', {static: true})
+    @ContentChild('source')
    source: ElementRef;
    // Lang
--- a/src/@fuse/components/material-color-picker/material-color-picker.module.ts
+++ b/src/@fuse/components/material-color-picker/material-color-picker.module.ts
@@ -1,10 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FusePipesModule } from '@fuse/pipes/pipes.module';
--- a/src/@fuse/components/navigation/navigation.component.ts
+++ b/src/@fuse/components/navigation/navigation.component.ts
@@ -1,15 +1,14 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { merge, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@Component({
-    selector       : 'fuse-navigation',
+    selector     : 'fuse-navigation',
-    templateUrl    : './navigation.component.html',
+    templateUrl  : './navigation.component.html',
-    styleUrls      : ['./navigation.component.scss'],
+    styleUrls    : ['./navigation.component.scss'],
-    encapsulation  : ViewEncapsulation.None,
+    encapsulation: ViewEncapsulation.None
    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseNavigationComponent implements OnInit
 {
@@ -23,12 +22,9 @@ export class FuseNavigationComponent implements OnInit
    private _unsubscribeAll: Subject<any>;
    /**
-     *
+     * Constructor
     * @param {ChangeDetectorRef} _changeDetectorRef
     * @param {FuseNavigationService} _fuseNavigationService
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseNavigationService: FuseNavigationService
    )
    {
@@ -52,24 +48,7 @@ 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.module.ts
+++ b/src/@fuse/components/navigation/navigation.module.ts
@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatRippleModule } from '@angular/material/core';
+import { MatIconModule, MatRippleModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/src/@fuse/components/navigation/navigation.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import * as _ from 'lodash';
 import { FuseNavigationItem } from '@fuse/types';
@@ -16,9 +15,6 @@ 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 } = {};
@@ -37,9 +33,6 @@ 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);
    }
    // -----------------------------------------------------------------------------------------------------
@@ -76,36 +69,6 @@ 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
    // -----------------------------------------------------------------------------------------------------
@@ -332,9 +295,6 @@ export class FuseNavigationService
        {
            navigation.push(item);
            // Trigger the observable
            this._onNavigationItemAdded.next(true);
            return;
        }
@@ -342,11 +302,6 @@ export class FuseNavigationService
        if ( id === 'start' )
        {
            navigation.unshift(item);
            // Trigger the observable
            this._onNavigationItemAdded.next(true);
            return;
        }
        // Add it to a specific location
@@ -364,33 +319,6 @@ 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);
    }
    /**
@@ -418,8 +346,5 @@ 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 { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { merge, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { FuseNavigationItem } from '@fuse/types';
@@ -30,12 +30,10 @@ 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
    )
@@ -113,18 +111,6 @@ 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();
         });
    }
    /**
@@ -168,10 +154,6 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
        }
        this.isOpen = true;
        // Mark for check
        this._changeDetectorRef.markForCheck();
        this._fuseNavigationService.onItemCollapseToggled.next();
    }
@@ -186,10 +168,6 @@ 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,16 +1,13 @@
-import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, Input } 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 implements OnInit, OnDestroy
+export class FuseNavVerticalGroupComponent
 {
    @HostBinding('class')
    classes = 'nav-group nav-item';
@@ -18,57 +15,11 @@ export class FuseNavVerticalGroupComponent implements OnInit, OnDestroy
    @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,16 +1,13 @@
-import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, Input } 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 implements OnInit, OnDestroy
+export class FuseNavVerticalItemComponent
 {
    @HostBinding('class')
    classes = 'nav-item';
@@ -18,56 +15,10 @@ export class FuseNavVerticalItemComponent implements OnInit, OnDestroy
    @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/progress-bar/progress-bar.module.ts
+++ b/src/@fuse/components/progress-bar/progress-bar.module.ts
@@ -2,9 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatIconModule, MatProgressBarModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { FuseProgressBarComponent } from './progress-bar.component';
--- 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('xs') {
+        @include media-breakpoint-down('xs') {
            height: 56px;
        }
@@ -28,7 +28,7 @@
                height: 64px !important;
                line-height: 64px !important;
-                @include media-breakpoint('xs') {
+                @include media-breakpoint-down('xs') {
                    height: 56px !important;
                    line-height: 56px !important;
                }
@@ -39,7 +39,7 @@
                height: 64px !important;
                line-height: 64px !important;
-                @include media-breakpoint('xs') {
+                @include media-breakpoint-down('xs') {
                    height: 56px !important;
                    line-height: 56px !important;
                }
--- a/src/@fuse/components/search-bar/search-bar.module.ts
+++ b/src/@fuse/components/search-bar/search-bar.module.ts
@@ -2,8 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatIconModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { FuseSearchBarComponent } from './search-bar.component';
--- 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" fxLayout="row" fxHide fxShow.gt-sm>
+    <div class="shortcuts" 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('lt-md') {
+    @include media-breakpoint-down('sm') {
        #fuse-shortcuts {
--- a/src/@fuse/components/shortcuts/shortcuts.component.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.component.ts
@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { MediaObserver } from '@angular/flex-layout';
+import { ObservableMedia } from '@angular/flex-layout';
 import { CookieService } from 'ngx-cookie-service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -12,7 +12,7 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
    templateUrl: './shortcuts.component.html',
    styleUrls  : ['./shortcuts.component.scss']
 })
-export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
+export class FuseShortcutsComponent implements OnInit, OnDestroy
 {
    shortcutItems: any[];
    navigationItems: any[];
@@ -23,10 +23,10 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
    @Input()
    navigation: any;
-    @ViewChild('searchInput', {static: false})
+    @ViewChild('searchInput')
    searchInputField;
-    @ViewChild('shortcuts', {static: false})
+    @ViewChild('shortcuts')
    shortcutsEl: ElementRef;
    // Private
@@ -35,17 +35,17 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
    /**
     * Constructor
     *
     * @param {Renderer2} _renderer
     * @param {CookieService} _cookieService
     * @param {FuseMatchMediaService} _fuseMatchMediaService
     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {MediaObserver} _mediaObserver
+     * @param {ObservableMedia} _observableMedia
     * @param {Renderer2} _renderer
     */
    constructor(
        private _cookieService: CookieService,
        private _fuseMatchMediaService: FuseMatchMediaService,
        private _fuseNavigationService: FuseNavigationService,
-        private _mediaObserver: MediaObserver,
+        private _observableMedia: ObservableMedia,
        private _renderer: Renderer2
    )
    {
@@ -70,7 +70,9 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
        // Get the navigation items and flatten them
        this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation);
-        if ( this._cookieService.check('FUSE2.shortcuts') )
+        const cookieExists = this._cookieService.check('FUSE2.shortcuts');
        if ( cookieExists )
        {
            this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
        }
@@ -79,41 +81,36 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
            // User's shortcut items
            this.shortcutItems = [
                {
-                    title: 'Calendar',
+                    'title': 'Calendar',
-                    type : 'item',
+                    'type' : 'item',
-                    icon : 'today',
+                    'icon' : 'today',
-                    url  : '/apps/calendar'
+                    'url'  : '/apps/calendar'
                },
                {
-                    title: 'Mail',
+                    'title': 'Mail',
-                    type : 'item',
+                    'type' : 'item',
-                    icon : 'email',
+                    'icon' : 'email',
-                    url  : '/apps/mail'
+                    'url'  : '/apps/mail'
                },
                {
-                    title: 'Contacts',
+                    'title': 'Contacts',
-                    type : 'item',
+                    'type' : 'item',
-                    icon : 'account_box',
+                    'icon' : 'account_box',
-                    url  : '/apps/contacts'
+                    'url'  : '/apps/contacts'
                },
                {
-                    title: 'To-Do',
+                    'title': 'To-Do',
-                    type : 'item',
+                    'type' : 'item',
-                    icon : 'check_box',
+                    'icon' : 'check_box',
-                    url  : '/apps/todo'
+                    'url'  : '/apps/todo'
                }
            ];
        }
    }
    ngAfterViewInit(): void
    {
        // Subscribe to media changes
        this._fuseMatchMediaService.onMediaChange
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(() => {
-                if ( this._mediaObserver.isActive('gt-sm') )
+                if ( this._observableMedia.isActive('gt-sm') )
                {
                    this.hideMobileShortcutsPanel();
                }
--- a/src/@fuse/components/shortcuts/shortcuts.module.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.module.ts
@@ -2,14 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatTooltipModule } from '@angular/material';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { CookieService } from 'ngx-cookie-service';
 import { FuseShortcutsComponent } from './shortcuts.component';
--- 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('xs') {
+    @include media-breakpoint-down('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, ViewEncapsulation
+    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation
 } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { MediaObserver } from '@angular/flex-layout';
+import { ObservableMedia } 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 {MediaObserver} _mediaObserver
+     * @param {ObservableMedia} _observableMedia
     * @param {Renderer2} _renderer
     */
    constructor(
@@ -97,7 +97,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        private _fuseConfigService: FuseConfigService,
        private _fuseMatchMediaService: FuseMatchMediaService,
        private _fuseSidebarService: FuseSidebarService,
-        private _mediaObserver: MediaObserver,
+        private _observableMedia: ObservableMedia,
        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);
+            this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
            this._renderer.addClass(this._elementRef.nativeElement, 'folded');
        }
        // If unfolded...
@@ -319,8 +319,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            .subscribe(() => {
                // Get the active status
-                const isActive = this._mediaObserver.isActive(this.lockedOpen);
+                const isActive = this._observableMedia.isActive(this.lockedOpen);
                // If the both status are the same, don't act
                if ( this._wasActive === isActive )
                {
@@ -435,7 +434,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);
+        this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
        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: 600;
+                font-weight: 500;
                padding-left: 4px;
            }
        }
@@ -56,12 +56,12 @@ fuse-theme-options {
                    margin: 0;
                    padding: 0 8px;
                    font-size: 16px;
-                    font-weight: 600;
+                    font-weight: 500;
                }
                h3 {
                    font-size: 14px;
-                    font-weight: 600;
+                    font-weight: 500;
                    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,6 +118,7 @@ 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
@@ -131,17 +132,17 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
        // Add customize nav item that opens the bar programmatically
        const customFunctionNavItem = {
-            id      : 'custom-function',
+            'id'      : 'custom-function',
-            title   : 'Custom Function',
+            'title'   : 'Custom Function',
-            type    : 'group',
+            'type'    : 'group',
-            icon    : 'settings',
+            'icon'    : 'settings',
-            children: [
+            'children': [
                {
-                    id      : 'customize',
+                    'id'      : 'customize',
-                    title   : 'Customize',
+                    'title'   : 'Customize',
-                    type    : 'item',
+                    'type'    : 'item',
-                    icon    : 'settings',
+                    'icon'    : 'settings',
-                    function: () => {
+                    'function': () => {
                        this.toggleSidebarOpen('themeOptionsPanel');
                    }
                }
--- a/src/@fuse/components/theme-options/theme-options.module.ts
+++ b/src/@fuse/components/theme-options/theme-options.module.ts
@@ -2,15 +2,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
+import {
-import { MatCheckboxModule } from '@angular/material/checkbox';
+    MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule
-import { MatOptionModule } from '@angular/material/core';
+} from '@angular/material';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { FuseDirectivesModule } from '@fuse/directives/directives';
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
--- a/src/@fuse/components/widget/widget.component.scss
+++ b/src/@fuse/components/widget/widget.component.scss
@@ -20,13 +20,11 @@ fuse-widget {
        width: 100%;
        opacity: 1;
        z-index: 10;
-        border-radius: 8px;
+        border-radius: 2px;
        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;
@@ -38,11 +36,9 @@ 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,7 +8,6 @@
        > .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/sidenav';
+import { MatSidenav } from '@angular/material';
-import { MediaObserver } from '@angular/flex-layout';
+import { ObservableMedia } 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 {MediaObserver} _mediaObserver
+     * @param {ObservableMedia} _observableMedia
     */
    constructor(
        private _fuseMatchMediaService: FuseMatchMediaService,
        private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
        private _matSidenav: MatSidenav,
-        private _mediaObserver: MediaObserver
+        private _observableMedia: ObservableMedia
    )
    {
        // 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.matIsLockedOpen && this._mediaObserver.isActive(this.matIsLockedOpen) )
+        if ( this._observableMedia.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.matIsLockedOpen && this._mediaObserver.isActive(this.matIsLockedOpen) )
+                if ( this._observableMedia.isActive(this.matIsLockedOpen) )
                {
                    this.isLockedOpen = true;
                    this._matSidenav.mode = 'side';
--- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts
+++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatSidenav } from '@angular/material/sidenav';
+import { MatSidenav } from '@angular/material';
@Injectable({
    providedIn: 'root'
--- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
+++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
@@ -1,24 +1,23 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
-import { fromEvent, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
-import { debounceTime, filter, takeUntil } from 'rxjs/operators';
+import { filter, takeUntil } from 'rxjs/operators';
 import PerfectScrollbar from 'perfect-scrollbar';
 import * as _ from 'lodash';
-import { FusePerfectScrollbarGeometry, FusePerfectScrollbarPosition } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces';
+
 import { FuseConfigService } from '@fuse/services/config.service';
@Directive({
    selector: '[fusePerfectScrollbar]'
 })
-export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
+export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 {
    isInitialized: boolean;
    isMobile: boolean;
-    ps: PerfectScrollbar | any;
+    ps: PerfectScrollbar;
    // Private
    private _animation: number | null;
    private _enabled: boolean | '';
    private _debouncedUpdate: any;
    private _options: any;
@@ -44,7 +43,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
        this.isMobile = false;
        // Set the private defaults
        this._animation = null;
        this._enabled = false;
        this._debouncedUpdate = _.debounce(this.update, 150);
        this._options = {
@@ -67,15 +65,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
    {
        // Merge the options
        this._options = _.merge({}, this._options, value);
        // Destroy and re-init the PerfectScrollbar to update its options
        setTimeout(() => {
            this._destroy();
        });
        setTimeout(() => {
            this._init();
        });
    }
    get fusePerfectScrollbarOptions(): any
@@ -131,24 +120,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------
    /**
     * On init
     */
    ngOnInit(): void
    {
        // Subscribe to window resize event
        fromEvent(window, 'resize')
            .pipe(
                takeUntil(this._unsubscribeAll),
                debounceTime(150)
            )
            .subscribe(() => {
                // Update the PerfectScrollbar
                this.update();
            });
    }
    /**
     * After view init
     */
@@ -229,19 +200,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
        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]);
            }
        });
    }
    /**
@@ -321,71 +279,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
        this.ngOnDestroy();
    }
    /**
     * Returns the geometry of the scrollable element
     *
     * @param prefix
     */
    geometry(prefix: string = 'scroll'): FusePerfectScrollbarGeometry
    {
        return new FusePerfectScrollbarGeometry(
            this.elementRef.nativeElement[prefix + 'Left'],
            this.elementRef.nativeElement[prefix + 'Top'],
            this.elementRef.nativeElement[prefix + 'Width'],
            this.elementRef.nativeElement[prefix + 'Height']
        );
    }
    /**
     * Returns the position of the scrollable element
     *
     * @param absolute
     */
    position(absolute: boolean = false): FusePerfectScrollbarPosition
    {
        if ( !absolute && this.ps )
        {
            return new FusePerfectScrollbarPosition(
                this.ps.reach.x || 0,
                this.ps.reach.y || 0
            );
        }
        else
        {
            return new FusePerfectScrollbarPosition(
                this.elementRef.nativeElement.scrollLeft,
                this.elementRef.nativeElement.scrollTop
            );
        }
    }
    /**
     * Scroll to
     *
     * @param x
     * @param y
     * @param speed
     */
    scrollTo(x: number, y?: number, speed?: number): void
    {
        if ( y == null && speed == null )
        {
            this.animateScrolling('scrollTop', x, speed);
        }
        else
        {
            if ( x != null )
            {
                this.animateScrolling('scrollLeft', x, speed);
            }
            if ( y != null )
            {
                this.animateScrolling('scrollTop', y, speed);
            }
        }
    }
    /**
     * Scroll to X
     *
@@ -438,8 +331,9 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
     */
    scrollToRight(offset?: number, speed?: number): void
    {
-        const left = this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.clientWidth;
+        const width = this.elementRef.nativeElement.scrollWidth;
-        this.animateScrolling('scrollLeft', left - (offset || 0), speed);
+
        this.animateScrolling('scrollLeft', width - (offset || 0), speed);
    }
    /**
@@ -450,64 +344,27 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
     */
    scrollToBottom(offset?: number, speed?: number): void
    {
-        const top = this.elementRef.nativeElement.scrollHeight - this.elementRef.nativeElement.clientHeight;
+        const height = this.elementRef.nativeElement.scrollHeight;
        this.animateScrolling('scrollTop', top - (offset || 0), speed);
    }
-    /**
+        this.animateScrolling('scrollTop', height - (offset || 0), speed);
     * Scroll to element
     *
     * @param qs
     * @param offset
     * @param speed
     */
    scrollToElement(qs: string, offset?: number, speed?: number): void
    {
        const element = this.elementRef.nativeElement.querySelector(qs);
        if ( !element )
        {
            return;
        }
        const elementPos = element.getBoundingClientRect();
        const scrollerPos = this.elementRef.nativeElement.getBoundingClientRect();
        if ( this.elementRef.nativeElement.classList.contains('ps--active-x') )
        {
            const currentPos = this.elementRef.nativeElement['scrollLeft'];
            const position = elementPos.left - scrollerPos.left + currentPos;
            this.animateScrolling('scrollLeft', position + (offset || 0), speed);
        }
        if ( this.elementRef.nativeElement.classList.contains('ps--active-y') )
        {
            const currentPos = this.elementRef.nativeElement['scrollTop'];
            const position = elementPos.top - scrollerPos.top + currentPos;
            this.animateScrolling('scrollTop', position + (offset || 0), speed);
        }
    }
    /**
     * Animate scrolling
     *
-     * @param target
+     * @param {string} target
-     * @param value
+     * @param {number} value
-     * @param speed
+     * @param {number} speed
     */
    animateScrolling(target: string, value: number, speed?: number): void
    {
-        if ( this._animation )
+        if ( !speed )
        {
            window.cancelAnimationFrame(this._animation);
            this._animation = null;
        }
        if ( !speed || typeof window === 'undefined' )
        {
            this.elementRef.nativeElement[target] = value;
            // PS has weird event sending order, this is a workaround for that
            this.update();
            this.update();
        }
        else if ( value !== this.elementRef.nativeElement[target] )
        {
@@ -519,8 +376,9 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
            const cosParameter = (oldValue - value) / 2;
-            const step = (newTimestamp: number) => {
+            const step = (newTimestamp) => {
                scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
                newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
                // Only continue animation if scroll position has not changed
@@ -528,17 +386,20 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
                {
                    if ( scrollCount >= Math.PI )
                    {
-                        this.animateScrolling(target, value, 0);
+                        this.elementRef.nativeElement[target] = value;
                        // PS has weird event sending order, this is a workaround for that
                        this.update();
                        this.update();
                    }
                    else
                    {
-                        this.elementRef.nativeElement[target] = newValue;
+                        this.elementRef.nativeElement[target] = oldValue = newValue;
                        // On a zoomed out page the resulting offset may differ
                        oldValue = this.elementRef.nativeElement[target];
                        oldTimestamp = newTimestamp;
-                        this._animation = window.requestAnimationFrame(step);
+                        window.requestAnimationFrame(step);
                    }
                }
            };
--- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces.ts
+++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces.ts
@@ -1,28 +0,0 @@
 export class FusePerfectScrollbarGeometry
 {
    public x: number;
    public y: number;
    public w: number;
    public h: number;
    constructor(x: number, y: number, w: number, h: number)
    {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }
 }
 export class FusePerfectScrollbarPosition
 {
    public x: number | 'start' | 'end';
    public y: number | 'start' | 'end';
    constructor(x: number | 'start' | 'end', y: number | 'start' | 'end')
    {
        this.x = x;
        this.y = y;
    }
 }
--- a/src/@fuse/scss/core.scss
+++ b/src/@fuse/scss/core.scss
@@ -17,10 +17,11 @@
@include mat-core();
 // Partials
@import "partials/reset";
@import "partials/normalize";
@import "partials/scrollbars";
@import "partials/helpers";
-@import "partials/general";
+@import "partials/global";
@import "partials/icons";
@import "partials/colors";
@import "partials/material";
@@ -31,6 +32,7 @@
@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 "partials/breakpoints";
+@import "mixins/breakpoints";
--- a/src/@fuse/scss/mixins/_breakpoints.scss
+++ b/src/@fuse/scss/mixins/_breakpoints.scss
@@ -0,0 +1,126 @@
 // 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,31 +1,3 @@
 // 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 {
@@ -48,14 +20,19 @@ button {
    font-size: 16px;
 }
 .mat-pseudo-checkbox-checked:after {
    width: 14px !important;
    height: 7px !important;
 }
 // Fix: "Input underlines has wrong color opacity value"
 .mat-form-field-underline {
    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 {
@@ -113,4 +90,4 @@ mat-chip {
 // Fix: Mat-card-image requires a bigger width than 100%
 .mat-card-image {
    max-width: none !important;
-}
+}
--- a/src/@fuse/scss/partials/_breakpoints.scss
+++ b/src/@fuse/scss/partials/_breakpoints.scss
@@ -1,38 +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;
 // 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,7 +8,6 @@
    .fuse-card {
        background: map-get($background, card);
        border-color: map-get($foreground, divider);
        .card-divider {
            border-top: 1px solid map-get($foreground, divider);
@@ -22,8 +21,8 @@
 .fuse-card {
    max-width: 320px;
    min-width: 320px;
-    border-radius: 8px;
+    border-radius: 2px;
-    border: 1px solid;
+    @include mat-elevation(2);
    &.variable-width {
        min-width: 0;
--- a/src/@fuse/scss/partials/_colors.scss
+++ b/src/@fuse/scss/partials/_colors.scss
@@ -47,25 +47,25 @@
 // @ Material colors map
 // -----------------------------------------------------------------------------------------------------
 $matPalettes: (
-    'red': $mat-red,
+    red: $mat-red,
-    'pink': $mat-pink,
+    pink: $mat-pink,
-    'purple': $mat-purple,
+    purple: $mat-purple,
-    'deep-purple': $mat-deep-purple,
+    deep-purple: $mat-deep-purple,
-    'indigo': $mat-indigo,
+    indigo: $mat-indigo,
-    'blue': $mat-blue,
+    blue: $mat-blue,
-    'light-blue': $mat-light-blue,
+    light-blue: $mat-light-blue,
-    'cyan': $mat-cyan,
+    cyan: $mat-cyan,
-    'teal': $mat-teal,
+    teal: $mat-teal,
-    'green': $mat-green,
+    green: $mat-green,
-    'light-green': $mat-light-green,
+    light-green: $mat-light-green,
-    'lime': $mat-lime,
+    lime: $mat-lime,
-    'yellow': $mat-yellow,
+    yellow: $mat-yellow,
-    'amber': $mat-amber,
+    amber: $mat-amber,
-    'orange': $mat-orange,
+    orange: $mat-orange,
-    'deep-orange': $mat-deep-orange,
+    deep-orange: $mat-deep-orange,
-    'brown': $mat-brown,
+    brown: $mat-brown,
-    'grey': $mat-grey,
+    grey: $mat-grey,
-    'blue-grey': $mat-blue-grey
+    blue-grey: $mat-blue-grey
 );
 // Material color hues list
--- a/src/@fuse/scss/partials/_general.scss
+++ b/src/@fuse/scss/partials/_general.scss
@@ -1,70 +0,0 @@
 // -----------------------------------------------------------------------------------------------------
 // @ 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
@@ -0,0 +1,23 @@
 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, $materialBreakpoint in $helper-breakpoints {
+@each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint($materialBreakpoint) {
+    @include media-breakpoint-up($breakpoint) {
-        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        .position#{$infix}-relative {
            position: relative;
@@ -24,11 +24,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Absolute position alignment helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+@each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint($materialBreakpoint) {
+    @include media-breakpoint-up($breakpoint) {
-        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        .align#{$infix}-top {
            top: 0;
@@ -78,11 +78,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Spacing helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+@each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint($materialBreakpoint) {
+    @include media-breakpoint-up($breakpoint) {
-        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        @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, $materialBreakpoint in $helper-breakpoints {
+    @each $breakpoint in map-keys($grid-breakpoints) {
-        @include media-breakpoint($materialBreakpoint) {
+        @include media-breakpoint-up($breakpoint) {
-            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
            @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: 600;
+    font-weight: 500;
    text-align: center;
    &.square {
@@ -230,12 +230,13 @@ mat-icon.status {
        color: #F44336;
        &:before {
-            content: "remove_circle_outline";
+            content: "do_not_disturb_on";
        }
    }
    &.away {
-        color: #FFC107;
+        background-color: #FFC107;
        color: #FFFFFF;
        &:before {
            content: "access_time";
@@ -244,6 +245,7 @@ mat-icon.status {
    &.offline {
        color: #646464;
        background-color: #FFFFFF;
        &:before {
            content: "not_interested";
@@ -285,14 +287,14 @@ mat-icon.status {
        .title {
            font-size: 13px;
-            font-weight: 600;
+            font-weight: 500;
            line-height: 1;
        }
    }
    .subheader {
        font-size: 13px;
-        font-weight: 600;
+        font-weight: 500;
        margin-top: 8px;
    }
@@ -308,9 +310,8 @@ mat-icon.status {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    padding: 0 8px;
    border-radius: 4px;
    @include mat-elevation(1);
    padding: 0 8px;
    .pagination-item {
        display: flex;
@@ -363,7 +364,7 @@ mat-icon.status {
                .currency {
                    padding-right: 4px;
                    font-size: 24px;
-                    font-weight: 600;
+                    font-weight: 500;
                }
                .value {
@@ -405,14 +406,14 @@ mat-icon.status {
                left: 50%;
                transform: translateX(-50%);
                font-size: 11px;
-                font-weight: 600;
+                font-weight: 500;
                padding: 6px 8px;
            }
            .package-type {
                padding: 48px 32px 24px 32px;
                font-size: 20px;
-                font-weight: 600;
+                font-weight: 500;
                text-align: center;
            }
@@ -422,7 +423,7 @@ mat-icon.status {
                .currency {
                    padding-right: 4px;
                    font-size: 24px;
-                    font-weight: 600;
+                    font-weight: 500;
                }
                .value {
@@ -435,7 +436,7 @@ mat-icon.status {
            .period {
                padding: 0 32px;
                font-size: 15px;
-                font-weight: 600;
+                font-weight: 500;
                text-align: center;
            }
@@ -470,7 +471,7 @@ mat-icon.status {
                .subtitle {
                    font-size: 17px;
-                    font-weight: 600;
+                    font-weight: 500;
                }
            }
@@ -480,7 +481,7 @@ mat-icon.status {
                .currency {
                    padding-right: 4px;
                    font-size: 15px;
-                    font-weight: 600;
+                    font-weight: 500;
                }
                .value {
@@ -545,7 +546,7 @@ table {
                th {
                    padding: 16px 8px;
-                    font-weight: 600;
+                    font-weight: 500;
                    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: 600;
+        font-weight: 500;
        padding-left: 24px;
        margin-top: 8px;
        font-size: 12px;
@@ -19,7 +19,7 @@
            display: flex;
            align-items: center;
            height: 48px;
-            font-weight: 600;
+            font-weight: 500;
            padding-left: 24px;
            margin-top: 8px;
            font-size: 12px;
@@ -53,7 +53,7 @@
                height: 20px;
                padding: 0 7px;
                font-size: 11px;
-                font-weight: 600;
+                font-weight: 500;
                border-radius: 20px;
                transition: opacity 0.2s ease-in-out 0.1s;
                margin-left: 8px;
@@ -85,6 +85,7 @@
            .nav-link-icon {
                margin-right: 16px;
                opacity: 0.7;
            }
            .nav-link-icon,
@@ -219,27 +220,24 @@
        }
    }
-    // Material 2 style
+    // Material style
-    &.material2,
+    &.material {
    .material2 & {
        .nav-subheader {
-            height: 40px;
+            border-top: 1px solid rgba(0, 0, 0, 0.12);
        }
-        .nav-group {
+            &:first-child {
-
+                border-top: none;
            > .group-title {
                height: 40px;
            }
        }
        .nav-item {
            .nav-link {
                height: 40px;
-                padding: 0 12px 0 24px;
+                padding: 0 16px;
-                border-radius: 0 20px 20px 0;
+                margin: 4px 8px;
-                margin-right: 16px;
+                border-radius: 4px;
            }
        }
    }
--- a/src/@fuse/scss/partials/_page-layouts.scss
+++ b/src/@fuse/scss/partials/_page-layouts.scss
@@ -18,7 +18,6 @@
                    > .content-card {
                        background: map-get($background, card);
                        border-radius: 8px 8px 0 0;
                        > .toolbar {
                            border-bottom-color: map-get($foreground, divider);
@@ -35,7 +34,6 @@
                    > .content-card {
                        background: map-get($background, card);
                        border-radius: 8px 8px 0 0;
                        > .toolbar {
                            border-bottom-color: map-get($foreground, divider);
@@ -81,11 +79,15 @@
 // @ Page Layouts
 // -----------------------------------------------------------------------------------------------------
 $carded-header-height: 200px !default;
 $carded-header-height-sm: 160px !default;
 $carded-toolbar-height: 64px !default;
 $header-height: 120px !default;
-// Calculate toolbar-less carded header height
+$header-height: 120px !default;
 $header-height-sm: 100px !default;
 // Calculate toolbarless 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;
@@ -107,6 +109,10 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
            right: 0;
            left: 0;
            height: $carded-header-height;
            @include media-breakpoint-down('sm') {
                height: $carded-header-height-sm;
            }
        }
        // Fullwidth
@@ -130,6 +136,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    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 {
@@ -137,7 +149,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    flex-direction: column;
                    flex: 1 0 auto;
                    overflow: hidden;
-                    @include mat-elevation(1);
+                    @include mat-elevation(7);
                    > .toolbar {
                        display: flex;
@@ -173,7 +185,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                            > .mat-tab-group {
                                overflow: hidden;
                                width: 100%;
                                .mat-tab-header {
@@ -292,6 +303,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    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 {
@@ -317,6 +334,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    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 {
@@ -324,7 +347,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    flex-direction: column;
                    flex: 1 1 auto;
                    overflow: hidden;
-                    @include mat-elevation(1);
+                    @include mat-elevation(7);
                    > .toolbar {
                        display: flex;
@@ -356,7 +379,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    width: calc(100% - 32px);
                    min-width: 0;
-                    @include media-breakpoint('lt-lg') {
+                    @include media-breakpoint-down('md') {
                        width: calc(100% - 64px);
                    }
@@ -543,7 +566,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                z-index: 3;
                min-width: 0;
                width: 100%;
-                @include mat-elevation(1);
+                @include mat-elevation(7);
                > .header {
                    height: $header-height;
@@ -602,11 +625,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                        flex: 1 1 auto;
                        overflow: auto;
                        -webkit-overflow-scrolling: touch;
                        > .content {
                            border-radius: 8px;
                            @include mat-elevation(1);
                        }
                    }
                }
            }
@@ -667,7 +685,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
        min-height: 100%;
    }
-    @include media-breakpoint('xs') {
+    @include media-breakpoint-down('xs') {
        // Smaller margins
        &.carded {
--- a/src/@fuse/scss/partials/_print.scss
+++ b/src/@fuse/scss/partials/_print.scss
@@ -9,6 +9,7 @@
    .page-break-before {
        display: none;
    }
 }
@media print {
@@ -46,13 +47,6 @@
            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
@@ -0,0 +1,76 @@
 /*----------------------------------------------------------------*/
 /*  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 12px rgba(0, 0, 0, 0.37);
+        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
-        border-radius: 12px;
+        border-radius: 24px;
    }
    ::-webkit-scrollbar-thumb:active {
-        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
+        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-        border-radius: 12px;
+        border-radius: 24px;
    }
 }
--- a/src/@fuse/scss/partials/_toolbar.scss
+++ b/src/@fuse/scss/partials/_toolbar.scss
@@ -0,0 +1,9 @@
 .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: 'Muli', 'Helvetica Neue', 'Arial', sans-serif;
+    font-family: 'Roboto', '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-flat-button):not(.mat-stroked-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
+    &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
        &:hover, &:active {
            text-decoration: underline;
@@ -304,7 +304,7 @@ strong {
    padding: 4px 8px;
    margin: 0 8px;
    font-size: 11px;
-    font-weight: 600;
+    font-weight: 500;
    white-space: nowrap;
 }
@@ -399,10 +399,6 @@ strong {
                li {
                    margin-bottom: 6px;
                    letter-spacing: 0.015em;
                    ul {
                        margin-top: 6px;
                    }
                }
            }
        }
@@ -437,4 +433,4 @@ strong {
        border-left-color: #03A9F4;
        color: rgba(0, 0, 0, 0.87);
    }
-}
+}
--- a/src/@fuse/scss/partials/plugins/_ngx-datatable.scss
+++ b/src/@fuse/scss/partials/plugins/_ngx-datatable.scss
@@ -95,11 +95,6 @@
                min-height: 48px;
                font-size: 13px;
                padding: 0 24px;
                .datatable-header-cell-template-wrap {
                    display: inline-flex;
                    align-items: center;
                }
            }
        }
@@ -144,7 +139,7 @@
            .datatable-footer-inner {
                padding: 0 24px;
-                @include media-breakpoint('lt-md') {
+                @include media-breakpoint('sm') {
                    flex-direction: column;
                    padding: 16px 0;
                    height: auto !important;
@@ -166,18 +161,7 @@
                        li {
                            a {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                text-decoration: none !important;
                                i {
                                    width: 20px;
                                    min-width: 20px;
                                    height: 20px;
                                    min-height: 20px;
                                    padding: 0;
                                }
                            }
                        }
                    }
@@ -188,7 +172,7 @@
 }
 [class*="datatable-icon-"] {
-    font-family: 'material-outline-icons';
+    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
@@ -220,11 +204,11 @@
 }
 .datatable-icon-up:before {
-    content: "arrow_drop_up";
+    content: "keyboard_arrow_up";
 }
 .datatable-icon-down:before {
-    content: "arrow_drop_down";
+    content: "keyboard_arrow_down";
 }
 .datatable-icon-sort:before {
@@ -265,4 +249,4 @@
 .datatable-icon-prev:before {
    content: "skip_previous";
-}
+}
--- 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 { ResolveEnd, Router } from '@angular/router';
+import { Router, RoutesRecognized } 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 ResolveEnd))
+            .pipe(filter(event => event instanceof RoutesRecognized))
            .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, MediaObserver } from '@angular/flex-layout';
+import { MediaChange, ObservableMedia } 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 {MediaObserver} _mediaObserver
+     * @param {ObservableMedia} _observableMedia
     */
    constructor(
-        private _mediaObserver: MediaObserver
+        private _observableMedia: ObservableMedia
    )
    {
        // Set the defaults
@@ -39,7 +39,7 @@ export class FuseMatchMediaService
     */
    private _init(): void
    {
-        this._mediaObserver.media$
+        this._observableMedia.asObservable()
            .pipe(
                debounceTime(500),
                distinctUntilChanged()
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -28,8 +28,6 @@
 <!-- THEME OPTIONS PANEL -->
 <button mat-icon-button class="warn mat-elevation-z2 theme-options-button"
        [ngClass]="{'right-side-panel': fuseConfig.layout.sidepanel.position === 'right',
                    'side-panel-hidden': fuseConfig.layout.sidepanel.hidden === true}"
        (click)="toggleSidebarOpen('themeOptionsPanel')">
    <mat-icon>settings</mat-icon>
 </button>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -23,17 +23,6 @@
        opacity: .90;
        z-index: 998;
        &.right-side-panel {
            @include media-breakpoint('gt-md') {
                right: 70px;
            }
        }
        &.side-panel-hidden {
            right: 0 !important;
        }
        mat-icon {
            animation: rotating 3s linear infinite;
        }
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -73,12 +73,9 @@ 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.
@@ -100,9 +97,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.module.ts
+++ b/src/app/app.module.ts
@@ -4,9 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatIconModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { TranslateModule } from '@ngx-translate/core';
 import 'hammerjs';
@@ -16,35 +14,14 @@ import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from
 import { fuseConfig } from 'app/fuse-config';
 import { FakeDbService } from 'app/fake-db/fake-db.service';
 import { AppComponent } from 'app/app.component';
 import { AppStoreModule } from 'app/store/store.module';
 import { LayoutModule } from 'app/layout/layout.module';
 import { SampleModule } from 'app/main/sample/sample.module';
 const appRoutes: Routes = [
    {
        path        : 'apps',
        loadChildren: './main/apps/apps.module#AppsModule'
    },
    {
        path        : 'pages',
        loadChildren: './main/pages/pages.module#PagesModule'
    },
    {
        path        : 'ui',
        loadChildren: './main/ui/ui.module#UIModule'
    },
    {
        path        : 'documentation',
        loadChildren: './main/documentation/documentation.module#DocumentationModule'
    },
    {
        path        : 'angular-material-elements',
        loadChildren: './main/angular-material-elements/angular-material-elements.module#AngularMaterialElementsModule'
    },
    {
        path      : '**',
-        redirectTo: 'apps/dashboards/analytics'
+        redirectTo: 'sample'
    }
 ];
@@ -59,10 +36,6 @@ const appRoutes: Routes = [
        RouterModule.forRoot(appRoutes),
        TranslateModule.forRoot(),
        InMemoryWebApiModule.forRoot(FakeDbService, {
            delay             : 0,
            passThruUnknownUrl: true
        }),
        // Material moment date module
        MatMomentDateModule,
@@ -80,7 +53,7 @@ const appRoutes: Routes = [
        // App modules
        LayoutModule,
-        AppStoreModule
+        SampleModule
    ],
    bootstrap   : [
        AppComponent
--- a/src/app/app.theme.scss
+++ b/src/app/app.theme.scss
@@ -61,13 +61,9 @@ $custom_palettes: (
 // @ Typography
 // -----------------------------------------------------------------------------------------------------
-// Angular Material typography
+// Force the input field font sizes to 16px
 $typography: mat-typography-config(
-    $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+    $input: mat-typography-level(16px, 1.125, 400)
    $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
@@ -81,100 +77,12 @@ $typography: mat-typography-config(
@import "src/app/layout/components/chat-panel/chat-panel.theme";
@import "src/app/layout/components/toolbar/toolbar.theme";
@import "src/app/main/apps/academy/academy.theme";
@import "src/app/main/apps/calendar/calendar.theme";
@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";
@import "src/app/main/apps/scrumboard/scrumboard.theme";
@import "src/app/main/apps/todo/todo.theme";
@import "src/app/main/pages/authentication/login/login.theme";
@import "src/app/main/pages/authentication/login-2/login-2.theme";
@import "src/app/main/pages/authentication/register/register.theme";
@import "src/app/main/pages/authentication/register-2/register-2.theme";
@import "src/app/main/pages/authentication/reset-password/reset-password.theme";
@import "src/app/main/pages/authentication/reset-password-2/reset-password-2.theme";
@import "src/app/main/pages/authentication/forgot-password/forgot-password.theme";
@import "src/app/main/pages/authentication/forgot-password-2/forgot-password-2.theme";
@import "src/app/main/pages/authentication/lock/lock.theme";
@import "src/app/main/pages/authentication/mail-confirm/mail-confirm.theme";
@import "src/app/main/pages/coming-soon/coming-soon.theme";
@import "src/app/main/pages/errors/404/error-404.theme";
@import "src/app/main/pages/errors/500/error-500.theme";
@import "src/app/main/pages/maintenance/maintenance.theme";
@import "src/app/main/pages/pricing/style-1/style-1.theme";
@import "src/app/main/pages/pricing/style-2/style-2.theme";
@import "src/app/main/pages/pricing/style-3/style-3.theme";
@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/ui/cards/cards.theme";
@import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme";
 // Define a mixin for easier access
@mixin components-theme($theme) {
    // Layout components
    @include chat-panel-theme($theme);
    @include toolbar-theme($theme);
    // Apps
    @include academy-theme($theme);
    @include calendar-theme($theme);
    @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);
    @include scrumboard-theme($theme);
    @include todo-theme($theme);
    // Pages
    @include login-theme($theme);
    @include login-2-theme($theme);
    @include register-theme($theme);
    @include register-2-theme($theme);
    @include reset-password-theme($theme);
    @include reset-password-2-theme($theme);
    @include forgot-password-theme($theme);
    @include forgot-password-2-theme($theme);
    @include lock-theme($theme);
    @include mail-confirm-theme($theme);
    @include coming-soon-theme($theme);
    @include error-404-theme($theme);
    @include error-500-theme($theme);
    @include maintenance-theme($theme);
    @include pricing-style-1-theme($theme);
    @include pricing-style-2-theme($theme);
    @include pricing-style-3-theme($theme);
    @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);
    // UI
    @include ui-cards-theme($theme);
    // Example Viewer
    @include example-viewer-theme($theme);
 }
 // -----------------------------------------------------------------------------------------------------
@@ -315,4 +223,4 @@ body.theme-pink-dark {
    );
    @include fuse-color-classes($palettes);
-}
+}
--- a/src/app/fake-db/academy.ts
+++ b/src/app/fake-db/academy.ts
@@ -1,773 +0,0 @@
 export class AcademyFakeDb
 {
    public static courses = [
        {
            'id'      : '15459251a6d6b397565',
            'title'   : 'Basics of Angular',
            'slug'    : 'basics-of-angular',
            'category': 'web',
            'length'  : 30,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '154588a0864d2881124',
            'title'   : 'Basics of TypeScript',
            'slug'    : 'basics-of-typeScript',
            'category': 'web',
            'length'  : 60,
            'updated' : 'Nov 01, 2017'
        },
        {
            'id'      : '15453ba60d3baa5daaf',
            'title'   : 'Android N: Quick Settings',
            'slug'    : 'android-n-quick-settings',
            'category': 'android',
            'length'  : 120,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '15453a06c08fb021776',
            'title'   : 'Keep Sensitive Data Safe and Private',
            'slug'    : 'keep-sensitive-data-safe-and-private',
            'category': 'android',
            'length'  : 45,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '15427f4c1b7f3953234',
            'title'   : 'Building a gRPC Service with Java',
            'slug'    : 'building-a-grpc-service-with-java',
            'category': 'cloud',
            'length'  : 30,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '1542d75d929a603125',
            'title'   : 'Build a PWA Using Workbox',
            'slug'    : 'build-a-pwa-using-workbox',
            'category': 'web',
            'length'  : 120,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '1543ee3a5b43e0f9f45',
            'title'   : 'Build an App for the Google Assistant with Firebase and Dialogflow',
            'slug'    : 'build-an-app-for-the-google-assistant-with-firebase-and-dialogflow',
            'category': 'firebase',
            'length'  : 30,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '1543cc4515df3146112',
            'title'   : 'Cloud Functions for Firebase',
            'slug'    : 'cloud-functions-for-firebase',
            'category': 'firebase',
            'length'  : 45,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '154398a4770d7aaf9a2',
            'title'   : 'Manage Your Pivotal Cloud Foundry App\'s Using Apigee Edge',
            'slug'    : 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge',
            'category': 'cloud',
            'length'  : 90,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '15438351f87dcd68567',
            'title'   : 'Building Beautiful UIs with Flutter',
            'your'    : 'building-beautiful-uis-with-flutter',
            'category': 'web',
            'length'  : 90,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '1544e43dcdae6ebf876',
            'title'   : 'Cloud Firestore',
            'slug'    : 'cloud-firestore',
            'category': 'firebase',
            'length'  : 90,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '1541ca7af66da284177',
            'title'   : 'Customize Network Topology with Subnetworks',
            'slug'    : 'customize-network-topology-with-subnetworks',
            'category': 'web',
            'length'  : 45,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '154297167e781781745',
            'title'   : 'Looking at Campaign Finance with BigQuery',
            'slug'    : 'looking-at-campaign-finance-with-bigquery',
            'category': 'cloud',
            'length'  : 60,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '154537435d5b32bf11a',
            'title'   : 'Firebase Android',
            'slug'    : 'firebase-android',
            'category': 'android',
            'length'  : 45,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '154204e45a59b168453',
            'title'   : 'Simulating a Thread Network Using OpenThread',
            'slug'    : 'simulating-a-thread-network-using-openthread',
            'category': 'web',
            'length'  : 45,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '1541dd1e05dfc439216',
            'title'   : 'Your First Progressive Web App',
            'slug'    : 'your-first-progressive-web-app',
            'category': 'web',
            'length'  : 30,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '1532dfc67e704e48515',
            'title'   : 'Launch Cloud Datalab',
            'slug'    : 'launch-cloud-datalab',
            'category': 'cloud',
            'length'  : 60,
            'updated' : 'Jun 28, 2017'
        },
        {
            'id'      : '1542e43dfaae6ebf226',
            'title'   : 'Personalize Your iOS App with Firebase User Management',
            'slug'    : 'personalize-your-ios-app-with-firebase-user-management',
            'category': 'firebase',
            'length'  : 90,
            'updated' : 'Jun 28, 2017'
        }
    ];
    public static categories = [
        {
            'id'   : 0,
            'value': 'web',
            'label': 'Web'
        },
        {
            'id'   : 1,
            'value': 'firebase',
            'label': 'Firebase'
        },
        {
            'id'   : 2,
            'value': 'cloud',
            'label': 'Cloud'
        },
        {
            'id'   : 3,
            'value': 'android',
            'label': 'Android'
        }
    ];
    private static demoSteps = [
        {
            'title'  : 'Introduction',
            'content': '<h1>Step 1 - Introduction</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'Get the sample code',
            'content': '<h1>Step 2 - Get the sample code</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'Create a Firebase project and Set up your app',
            'content': '<h1>Step 3 - Create a Firebase project and Set up your app</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'Install the Firebase Command Line Interface',
            'content': '<h1>Step 4 - Install the Firebase Command Line Interface</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'Deploy and run the web app',
            'content': '<h1>Step 5 - Deploy and run the web app</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'The Functions Directory',
            'content': '<h1>Step 6 - The Functions Directory</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'Import the Cloud Functions and Firebase Admin modules',
            'content': '<h1>Step 7 - Import the Cloud Functions and Firebase Admin modules</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'Welcome New Users',
            'content': '<h1>Step 8 - Welcome New Users</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'Images moderation',
            'content': '<h1>Step 9 - Images moderation</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'New Message Notifications',
            'content': '<h1>Step 10 - New Message Notifications</h1>' +
            '<br>' +
            'This is an example step of the course. You can put anything in here from example codes to videos.' +
            '<br><br>' +
            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
            'To install or upgrade the CLI run the following <b>npm</b> command:' +
            '<br><br>' +
            '<code>npm -g install @angular/cli</code>' +
            '<br><br>' +
            'To verify that the CLI has been installed correctly, open a console and run:' +
            '<br><br>' +
            '<code>ng version</code>' +
            '<br><br>' +
            '<h2>Install dependencies</h2>' +
            '<br>' +
            'To moderate the images we\'ll need a few Node.js packages:' +
            '<br><br>' +
            '<ul>' +
            '<li>' +
            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
            '</li>' +
            '<br>' +
            '<li>' +
            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
            '</li>' +
            '</ul>' +
            '<br>' +
            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
            '<br><br>' +
            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
            '<br><br>' +
            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
        },
        {
            'title'  : 'Congratulations!',
            'content': '<h1>Step 11 - Congratulations!</h1>' +
            '<br>' +
            'You\'ve built a full-fidelity, offline-capable progressive web app by leveraging the power of reusable Web Components and Firebase. Why bother with a native app when you know how to do all that?!'
        }
    ];
    public static course = [
        {
            'id'         : '15459251a6d6b397565',
            'title'      : 'Basics of Angular',
            'slug'       : 'basics-of-angular',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'web',
            'length'     : 30,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '154588a0864d2881124',
            'title'      : 'Basics of TypeScript',
            'slug'       : 'basics-of-typeScript',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'web',
            'length'     : 60,
            'totalSteps' : 11,
            'updated'    : 'Nov 01, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '15453ba60d3baa5daaf',
            'title'      : 'Android N: Quick Settings',
            'slug'       : 'android-n-quick-settings',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'android',
            'length'     : 120,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '15453a06c08fb021776',
            'title'      : 'Keep Sensitive Data Safe and Private',
            'slug'       : 'keep-sensitive-data-safe-and-private',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'android',
            'length'     : 45,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '15427f4c1b7f3953234',
            'title'      : 'Building a gRPC Service with Java',
            'slug'       : 'building-a-grpc-service-with-java',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'cloud',
            'length'     : 30,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '1542d75d929a603125',
            'title'      : 'Build a PWA Using Workbox',
            'slug'       : 'build-a-pwa-using-workbox',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'web',
            'length'     : 120,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '1543ee3a5b43e0f9f45',
            'title'      : 'Build an App for the Google Assistant with Firebase and Dialogflow',
            'slug'       : 'build-an-app-for-the-google-assistant-with-firebase-and-dialogflow',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'firebase',
            'length'     : 30,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '1543cc4515df3146112',
            'title'      : 'Cloud Functions for Firebase',
            'slug'       : 'cloud-functions-for-firebase',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'firebase',
            'length'     : 45,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '154398a4770d7aaf9a2',
            'title'      : 'Manage Your Pivotal Cloud Foundry App\'s Using Apigee Edge',
            'slug'       : 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'cloud',
            'length'     : 90,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '15438351f87dcd68567',
            'title'      : 'Building Beautiful UIs with Flutter',
            'your'       : 'building-beautiful-uis-with-flutter',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'web',
            'length'     : 90,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '1544e43dcdae6ebf876',
            'title'      : 'Cloud Firestore',
            'slug'       : 'cloud-firestore',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'firebase',
            'length'     : 90,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '1541ca7af66da284177',
            'title'      : 'Customize Network Topology with Subnetworks',
            'slug'       : 'customize-network-topology-with-subnetworks',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'web',
            'length'     : 45,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '154297167e781781745',
            'title'      : 'Looking at Campaign Finance with BigQuery',
            'slug'       : 'looking-at-campaign-finance-with-bigquery',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'cloud',
            'length'     : 60,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '154537435d5b32bf11a',
            'title'      : 'Firebase Android',
            'slug'       : 'firebase-android',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'android',
            'length'     : 45,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '154204e45a59b168453',
            'title'      : 'Simulating a Thread Network Using OpenThread',
            'slug'       : 'simulating-a-thread-network-using-openthread',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'web',
            'length'     : 45,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '1541dd1e05dfc439216',
            'title'      : 'Your First Progressive Web App',
            'slug'       : 'your-first-progressive-web-app',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'web',
            'length'     : 30,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '1532dfc67e704e48515',
            'title'      : 'Launch Cloud Datalab',
            'slug'       : 'launch-cloud-datalab',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'cloud',
            'length'     : 60,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        },
        {
            'id'         : '1542e43dfaae6ebf226',
            'title'      : 'Personalize Your iOS App with Firebase User Management',
            'slug'       : 'personalize-your-ios-app-with-firebase-user-management',
            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'category'   : 'firebase',
            'length'     : 90,
            'totalSteps' : 11,
            'updated'    : 'Jun 28, 2017',
            'steps'      : AcademyFakeDb.demoSteps
        }
    ];
 }
--- a/src/app/fake-db/calendar.ts
+++ b/src/app/fake-db/calendar.ts
@@ -1,97 +0,0 @@
 import {
    startOfDay,
    endOfDay,
    subDays,
    addDays,
    endOfMonth,
    isSameDay,
    isSameMonth,
    addHours
 } from 'date-fns';
 export class CalendarFakeDb
 {
    public static data = [
        {
            id  : 'events',
            data: [
                {
                    start    : subDays(startOfDay(new Date()), 1),
                    end      : addDays(new Date(), 1),
                    title    : 'A 3 day event',
                    allDay   : true,
                    color    : {
                        primary  : '#F44336',
                        secondary: '#FFCDD2'
                    },
                    resizable: {
                        beforeStart: true,
                        afterEnd   : true
                    },
                    draggable: true,
                    meta     : {
                        location: 'Los Angeles',
                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
                    }
                },
                {
                    start    : startOfDay(new Date()),
                    title    : 'An event with no end date',
                    allDay   : false,
                    color    : {
                        primary  : '#FF9800',
                        secondary: '#FFE0B2'
                    },
                    resizable: {
                        beforeStart: true,
                        afterEnd   : true
                    },
                    draggable: true,
                    meta     : {
                        location: 'Los Angeles',
                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
                    }
                },
                {
                    start    : subDays(endOfMonth(new Date()), 3),
                    end      : addDays(endOfMonth(new Date()), 3),
                    title    : 'A long event that spans 2 months',
                    allDay   : false,
                    color    : {
                        primary  : '#1E90FF',
                        secondary: '#D1E8FF'
                    },
                    resizable: {
                        beforeStart: true,
                        afterEnd   : true
                    },
                    draggable: true,
                    meta     : {
                        location: 'Los Angeles',
                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
                    }
                },
                {
                    start    : addHours(startOfDay(new Date()), 2),
                    end      : new Date(),
                    title    : 'A draggable and resizable event',
                    allDay   : false,
                    color    : {
                        primary  : '#673AB7',
                        secondary: '#D1C4E9'
                    },
                    resizable: {
                        beforeStart: true,
                        afterEnd   : true
                    },
                    draggable: true,
                    meta     : {
                        location: 'Los Angeles',
                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
                    }
                }
            ]
        }
    ];
 }
--- a/src/app/fake-db/chat-panel.ts
+++ b/src/app/fake-db/chat-panel.ts
@@ -1,343 +0,0 @@
 export class ChatPanelFakeDb
 {
    public static contacts = [
        {
            'id'    : '5725a680b3249760ea21de52',
            'name'  : 'Alice Freeman',
            'avatar': 'assets/images/avatars/alice.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
            'unread': '2'
        },
        {
            'id'    : '5725a680606588342058356d',
            'name'  : 'Arnold',
            'avatar': 'assets/images/avatars/Arnold.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a68009e20d0a9e9acf2a',
            'name'  : 'Barrera',
            'avatar': 'assets/images/avatars/Barrera.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a6809fdd915739187ed5',
            'name'  : 'Blair',
            'avatar': 'assets/images/avatars/Blair.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
            'unread': '3'
        },
        {
            'id'    : '5725a68007920cf75051da64',
            'name'  : 'Boyle',
            'avatar': 'assets/images/avatars/Boyle.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
            'unread': '1'
        },
        {
            'id'    : '5725a68031fdbb1db2c1af47',
            'name'  : 'Christy',
            'avatar': 'assets/images/avatars/Christy.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a680bc670af746c435e2',
            'name'  : 'Copeland',
            'avatar': 'assets/images/avatars/Copeland.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a680e7eb988a58ddf303',
            'name'  : 'Estes',
            'avatar': 'assets/images/avatars/Estes.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a680dcb077889f758961',
            'name'  : 'Harper',
            'avatar': 'assets/images/avatars/Harper.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a6806acf030f9341e925',
            'name'  : 'Helen',
            'avatar': 'assets/images/avatars/Helen.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a680ae1ae9a3c960d487',
            'name'  : 'Henderson',
            'avatar': 'assets/images/avatars/Henderson.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a680b8d240c011dd224b',
            'name'  : 'Josefina',
            'avatar': 'assets/images/avatars/Josefina.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a68034cb3968e1f79eac',
            'name'  : 'Katina',
            'avatar': 'assets/images/avatars/Katina.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a6801146cce777df2a08',
            'name'  : 'Lily',
            'avatar': 'assets/images/avatars/Lily.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
            'unread': '10'
        },
        {
            'id'    : '5725a6808a178bfd034d6ecf',
            'name'  : 'Mai',
            'avatar': 'assets/images/avatars/Mai.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a680653c265f5c79b5a9',
            'name'  : 'Nancy',
            'avatar': 'assets/images/avatars/Nancy.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a680bbcec3cc32a8488a',
            'name'  : 'Nora',
            'avatar': 'assets/images/avatars/Nora.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
            'unread': '7'
        },
        {
            'id'    : '5725a6803d87f1b77e17b62b',
            'name'  : 'Odessa',
            'avatar': 'assets/images/avatars/Odessa.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
            'unread': '1'
        },
        {
            'id'    : '5725a680e87cb319bd9bd673',
            'name'  : 'Reyna',
            'avatar': 'assets/images/avatars/Reyna.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a6802d10e277a0f35775',
            'name'  : 'Shauna',
            'avatar': 'assets/images/avatars/Shauna.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a680aef1e5cf26dd3d1f',
            'name'  : 'Shepard',
            'avatar': 'assets/images/avatars/Shepard.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a680cd7efa56a45aea5d',
            'name'  : 'Tillman',
            'avatar': 'assets/images/avatars/Tillman.jpg',
            'status': 'do-not-disturb',
            'mood'  : '',
            'unread': '99+'
        },
        {
            'id'    : '5725a680fb65c91a82cb35e2',
            'name'  : 'Trevino',
            'avatar': 'assets/images/avatars/Trevino.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a68018c663044be49cbf',
            'name'  : 'Tyson',
            'avatar': 'assets/images/avatars/Tyson.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        },
        {
            'id'    : '5725a6809413bf8a0a5272b1',
            'name'  : 'Velazquez',
            'avatar': 'assets/images/avatars/Velazquez.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
        }
    ];
    public static chats = [
        {
            'id'    : '1725a680b3249760ea21de52',
            'dialog': [
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
                    'time'   : '2017-03-22T08:54:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
                    'time'   : '2017-03-22T08:55:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
                    'time'   : '2017-03-22T08:55:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-03-22T09:00:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
                    'time'   : '2017-03-22T09:02:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T09:05:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-03-22T09:15:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T09:05:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-03-22T09:15:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
                    'time'   : '2017-03-22T09:20:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T09:22:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-03-22T09:25:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
                    'time'   : '2017-03-22T09:27:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T09:33:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T09:33:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-03-22T09:35:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
                    'time'   : '2017-03-22T09:45:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T10:00:28.299Z'
                }
            ]
        },
        {
            'id'    : '2725a680b8d240c011dd2243',
            'dialog': [
                {
                    'who'    : '5725a680606588342058356d',
                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
                    'time'   : '2017-04-22T01:00:00.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
                    'time'   : '2017-04-22T01:05:00.299Z'
                },
                {
                    'who'    : '5725a680606588342058356d',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-04-22T01:10:00.299Z'
                }
            ]
        },
        {
            'id'    : '3725a6809413bf8a0a5272b4',
            'dialog': [
                {
                    'who'    : '5725a68009e20d0a9e9acf2a',
                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
                    'time'   : '2017-04-22T02:10:00.299Z'
                }
            ]
        }
    ];
    public static user = [
        {
            'id'      : '5725a6802d10e277a0f35724',
            'name'    : 'John Doe',
            'avatar'  : 'assets/images/avatars/profile.jpg',
            'status'  : 'online',
            'mood'    : '',
            'chatList': [
                {
                    'chatId'         : '1725a680b3249760ea21de52',
                    'contactId'      : '5725a680b3249760ea21de52',
                    'lastMessageTime': '2017-06-12T02:10:18.931Z'
                },
                {
                    'chatId'         : '2725a680b8d240c011dd2243',
                    'contactId'      : '5725a680606588342058356d',
                    'lastMessageTime': '2017-02-18T10:30:18.931Z'
                },
                {
                    'chatId'         : '3725a6809413bf8a0a5272b4',
                    'contactId'      : '5725a68009e20d0a9e9acf2a',
                    'lastMessageTime': '2017-03-18T12:30:18.931Z'
                }
            ]
        }
    ];
 }
--- a/src/app/fake-db/chat.ts
+++ b/src/app/fake-db/chat.ts
@@ -1,328 +0,0 @@
 export class ChatFakeDb
 {
    public static contacts = [
        {
            'id'    : '5725a680b3249760ea21de52',
            'name'  : 'Alice Freeman',
            'avatar': 'assets/images/avatars/alice.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680606588342058356d',
            'name'  : 'Arnold',
            'avatar': 'assets/images/avatars/Arnold.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a68009e20d0a9e9acf2a',
            'name'  : 'Barrera',
            'avatar': 'assets/images/avatars/Barrera.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'unread': null
        },
        {
            'id'    : '5725a6809fdd915739187ed5',
            'name'  : 'Blair',
            'avatar': 'assets/images/avatars/Blair.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'unread': 3
        },
        {
            'id'    : '5725a68007920cf75051da64',
            'name'  : 'Boyle',
            'avatar': 'assets/images/avatars/Boyle.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a68031fdbb1db2c1af47',
            'name'  : 'Christy',
            'avatar': 'assets/images/avatars/Christy.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680bc670af746c435e2',
            'name'  : 'Copeland',
            'avatar': 'assets/images/avatars/Copeland.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680e7eb988a58ddf303',
            'name'  : 'Estes',
            'avatar': 'assets/images/avatars/Estes.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680dcb077889f758961',
            'name'  : 'Harper',
            'avatar': 'assets/images/avatars/Harper.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a6806acf030f9341e925',
            'name'  : 'Helen',
            'avatar': 'assets/images/avatars/Helen.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680ae1ae9a3c960d487',
            'name'  : 'Henderson',
            'avatar': 'assets/images/avatars/Henderson.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680b8d240c011dd224b',
            'name'  : 'Josefina',
            'avatar': 'assets/images/avatars/Josefina.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a68034cb3968e1f79eac',
            'name'  : 'Katina',
            'avatar': 'assets/images/avatars/Katina.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a6801146cce777df2a08',
            'name'  : 'Lily',
            'avatar': 'assets/images/avatars/Lily.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a6808a178bfd034d6ecf',
            'name'  : 'Mai',
            'avatar': 'assets/images/avatars/Mai.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680653c265f5c79b5a9',
            'name'  : 'Nancy',
            'avatar': 'assets/images/avatars/Nancy.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680bbcec3cc32a8488a',
            'name'  : 'Nora',
            'avatar': 'assets/images/avatars/Nora.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a6803d87f1b77e17b62b',
            'name'  : 'Odessa',
            'avatar': 'assets/images/avatars/Odessa.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680e87cb319bd9bd673',
            'name'  : 'Reyna',
            'avatar': 'assets/images/avatars/Reyna.jpg',
            'status': 'offline',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a6802d10e277a0f35775',
            'name'  : 'Shauna',
            'avatar': 'assets/images/avatars/Shauna.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'unread': null
        },
        {
            'id'    : '5725a680aef1e5cf26dd3d1f',
            'name'  : 'Shepard',
            'avatar': 'assets/images/avatars/Shepard.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a680cd7efa56a45aea5d',
            'name'  : 'Tillman',
            'avatar': 'assets/images/avatars/Tillman.jpg',
            'status': 'do-not-disturb',
            'mood'  : ''
        },
        {
            'id'    : '5725a680fb65c91a82cb35e2',
            'name'  : 'Trevino',
            'avatar': 'assets/images/avatars/Trevino.jpg',
            'status': 'away',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a68018c663044be49cbf',
            'name'  : 'Tyson',
            'avatar': 'assets/images/avatars/Tyson.jpg',
            'status': 'do-not-disturb',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
            'id'    : '5725a6809413bf8a0a5272b1',
            'name'  : 'Velazquez',
            'avatar': 'assets/images/avatars/Velazquez.jpg',
            'status': 'online',
            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        }
    ];
    public static chats = [
        {
            'id'    : '1725a680b3249760ea21de52',
            'dialog': [
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
                    'time'   : '2017-03-22T08:54:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
                    'time'   : '2017-03-22T08:55:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-03-22T09:00:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
                    'time'   : '2017-03-22T09:02:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T09:05:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-03-22T09:15:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
                    'time'   : '2017-03-22T09:20:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T09:22:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-03-22T09:25:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
                    'time'   : '2017-03-22T09:27:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T09:33:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-03-22T09:35:28.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
                    'time'   : '2017-03-22T09:45:28.299Z'
                },
                {
                    'who'    : '5725a680b3249760ea21de52',
                    'message': 'You are the worst!',
                    'time'   : '2017-03-22T10:00:28.299Z'
                }
            ]
        },
        {
            'id'    : '2725a680b8d240c011dd2243',
            'dialog': [
                {
                    'who'    : '5725a680b8d240c011dd224b',
                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
                    'time'   : '2017-04-22T01:00:00.299Z'
                },
                {
                    'who'    : '5725a6802d10e277a0f35724',
                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
                    'time'   : '2017-04-22T01:05:00.299Z'
                },
                {
                    'who'    : '5725a680b8d240c011dd224b',
                    'message': 'We are losing money! Quick!',
                    'time'   : '2017-04-22T01:10:00.299Z'
                }
            ]
        },
        {
            'id'    : '3725a6809413bf8a0a5272b4',
            'dialog': [
                {
                    'who'    : '5725a6809413bf8a0a5272b1',
                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
                    'time'   : '2017-04-22T02:10:00.299Z'
                }
            ]
        }
    ];
    public static user = [
        {
            'id'      : '5725a6802d10e277a0f35724',
            'name'    : 'John Doe',
            'avatar'  : 'assets/images/avatars/profile.jpg',
            'status'  : 'online',
            'mood'    : 'it\'s a status....not your diary...',
            'chatList': [
                {
                    'id'             : '1725a680b3249760ea21de52',
                    'contactId'      : '5725a680b3249760ea21de52',
                    'name'           : 'Alice Freeman',
                    'unread'         : 4,
                    'lastMessage'    : 'You are the worst!',
                    'lastMessageTime': '2017-06-12T02:10:18.931Z'
                },
                {
                    'id'             : '2725a680b8d240c011dd2243',
                    'contactId'      : '5725a680b8d240c011dd224b',
                    'name'           : 'Josefina',
                    'unread'         : null,
                    'lastMessage'    : 'We are losing money! Quick!',
                    'lastMessageTime': '2017-02-18T10:30:18.931Z'
                },
                {
                    'id'             : '3725a6809413bf8a0a5272b4',
                    'contactId'      : '5725a6809413bf8a0a5272b1',
                    'name'           : 'Velazquez',
                    'unread'         : 2,
                    'lastMessage'    : 'Quickly come to the meeting room 1B, we have a big server issue',
                    'lastMessageTime': '2017-03-18T12:30:18.931Z'
                }
            ]
        }
    ];
 }
--- a/src/app/fake-db/contacts.ts
+++ b/src/app/fake-db/contacts.ts
@@ -1,411 +0,0 @@
 export class ContactsFakeDb
 {
    public static contacts = [
        {
            'id'      : '5725a680b3249760ea21de52',
            'name'    : 'Abbott',
            'lastName': 'Keitch',
            'avatar'  : 'assets/images/avatars/Abbott.jpg',
            'nickname': 'Royalguard',
            'company' : 'Saois',
            'jobTitle': 'Digital Archivist',
            'email'   : 'abbott@withinpixels.com',
            'phone'   : '+1-202-555-0175',
            'address' : '933 8th Street Stamford, CT 06902',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680606588342058356d',
            'name'    : 'Arnold',
            'lastName': 'Matlock',
            'avatar'  : 'assets/images/avatars/Arnold.jpg',
            'nickname': 'Wanderer',
            'company' : 'Laotcone',
            'jobTitle': 'Graphic Artist',
            'email'   : 'arnold@withinpixels.com',
            'phone'   : '+1-202-555-0141',
            'address' : '906 Valley Road Michigan City, IN 46360',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a68009e20d0a9e9acf2a',
            'name'    : 'Barrera',
            'lastName': 'Bradbury',
            'avatar'  : 'assets/images/avatars/Barrera.jpg',
            'nickname': 'Jackal',
            'company' : 'Unizim',
            'jobTitle': 'Graphic Designer',
            'email'   : 'barrera@withinpixels.com',
            'phone'   : '+1-202-555-0196',
            'address' : '183 River Street Passaic, NJ 07055',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a6809fdd915739187ed5',
            'name'    : 'Blair',
            'lastName': 'Strangeway',
            'avatar'  : 'assets/images/avatars/Blair.jpg',
            'nickname': 'Knight',
            'company' : 'Conedubdax',
            'jobTitle': 'Visual Designer',
            'email'   : 'blair@withinpixels.com',
            'phone'   : '+1-202-555-0118',
            'address' : '143 Jones Street Eau Claire, WI 54701',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a68007920cf75051da64',
            'name'    : 'Boyle',
            'lastName': 'Winters',
            'avatar'  : 'assets/images/avatars/Boyle.jpg',
            'nickname': 'Jester',
            'company' : 'Newo',
            'jobTitle': 'Catalogue Illustrator',
            'email'   : 'boyle@withinpixels.com',
            'phone'   : '+1-202-555-0177',
            'address' : '218 Pearl Street Brandon, FL 33510',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a68031fdbb1db2c1af47',
            'name'    : 'Christy',
            'lastName': 'Camacho',
            'avatar'  : 'assets/images/avatars/Christy.jpg',
            'nickname': 'Mist',
            'company' : 'uniway',
            'jobTitle': '3D Animator',
            'email'   : 'christy@withinpixels.com',
            'phone'   : '+1-202-555-0136',
            'address' : '329 Bridge Street Desoto, TX 75115',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680bc670af746c435e2',
            'name'    : 'Copeland',
            'lastName': 'Redcliff',
            'avatar'  : 'assets/images/avatars/Copeland.jpg',
            'nickname': 'Cloudlaw',
            'company' : 'Tempron',
            'jobTitle': 'Multimedia Artist',
            'email'   : 'copeland@withinpixels.com',
            'phone'   : '+1-202-555-0107',
            'address' : '956 6th Avenue North Bergen, NJ 0704',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680e7eb988a58ddf303',
            'name'    : 'Estes',
            'lastName': 'Stevens',
            'avatar'  : 'assets/images/avatars/Estes.jpg',
            'nickname': 'Roamer',
            'company' : 'nam-dex',
            'jobTitle': 'Special Effects Artist',
            'email'   : 'estes@withinpixels.com',
            'phone'   : '+1-202-555-0113',
            'address' : '664 York Street Cambridge, MA 02138',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680dcb077889f758961',
            'name'    : 'Harper',
            'lastName': 'MacGuffin',
            'avatar'  : 'assets/images/avatars/Harper.jpg',
            'nickname': 'Tempest',
            'company' : 'runcane',
            'jobTitle': 'Application Developer',
            'email'   : 'harper@withinpixels.com',
            'phone'   : '+1-202-555-0173',
            'address' : '738 Route 11 Cornelius, NC 28031',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a6806acf030f9341e925',
            'name'    : 'Helen',
            'lastName': 'Sheridan',
            'avatar'  : 'assets/images/avatars/Helen.jpg',
            'nickname': 'Magicbattler',
            'company' : 'Subhow',
            'jobTitle': 'Content Developer',
            'email'   : 'helen@withinpixels.com',
            'phone'   : '+1-202-555-0163',
            'address' : '194 Washington Avenue Saint Petersburg, FL 33702',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680ae1ae9a3c960d487',
            'name'    : 'Henderson',
            'lastName': 'Cambias',
            'avatar'  : 'assets/images/avatars/Henderson.jpg',
            'nickname': 'Blizzard',
            'company' : 'Howcom',
            'jobTitle': 'Web Designer',
            'email'   : 'henderson@withinpixels.com',
            'phone'   : '+1-202-555-0151',
            'address' : '686 Roosevelt Avenue Oviedo, FL 32765',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680b8d240c011dd224b',
            'name'    : 'Josefina',
            'lastName': 'Lakefield',
            'avatar'  : 'assets/images/avatars/Josefina.jpg',
            'nickname': 'Violet',
            'company' : 'Gecko',
            'jobTitle': 'Web Developer',
            'email'   : 'josefina@withinpixels.com',
            'phone'   : '+1-202-555-0160',
            'address' : '202 Hartford Road Lynchburg, VA 24502',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a68034cb3968e1f79eac',
            'name'    : 'Katina',
            'lastName': 'Bletchley',
            'avatar'  : 'assets/images/avatars/Katina.jpg',
            'nickname': 'Rose',
            'company' : 'Lexicom',
            'jobTitle': 'Software Designer',
            'email'   : 'katina@withinpixels.com',
            'phone'   : '+1-202-555-0186',
            'address' : '219 Woodland Road Valrico, FL 33594',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a6801146cce777df2a08',
            'name'    : 'Lily',
            'lastName': 'Peasegood',
            'avatar'  : 'assets/images/avatars/Lily.jpg',
            'nickname': 'Star',
            'company' : 'zooflex',
            'jobTitle': 'Software Specialist',
            'email'   : 'lily@withinpixels.com',
            'phone'   : '+1-202-555-0115',
            'address' : '305 Willow Drive Superior, WI 54880',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a6808a178bfd034d6ecf',
            'name'    : 'Mai',
            'lastName': 'Nox',
            'avatar'  : 'assets/images/avatars/Mai.jpg',
            'nickname': 'Violetmage',
            'company' : 'quadzone',
            'jobTitle': 'Software Engineer',
            'email'   : 'mai@withinpixels.com',
            'phone'   : '+1-202-555-0199',
            'address' : '148 Heather Lane Mcminnville, TN 37110',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680653c265f5c79b5a9',
            'name'    : 'Nancy',
            'lastName': 'Jaggers',
            'avatar'  : 'assets/images/avatars/Nancy.jpg',
            'nickname': 'Silverwarden',
            'company' : 'Opetamnix',
            'jobTitle': 'Software Architect',
            'email'   : 'nancy@withinpixels.com',
            'phone'   : '+1-202-555-0120',
            'address' : '345 Laurel Lane Union City, NJ 07087',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680bbcec3cc32a8488a',
            'name'    : 'Nora',
            'lastName': 'Franklin',
            'avatar'  : 'assets/images/avatars/Nora.jpg',
            'nickname': 'Katanachanter',
            'company' : 'Saoway',
            'jobTitle': 'Database Coordinator',
            'email'   : 'nora@withinpixels.com',
            'phone'   : '+1-202-555-0172',
            'address' : '572 Rose Street Summerfield, FL 34491',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a6803d87f1b77e17b62b',
            'name'    : 'Odessa',
            'lastName': 'Goodman',
            'avatar'  : 'assets/images/avatars/Odessa.jpg',
            'nickname': 'Rose',
            'company' : 'transace',
            'jobTitle': 'Database Administration Manager',
            'email'   : 'odessa@withinpixels.com',
            'phone'   : '+1-202-555-0190',
            'address' : '527 Jefferson Court Conyers, GA 30012',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680e87cb319bd9bd673',
            'name'    : 'Reyna',
            'lastName': 'Preece',
            'avatar'  : 'assets/images/avatars/Reyna.jpg',
            'nickname': 'Holydawn',
            'company' : 'Dingex',
            'jobTitle': 'Data Processing Planner',
            'email'   : 'reyna@withinpixels.com',
            'phone'   : '+1-202-555-0116',
            'address' : '297 Strawberry Lane Faribault, MN 55021',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a6802d10e277a0f35775',
            'name'    : 'Shauna',
            'lastName': 'Atherton',
            'avatar'  : 'assets/images/avatars/Shauna.jpg',
            'nickname': 'Faunasoul',
            'company' : 'Vivaflex',
            'jobTitle': 'Art Director',
            'email'   : 'shauna@withinpixels.com',
            'phone'   : '+1-202-555-0159',
            'address' : '928 Canterbury Court Pittsburgh, PA 15206',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680aef1e5cf26dd3d1f',
            'name'    : 'Shepard',
            'lastName': 'Rosco',
            'avatar'  : 'assets/images/avatars/Shepard.jpg',
            'nickname': 'Fireking',
            'company' : 'Goldenla',
            'jobTitle': 'Magazine Designer',
            'email'   : 'shepard@withinpixels.com',
            'phone'   : '+1-202-555-0173',
            'address' : '904 Ridge Road Pickerington, OH 43147',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680cd7efa56a45aea5d',
            'name'    : 'Tillman',
            'lastName': 'Lee',
            'avatar'  : 'assets/images/avatars/Tillman.jpg',
            'nickname': 'Gust',
            'company' : 'K-techno',
            'jobTitle': 'News Photographer',
            'email'   : 'tillman@withinpixels.com',
            'phone'   : '+1-202-555-0183',
            'address' : '447 Charles Street Dorchester, MA 02125',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a680fb65c91a82cb35e2',
            'name'    : 'Trevino',
            'lastName': 'Bush',
            'avatar'  : 'assets/images/avatars/Trevino.jpg',
            'nickname': 'Wolf',
            'company' : 'Dalthex',
            'jobTitle': 'Photojournalist',
            'email'   : 'trevino@withinpixels.com',
            'phone'   : '+1-202-555-0138',
            'address' : '84 Valley View Road Norman, OK 73072',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a68018c663044be49cbf',
            'name'    : 'Tyson',
            'lastName': 'Marshall',
            'avatar'  : 'assets/images/avatars/Tyson.jpg',
            'nickname': 'Honordread',
            'company' : 'Geocon',
            'jobTitle': 'Manuscript Editor',
            'email'   : 'tyson@withinpixels.com',
            'phone'   : '+1-202-555-0146',
            'address' : '204 Clark Street Monsey, NY 10952',
            'birthday': '',
            'notes'   : ''
        },
        {
            'id'      : '5725a6809413bf8a0a5272b1',
            'name'    : 'Velazquez',
            'lastName': 'Smethley',
            'avatar'  : 'assets/images/avatars/Velazquez.jpg',
            'nickname': 'Strifedream',
            'company' : 'ranex',
            'jobTitle': 'Publications Editor',
            'email'   : 'velezquez@withinpixels.com',
            'phone'   : '+1-202-555-0146',
            'address' : '261 Cleveland Street Riverside, NJ 08075',
            'birthday': '',
            'notes'   : ''
        }
    ];
    public static user = [
        {
            'id'              : '5725a6802d10e277a0f35724',
            'name'            : 'John Doe',
            'avatar'          : 'assets/images/avatars/profile.jpg',
            'starred'         : [
                '5725a680ae1ae9a3c960d487',
                '5725a6801146cce777df2a08',
                '5725a680bbcec3cc32a8488a',
                '5725a680bc670af746c435e2',
                '5725a68009e20d0a9e9acf2a'
            ],
            'frequentContacts': [
                '5725a6809fdd915739187ed5',
                '5725a68031fdbb1db2c1af47',
                '5725a680606588342058356d',
                '5725a680e7eb988a58ddf303',
                '5725a6806acf030f9341e925',
                '5725a68034cb3968e1f79eac',
                '5725a6801146cce777df2a08',
                '5725a680653c265f5c79b5a9'
            ],
            'groups'          : [
                {
                    'id'        : '5725a6802d10e277a0f35739',
                    'name'      : 'Friends',
                    'contactIds': [
                        '5725a680bbcec3cc32a8488a',
                        '5725a680e87cb319bd9bd673',
                        '5725a6802d10e277a0f35775'
                    ]
                },
                {
                    'id'        : '5725a6802d10e277a0f35749',
                    'name'      : 'Clients',
                    'contactIds': [
                        '5725a680cd7efa56a45aea5d',
                        '5725a68018c663044be49cbf',
                        '5725a6809413bf8a0a5272b1',
                        '5725a6803d87f1b77e17b62b'
                    ]
                },
                {
                    'id'        : '5725a6802d10e277a0f35329',
                    'name'      : 'Recent Workers',
                    'contactIds': [
                        '5725a680bbcec3cc32a8488a',
                        '5725a680653c265f5c79b5a9',
                        '5725a6808a178bfd034d6ecf',
                        '5725a6801146cce777df2a08'
                    ]
                }
            ]
        }
    ];
 }
--- a/src/app/fake-db/dashboard-analytics.ts
+++ b/src/app/fake-db/dashboard-analytics.ts
@@ -1,602 +0,0 @@
 export class AnalyticsDashboardDb
 {
    public static widgets = {
        widget1: {
            chartType: 'line',
            datasets : {
                '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],
                        fill : 'start'
                    }
                ],
                '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],
                        fill : 'start'
                    }
                ],
                '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],
                        fill : 'start'
                    }
                ]
            },
            labels   : ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
            colors   : [
                {
                    borderColor              : '#42a5f5',
                    backgroundColor          : '#42a5f5',
                    pointBackgroundColor     : '#1e88e5',
                    pointHoverBackgroundColor: '#1e88e5',
                    pointBorderColor         : '#ffffff',
                    pointHoverBorderColor    : '#ffffff'
                }
            ],
            options  : {
                spanGaps           : false,
                legend             : {
                    display: false
                },
                maintainAspectRatio: false,
                layout             : {
                    padding: {
                        top  : 32,
                        left : 32,
                        right: 32
                    }
                },
                elements           : {
                    point: {
                        radius          : 4,
                        borderWidth     : 2,
                        hoverRadius     : 4,
                        hoverBorderWidth: 2
                    },
                    line : {
                        tension: 0
                    }
                },
                scales             : {
                    xAxes: [
                        {
                            gridLines: {
                                display       : false,
                                drawBorder    : false,
                                tickMarkLength: 18
                            },
                            ticks    : {
                                fontColor: '#ffffff'
                            }
                        }
                    ],
                    yAxes: [
                        {
                            display: false,
                            ticks  : {
                                min     : 1.5,
                                max     : 5,
                                stepSize: 0.5
                            }
                        }
                    ]
                },
                plugins            : {
                    filler      : {
                        propagate: false
                    },
                    xLabelsOnTop: {
                        active: true
                    }
                }
            }
        },
        widget2: {
            conversion: {
                value   : 492,
                ofTarget: 13
            },
            chartType : 'bar',
            datasets  : [
                {
                    label: 'Conversion',
                    data : [221, 428, 492, 471, 413, 344, 294]
                }
            ],
            labels    : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            colors    : [
                {
                    borderColor    : '#42a5f5',
                    backgroundColor: '#42a5f5'
                }
            ],
            options   : {
                spanGaps           : false,
                legend             : {
                    display: false
                },
                maintainAspectRatio: false,
                layout             : {
                    padding: {
                        top   : 24,
                        left  : 16,
                        right : 16,
                        bottom: 16
                    }
                },
                scales             : {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false,
                            ticks  : {
                                min: 100,
                                max: 500
                            }
                        }
                    ]
                }
            }
        },
        widget3: {
            impressions: {
                value   : '87k',
                ofTarget: 12
            },
            chartType  : 'line',
            datasets   : [
                {
                    label: 'Impression',
                    data : [67000, 54000, 82000, 57000, 72000, 57000, 87000, 72000, 89000, 98700, 112000, 136000, 110000, 149000, 98000],
                    fill : false
                }
            ],
            labels     : ['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11', 'Jan 12', 'Jan 13', 'Jan 14', 'Jan 15'],
            colors     : [
                {
                    borderColor: '#5c84f1'
                }
            ],
            options    : {
                spanGaps           : false,
                legend             : {
                    display: false
                },
                maintainAspectRatio: false,
                elements           : {
                    point: {
                        radius          : 2,
                        borderWidth     : 1,
                        hoverRadius     : 2,
                        hoverBorderWidth: 1
                    },
                    line : {
                        tension: 0
                    }
                },
                layout             : {
                    padding: {
                        top   : 24,
                        left  : 16,
                        right : 16,
                        bottom: 16
                    }
                },
                scales             : {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false,
                            ticks  : {
                                // min: 100,
                                // max: 500
                            }
                        }
                    ]
                }
            }
        },
        widget4: {
            visits   : {
                value   : 882,
                ofTarget: -9
            },
            chartType: 'bar',
            datasets : [
                {
                    label: 'Visits',
                    data : [432, 428, 327, 363, 456, 267, 231]
                }
            ],
            labels   : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            colors   : [
                {
                    borderColor    : '#f44336',
                    backgroundColor: '#f44336'
                }
            ],
            options  : {
                spanGaps           : false,
                legend             : {
                    display: false
                },
                maintainAspectRatio: false,
                layout             : {
                    padding: {
                        top   : 24,
                        left  : 16,
                        right : 16,
                        bottom: 16
                    }
                },
                scales             : {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false,
                            ticks  : {
                                min: 150,
                                max: 500
                            }
                        }
                    ]
                }
            }
        },
        widget5: {
            chartType: 'line',
            datasets : {
                'yesterday': [
                    {
                        label: 'Visitors',
                        data : [190, 300, 340, 220, 290, 390, 250, 380, 410, 380, 320, 290],
                        fill : 'start'
                    },
                    {
                        label: 'Page views',
                        data : [2200, 2900, 3900, 2500, 3800, 3200, 2900, 1900, 3000, 3400, 4100, 3800],
                        fill : 'start'
                    }
                ],
                'today'    : [
                    {
                        label: 'Visitors',
                        data : [410, 380, 320, 290, 190, 390, 250, 380, 300, 340, 220, 290],
                        fill : 'start'
                    },
                    {
                        label: 'Page Views',
                        data : [3000, 3400, 4100, 3800, 2200, 3200, 2900, 1900, 2900, 3900, 2500, 3800],
                        fill : 'start'
                    }
                ]
            },
            labels   : ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'],
            colors   : [
                {
                    borderColor              : '#3949ab',
                    backgroundColor          : '#3949ab',
                    pointBackgroundColor     : '#3949ab',
                    pointHoverBackgroundColor: '#3949ab',
                    pointBorderColor         : '#ffffff',
                    pointHoverBorderColor    : '#ffffff'
                },
                {
                    borderColor              : 'rgba(30, 136, 229, 0.87)',
                    backgroundColor          : 'rgba(30, 136, 229, 0.87)',
                    pointBackgroundColor     : 'rgba(30, 136, 229, 0.87)',
                    pointHoverBackgroundColor: 'rgba(30, 136, 229, 0.87)',
                    pointBorderColor         : '#ffffff',
                    pointHoverBorderColor    : '#ffffff'
                }
            ],
            options  : {
                spanGaps           : false,
                legend             : {
                    display: false
                },
                maintainAspectRatio: false,
                tooltips           : {
                    position : 'nearest',
                    mode     : 'index',
                    intersect: false
                },
                layout             : {
                    padding: {
                        left : 24,
                        right: 32
                    }
                },
                elements           : {
                    point: {
                        radius          : 4,
                        borderWidth     : 2,
                        hoverRadius     : 4,
                        hoverBorderWidth: 2
                    }
                },
                scales             : {
                    xAxes: [
                        {
                            gridLines: {
                                display: false
                            },
                            ticks    : {
                                fontColor: 'rgba(0,0,0,0.54)'
                            }
                        }
                    ],
                    yAxes: [
                        {
                            gridLines: {
                                tickMarkLength: 16
                            },
                            ticks    : {
                                stepSize: 1000
                            }
                        }
                    ]
                },
                plugins            : {
                    filler: {
                        propagate: false
                    }
                }
            }
        },
        widget6: {
            markers: [
                {
                    lat  : 52,
                    lng  : -73,
                    label: '120'
                },
                {
                    lat  : 37,
                    lng  : -104,
                    label: '498'
                },
                {
                    lat  : 21,
                    lng  : -7,
                    label: '443'
                },
                {
                    lat  : 55,
                    lng  : 75,
                    label: '332'
                },
                {
                    lat  : 51,
                    lng  : 7,
                    label: '50'
                },
                {
                    lat  : 31,
                    lng  : 12,
                    label: '221'
                },
                {
                    lat  : 45,
                    lng  : 44,
                    label: '455'
                },
                {
                    lat  : -26,
                    lng  : 134,
                    label: '231'
                },
                {
                    lat  : -9,
                    lng  : -60,
                    label: '67'
                },
                {
                    lat  : 33,
                    lng  : 104,
                    label: '665'
                }
            ],
            styles : [
                {
                    'featureType': 'administrative',
                    'elementType': 'labels.text.fill',
                    'stylers'    : [
                        {
                            'color': '#444444'
                        }
                    ]
                },
                {
                    'featureType': 'landscape',
                    'elementType': 'all',
                    'stylers'    : [
                        {
                            'color': '#f2f2f2'
                        }
                    ]
                },
                {
                    'featureType': 'poi',
                    'elementType': 'all',
                    'stylers'    : [
                        {
                            'visibility': 'off'
                        }
                    ]
                },
                {
                    'featureType': 'road',
                    'elementType': 'all',
                    'stylers'    : [
                        {
                            'saturation': -100
                        },
                        {
                            'lightness': 45
                        }
                    ]
                },
                {
                    'featureType': 'road.highway',
                    'elementType': 'all',
                    'stylers'    : [
                        {
                            'visibility': 'simplified'
                        }
                    ]
                },
                {
                    'featureType': 'road.arterial',
                    'elementType': 'labels.icon',
                    'stylers'    : [
                        {
                            'visibility': 'off'
                        }
                    ]
                },
                {
                    'featureType': 'transit',
                    'elementType': 'all',
                    'stylers'    : [
                        {
                            'visibility': 'off'
                        }
                    ]
                },
                {
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers'    : [
                        {
                            'color': '#039be5'
                        },
                        {
                            'visibility': 'on'
                        }
                    ]
                }
            ]
        },
        widget7: {
            scheme : {
                domain: ['#4867d2', '#5c84f1', '#89a9f4']
            },
            devices: [
                {
                    name  : 'Desktop',
                    value : 92.8,
                    change: -0.6
                },
                {
                    name  : 'Mobile',
                    value : 6.1,
                    change: 0.7
                },
                {
                    name  : 'Tablet',
                    value : 1.1,
                    change: 0.1
                }
            ]
        },
        widget8: {
            scheme : {
                domain: ['#5c84f1']
            },
            today  : '12,540',
            change : {
                value     : 321,
                percentage: 2.05
            },
            data   : [
                {
                    name  : 'Sales',
                    series: [
                        {
                            name : 'Jan 1',
                            value: 540
                        },
                        {
                            name : 'Jan 2',
                            value: 539
                        },
                        {
                            name : 'Jan 3',
                            value: 538
                        },
                        {
                            name : 'Jan 4',
                            value: 539
                        },
                        {
                            name : 'Jan 5',
                            value: 540
                        },
                        {
                            name : 'Jan 6',
                            value: 539
                        },
                        {
                            name : 'Jan 7',
                            value: 540
                        }
                    ]
                }
            ],
            dataMin: 538,
            dataMax: 541
        },
        widget9: {
            rows: [
                {
                    title     : 'Holiday Travel',
                    clicks    : 3621,
                    conversion: 90
                },
                {
                    title     : 'Get Away Deals',
                    clicks    : 703,
                    conversion: 7
                },
                {
                    title     : 'Airfare',
                    clicks    : 532,
                    conversion: 0
                },
                {
                    title     : 'Vacation',
                    clicks    : 201,
                    conversion: 8
                },
                {
                    title     : 'Hotels',
                    clicks    : 94,
                    conversion: 4
                }
            ]
        }
    };
 }
--- a/src/app/fake-db/dashboard-project.ts
+++ b/src/app/fake-db/dashboard-project.ts
--- 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
@@ -1,101 +0,0 @@
 import { InMemoryDbService } from 'angular-in-memory-web-api';
 import { ProjectDashboardDb } from 'app/fake-db/dashboard-project';
 import { AnalyticsDashboardDb } from 'app/fake-db/dashboard-analytics';
 import { CalendarFakeDb } from 'app/fake-db/calendar';
 import { ECommerceFakeDb } from 'app/fake-db/e-commerce';
 import { AcademyFakeDb } from 'app/fake-db/academy';
 import { MailFakeDb } from 'app/fake-db/mail';
 import { ChatFakeDb } from 'app/fake-db/chat';
 import { FileManagerFakeDb } from 'app/fake-db/file-manager';
 import { ContactsFakeDb } from 'app/fake-db/contacts';
 import { TodoFakeDb } from 'app/fake-db/todo';
 import { ScrumboardFakeDb } from 'app/fake-db/scrumboard';
 import { InvoiceFakeDb } from 'app/fake-db/invoice';
 import { ProfileFakeDb } from 'app/fake-db/profile';
 import { SearchFakeDb } from 'app/fake-db/search';
 import { FaqFakeDb } from 'app/fake-db/faq';
 import { KnowledgeBaseFakeDb } from 'app/fake-db/knowledge-base';
 import { IconsFakeDb } from 'app/fake-db/icons';
 import { ChatPanelFakeDb } from 'app/fake-db/chat-panel';
 import { QuickPanelFakeDb } from 'app/fake-db/quick-panel';
 export class FakeDbService implements InMemoryDbService
 {
    createDb(): any
    {
        return {
            // Dashboards
            'project-dashboard-projects' : ProjectDashboardDb.projects,
            'project-dashboard-widgets'  : ProjectDashboardDb.widgets,
            'analytics-dashboard-widgets': AnalyticsDashboardDb.widgets,
            // Calendar
            'calendar': CalendarFakeDb.data,
            // E-Commerce
            'e-commerce-products' : ECommerceFakeDb.products,
            'e-commerce-orders'   : ECommerceFakeDb.orders,
            // Academy
            'academy-categories': AcademyFakeDb.categories,
            'academy-courses'   : AcademyFakeDb.courses,
            'academy-course'    : AcademyFakeDb.course,
            // Mail
            'mail-mails'  : MailFakeDb.mails,
            'mail-folders': MailFakeDb.folders,
            'mail-filters': MailFakeDb.filters,
            'mail-labels' : MailFakeDb.labels,
            // Chat
            'chat-contacts': ChatFakeDb.contacts,
            'chat-chats'   : ChatFakeDb.chats,
            'chat-user'    : ChatFakeDb.user,
            // File Manager
            'file-manager': FileManagerFakeDb.files,
            // Contacts
            'contacts-contacts': ContactsFakeDb.contacts,
            'contacts-user'    : ContactsFakeDb.user,
            // Todo
            'todo-todos'  : TodoFakeDb.todos,
            'todo-filters': TodoFakeDb.filters,
            'todo-tags'   : TodoFakeDb.tags,
            // Scrumboard
            'scrumboard-boards': ScrumboardFakeDb.boards,
            // Invoice
            'invoice': InvoiceFakeDb.invoice,
            // Profile
            'profile-timeline'     : ProfileFakeDb.timeline,
            'profile-photos-videos': ProfileFakeDb.photosVideos,
            'profile-about'        : ProfileFakeDb.about,
            // Search
            'search': SearchFakeDb.search,
            // FAQ
            'faq': FaqFakeDb.data,
            // Knowledge base
            'knowledge-base': KnowledgeBaseFakeDb.data,
            // Icons
            'icons': IconsFakeDb.icons,
            // Chat Panel
            'chat-panel-contacts' : ChatPanelFakeDb.contacts,
            'chat-panel-chats': ChatPanelFakeDb.chats,
            'chat-panel-user': ChatPanelFakeDb.user,
            // Quick Panel
            'quick-panel-notes' : QuickPanelFakeDb.notes,
            'quick-panel-events': QuickPanelFakeDb.events
        };
    }
 }
--- a/src/app/fake-db/faq.ts
+++ b/src/app/fake-db/faq.ts
@@ -1,61 +0,0 @@
 export class FaqFakeDb
 {
    public static data = [
        {
            'question': 'Proident tempor est nulla irure ad est?',
            'answer': 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.'
        },
        {
            'question': 'Ullamco duis commodo sint ad aliqua aute?',
            'answer': 'Sunt laborum enim nostrud ea fugiat cillum mollit aliqua exercitation ad elit.'
        },
        {
            'question': 'Eiusmod non occaecat pariatur Lorem in ex?',
            'answer': '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.'
        },
        {
            'question': 'Lorem magna cillum consequat consequat mollit?',
            'answer': 'Velit ipsum proident ea incididunt et. Consectetur eiusmod laborum voluptate duis occaecat ullamco sint enim proident.'
        },
        {
            'question': 'Quis irure cupidatat ad consequat reprehenderit excepteur?',
            'answer': 'Esse nisi mollit aliquip mollit aute consequat adipisicing. Do excepteur dolore proident cupidatat pariatur irure consequat incididunt.'
        },
        {
            'question': 'Officia voluptate tempor ut mollit ea cillum?',
            'answer': 'Deserunt veniam reprehenderit do elit magna ut.'
        },
        {
            'question': 'Sunt fugiat officia nisi minim sunt duis?',
            'answer': 'Eiusmod eiusmod sint aliquip exercitation cillum. Magna nulla officia ex consectetur ea ad excepteur in qui.'
        },
        {
            'question': 'Non cupidatat enim quis aliquip minim laborum?',
            'answer': '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.'
        },
        {
            'question': 'Dolor ex occaecat magna labore laboris qui?',
            'answer': '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.'
        },
        {
            'question': 'Nisi et ullamco minim ea proident tempor?',
            'answer': 'Dolor veniam dolor cillum Lorem magna nisi in occaecat nulla dolor ea eiusmod.'
        },
        {
            'question': 'Amet sunt et quis amet commodo quis?',
            'answer': 'Nulla dolore consequat aliqua sint consequat elit qui occaecat et.'
        },
        {
            'question': 'Ut eiusmod ex ea eiusmod culpa incididunt?',
            'answer': 'Fugiat non incididunt officia ex incididunt occaecat. Voluptate nostrud culpa aliquip mollit incididunt non dolore.'
        },
        {
            'question': 'Proident reprehenderit laboris pariatur ut et nisi?',
            'answer': 'Reprehenderit proident ut ad cillum quis velit quis aliqua ut aliquip tempor ullamco.'
        },
        {
            'question': 'Aliqua aliquip aliquip aliquip et exercitation aute?',
            'answer': '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.'
        }
    ];
 }
--- a/src/app/fake-db/file-manager.ts
+++ b/src/app/fake-db/file-manager.ts
@@ -1,146 +0,0 @@
 export class FileManagerFakeDb
 {
    public static files = [
        {
            'name'     : 'Work Documents',
            'type'     : 'folder',
            'owner'    : 'me',
            'size'     : '',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true
        },
        {
            'name'     : 'Public Documents',
            'type'     : 'folder',
            'owner'    : 'public',
            'size'     : '',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true
        },
        {
            'name'     : 'Private Documents',
            'type'     : 'folder',
            'owner'    : 'me',
            'size'     : '',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true
        },
        {
            'name'     : 'Ongoing projects',
            'type'     : 'document',
            'owner'    : 'Emily Bennett',
            'size'     : '1.2 Mb',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true,
            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
        },
        {
            'name'     : 'Shopping list',
            'type'     : 'document',
            'owner'    : 'Emily Bennett',
            'size'     : '980 Kb',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true,
            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
        },
        {
            'name'     : 'Invoices',
            'type'     : 'spreadsheet',
            'owner'    : 'Emily Bennett',
            'size'     : '750 Kb',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true,
            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
        },
        {
            'name'     : 'Crash logs',
            'type'     : 'document',
            'owner'    : 'Emily Bennett',
            'size'     : '980 Mb',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true,
            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
        },
        {
            'name'     : 'System logs',
            'type'     : 'document',
            'owner'    : 'Emily Bennett',
            'size'     : '52 Kb',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true,
            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
        },
        {
            'name'     : 'Prices',
            'type'     : 'spreadsheet',
            'owner'    : 'Emily Bennett',
            'size'     : '27 Mb',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true,
            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
        },
        {
            'name'     : 'Anabelle Manual',
            'type'     : 'document',
            'owner'    : 'Emily Bennett',
            'size'     : '1.1 Kb',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true,
            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
        },
        {
            'name'     : 'Steam summer sale budget',
            'type'     : 'spreadsheet',
            'owner'    : 'Emily Bennett',
            'size'     : '505 Kb',
            'modified' : 'July 8, 2017',
            'opened'   : 'July 8, 2017',
            'created'  : 'July 8, 2017',
            'extention': '',
            'location' : 'My Files > Documents',
            'offline'  : true,
            '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
@@ -1,59 +0,0 @@
 export class InvoiceFakeDb
 {
    public static invoice = {
        'from'    : {
            'title'  : 'Fuse Inc.',
            'address': '2810 Country Club Road Cranford, NJ 07016',
            'phone'  : '+66 123 455 87',
            'email'  : 'hello@fuseinc.com',
            'website': 'www.fuseinc.com'
        },
        'client'  : {
            'title'  : 'John Doe',
            'address': '9301 Wood Street Philadelphia, PA 19111',
            'phone'  : '+55 552 455 87',
            'email'  : 'johndoe@mail.com'
        },
        'number'  : 'P9-0004',
        'date'    : 'Jul 19, 2018',
        'dueDate' : 'Aug 24, 2018',
        'services': [
            {
                'title'    : 'Prototype & Design',
                'detail'   : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan, quam sed eleifend imperdiet.',
                'unit'     : 'Hour',
                'unitPrice': '12.00',
                'quantity' : '240',
                'total'    : '2880'
            },
            {
                'title'    : 'Coding',
                'detail'   : 'Vestibulum ligula sem, rutrum et libero id, porta vehicula metus. Cras dapibus neque sit amet laoreet vestibulum.',
                'unit'     : 'Hour',
                'unitPrice': '10.50',
                'quantity' : '350',
                'total'    : '3675'
            },
            {
                'title'    : 'Testing',
                'detail'   : 'Pellentesque luctus efficitur neque in finibus. Integer ut nunc in augue maximus porttitor id id nulla. In vitae erat.',
                'unit'     : 'Hour',
                'unitPrice': '4.00',
                'quantity' : '50',
                'total'    : '200'
            },
            {
                'title'    : 'Documentation & Training',
                'detail'   : 'Pellentesque luctus efficitur neque in finibus. Integer ut nunc in augue maximus porttitor id id nulla. In vitae erat.',
                'unit'     : 'Hour',
                'unitPrice': '6.50',
                'quantity' : '260',
                'total'    : '1690'
            }
        ],
        'subtotal': '8445',
        'tax'     : '675.60',
        'discount': '120.60',
        'total'   : '9000'
    };
 }
--- a/src/app/fake-db/knowledge-base.ts
+++ b/src/app/fake-db/knowledge-base.ts
@@ -1,113 +0,0 @@
 export class KnowledgeBaseFakeDb
 {
    public static data = [
        {
            'title'           : 'Your Account',
            'path'            : '/pages/knowledge-base',
            'articlesCount'   : 17,
            'featuredArticles': [
                {
                    'title'  : 'Account limits',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'How do I change my username?',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'How do I change my password?',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'How do I change my email address?',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'How do I close my account?',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                }
            ]
        },
        {
            'title'           : 'Selling',
            'path'            : '/pages/knowledge-base',
            'articlesCount'   : 12,
            'featuredArticles': [
                {
                    'title'  : 'A guide to the upload process',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'Author collaboration',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'Exclusivity policy',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'Promises you make as an author',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'An author’s introduction',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                }
            ]
        },
        {
            'title'           : 'Buying',
            'path'            : '/pages/knowledge-base',
            'articlesCount'   : 19,
            'featuredArticles': [
                {
                    'title'  : 'Where is my purchase code?',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'Can I get a refund?',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'Contact us',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'How do I purchase an item?',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'I\'m trying to find a specific item',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                }
            ]
        },
        {
            'title'           : 'Item Support',
            'path'            : '/pages/knowledge-base',
            'articlesCount'   : 24,
            'featuredArticles': [
                {
                    'title'  : 'What is Item Support?',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'How to contact an author',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'Rating or review removal policy',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'Purchasing unsupported items',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                },
                {
                    'title'  : 'Item installation guide',
                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
                }
            ]
        }
    ];
 }
--- a/src/app/fake-db/mail.ts
+++ b/src/app/fake-db/mail.ts
@@ -1,482 +0,0 @@
 export class MailFakeDb
 {
    public static mails = [
        {
            'id'            : '15459251a6d6b397565',
            'from'          : {
                'name'  : 'Alice Freeman',
                'avatar': 'assets/images/avatars/alice.jpg',
                'email' : 'alicefreeman@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '28 Jun',
            'read'          : false,
            'starred'       : false,
            'important'     : true,
            'hasAttachments': true,
            'attachments'   : [
                {
                    'type'    : 'image',
                    'fileName': 'flowers',
                    'preview' : 'assets/images/mail/attachment-1.jpg',
                    'url'     : '',
                    'size'    : '1.1Mb'
                },
                {
                    'type'    : 'image',
                    'fileName': 'snow',
                    'preview' : 'assets/images/mail/attachment-2.jpg',
                    'url'     : '',
                    'size'    : '380kb'
                },
                {
                    'type'    : 'image',
                    'fileName': 'sunrise',
                    'preview' : 'assets/images/mail/attachment-3.jpg',
                    'size': '17Mb'
                }
            ],
            'labels'        : [
                1
            ],
            'folder'        : 0
        },
        {
            'id'            : '154588a0864d2881124',
            'from'          : {
                'name'  : 'Lawrence Collins',
                'avatar': 'assets/images/avatars/vincent.jpg',
                'email' : 'lawrencecollins@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '28 Jun',
            'read'          : false,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 0
        },
        {
            'id'            : '15453ba60d3baa5daaf',
            'from'          : {
                'name'  : 'Judith Burton',
                'avatar': 'assets/images/avatars/joyce.jpg',
                'email' : 'judithburton@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '28 Jun',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [
                3,
                2
            ],
            'folder'        : 0
        },
        {
            'id'            : '15453a06c08fb021776',
            'from'          : {
                'name'  : 'Danielle Obrien',
                'avatar': 'assets/images/avatars/danielle.jpg',
                'email' : 'danielleobrien@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '28 Jun',
            'read'          : true,
            'starred'       : true,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [
                1,
                3
            ],
            'folder'        : 0
        },
        {
            'id'            : '154537435d5b32bf11a',
            'from'          : {
                'name'  : 'Brian Flores',
                'avatar': '',
                'email' : 'brianflores@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '26 Jun',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 0
        },
        {
            'id'            : '1544e43dcdae6ebf876',
            'from'          : {
                'name'  : 'Charles Kim',
                'avatar': 'assets/images/avatars/garry.jpg',
                'email' : 'charleskim@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '18 Jun',
            'read'          : true,
            'starred'       : false,
            'important'     : true,
            'hasAttachments': false,
            'labels'        : [
                2
            ],
            'folder'        : 0
        },
        {
            'id'            : '1543ee3a5b43e0f9f45',
            'from'          : {
                'name'  : 'Patricia White',
                'avatar': '',
                'email' : 'patriciawhite@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '15 Jun',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 0
        },
        {
            'id'            : '1543cc4515df3146112',
            'from'          : {
                'name'  : 'Juan Carpenter',
                'avatar': 'assets/images/avatars/james.jpg',
                'email' : 'juancarpenter@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '11 Jun',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 0
        },
        {
            'id'            : '154398a4770d7aaf9a2',
            'from'          : {
                'name'  : 'Maria Gilbert',
                'avatar': 'assets/images/avatars/danielle.jpg',
                'email' : 'mariagilbert@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '5 Jun',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 0
        },
        {
            'id'            : '15438351f87dcd68567',
            'from'          : {
                'name'  : 'Tammy Brooks',
                'avatar': '',
                'email' : 'tammybrooks@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
            'time'          : '1 Jun',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 0
        },
        {
            'id'            : '1542d75d929a603125',
            'from'          : {
                'name'  : 'Kathy Price',
                'avatar': '',
                'email' : 'kathyprice@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
            'time'          : '1 Jun',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 0
        },
        {
            'id'            : '1541ca7af66da284177',
            'from'          : {
                'name'  : 'Alan Coleman',
                'avatar': '',
                'email' : 'alancoleman@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
            'time'          : '28 June',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 0
        },
        {
            'id'            : '154297167e781781745',
            'from'          : {
                'name'  : 'Thomas Silva',
                'avatar': '',
                'email' : 'thomassilva@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
            'time'          : '16 Jun',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 0
        },
        {
            'id'            : '15427f4c1b7f3953234',
            'from'          : {
                'name'  : 'Jessica Robertson',
                'avatar': '',
                'email' : 'jessicarobertson@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
            'time'          : '19 May',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 3
        },
        {
            'id'            : '154204e45a59b168453',
            'from'          : {
                'name'  : 'John Palmer',
                'avatar': '',
                'email' : 'johnpalmer@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
            'time'          : '8 May',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 3
        },
        {
            'id'            : '1541dd1e05dfc439216',
            'from'          : {
                'name'  : 'David Butler',
                'avatar': '',
                'email' : 'davidbutler@creapond.com'
            },
            'to'            : [
                {
                    'name' : 'me',
                    'email': 'johndoe@creapond.com'
                }
            ],
            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
            'time'          : '7 May',
            'read'          : true,
            'starred'       : false,
            'important'     : false,
            'hasAttachments': false,
            'labels'        : [],
            'folder'        : 3
        }
    ];
    public static folders = [
        {
            'id'    : 0,
            'handle': 'inbox',
            'title' : 'Inbox',
            'icon'  : 'inbox'
        },
        {
            'id'    : 1,
            'handle': 'sent',
            'title' : 'Sent',
            'icon'  : 'send'
        },
        {
            'id'    : 2,
            'handle': 'drafts',
            'title' : 'Drafts',
            'icon'  : 'email_open'
        },
        {
            'id'    : 3,
            'handle': 'spam',
            'title' : 'Spam',
            'icon'  : 'error'
        },
        {
            'id'    : 4,
            'handle': 'trash',
            'title' : 'Trash',
            'icon'  : 'delete'
        }
    ];
    public static filters = [
        {
            'id'    : 0,
            'handle': 'starred',
            'title' : 'Starred',
            'icon'  : 'star',
            'color' : 'amber-fg'
        },
        {
            'id'    : 1,
            'handle': 'important',
            'title' : 'Important',
            'icon'  : 'label',
            'color' : 'red-fg'
        }
    ];
    public static labels = [
        {
            'id'    : 0,
            'handle': 'note',
            'title' : 'Note',
            'color' : '#7cb342'
        },
        {
            'id'    : 1,
            'handle': 'paypal',
            'title' : 'Paypal',
            'color' : '#d84315'
        },
        {
            'id'    : 2,
            'handle': 'invoice',
            'title' : 'Invoice',
            'color' : '#607d8b'
        },
        {
            'id'    : 3,
            'handle': 'amazon',
            'title' : 'Amazon',
            'color' : '#03a9f4'
        }
    ];
 }
--- a/src/app/fake-db/profile.ts
+++ b/src/app/fake-db/profile.ts
@@ -1,357 +0,0 @@
 export class ProfileFakeDb
 {
    public static timeline = {
        activities: [
            {
                'user'   : {
                    'name'  : 'Alice Freeman',
                    'avatar': 'assets/images/avatars/alice.jpg'
                },
                'message': 'started following you.',
                'time'   : '13 mins. ago'
            },
            {
                'user'   : {
                    'name'  : 'Andrew Green',
                    'avatar': 'assets/images/avatars/andrew.jpg'
                },
                'message': 'sent you a message.',
                'time'   : 'June 10,2018'
            },
            {
                'user'   : {
                    'name'  : 'Garry Newman',
                    'avatar': 'assets/images/avatars/garry.jpg'
                },
                'message': 'shared a public post with your group.',
                'time'   : 'June 9,2018'
            },
            {
                'user'   : {
                    'name'  : 'Carl Henderson',
                    'avatar': 'assets/images/avatars/carl.jpg'
                },
                'message': 'wants to play Fallout Shelter with you.',
                'time'   : 'June 8,2018'
            },
            {
                'user'   : {
                    'name'  : 'Jane Dean',
                    'avatar': 'assets/images/avatars/jane.jpg'
                },
                'message': 'started following you.',
                'time'   : 'June 7,2018'
            },
            {
                'user'   : {
                    'name'  : 'Juan Carpenter',
                    'avatar': 'assets/images/avatars/james.jpg'
                },
                'message': 'sent you a message.',
                'time'   : 'June 6,2018'
            },
            {
                'user'   : {
                    'name'  : 'Judith Burton',
                    'avatar': 'assets/images/avatars/joyce.jpg'
                },
                'message': 'shared a photo with you.',
                'time'   : 'June 5,2018'
            },
            {
                'user'   : {
                    'name'  : 'Vincent Munoz',
                    'avatar': 'assets/images/avatars/vincent.jpg'
                },
                'message': 'shared a photo with you.',
                'time'   : 'June 4,2018'
            }
        ],
        posts     : [
            {
                'user'    : {
                    'name'  : 'Garry Newman',
                    'avatar': 'assets/images/avatars/garry.jpg'
                },
                'message' : 'Remember the place we were talking about the other night? Found it!',
                'time'    : '32 minutes ago',
                'type'    : 'post',
                'like'    : 5,
                'share'   : 21,
                'media'   : {
                    'type'   : 'image',
                    'preview': 'assets/images/profile/morain-lake.jpg'
                },
                'comments': [
                    {
                        'user'   : {
                            'name'  : 'Alice Freeman',
                            'avatar': 'assets/images/avatars/alice.jpg'
                        },
                        '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.'
                    }
                ]
            },
            {
                'user'    : {
                    'name'  : 'Andrew Green',
                    'avatar': 'assets/images/avatars/andrew.jpg'
                },
                'message' : 'Hey, man! Check this, it’s pretty awesome!',
                'time'    : 'June 12, 2018',
                'type'    : 'article',
                'like'    : 98,
                'share'   : 6,
                'article' : {
                    '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/profile/never-stop-changing.jpg'
                    }
                },
                'comments': [
                    {
                        'user'   : {
                            'name'  : 'Alice Freeman',
                            'avatar': 'assets/images/avatars/alice.jpg'
                        },
                        '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.'
                    }
                ]
            },
            {
                'user'   : {
                    'name'  : 'Carl Henderson',
                    '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, 2018',
                'type'   : 'something',
                'like'   : 4,
                'share'  : 1
            }
        ]
    };
    public static photosVideos = [
        {
            'name' : 'June 2018',
            'info' : '5 Photos',
            'media': [
                {
                    'type'   : 'photo',
                    'title'  : 'A Walk Amongst Friends',
                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Braies Lake',
                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Fall Glow',
                    'preview': 'assets/images/profile/fall-glow-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'First Snow',
                    'preview': 'assets/images/profile/first-snow-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Lago di Braies',
                    'preview': 'assets/images/profile/lago-di-braies-small.jpg'
                }
            ]
        },
        {
            'name' : 'May 2018',
            'info' : '7 Photos, 3 Videos',
            'media': [
                {
                    'type'   : 'photo',
                    'title'  : 'Lago di Sorapis',
                    'preview': 'assets/images/profile/lago-di-sorapis-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Morain Lake',
                    'preview': 'assets/images/profile/morain-lake-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Never Stop Changing',
                    'preview': 'assets/images/profile/never-stop-changing-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Reaching',
                    'preview': 'assets/images/profile/reaching-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Yosemite',
                    'preview': 'assets/images/profile/yosemite-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'A Walk Amongst Friends',
                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Braies Lake',
                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Fall Glow',
                    'preview': 'assets/images/profile/fall-glow-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'First Snow',
                    'preview': 'assets/images/profile/first-snow-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Lago di Braies',
                    'preview': 'assets/images/profile/lago-di-braies-small.jpg'
                }
            ]
        },
        {
            'name' : 'April 2018',
            'info' : '7 Photos',
            'media': [
                {
                    'type'   : 'photo',
                    'title'  : 'Lago di Sorapis',
                    'preview': 'assets/images/profile/lago-di-sorapis-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Morain Lake',
                    'preview': 'assets/images/profile/morain-lake-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Never Stop Changing',
                    'preview': 'assets/images/profile/never-stop-changing-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Reaching',
                    'preview': 'assets/images/profile/reaching-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Yosemite',
                    'preview': 'assets/images/profile/yosemite-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'A Walk Amongst Friends',
                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                },
                {
                    'type'   : 'photo',
                    'title'  : 'Braies Lake',
                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                }
            ]
        }
    ];
    public static about = {
        'general': {
            'gender'   : 'Male',
            'birthday' : 'February 30th, 1974',
            'locations': [
                '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.'
        },
        'work'   : {
            'occupation': 'Developer',
            'skills'    : 'C#, PHP, Javascript, Angular, JS, HTML, CSS',
            'jobs'      : [
                {
                    'company': 'Self-Employed',
                    'date'   : '2010 - Now'
                },
                {
                    'company': 'Google',
                    'date'   : '2008 - 2010'
                }
            ]
        },
        'contact': {
            'address' : 'Ut pharetra luctus est quis sodales. Duis nisi tortor, bibendum eget tincidunt, aliquam ac elit. Mauris nec euismod odio.',
            'tel'     : [
                '+6 555 6600',
                '+9 555 5255'
            ],
            'websites': [
                'withinpixels.com'
            ],
            'emails'  : [
                'mail@withinpixels.com',
                'mail@creapond.com'
            ]
        },
        'groups' : [
            {
                'name'    : 'Android',
                'category': 'Technology',
                'members' : '1.856.546'
            },
            {
                'name'    : 'Google',
                'category': 'Web',
                'members' : '1.226.121'
            },
            {
                'name'    : 'Fallout',
                'category': 'Games',
                'members' : '526.142'
            }
        ],
        'friends': [
            {
                'name'  : 'Garry Newman',
                'avatar': 'assets/images/avatars/garry.jpg'
            },
            {
                'name'  : 'Carl Henderson',
                'avatar': 'assets/images/avatars/carl.jpg'
            },
            {
                'name'  : 'Jane Dean',
                'avatar': 'assets/images/avatars/jane.jpg'
            },
            {
                'name'  : 'Garry Arnold',
                'avatar': 'assets/images/avatars/garry.jpg'
            },
            {
                'name'  : 'Vincent Munoz',
                'avatar': 'assets/images/avatars/vincent.jpg'
            },
            {
                'name'  : 'Alice Freeman',
                'avatar': 'assets/images/avatars/alice.jpg'
            },
            {
                'name'  : 'Andrew Green',
                'avatar': 'assets/images/avatars/andrew.jpg'
            }
        ]
    };
 }
--- a/src/app/fake-db/quick-panel.ts
+++ b/src/app/fake-db/quick-panel.ts
@@ -1,32 +0,0 @@
 export class QuickPanelFakeDb
 {
    public static notes = [
        {
            'title' : 'Best songs to listen while working',
            'detail': 'Last edit: May 8th, 2018'
        },
        {
            'title' : 'Useful subreddits',
            'detail': 'Last edit: January 12th, 2018'
        }
    ];
    public static events = [
        {
            'title' : 'Group Meeting',
            'detail': 'In 32 Minutes, Room 1B'
        },
        {
            'title' : 'Public Beta Release',
            'detail': '11:00 PM'
        },
        {
            'title' : 'Dinner with David',
            'detail': '17:30 PM'
        },
        {
            'title' : 'Q&A Session',
            'detail': '20:30 PM'
        }
    ];
 }
--- a/src/app/fake-db/scrumboard.ts
+++ b/src/app/fake-db/scrumboard.ts
@@ -1,787 +0,0 @@
 export class ScrumboardFakeDb
 {
    public static boards = [
        {
            'id'      : '32gfhaf2',
            'name'    : 'ACME Frontend Application',
            'uri'     : 'acme-frontend-application',
            'settings': {
                'color'          : 'fuse-dark',
                'subscribed'     : false,
                'cardCoverImages': true
            },
            'lists'   : [
                {
                    'id'     : '56027cf5a2ca3839a5d36103',
                    'name'   : 'Design',
                    'idCards': [
                        '5603a2a3cab0c8300f6096b3',
                        '44d1.2b51ea6cc2b5d.21f4a3412e857.8ffa2d8b44ad9.ac87215ed53a1.67d4921ad8f8d.9f318bcb2'
                    ]
                },
                {
                    'id'     : '56127cf2a2ca3539g7d36103',
                    'name'   : 'Development',
                    'idCards': [
                        '2837273da9b93dd84243s0f9',
                        '5787b7e4740c57bf0dffd5b6',
                        '5637273da9b93bb84743a0f9',
                        '7987.9740ba532b0d4.f9d12243f7362.507c0738dc561.87fba0a03df6e.75e6508cacf10.7a9835b54'
                    ]
                },
                {
                    'id'     : 'faf244627326f1249525763d',
                    'name'   : 'Upcoming Features',
                    'idCards': [
                        'd9005a4b89ed2aadca48a6ad',
                        'f6b9d7a9247e5d794a081927',
                        '80ed.24ad3b18e2668.f28fbbceeeff9.5a834620a42f1.5909be19a2bf2.6c4a54947ce2d.da356b0c1',
                        '0ad2.7862f947bc456.f42b446df54cb.d1dd9e93601a1.9deb1406d1404.0b3c278fc7001.733341b42',
                        'bad3.51be8ad33acaf.9540ecb37f7e8.6bee596cfe7d3.44c68bee289c4.b96ed0b9f0af7.e14846035'
                    ]
                },
                {
                    'id'     : 'ad7d.9fffac5dff412.c83bca6853767.8fd7549b2b1ca.ceda8a01774c4.a5cf3976e87e4.ce79eeeea',
                    'name'   : 'Known Bugs',
                    'idCards': [
                        'acc6.9c673cd2f5e35.521e91d8d5991.4b2a95e0539d1.027930c0743c5.7ad1ea7bea476.e8fbe6347',
                        '3279.3d69b40cc0b75.690252b6bea08.1e1789b0b7c2e.2f264b8661ce2.84d5f56910e23.429be5e8a',
                        'ba01.8e1a43f92a03a.0022bd5cbb9ba.275c64d911d8c.880e0846a3966.f75ff43e53ad.48ad612e7'
                    ]
                }
            ],
            'cards'   : [
                {
                    'id'               : '2837273da9b93dd84243s0f9',
                    'name'             : 'Update generators',
                    'description'      : 'Current generator doesn\'t support Node.js 6 and above.',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '26027s1930450d8bf7b10828'
                    ],
                    'idLabels'         : [
                        '26022e4129ad3a5sc28b36cd'
                    ],
                    'attachments'      : [],
                    'subscribed'       : false,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'AngularCLI could be a nice alternative.',
                            'time'    : 'now'
                        }
                    ],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : '5603a2a3cab0c8300f6096b3',
                    'name'             : 'Change background colors',
                    'description'      : '',
                    'idAttachmentCover': '67027cahbe3b52ecf2dc631c',
                    'idMembers'        : [
                        '76027g1930450d8bf7b10958'
                    ],
                    'idLabels'         : [
                        '56027e4119ad3a5dc28b36cd',
                        '5640635e19ad3a5dc21416b2'
                    ],
                    'attachments'      : [
                        {
                            'id'  : '67027cahbe3b52ecf2dc631c',
                            'name': 'mail.jpg',
                            'src' : 'assets/images/scrumboard/mail.jpg',
                            'time': 'Nov 3 at 15:22AM',
                            'type': 'image'
                        },
                        {
                            'id'  : '56027cfcbe1b72ecf1fc452a',
                            'name': 'calendar.jpg',
                            'src' : 'assets/images/scrumboard/calendar.jpg',
                            'time': 'Nov 1 at 12:34PM',
                            'type': 'image'
                        }
                    ],
                    'subscribed'       : true,
                    'checklists'       : [
                        {
                            'id'               : '63021cfdbe1x72wcf1fc451v',
                            'name'             : 'Checklist',
                            'checkItemsChecked': 1,
                            'checkItems'       : [
                                {
                                    'name'   : 'Implement a calendar library',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Replace event colors with Material Design colors',
                                    'checked': true
                                },
                                {
                                    'name'   : 'Replace icons with Material Design icons',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Use moment.js',
                                    'checked': false
                                }
                            ]
                        },
                        {
                            'name'             : 'Checklist 2',
                            'id'               : '74031cfdbe1x72wcz1dc166z',
                            'checkItemsChecked': 1,
                            'checkItems'       : [
                                {
                                    'name'   : 'Replace event colors with Material Design colors',
                                    'checked': true
                                },
                                {
                                    'name'   : 'Replace icons with Material Design icons',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Use moment.js',
                                    'checked': false
                                }
                            ]
                        }
                    ],
                    'checkItems'       : 7,
                    'checkItemsChecked': 2,
                    'comments'         : [
                        {
                            'idMember': '56027c1930450d8bf7b10758',
                            'message' : 'We should be able to add moment.js without any problems',
                            'time'    : '12 mins. ago'
                        },
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'I added a link for a page that might help us deciding the colors',
                            'time'    : '30 mins. ago'
                        }
                    ],
                    'activities'       : [
                        {
                            'idMember': '56027c1930450d8bf7b10758',
                            'message' : 'added a comment',
                            'time'    : '12 mins. ago'
                        },
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'added a comment',
                            'time'    : '30 mins. ago'
                        },
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'attached a link',
                            'time'    : '45 mins. ago'
                        }
                    ],
                    'due'              : '2017-08-29T10:16:34.000Z'
                },
                {
                    'id'               : '5637273da9b93bb84743a0f9',
                    'name'             : 'Fix splash screen bugs',
                    'description'      : '',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '56027c1930450d8bf7b10758'
                    ],
                    'idLabels'         : [
                        '5640635e19ad3a5dc21416b2'
                    ],
                    'attachments'      : [],
                    'subscribed'       : true,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : 'd9005a4b89ed2aadca48a6ad',
                    'name'             : 'Add alternative authentication pages',
                    'description'      : '',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '36027j1930450d8bf7b10158'
                    ],
                    'idLabels'         : [
                        '6540635g19ad3s5dc31412b2',
                        '56027e4119ad3a5dc28b36cd'
                    ],
                    'attachments'      : [],
                    'subscribed'       : false,
                    'checklists'       : [
                        {
                            'id'               : 'dbfb.99bd0ad37dabc.e05046f0c824d.18f26bb524c96.78bebc8488634.240c0ee6a5e45.4cb872965',
                            'name'             : 'Pages',
                            'checkItemsChecked': 2,
                            'checkItems'       : [
                                {
                                    'name'   : 'Login',
                                    'checked': true
                                },
                                {
                                    'name'   : 'Register',
                                    'checked': true
                                },
                                {
                                    'name'   : 'Lost Password',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Recover Password',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Activate Account',
                                    'checked': false
                                }
                            ]
                        }
                    ],
                    'checkItems'       : 5,
                    'checkItemsChecked': 2,
                    'comments'         : [],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : '5787b7e4740c57bf0dffd5b6',
                    'name'             : 'Fix the console',
                    'description'      : 'We need to fix the console asap!',
                    'idAttachmentCover': '',
                    'idMembers'        : [],
                    'idLabels'         : [
                        '26022e4129ad3a5sc28b36cd'
                    ],
                    'attachments'      : [],
                    'subscribed'       : true,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'I\'m on it!',
                            'time'    : 'now'
                        }
                    ],
                    'activities'       : [],
                    'due'              : '2020-09-07T12:00:00.000Z'
                },
                {
                    'id'               : 'f6b9d7a9247e5d794a081927',
                    'name'             : 'New media player',
                    'description'      : '',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '76027g1930450d8bf7b10958',
                        '56027c1930450d8bf7b10758',
                        '26027s1930450d8bf7b10828'
                    ],
                    'idLabels'         : [
                        '5640635e19ad3a5dc21416b2',
                        '6540635g19ad3s5dc31412b2'
                    ],
                    'attachments'      : [],
                    'subscribed'       : false,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : 'acc6.9c673cd2f5e35.521e91d8d5991.4b2a95e0539d1.027930c0743c5.7ad1ea7bea476.e8fbe6347',
                    'name'             : 'Memory Leak',
                    'description'      : '',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '36027j1930450d8bf7b10158'
                    ],
                    'idLabels'         : [
                        '26022e4129ad3a5sc28b36cd',
                        '5640635e19ad3a5dc21416b2'
                    ],
                    'attachments'      : [],
                    'subscribed'       : false,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : '3279.3d69b40cc0b75.690252b6bea08.1e1789b0b7c2e.2f264b8661ce2.84d5f56910e23.429be5e8a',
                    'name'             : 'Broken toolbar on profile page',
                    'description'      : '',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '26027s1930450d8bf7b10828'
                    ],
                    'idLabels'         : [
                        '26022e4129ad3a5sc28b36cd'
                    ],
                    'attachments'      : [],
                    'subscribed'       : false,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'This should be a medium priority bug, shouldn\'t it?',
                            'time'    : 'now'
                        }
                    ],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : 'ba01.8e1a43f92a03a.0022bd5cbb9ba.275c64d911d8c.880e0846a3966.f75ff43e53ad.48ad612e7',
                    'name'             : 'Button hover style',
                    'description'      : 'If there are 3 or more buttons in certain page, weird flashing happens when you hover over the red ones.',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '26027s1930450d8bf7b10828'
                    ],
                    'idLabels'         : [
                        '26022e4129ad3a5sc28b36cd',
                        '5640635e19ad3a5dc21416b2'
                    ],
                    'attachments'      : [],
                    'subscribed'       : true,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [],
                    'activities'       : [],
                    'due'              : '2017-03-08T09:00:00.000Z'
                },
                {
                    'id'               : '80ed.24ad3b18e2668.f28fbbceeeff9.5a834620a42f1.5909be19a2bf2.6c4a54947ce2d.da356b0c1',
                    'name'             : 'New header designs',
                    'description'      : '',
                    'idAttachmentCover': '12027cafbe3b52ecf2ef632c',
                    'idMembers'        : [],
                    'idLabels'         : [
                        '56027e4119ad3a5dc28b36cd',
                        '6540635g19ad3s5dc31412b2',
                        '5640635e19ad3a5dc21416b2'
                    ],
                    'attachments'      : [
                        {
                            'id'  : '12027cafbe3b52ecf2ef632c',
                            'name': 'header-.jpg',
                            'src' : 'assets/images/scrumboard/header-1.jpg',
                            'time': 'Nov 3 at 15:22AM',
                            'type': 'image'
                        },
                        {
                            'id'  : '55027ced1e1a12ecf1fced2a',
                            'name': 'header-2.jpg',
                            'src' : 'assets/images/scrumboard/header-2.jpg',
                            'time': 'Nov 1 at 12:34PM',
                            'type': 'image'
                        }
                    ],
                    'subscribed'       : false,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'Currently we have two new designs ready to ship.',
                            'time'    : 'now'
                        }
                    ],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : '0ad2.7862f947bc456.f42b446df54cb.d1dd9e93601a1.9deb1406d1404.0b3c278fc7001.733341b42',
                    'name'             : 'Fixed footer',
                    'description'      : '',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '26027s1930450d8bf7b10828',
                        '56027c1930450d8bf7b10758'
                    ],
                    'idLabels'         : [
                        '6540635g19ad3s5dc31412b2'
                    ],
                    'attachments'      : [],
                    'subscribed'       : true,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : 'bad3.51be8ad33acaf.9540ecb37f7e8.6bee596cfe7d3.44c68bee289c4.b96ed0b9f0af7.e14846035',
                    'name'             : 'Collapsable navigation',
                    'description'      : '',
                    'idAttachmentCover': '',
                    'idMembers'        : [],
                    'idLabels'         : [
                        '6540635g19ad3s5dc31412b2'
                    ],
                    'attachments'      : [],
                    'subscribed'       : false,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'I\'m not sure why we re-doing the navigation. The current collapsable navigation works flawlessly.',
                            'time'    : 'now'
                        }
                    ],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : '44d1.2b51ea6cc2b5d.21f4a3412e857.8ffa2d8b44ad9.ac87215ed53a1.67d4921ad8f8d.9f318bcb2',
                    'name'             : 'Mail app new layout',
                    'description'      : 'Current layout has lots of flaws in mobile. Outlook view should help with that.',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '56027c1930450d8bf7b10758',
                        '26027s1930450d8bf7b10828',
                        '76027g1930450d8bf7b10958',
                        '36027j1930450d8bf7b10158'
                    ],
                    'idLabels'         : [
                        '56027e4119ad3a5dc28b36cd',
                        '26022e4129ad3a5sc28b36cd'
                    ],
                    'attachments'      : [],
                    'subscribed'       : false,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [],
                    'activities'       : [],
                    'due'              : null
                },
                {
                    'id'               : '7987.9740ba532b0d4.f9d12243f7362.507c0738dc561.87fba0a03df6e.75e6508cacf10.7a9835b54',
                    'name'             : 'API recover and monitoring',
                    'description'      : 'We need a service to monitor and recover failed APIs.',
                    'idAttachmentCover': '',
                    'idMembers'        : [
                        '36027j1930450d8bf7b10158',
                        '76027g1930450d8bf7b10958'
                    ],
                    'idLabels'         : [
                        '26022e4129ad3a5sc28b36cd',
                        '5640635e19ad3a5dc21416b2'
                    ],
                    'attachments'      : [],
                    'subscribed'       : true,
                    'checklists'       : [
                        {
                            'id'               : '6926.2b31d119e4a.889401e0ca7a0.13ad8ce2e569d.976e54e8b5d87.456afccd7e820.d6c77106a',
                            'name'             : 'API Monitoring',
                            'checkItemsChecked': 2,
                            'checkItems'       : [
                                {
                                    'name'   : 'Simple dashboard design',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Should be able to see different time periods on the same dashboard',
                                    'checked': true
                                },
                                {
                                    'name'   : 'Different colors for different clusters',
                                    'checked': true
                                }
                            ]
                        },
                        {
                            'id'               : '7c22.5261c7924387f.248e8b1d32205.003f7a9f501d1.1d48dcdbe8b23.8099dcc5f75a7.29a966196',
                            'name'             : 'API Recovery',
                            'checkItemsChecked': 1,
                            'checkItems'       : [
                                {
                                    'name'   : 'Warning notifications to all developers',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Immediate recovery options attached to the notifications',
                                    'checked': true
                                },
                                {
                                    'name'   : 'Backups every 6hours',
                                    'checked': false
                                }
                            ]
                        }
                    ],
                    'checkItems'       : 6,
                    'checkItemsChecked': 3,
                    'comments'         : [],
                    'activities'       : [],
                    'due'              : '2017-02-02T11:20:34.000Z'
                }
            ],
            'members' : [
                {
                    'id'    : '56027c1930450d8bf7b10758',
                    'name'  : 'Alice Freeman',
                    'avatar': 'assets/images/avatars/alice.jpg'
                },
                {
                    'id'    : '26027s1930450d8bf7b10828',
                    'name'  : 'Danielle Obrien',
                    'avatar': 'assets/images/avatars/danielle.jpg'
                },
                {
                    'id'    : '76027g1930450d8bf7b10958',
                    'name'  : 'James Lewis',
                    'avatar': 'assets/images/avatars/james.jpg'
                },
                {
                    'id'    : '36027j1930450d8bf7b10158',
                    'name'  : 'Vincent Munoz',
                    'avatar': 'assets/images/avatars/vincent.jpg'
                }
            ],
            'labels'  : [
                {
                    'id'   : '26022e4129ad3a5sc28b36cd',
                    'name' : 'High Priority',
                    'color': 'red-500'
                },
                {
                    'id'   : '56027e4119ad3a5dc28b36cd',
                    'name' : 'Design',
                    'color': 'orange-400'
                },
                {
                    'id'   : '5640635e19ad3a5dc21416b2',
                    'name' : 'App',
                    'color': 'blue-600'
                },
                {
                    'id'   : '6540635g19ad3s5dc31412b2',
                    'name' : 'Feature',
                    'color': 'green-400'
                }
            ]
        },
        {
            'id'      : '27cfcbe1',
            'name'    : 'ACME Backend Application',
            'uri'     : 'acme-backend-application',
            'settings': {
                'color'          : 'blue-grey',
                'subscribed'     : false,
                'cardCoverImages': true
            },
            'lists'   : [
                {
                    'id'     : '56027cf5a2ca3839a5d36103',
                    'name'   : 'Designs',
                    'idCards': [
                        '5603a2a3cab0c8300f6096b3'
                    ]
                },
                {
                    'id'     : '56127cf2a2ca3539g7d36103',
                    'name'   : 'Development',
                    'idCards': [
                        '5637273da9b93bb84743a0f9'
                    ]
                }
            ],
            'cards'   : [
                {
                    'id'               : '5603a2a3cab0c8300f6096b3',
                    'name'             : 'Calendar App Design',
                    'description'      : '',
                    'idAttachmentCover': '56027cfcbe1b72ecf1fc452a',
                    'idMembers'        : [
                        '56027c1930450d8bf7b10758',
                        '36027j1930450d8bf7b10158'
                    ],
                    'idLabels'         : [
                        '56027e4119ad3a5dc28b36cd',
                        '5640635e19ad3a5dc21416b2'
                    ],
                    'attachments'      : [
                        {
                            'id'  : '56027cfcbe1b72ecf1fc452a',
                            'name': 'calendar-app-design.jpg',
                            'src' : 'assets/images/scrumboard/calendar.jpg',
                            'time': 'Nov 1 at 12:34PM',
                            'type': 'image'
                        },
                        {
                            'id'  : '67027cahbe3b52ecf2dc631c',
                            'url' : 'assets/images/scrumboard/calendar.jpg',
                            'time': 'Nov 3 at 15:22AM',
                            'type': 'link'
                        }
                    ],
                    'subscribed'       : true,
                    'checklists'       : [
                        {
                            'id'               : '63021cfdbe1x72wcf1fc451v',
                            'name'             : 'Checklist',
                            'checkItemsChecked': 1,
                            'checkItems'       : [
                                {
                                    'name'   : 'Implement a calendar library',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Replace event colors with Material Design colors',
                                    'checked': true
                                },
                                {
                                    'name'   : 'Replace icons with Material Design icons',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Use moment.js',
                                    'checked': false
                                }
                            ]
                        },
                        {
                            'name'             : 'Checklist 2',
                            'id'               : '74031cfdbe1x72wcz1dc166z',
                            'checkItemsChecked': 1,
                            'checkItems'       : [
                                {
                                    'name'   : 'Replace event colors with Material Design colors',
                                    'checked': true
                                },
                                {
                                    'name'   : 'Replace icons with Material Design icons',
                                    'checked': false
                                },
                                {
                                    'name'   : 'Use moment.js',
                                    'checked': false
                                }
                            ]
                        }
                    ],
                    'checkItems'       : 7,
                    'checkItemsChecked': 2,
                    'comments'         : [
                        {
                            'idMember': '56027c1930450d8bf7b10758',
                            'message' : 'We should be able to add moment.js without any problems',
                            'time'    : '12 mins. ago'
                        },
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'I added a link for a page that might help us deciding the colors',
                            'time'    : '30 mins. ago'
                        }
                    ],
                    'activities'       : [
                        {
                            'idMember': '56027c1930450d8bf7b10758',
                            'message' : 'added a comment',
                            'time'    : '12 mins. ago'
                        },
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'added a comment',
                            'time'    : '30 mins. ago'
                        },
                        {
                            'idMember': '36027j1930450d8bf7b10158',
                            'message' : 'attached a link',
                            'time'    : '45 mins. ago'
                        }
                    ],
                    'due'              : null
                },
                {
                    'id'               : '5637273da9b93bb84743a0f9',
                    'name'             : 'Fix Splash Screen bugs',
                    'description'      : '',
                    'idAttachmentCover': '5603a2ae2bbd55bb2db57478',
                    'idMembers'        : [
                        '56027c1930450d8bf7b10758'
                    ],
                    'idLabels'         : [],
                    'attachments'      : [
                        {
                            'id'  : '5603a2ae2bbd55bb2db57478',
                            'name': 'mail-app-design.jpg',
                            'src' : 'assets/images/scrumboard/mail.jpg',
                            'time': 'Nov 1 at 12:34PM',
                            'type': 'image'
                        }
                    ],
                    'subscribed'       : true,
                    'checklists'       : [],
                    'checkItems'       : 0,
                    'checkItemsChecked': 0,
                    'comments'         : [],
                    'activities'       : [],
                    'due'              : null
                }
            ],
            'members' : [
                {
                    'id'    : '56027c1930450d8bf7b10758',
                    'name'  : 'Alice Freeman',
                    'avatar': 'assets/images/avatars/alice.jpg'
                },
                {
                    'id'    : '26027s1930450d8bf7b10828',
                    'name'  : 'Danielle Obrien',
                    'avatar': 'assets/images/avatars/danielle.jpg'
                },
                {
                    'id'    : '76027g1930450d8bf7b10958',
                    'name'  : 'James Lewis',
                    'avatar': 'assets/images/avatars/james.jpg'
                },
                {
                    'id'    : '36027j1930450d8bf7b10158',
                    'name'  : 'Vincent Munoz',
                    'avatar': 'assets/images/avatars/vincent.jpg'
                }
            ],
            'labels'  : [
                {
                    'id'   : '56027e4119ad3a5dc28b36cd',
                    'name' : 'Design',
                    'color': 'red-500'
                },
                {
                    'id'   : '5640635e19ad3a5dc21416b2',
                    'name' : 'App',
                    'color': 'blue-500'
                },
                {
                    'id'   : '6540635g19ad3s5dc31412b2',
                    'name' : 'Feature',
                    'color': 'green-400'
                }
            ]
        }
    ];
 }
--- a/src/app/fake-db/search.ts
+++ b/src/app/fake-db/search.ts
@@ -1,46 +0,0 @@
 export class SearchFakeDb
 {
    public static search = [
        {
            'title'  : 'Dynamically Procrastinate B2C',
            'url'    : 'ourwebaddress.com/articles/procrastinate',
            'excerpt': 'Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.'
        },
        {
            'title'  : 'Cross Media',
            'url'    : 'ourwebaddress.com/articles/cross-media',
            'excerpt': 'Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.'
        },
        {
            'title'  : 'Synergize',
            'url'    : 'ourwebaddress.com/articles/synergize',
            'excerpt': 'Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.'
        },
        {
            'title'  : 'Parallel Platforms',
            'url'    : 'ourwebaddress.com/articles/parallel-paltforms',
            'excerpt': 'Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains.'
        },
        {
            'title'  : 'Growth Strategies',
            'url'    : 'ourwebaddress.com/articles/growth-strategies',
            'excerpt': 'Proactively envisioned multimedia based expertise and cross-media growth strategies. Holistically pontificate installed base portals after maintainable products.'
        },
        {
            'title'  : 'Methodologies',
            'url'    : 'ourwebaddress.com/articles/methodologies',
            'excerpt': 'Phosfluorescently engage worldwide methodologies with web-enabled technology. Completely pursue scalable customer service through sustainable potentialities.'
        },
        {
            'title'  : 'E-tailers',
            'url'    : 'ourwebaddress.com/articles/e-trailers',
            'excerpt': 'Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services.'
        },
        {
            'title'  : 'Web Readiness',
            'url'    : 'ourwebaddress.com/articles/web-readiness',
            'excerpt': 'Credibly innovate granular internal or organic sources whereas high standards in web-readiness. Dramatically synthesize integrated schemas with optimal networks.'
        }
    ];
 }
--- a/src/app/fake-db/todo.ts
+++ b/src/app/fake-db/todo.ts
@@ -1,324 +0,0 @@
 export class TodoFakeDb
 {
    public static todos = [
        {
            '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, 2017 3:17 PM',
            'dueDate'  : null,
            'completed': false,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'tags'     : [1]
        },
        {
            'id'       : '561551bd4ac1e7eb77a3a750',
            'title'    : 'Magna quis irure quis ea pariatur laborum',
            'notes'    : '',
            'startDate': 'Sunday, February 1, 2018 1:30 PM',
            'dueDate'  : 'Friday, December 30, 2019 10:07 AM',
            'completed': false,
            'starred'  : false,
            'important': true,
            'deleted'  : false,
            'tags'     : [1, 4]
        },
        {
            '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, 2017 3:43 AM',
            'dueDate'  : 'Wednesday, July 26, 2017 11:14 AM',
            'completed': false,
            'starred'  : true,
            'important': true,
            'deleted'  : false,
            'tags'     : [3]
        },
        {
            '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, 2017 4:14 AM',
            'dueDate'  : 'Friday, December 15, 2017 4:01 AM',
            'completed': true,
            'starred'  : true,
            'important': false,
            'deleted'  : false,
            'tags'     : [2]
        },
        {
            '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, 2018 11:19 PM',
            'dueDate'  : 'Friday, July 8, 2019 10:49 AM',
            'completed': false,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'tags'     : [5, 4]
        },
        {
            '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, 2018 10:49 AM',
            'dueDate'  : 'Monday, January 9, 2017 8:34 AM',
            'completed': false,
            'starred'  : true,
            'important': false,
            'deleted'  : false,
            'tags'     : [2, 3]
        },
        {
            'id'       : '561551bd0bb4b08ca77038ef',
            'title'    : 'Officia voluptate tempor ut mollit ea cillum',
            'notes'    : 'Deserunt veniam reprehenderit do elit magna ut.',
            'startDate': 'Saturday, October 18, 2017 4:25 AM',
            'dueDate'  : 'Sunday, August 21, 2019 10:48 PM',
            'completed': true,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'tags'     : [2, 4]
        },
        {
            'id'       : '561551bdf84eec913835ebe5',
            'title'    : 'Sit exercitation cupidatat minim est ipsum excepteur',
            'notes'    : '',
            'startDate': 'Friday, August 8, 2017 5:45 AM',
            'dueDate'  : 'Wednesday, June 15, 2019 1:53 PM',
            'completed': true,
            'starred'  : false,
            'important': true,
            'deleted'  : false,
            'tags'     : [1, 3]
        },
        {
            '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, 2018 1:55 PM',
            'dueDate'  : 'Thursday, March 3, 2019 2:26 PM',
            'completed': false,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'tags'     : [
                {
                    'id'   : 5,
                    'name' : 'mobile',
                    'label': 'Mobile',
                    'color': '#9C27B0'
                }
            ]
        },
        {
            '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, 2017 6:36 PM',
            'dueDate'  : 'Tuesday, August 9, 2019 7:18 AM',
            'completed': false,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'tags'     : [2]
        },
        {
            '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, 2017 3:15 PM',
            'dueDate'  : 'Wednesday, October 19, 2019 3:38 PM',
            'completed': false,
            'starred'  : false,
            'important': true,
            'deleted'  : false,
            'tags'     : [3]
        },
        {
            'id'       : '561551bdaa586f72d0be02cc',
            'title'    : 'Ex nisi amet id dolore nostrud esse',
            'notes'    : '',
            'startDate': 'Thursday, January 15, 2018 6:11 PM',
            'dueDate'  : 'Sunday, August 20, 2017 10:02 AM',
            'completed': false,
            'starred'  : true,
            'important': true,
            'deleted'  : false,
            'tags'     : [4]
        },
        {
            'id'       : '561551bd9f1c2de5b27f537b',
            'title'    : 'In dolor velit labore dolore ex eiusmod',
            'notes'    : '',
            'startDate': 'Monday, March 10, 2017 12:50 AM',
            'dueDate'  : 'Thursday, January 26, 2017 3:10 PM',
            'completed': false,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'tags'     : [4]
        },
        {
            'id'       : '561551bd26e21bb5e85b35cb',
            'title'    : 'Sunt voluptate aliquip exercitation minim magna sit',
            'notes'    : '',
            'startDate': 'Tuesday, March 24, 2018 10:54 PM',
            'dueDate'  : 'Wednesday, August 23, 2017 5:35 PM',
            'completed': false,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'tags'     : [4]
        },
        {
            '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, 2017 10:03 AM',
            'dueDate'  : 'Saturday, July 8, 2017 11:54 PM',
            'completed': false,
            'starred'  : true,
            'important': false,
            'deleted'  : false,
            'tags'     : [2, 4]
        },
        {
            'id'       : '561551bd49d800c243264a91',
            'title'    : 'Sit ipsum mollit cupidatat adipisicing officia aliquip',
            'notes'    : '',
            'startDate': 'Wednesday, December 10, 2017 9:25 AM',
            'dueDate'  : 'Friday, March 25, 2019 12:29 AM',
            'completed': true,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'tags'     : [1]
        },
        {
            '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, 2017 3:59 PM',
            'dueDate'  : 'Saturday, November 7, 2018 2:00 PM',
            'completed': false,
            'starred'  : false,
            'important': true,
            'deleted'  : false,
            'tags'     : [1]
        },
        {
            '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, 2018 3:07 PM',
            'dueDate'  : 'Saturday, October 14, 2017 6:57 AM',
            'completed': false,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'tags'     : [2]
        },
        {
            '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, 2018 4:40 AM',
            'dueDate'  : 'Wednesday, February 10, 2019 10:47 AM',
            'completed': true,
            'starred'  : true,
            'important': true,
            'deleted'  : false,
            'tags'     : [5]
        },
        {
            '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, 2017 1:32 AM',
            'dueDate'  : 'Monday, September 12, 2019 9:16 PM',
            'completed': true,
            'starred'  : false,
            'important': true,
            'deleted'  : true,
            'tags'     : [3]
        }
    ];
    public static filters = [
        {
            'id'    : 0,
            'handle': 'starred',
            'title' : 'Starred',
            'icon'  : 'star'
        },
        {
            'id'    : 1,
            'handle': 'important',
            'title' : 'Priority',
            'icon'  : 'error'
        },
        {
            'id'    : 2,
            'handle': 'dueDate',
            'title' : 'Sheduled',
            'icon'  : 'schedule'
        },
        {
            'id'    : 3,
            'handle': 'today',
            'title' : 'Today',
            'icon'  : 'today'
        },
        {
            'id'    : 4,
            'handle': 'completed',
            'title' : 'Done',
            'icon'  : 'check'
        },
        {
            'id'    : 4,
            'handle': 'deleted',
            'title' : 'Deleted',
            'icon'  : 'delete'
        }
    ];
    public static tags = [
        {
            'id'    : 1,
            'handle': 'frontend',
            'title' : 'Frontend',
            'color' : '#388E3C'
        },
        {
            'id'    : 2,
            'handle': 'backend',
            'title' : 'Backend',
            'color' : '#F44336'
        },
        {
            'id'    : 3,
            'handle': 'api',
            'title' : 'API',
            'color' : '#FF9800'
        },
        {
            'id'    : 4,
            'handle': 'issue',
            'title' : 'Issue',
            'color' : '#0091EA'
        },
        {
            'id'    : 5,
            'handle': 'mobile',
            'title' : 'Mobile',
            'color' : '#9C27B0'
        }
    ];
 }
--- a/src/app/layout/components/chat-panel/chat-panel.component.html
+++ b/src/app/layout/components/chat-panel/chat-panel.component.html
@@ -1,138 +0,0 @@
 <div class="header mat-elevation-z4 primary" fxLayout="row" fxLayoutAlign="space-between center">
    <ng-container *ngIf="selectedContact === null">
        <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center"
             (click)="unfoldSidebarTemporarily()">
            <mat-icon class="s-32 fuse-white-fg">chat</mat-icon>
            <h3 class="ml-12">Team Chat</h3>
        </div>
    </ng-container>
    <ng-container *ngIf="selectedContact !== null">
        <div class="title" fxLayout="row" fxLayoutAlign="start center">
            <img [src]="selectedContact.avatar" class="avatar mx-16">
            <h3 class="text-truncate">{{selectedContact.name}}</h3>
        </div>
    </ng-container>
    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily();resetChat();"
            fxHide fxShow.gt-md>
        <mat-icon class="secondary-text s-20">close</mat-icon>
    </button>
    <button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen();resetChat();"
            fxHide.gt-md>
        <mat-icon class="secondary-text">close</mat-icon>
    </button>
 </div>
 <div class="content">
    <!-- Contacts -->
    <div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
        <div *ngFor="let contact of contacts"
             class="contacts-list-item"
             [ngClass]="contact.status"
             [class.active]="contact.id === selectedContact?.id"
             (click)="toggleChat(contact)">
            <img class="avatar" [src]="contact.avatar"
                 [matTooltip]="contact.name"
                 matTooltipPosition="left">
            <div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
            <div class="status-icon" [ngClass]="contact.status"></div>
        </div>
    </div>
    <!-- / Contacts -->
    <!-- Chat -->
    <div id="chat" fxLayout="column" fxFlex="1 1 auto">
        <div id="messages" class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
            <ng-container *ngIf="chat && chat.dialog && chat.dialog.length > 0">
                <div *ngFor="let message of chat.dialog; let i = index" class="message-row"
                     [ngClass]="{
                            'me': message.who === user.id,
                            'contact': message.who !== user.id,
                            'first-of-group': isFirstMessageOfGroup(message, i),
                            'last-of-group': isLastMessageOfGroup(message, i)
                            }">
                    <img *ngIf="shouldShowContactAvatar(message, i)"
                         src="{{selectedContact.avatar}}"
                         class="avatar">
                    <div class="bubble">
                        <div class="message">{{message.message}}</div>
                        <div class="time secondary-text">{{message.time | date:'short'}}</div>
                    </div>
                </div>
            </ng-container>
            <ng-container *ngIf="selectedContact && chat && chat.dialog && chat.dialog.length === 0">
                <div class="no-messages-icon">
                    <mat-icon class="s-128 fade-text">chat</mat-icon>
                </div>
                <div class="no-messages secondary-text">
                    Start a conversation by typing your message below.
                </div>
            </ng-container>
            <ng-container *ngIf="!selectedContact">
                <div class="no-contact-selected">
                    <div class="no-contact-icon">
                        <mat-icon class="s-128 fade-text">chat</mat-icon>
                    </div>
                    <div class="no-contact secondary-text">
                        Select a contact to start a conversation.
                    </div>
                </div>
            </ng-container>
        </div>
        <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center"
             *ngIf="selectedContact">
            <form #replyForm="ngForm"
                  (ngSubmit)="reply($event)"
                  (keydown.enter)="reply($event)"
                  fxFlex fxLayout="row" fxLayoutAlign="start center">
                <mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
                    <textarea matInput #replyInput ngModel name="message" placeholder="Type your message"
                              [rows]="1" [matTextareaAutosize]="true"></textarea>
                </mat-form-field>
                <button class="send-message-button" mat-icon-button type="submit" aria-label="Send message">
                    <mat-icon class="secondary-text">send</mat-icon>
                </button>
            </form>
        </div>
    </div>
    <!-- / Chat -->
 </div>
--- a/src/app/layout/components/chat-panel/chat-panel.component.scss
+++ b/src/app/layout/components/chat-panel/chat-panel.component.scss
@@ -1,438 +0,0 @@
@import "src/@fuse/scss/fuse";
 chat-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 360px;
    min-width: 360px;
    max-width: 360px;
    z-index: 99;
    overflow: hidden;
    @include media-breakpoint('xs') {
        max-width: none !important;
        width: 100% !important;
    }
    .header {
        position: relative;
        height: 64px;
        max-height: 64px;
        min-height: 64px;
        z-index: 10;
        .title {
            cursor: pointer;
            mat-icon {
                margin-left: 4px;
            }
            h3 {
                max-width: 120px;
                transition: opacity 300ms ease-in-out;
            }
        }
    }
    .content {
        flex: 1 1 100%;
        min-height: 0;
    }
    #contacts-list {
        position: relative;
        z-index: 5;
        padding: 16px 0;
        width: 72px;
        min-width: 72px;
        max-width: 72px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        // Perfect scrollbar
        .ps__rail-y {
            width: 3px !important;
            .ps__thumb-y {
                width: 3px !important;
            }
        }
        .contacts-list-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 16px;
            height: 56px;
            cursor: pointer;
            &.active {
                position: relative;
                &:after {
                    position: absolute;
                    top: 8px;
                    right: 0;
                    bottom: 8px;
                    content: "";
                    width: 4px;
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }
            }
            &.offline {
                .mat-list-item-content {
                    img {
                        filter: grayscale(100%);
                        opacity: 0.7;
                    }
                    h3 {
                        opacity: 0.7;
                    }
                }
            }
            .avatar {
                margin: 0;
                width: 32px;
                height: 32px;
                min-width: 32px;
            }
            .unread-count {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 18px;
                height: 18px;
                top: 8px;
                left: 12px;
                border-radius: 9px;
                padding: 0 5px;
                font-size: 11px;
                text-align: center;
                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
            }
            .status-icon {
                position: absolute;
                width: 12px;
                height: 12px;
                bottom: 10px;
                left: 44px;
                border: 2px solid;
                border-radius: 50%;
                &.online {
                    background-color: #4CAF50;
                }
                &.do-not-disturb {
                    background-color: #F44336;
                }
                &.away {
                    background-color: #FFC107;
                }
                &.offline {
                    background-color: #646464;
                }
            }
        }
    }
    #chat {
        position: relative;
        z-index: 7;
        flex: 1 1 100%;
        box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.25);
        .messages {
            position: relative;
            padding: 16px 0 40px 40px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            .message-row {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-end;
                padding: 0 16px 4px 16px;
                .avatar {
                    position: absolute;
                    left: -32px;
                    margin: 0;
                }
                .bubble {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 12px;
                    max-width: 100%;
                    .message {
                        white-space: pre-wrap;
                        line-height: 1.2;
                    }
                    .time {
                        position: absolute;
                        display: none;
                        width: 100%;
                        font-size: 11px;
                        margin-top: 8px;
                        top: 100%;
                        left: 0;
                        white-space: nowrap;
                    }
                }
                &.contact {
                    .bubble {
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                        border-top-right-radius: 20px;
                        border-bottom-right-radius: 20px;
                        .time {
                            margin-left: 12px;
                        }
                    }
                    &.first-of-group {
                        .bubble {
                            border-top-left-radius: 20px;
                        }
                    }
                    &.last-of-group {
                        .bubble {
                            border-bottom-left-radius: 20px;
                        }
                    }
                }
                &.me {
                    padding-left: 40px;
                    .avatar {
                        order: 2;
                        margin: 0 0 0 16px;
                    }
                    .bubble {
                        margin-left: auto;
                        border-top-left-radius: 20px;
                        border-bottom-left-radius: 20px;
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                        .time {
                            justify-content: flex-end;
                            right: 0;
                            margin-right: 12px;
                        }
                    }
                    &.first-of-group {
                        .bubble {
                            border-top-right-radius: 20px;
                        }
                    }
                    &.last-of-group {
                        .bubble {
                            border-bottom-right-radius: 20px;
                        }
                    }
                }
                &.contact + .me,
                &.me + .contact {
                    padding-top: 20px;
                    margin-top: 20px;
                }
                &.first-of-group {
                    .bubble {
                        border-top-left-radius: 20px;
                        padding-top: 13px;
                    }
                }
                &.last-of-group {
                    .bubble {
                        border-bottom-left-radius: 20px;
                        padding-bottom: 13px;
                        .time {
                            display: flex;
                        }
                    }
                }
            }
            .no-messages-icon {
                position: absolute;
                top: 50%;
                right: 0;
                left: 0;
                padding: 0 24px;
                margin-top: -64px;
                text-align: center;
            }
            .no-messages {
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                padding: 0 16px 24px 16px;
                text-align: center;
            }
            .no-contact-selected {
                position: absolute;
                top: 50%;
                right: 0;
                left: 0;
                transform: translateY(-50%);
                padding: 0 24px;
                text-align: center;
                .no-contact {
                    margin-top: 24px;
                }
            }
        }
        .reply-form {
            position: relative;
            .message-text {
                padding: 16px 8px;
                border-top: 1px solid;
                .mat-form-field-wrapper {
                    padding: 0;
                    .mat-form-field-flex {
                        padding: 0;
                        .mat-form-field-infix {
                            padding: 0;
                            border: none;
                            border-radius: 20px;
                            @include mat-elevation(2);
                            textarea {
                                overflow: hidden;
                                margin: 16px 48px 16px 16px;
                                width: calc(100% - 64px);
                                padding: 0;
                            }
                        }
                    }
                    .mat-form-field-underline {
                        display: none !important;
                    }
                }
            }
            .send-message-button {
                position: absolute;
                right: 16px;
                bottom: 21px;
            }
        }
    }
 }
 fuse-sidebar {
    &.chat-panel {
        width: 360px;
        min-width: 360px;
        max-width: 360px;
        @include media-breakpoint('xs') {
            min-width: 0 !important;
            max-width: 100vw !important;
            width: 100vw !important;
        }
        &.left-chat-panel {
            .header {
                .toggle-sidebar-folded,
                .toggle-sidebar-open {
                    mat-icon {
                        transform: rotate(180deg);
                    }
                }
            }
        }
        // Folded
        &.folded {
            chat-panel {
                .header {
                    .title {
                        h3 {
                            opacity: 0;
                        }
                    }
                }
            }
            // Folded unfolded
            &.unfolded {
                chat-panel {
                    .header {
                        .title {
                            h3 {
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }
 }
--- a/src/app/layout/components/chat-panel/chat-panel.component.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.component.ts
@@ -1,278 +0,0 @@
 import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
@Component({
    selector     : 'chat-panel',
    templateUrl  : './chat-panel.component.html',
    styleUrls    : ['./chat-panel.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
 {
    contacts: any[];
    chat: any;
    selectedContact: any;
    sidebarFolded: boolean;
    user: any;
    @ViewChild('replyForm', {static: false})
    private _replyForm: NgForm;
    @ViewChild('replyInput', {static: false})
    private _replyInput: ElementRef;
    @ViewChildren(FusePerfectScrollbarDirective)
    private _fusePerfectScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;
    // Private
    private _chatViewScrollbar: FusePerfectScrollbarDirective;
    private _unsubscribeAll: Subject<any>;
    /**
     * Constructor
     *
     * @param {ChatPanelService} _chatPanelService
     * @param {HttpClient} _httpClient
     * @param {FuseSidebarService} _fuseSidebarService
     */
    constructor(
        private _chatPanelService: ChatPanelService,
        private _httpClient: HttpClient,
        private _fuseSidebarService: FuseSidebarService
    )
    {
        // Set the defaults
        this.selectedContact = null;
        this.sidebarFolded = true;
        // Set the private defaults
        this._unsubscribeAll = new Subject();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------
    /**
     * On init
     */
    ngOnInit(): void
    {
        // Load the contacts
        this._chatPanelService.loadContacts().then(() => {
            this.contacts = this._chatPanelService.contacts;
            this.user = this._chatPanelService.user;
        });
        // Subscribe to the foldedChanged observable
        this._fuseSidebarService.getSidebar('chatPanel').foldedChanged
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe((folded) => {
                this.sidebarFolded = folded;
            });
    }
    /**
     * After view init
     */
    ngAfterViewInit(): void
    {
        this._chatViewScrollbar = this._fusePerfectScrollbarDirectives.find((directive) => {
            return directive.elementRef.nativeElement.id === 'messages';
        });
    }
    /**
     * On destroy
     */
    ngOnDestroy(): void
    {
        // Unsubscribe from all subscriptions
        this._unsubscribeAll.next();
        this._unsubscribeAll.complete();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Private methods
    // -----------------------------------------------------------------------------------------------------
    /**
     * Prepare the chat for the replies
     */
    private _prepareChatForReplies(): void
    {
        setTimeout(() => {
            // Focus to the reply input
            // this._replyInput.nativeElement.focus();
            // Scroll to the bottom of the messages list
            if ( this._chatViewScrollbar )
            {
                this._chatViewScrollbar.update();
                setTimeout(() => {
                    this._chatViewScrollbar.scrollToBottom(0);
                });
            }
        });
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Public methods
    // -----------------------------------------------------------------------------------------------------
    /**
     * Fold the temporarily unfolded sidebar back
     */
    foldSidebarTemporarily(): void
    {
        this._fuseSidebarService.getSidebar('chatPanel').foldTemporarily();
    }
    /**
     * Unfold the sidebar temporarily
     */
    unfoldSidebarTemporarily(): void
    {
        this._fuseSidebarService.getSidebar('chatPanel').unfoldTemporarily();
    }
    /**
     * Toggle sidebar opened status
     */
    toggleSidebarOpen(): void
    {
        this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
    }
    /**
     * Decide whether to show or not the contact's avatar in the message row
     *
     * @param message
     * @param i
     * @returns {boolean}
     */
    shouldShowContactAvatar(message, i): boolean
    {
        return (
            message.who === this.selectedContact.id &&
            ((this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== this.selectedContact.id) || !this.chat.dialog[i + 1])
        );
    }
    /**
     * Check if the given message is the first message of a group
     *
     * @param message
     * @param i
     * @returns {boolean}
     */
    isFirstMessageOfGroup(message, i): boolean
    {
        return (i === 0 || this.chat.dialog[i - 1] && this.chat.dialog[i - 1].who !== message.who);
    }
    /**
     * Check if the given message is the last message of a group
     *
     * @param message
     * @param i
     * @returns {boolean}
     */
    isLastMessageOfGroup(message, i): boolean
    {
        return (i === this.chat.dialog.length - 1 || this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== message.who);
    }
    /**
     * Toggle chat with the contact
     *
     * @param contact
     */
    toggleChat(contact): void
    {
        // If the contact equals to the selectedContact,
        // that means we will deselect the contact and
        // unload the chat
        if ( this.selectedContact && contact.id === this.selectedContact.id )
        {
            // Reset
            this.resetChat();
        }
        // Otherwise, we will select the contact, open
        // the sidebar and start the chat
        else
        {
            // Unfold the sidebar temporarily
            this.unfoldSidebarTemporarily();
            // Set the selected contact
            this.selectedContact = contact;
            // Load the chat
            this._chatPanelService.getChat(contact.id).then((chat) => {
                // Set the chat
                this.chat = chat;
                // Prepare the chat for the replies
                this._prepareChatForReplies();
            });
        }
    }
    /**
     * Remove the selected contact and unload the chat
     */
    resetChat(): void
    {
        // Set the selected contact as null
        this.selectedContact = null;
        // Set the chat as null
        this.chat = null;
    }
    /**
     * Reply
     */
    reply(event): void
    {
        event.preventDefault();
        if ( !this._replyForm.form.value.message )
        {
            return;
        }
        // Message
        const message = {
            who    : this.user.id,
            message: this._replyForm.form.value.message,
            time   : new Date().toISOString()
        };
        // Add the message to the chat
        this.chat.dialog.push(message);
        // Reset the reply form
        this._replyForm.reset();
        // Update the server
        this._chatPanelService.updateChat(this.chat.id, this.chat.dialog).then(response => {
            // Prepare the chat for the replies
            this._prepareChatForReplies();
        });
    }
 }
--- a/src/app/layout/components/chat-panel/chat-panel.module.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.module.ts
@@ -1,39 +0,0 @@
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatRippleModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FuseSharedModule } from '@fuse/shared.module';
 import { ChatPanelComponent } from 'app/layout/components/chat-panel/chat-panel.component';
 import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
@NgModule({
    declarations: [
        ChatPanelComponent
    ],
    providers   : [
        ChatPanelService
    ],
    imports     : [
        MatButtonModule,
        MatFormFieldModule,
        MatIconModule,
        MatInputModule,
        MatTabsModule,
        MatTooltipModule,
        MatRippleModule,
        FuseSharedModule
    ],
    exports     : [
        ChatPanelComponent
    ]
 })
 export class ChatPanelModule
 {
 }
--- a/src/app/layout/components/chat-panel/chat-panel.service.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.service.ts
@@ -1,182 +0,0 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { FuseUtils } from '@fuse/utils';
@Injectable()
 export class ChatPanelService
 {
    contacts: any[];
    chats: any[];
    user: any;
    /**
     * Constructor
     *
     * @param {HttpClient} _httpClient
     */
    constructor(
        private _httpClient: HttpClient
    )
    {
    }
    /**
     * Loader
     *
     * @returns {Promise<any> | any}
     */
    loadContacts(): Promise<any> | any
    {
        return new Promise((resolve, reject) => {
            Promise.all([
                this.getContacts(),
                this.getUser()
            ]).then(
                ([contacts, user]) => {
                    this.contacts = contacts;
                    this.user = user;
                    resolve();
                },
                reject
            );
        });
    }
    /**
     * Get chat
     *
     * @param contactId
     * @returns {Promise<any>}
     */
    getChat(contactId): Promise<any>
    {
        const chatItem = this.user.chatList.find((item) => {
            return item.contactId === contactId;
        });
        // Get the chat
        return new Promise((resolve, reject) => {
            // If there is a chat with this user, return that.
            if ( chatItem )
            {
                this._httpClient.get('api/chat-panel-chats/' + chatItem.chatId)
                    .subscribe((chat) => {
                        // Resolve the promise
                        resolve(chat);
                    }, reject);
            }
            // If there is no chat with this user, create one...
            else
            {
                this.createNewChat(contactId).then(() => {
                    // and then recall the getChat method
                    this.getChat(contactId).then((chat) => {
                        resolve(chat);
                    });
                });
            }
        });
    }
    /**
     * Create new chat
     *
     * @param contactId
     * @returns {Promise<any>}
     */
    createNewChat(contactId): Promise<any>
    {
        return new Promise((resolve, reject) => {
            // Generate a new id
            const chatId = FuseUtils.generateGUID();
            // Prepare the chat object
            const chat = {
                id    : chatId,
                dialog: []
            };
            // Prepare the chat list entry
            const chatListItem = {
                chatId         : chatId,
                contactId      : contactId,
                lastMessageTime: '2017-02-18T10:30:18.931Z'
            };
            // Add new chat list item to the user's chat list
            this.user.chatList.push(chatListItem);
            // Post the created chat to the server
            this._httpClient.post('api/chat-panel-chats', {...chat})
                .subscribe(() => {
                    // Post the updated user data to the server
                    this._httpClient.post('api/chat-panel-user/' + this.user.id, this.user)
                        .subscribe(() => {
                            // Resolve the promise
                            resolve();
                        });
                }, reject);
        });
    }
    /**
     * Update the chat
     *
     * @param chatId
     * @param dialog
     * @returns {Promise<any>}
     */
    updateChat(chatId, dialog): Promise<any>
    {
        return new Promise((resolve, reject) => {
            const newData = {
                id    : chatId,
                dialog: dialog
            };
            this._httpClient.post('api/chat-panel-chats/' + chatId, newData)
                .subscribe(updatedChat => {
                    resolve(updatedChat);
                }, reject);
        });
    }
    /**
     * Get contacts
     *
     * @returns {Promise<any>}
     */
    getContacts(): Promise<any>
    {
        return new Promise((resolve, reject) => {
            this._httpClient.get('api/chat-panel-contacts')
                .subscribe((response: any) => {
                    resolve(response);
                }, reject);
        });
    }
    /**
     * Get user
     *
     * @returns {Promise<any>}
     */
    getUser(): Promise<any>
    {
        return new Promise((resolve, reject) => {
            this._httpClient.get('api/chat-panel-user')
                .subscribe((response: any) => {
                    resolve(response[0]);
                }, reject);
        });
    }
 }
--- 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 8+)</span>
+            <span>Purchase FUSE (Angular 6+)</span>
        </a>
        <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
@@ -15,6 +15,7 @@
            <a mat-button routerLink="/documentation/changelog">Changelog</a>
        </div>
    </div>
 </mat-toolbar>
--- a/src/app/layout/components/footer/footer.module.ts
+++ b/src/app/layout/components/footer/footer.module.ts
@@ -1,8 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatIconModule, MatToolbarModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { FuseSharedModule } from '@fuse/shared.module';
--- a/src/app/layout/components/navbar/horizontal/style-1/style-1.module.ts
+++ b/src/app/layout/components/navbar/horizontal/style-1/style-1.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatIconModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
--- 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 class="material2" layout="vertical"></fuse-navigation>
+        <fuse-navigation layout="vertical"></fuse-navigation>
    </div>
 </div>
--- a/Show More
+++ b/Show More
`@@ -1,2 +1 @@`
	`This project is protected by Envato's Regular License. For more information,`	`https://themeforest.net/licenses/terms/regular`
	`check the official license page at https://themeforest.net/licenses/terms/regular`