Set the output path

Angular version name
Fixed various dialog issues
2025-12-22 14:27:09 +00:00 · 2018-05-06 14:33:17 +03:00 · 2018-05-06 14:32:10 +03:00 · 2018-05-06 14:19:28 +03:00 · 2018-05-06 13:44:34 +03:00 · 2018-05-06 13:38:15 +03:00
566 changed files with 14189 additions and 10162 deletions
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -1,74 +0,0 @@
-{
-    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-    "project": {
-        "name": "fuse"
-    },
-    "apps": [
-        {
-            "root": "src",
-            "outDir": "dist",
-            "assets": [
-                "assets",
-                "app/main/content/components/angular-material",
-                "favicon.ico"
-            ],
-            "index": "index.html",
-            "main": "main.ts",
-            "polyfills": "polyfills.ts",
-            "test": "test.ts",
-            "tsconfig": "tsconfig.app.json",
-            "testTsconfig": "tsconfig.spec.json",
-            "prefix": "app",
-            "styles": [
-                "styles.scss"
-            ],
-            "scripts": [],
-            "environmentSource": "environments/environment.ts",
-            "environments": {
-                "dev": "environments/environment.ts",
-                "hmr": "environments/environment.hmr.ts",
-                "prod": "environments/environment.prod.ts"
-            }
-        }
-    ],
-    "e2e": {
-        "protractor": {
-            "config": "./protractor.conf.js"
-        }
-    },
-    "lint": [
-        {
-            "project": "src/tsconfig.app.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
-        },
-        {
-            "project": "src/tsconfig.spec.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
-        },
-        {
-            "project": "e2e/tsconfig.e2e.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
-        }
-    ],
-    "test": {
-        "karma": {
-            "config": "./karma.conf.js"
-        }
-    },
-    "defaults": {
-        "styleExt": "scss",
-        "component": {}
-    }
-}
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,3 +1,4 @@
+# Editor configuration, see http://editorconfig.org
 root = true

 [*]
--- a/.gitignore
+++ b/.gitignore
@@ -30,13 +30,10 @@
 /coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-error.log
 testem.log
 /typings

-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # System Files
 .DS_Store
 Thumbs.db
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Fuse2

-Material Design Admin Template with Angular 5+ and Angular Material 2
+Material Design Admin Template with Angular 6+ and Angular Material 2

 ## The Community

@@ -14,11 +14,11 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w

 ## Code scaffolding

-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

 ## Build

-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

 ## Running unit tests

@@ -27,4 +27,8 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 ## Running end-to-end tests

 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
--- a/angular.json
+++ b/angular.json
@@ -0,0 +1,140 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "fuse": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "prefix": "app",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "styleext": "scss"
+                }
+            },
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets",
+                            "src/app/main/content/components/angular-material"
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "fuse:build:production"
+                        },
+                        "hmr": {
+                            "hmr": true,
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.hmr.ts"
+                                }
+                            ]
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "karmaConfig": "src/karma.conf.js",
+                        "styles": [
+                            "styles.scss"
+                        ],
+                        "scripts": [],
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "src/tsconfig.app.json",
+                            "src/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**",
+                            "**/src/app/fuse-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"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": "e2e/tsconfig.e2e.json",
+                        "exclude": [
+                            "**/node_modules/**",
+                            "**/src/app/fuse-fake-db/**/*",
+                            "**/src/assets/angular-material-examples/**/*"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "fuse"
+}
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@@ -0,0 +1,31 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const {SpecReporter} = require('jasmine-spec-reporter');
+
+exports.config = {
+    allScriptsTimeout: 11000,
+    specs            : [
+        './src/**/*.e2e-spec.ts'
+    ],
+    capabilities     : {
+        'browserName': 'chrome'
+    },
+    directConnect    : true,
+    baseUrl          : 'http://localhost:4200/',
+    framework        : 'jasmine',
+    jasmineNodeOpts  : {
+        showColors            : true,
+        defaultTimeoutInterval: 30000,
+        print                 : function ()
+        {
+        }
+    },
+    onPrepare()
+    {
+        require('ts-node').register({
+            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
@@ -9,6 +9,6 @@ describe('Fuse2 App', () => {

    it('should display welcome message', () => {
        page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to app!');
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
    });
 });
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
--- a/e2e/tsconfig.e2e.json
+++ b/e2e/tsconfig.e2e.json
@@ -1,8 +1,7 @@
 {
  "extends": "../tsconfig.json",
  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "baseUrl": "./",
+    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "target": "es5",
    "types": [
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,33 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-    config.set({
-        basePath: '',
-        frameworks: ['jasmine', '@angular/cli'],
-        plugins: [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-jasmine-html-reporter'),
-            require('karma-coverage-istanbul-reporter'),
-            require('@angular/cli/plugins/karma')
-        ],
-        client:{
-            clearContext: false // leave Jasmine Spec Runner output visible in browser
-        },
-        coverageIstanbulReporter: {
-            reports: [ 'html', 'lcovonly' ],
-            fixWebpackSourcePaths: true
-        },
-        angularCli: {
-            environment: 'dev'
-        },
-        reporters: ['progress', 'kjhtml'],
-        port: 9876,
-        colors: true,
-        logLevel: config.LOG_INFO,
-        autoWatch: true,
-        browsers: ['Chrome'],
-        singleRun: false
-    });
-};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
  "name": "fuse",
-  "version": "5.2.10",
+  "version": "6.0.0",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
-    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
+    "start-hmr": "ng serve --configuration hmr -sm=false",
    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
    "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",
@@ -19,67 +19,70 @@
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.2.8",
-    "@angular/cdk": "5.2.4",
-    "@angular/common": "5.2.8",
-    "@angular/compiler": "5.2.8",
-    "@angular/core": "5.2.8",
-    "@angular/flex-layout": "5.0.0-beta.13",
-    "@angular/forms": "5.2.8",
-    "@angular/http": "5.2.8",
-    "@angular/material": "5.2.4",
-    "@angular/material-moment-adapter": "5.2.4",
-    "@angular/platform-browser": "5.2.8",
-    "@angular/platform-browser-dynamic": "5.2.8",
-    "@angular/router": "5.2.8",
+    "@angular/animations": "6.0.0",
+    "@angular/cdk": "6.0.0",
+    "@angular/common": "6.0.0",
+    "@angular/compiler": "6.0.0",
+    "@angular/core": "6.0.0",
+    "@angular/flex-layout": "6.0.0-beta.15",
+    "@angular/forms": "6.0.0",
+    "@angular/http": "6.0.0",
+    "@angular/material": "6.0.0",
+    "@angular/material-moment-adapter": "6.0.0",
+    "@angular/platform-browser": "6.0.0",
+    "@angular/platform-browser-dynamic": "6.0.0",
+    "@angular/router": "6.0.0",
    "@ngrx/effects": "5.2.0",
    "@ngrx/router-store": "5.2.0",
    "@ngrx/store": "5.2.0",
    "@ngrx/store-devtools": "5.2.0",
-    "@ngx-translate/core": "9.1.1",
-    "@swimlane/ngx-charts": "7.1.1",
-    "@swimlane/ngx-datatable": "11.2.0",
-    "@swimlane/ngx-dnd": "3.1.0",
+    "@ngx-translate/core": "10.0.1",
+    "@swimlane/ngx-charts": "7.3.0",
+    "@swimlane/ngx-datatable": "11.3.2",
+    "@swimlane/ngx-dnd": "3.2.0",
    "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.23.6",
-    "angular-in-memory-web-api": "0.5.3",
+    "angular-calendar": "0.24.0",
+    "angular-in-memory-web-api": "0.6.0",
    "chart.js": "2.7.2",
    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.3",
-    "d3": "4.13.0",
+    "core-js": "2.5.5",
+    "d3": "5.1.0",
    "hammerjs": "2.0.8",
-    "intl": "1.2.5",
-    "moment": "2.21.0",
+    "lodash": "4.17.10",
+    "moment": "2.22.1",
    "ng2-charts": "1.6.0",
-    "ngrx-store-freeze": "0.2.1",
-    "ngx-color-picker": "5.3.4",
+    "ngrx-store-freeze": "0.2.2",
+    "ngx-color-picker": "5.3.8",
    "ngx-cookie-service": "1.0.10",
    "perfect-scrollbar": "1.3.0",
-    "prismjs": "1.11.0",
-    "rxjs": "5.5.6",
+    "prismjs": "1.14.0",
+    "rxjs": "6.1.0",
+    "rxjs-compat": "6.1.0",
    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.20"
+    "zone.js": "0.8.26"
  },
  "devDependencies": {
-    "@angular/cli": "1.7.3",
-    "@angular/compiler-cli": "5.2.8",
-    "@angular/language-service": "5.2.8",
+    "@angular/cli": "6.0.0",
+    "@angular/compiler-cli": "6.0.0",
+    "@angular/language-service": "6.0.0",
+    "@angular-devkit/build-angular": "0.6.0",
    "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.6",
+    "@types/jasmine": "2.8.7",
    "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.101",
+    "@types/lodash": "4.14.108",
+    "@types/node": "8.9.5",
    "codelyzer": "4.2.1",
-    "jasmine-core": "2.8.0",
+    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
-    "karma": "2.0.0",
+    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "1.4.2",
-    "karma-jasmine": "1.1.1",
+    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.1.2",
-    "ts-node": "4.1.0",
+    "protractor": "5.3.1",
+    "ts-node": "5.0.1",
    "tslint": "5.9.1",
-    "typescript": "2.6.2",
+    "typescript": "2.7.2",
    "webpack-bundle-analyzer": "2.11.1"
  }
 }
--- a/protractor.conf.js
+++ b/protractor.conf.js
@@ -1,28 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-    allScriptsTimeout: 11000,
-    specs: [
-        './e2e/**/*.e2e-spec.ts'
-    ],
-    capabilities: {
-        'browserName': 'chrome'
-    },
-    directConnect: true,
-    baseUrl: 'http://localhost:4200/',
-    framework: 'jasmine',
-    jasmineNodeOpts: {
-        showColors: true,
-        defaultTimeoutInterval: 30000,
-        print: function() {}
-    },
-    onPrepare() {
-        require('ts-node').register({
-            project: 'e2e/tsconfig.e2e.json'
-        });
-        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-    }
-};
--- a/src/@fuse/components/highlight/prism-languages.ts
+++ b/src/@fuse/components/highlight/prism-languages.ts
@@ -5,6 +5,7 @@ import 'prismjs/components/prism-csharp';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-diff';
 import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markup-templating';
 import 'prismjs/components/prism-java';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-json';
--- a/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
+++ b/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
@@ -1,4 +1,30 @@
-<a class="nav-link" matRipple>
+<ng-container *ngIf="!item.hidden">
+
+    <!-- normal collapse -->
+    <a class="nav-link" *ngIf="!item.url && !item.function" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
@@ -6,7 +32,7 @@
            {{item.badge.title}}
        </span>
        <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
-</a>
+    </ng-template>

    <div class="children" [ngClass]="{'open': isOpen}">

@@ -14,10 +40,13 @@

            <ng-container *ngFor="let item of item.children">
                <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
+                <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'"
+                                              [item]="item"></fuse-nav-horizontal-collapse>
                <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
            </ng-container>

        </div>

    </div>
+
+</ng-container>
--- a/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
+++ b/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
@@ -1,18 +1,30 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- item.url -->
    <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
-    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-        {{item.badge.title}}
-    </span>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

+    <!-- item.function -->
    <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
            {{item.badge.title}}
        </span>
-</span>
+    </ng-template>
+
+</ng-container>
--- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
+++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
@@ -1,6 +1,30 @@
 <ng-container *ngIf="!item.hidden">

-    <a class="nav-link" matRipple (click)="toggleOpen($event)">
+    <!-- normal collapse -->
+    <a class="nav-link" *ngIf="!item.url && !item.function" (click)="toggleOpen($event)" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function" (click)="toggleOpen($event)"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="toggleOpen($event);item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="toggleOpen($event);item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
@@ -8,7 +32,7 @@
            {{item.badge.title}}
        </span>
        <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
-    </a>
+    </ng-template>

    <div class="children" [@slideInOut]="isOpen">
        <ng-container *ngFor="let item of item.children">
--- a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html
+++ b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html
@@ -1,22 +1,31 @@
 <ng-container *ngIf="!item.hidden">

-    <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function"
+       [routerLink]="[item.url]" routerLinkActive="active"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
-        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
-        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
-        </span>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

-    <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
            {{item.badge.title}}
        </span>
-    </span>
+    </ng-template>

 </ng-container>
--- a/src/@fuse/components/search-bar/search-bar.component.html
+++ b/src/@fuse/components/search-bar/search-bar.component.html
@@ -1,5 +1,7 @@
-<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
-    <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
+<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
+
+    <div class="fuse-search-bar-content" [ngClass]="toolbarColor">
+
        <label for="fuse-search-bar-input">
            <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                    *ngIf="collapsed">
@@ -10,12 +12,14 @@
            </span>-->
        </label>

-        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
+        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"
+               fxFlex>

-        <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
+        <button mat-icon-button class="fuse-search-bar-collapser" (click)="collapse()"
                aria-label="Collapse Search Bar">
            <mat-icon class="s-24">close</mat-icon>
        </button>

    </div>
+
 </div>
--- a/src/@fuse/components/search-bar/search-bar.component.scss
+++ b/src/@fuse/components/search-bar/search-bar.component.scss
@@ -3,6 +3,8 @@
 :host {

    .fuse-search-bar {
+        display: flex;
+        flex: 0 1 auto;
        min-width: 64px;
        height: 64px;
        font-size: 13px;
@@ -11,6 +13,12 @@
            height: 56px;
        }

+        .fuse-search-bar-content {
+            display: flex;
+            flex: 1 1 auto;
+            align-items: center;
+            justify-content: flex-start;
+
            .fuse-search-bar-expander,
            .fuse-search-bar-collapser {
                cursor: pointer;
@@ -30,6 +38,7 @@
                width: 64px !important;
                height: 64px !important;
                line-height: 64px !important;
+
                @include media-breakpoint-down('sm') {
                    height: 56px !important;
                    line-height: 56px !important;
@@ -42,10 +51,12 @@

            #fuse-search-bar-input {
                display: none;
+                flex: 1 0 auto;
                min-height: 64px;
                background-color: transparent;
                font-size: 16px;
            }
+        }

        &.expanded {
            position: absolute;
@@ -55,12 +66,15 @@
            left: 0;
            z-index: 10;

+            .fuse-search-bar-content {
+
                #fuse-search-bar-input {
-                display: block;
+                    display: flex;
                }

                .fuse-search-bar-collapser {
-                display: block;
+                    display: flex;
+                }
            }
        }
    }
--- a/src/@fuse/components/shortcuts/shortcuts.component.html
+++ b/src/@fuse/components/shortcuts/shortcuts.component.html
@@ -17,7 +17,7 @@
                     *ngFor="let shortcutItem of shortcutItems">

                    <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
-                        <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
+                        <mat-icon class="secondary-text" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                        <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                            {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                        </span>
@@ -42,46 +42,70 @@

        <mat-menu #addMenu="matMenu" class="w-240">

-            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
+            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatLabel="never">
                <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
            </mat-form-field>

            <mat-divider></mat-divider>
+
            <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>

                <mat-list-item *ngFor="let shortcutItem of shortcutItems"
                               (click)="toggleShortcut($event, shortcutItem)">
+
                    <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
+
+                        <mat-icon mat-list-icon class="mr-8 secondary-text" *ngIf="shortcutItem.icon">
+                            {{shortcutItem.icon}}
+                        </mat-icon>
+
                        <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                              fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
                            {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                        </span>
+
                        <p matLine fxFlex>{{shortcutItem.title}}</p>
-                        <mat-icon class="ml-8">star</mat-icon>
+
+                        <mat-icon class="ml-8 amber-fg">star</mat-icon>
+
                    </div>
+
                </mat-list-item>
+
                <mat-list-item *ngIf="shortcutItems.length === 0">
                    <p>
                        <small>No shortcuts yet!</small>
                    </p>
                </mat-list-item>
+
            </mat-nav-list>

            <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+
                <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
                               (click)="toggleShortcut($event, navigationItem)">
+
                    <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
+
+                        <mat-icon mat-list-icon class="mr-8 secondary-text" *ngIf="navigationItem.icon">
+                            {{navigationItem.icon}}
+                        </mat-icon>
+
                        <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                              fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
                            {{navigationItem.title.substr(0, 1).toUpperCase()}}
                        </span>
+
                        <p matLine fxFlex>{{navigationItem.title}}</p>
-                        <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
+
+                        <mat-icon class="ml-8 amber-fg" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
+
                    </div>
+
                </mat-list-item>
+
            </mat-nav-list>
+
        </mat-menu>

    </div>
--- a/src/@fuse/components/shortcuts/shortcuts.component.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
 import { CookieService } from 'ngx-cookie-service';
@@ -7,8 +7,6 @@ import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseConfigService } from '@fuse/services/config.service';

-import { navigation } from 'app/navigation/navigation';
-
@Component({
    selector   : 'fuse-shortcuts',
    templateUrl: './shortcuts.component.html',
@@ -25,6 +23,8 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
    matchMediaSubscription: Subscription;
    onConfigChanged: Subscription;

+    @Input() navigation: any;
+
    @ViewChild('searchInput') searchInputField;
    @ViewChild('shortcuts') shortcutsEl: ElementRef;

@@ -37,8 +37,6 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
        private cookieService: CookieService
    )
    {
-        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(navigation);
-
        this.onConfigChanged =
            this.fuseConfig.onConfigChanged
                .subscribe(
@@ -50,6 +48,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy

    ngOnInit()
    {
+        // Get the navigation items and flatten them
+        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(this.navigation);
+
        const cookieExists = this.cookieService.check('FUSE2.shortcuts');

        if ( cookieExists )
--- a/src/@fuse/components/sidebar/sidebar.component.scss
+++ b/src/@fuse/components/sidebar/sidebar.component.scss
@@ -5,7 +5,8 @@ fuse-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
--- a/src/@fuse/components/sidebar/sidebar.service.ts
+++ b/src/@fuse/components/sidebar/sidebar.service.ts
@@ -46,7 +46,7 @@ export class FuseSidebarService
        // Check if the sidebar exists
        if ( !this._registry[key] )
        {
-            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+            console.warn(`The sidebar with the key '${key}' doesn't exist in the registry.`);
        }

        // Unregister the sidebar
@@ -57,13 +57,14 @@ export class FuseSidebarService
     * Return the sidebar with the given key
     *
     * @param key
+     * @returns {FuseSidebarComponent}
     */
-    getSidebar(key): any
+    getSidebar(key): FuseSidebarComponent
    {
        // Check if the sidebar exists
        if ( !this._registry[key] )
        {
-            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+            console.warn(`The sidebar with the key '${key}' doesn't exist in the registry.`);

            return;
        }
--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/src/@fuse/components/theme-options/theme-options.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';

@@ -6,8 +6,6 @@ import { fuseAnimations } from '@fuse/animations';
 import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';

-import { navigation } from 'app/navigation/navigation';
-
@Component({
    selector   : 'fuse-theme-options',
    templateUrl: './theme-options.component.html',
@@ -16,6 +14,7 @@ import { navigation } from 'app/navigation/navigation';
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
+    @Input() navigation;
    @ViewChild('openButton') openButton;
    @ViewChild('panel') panel;
    @ViewChild('overlay') overlay: ElementRef;
@@ -43,10 +42,17 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                        this.config = newConfig;
                    }
                );
+    }
+
+    ngOnInit()
+    {
+        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
+            this.closeBar();
+        });

        // Get the nav model and add customize nav item
        // that opens the bar programmatically
-        const nav: any = navigation;
+        const nav: any = this.navigation;

        nav.push({
            'id'      : 'custom-function',
@@ -66,13 +72,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
        });
    }

-    ngOnInit()
-    {
-        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
-            this.closeBar();
-        });
-    }
-
    ngOnDestroy()
    {
        this.onConfigChanged.unsubscribe();
--- a/src/@fuse/components/widget/widget.component.scss
+++ b/src/@fuse/components/widget/widget.component.scss
@@ -67,16 +67,16 @@ fuse-widget {

        &.mat-form-field-type-mat-select {

-            .mat-input-wrapper {
+            .mat-form-field-wrapper {
                padding: 16px 0;

-                .mat-input-infix {
+                .mat-form-field-infix {
                    border: none;
                    padding: 0;
                }
            }

-            .mat-input-underline {
+            .mat-form-field-underline {
                display: none;
            }
        }
--- a/src/@fuse/scss/core.scss
+++ b/src/@fuse/scss/core.scss
@@ -1,3 +1,6 @@
+// This file meant to be imported only once! Use fuse.scss to access
+// to the core Fuse and Angular Material mixins
+
 // ngx-datatable
@import '~@swimlane/ngx-datatable/release/themes/material';

@@ -7,10 +10,13 @@
 // Fuse
@import "fuse";

-// Theming
+// Include core Angular Material styles
@include mat-core();

-// Include theme styles for core and each component used in your app.
+// Setup the typography
+@include angular-material-typography($typography);
+
+// Create an Angular Material theme from the $theme map
@include angular-material-theme($theme);

 // Partials
--- a/src/@fuse/scss/fuse.scss
+++ b/src/@fuse/scss/fuse.scss
@@ -1,4 +1,5 @@
-// Variables
-@import "variables/theme";
-// Mixins
+// Material theming
+@import "theming";
+
+// Breakpoint mixins
@import "mixins/breakpoints";
--- a/src/@fuse/scss/partials/_angular-material-fix.scss
+++ b/src/@fuse/scss/partials/_angular-material-fix.scss
@@ -7,7 +7,7 @@
 }

 // Fix: "Inconsistent font sizes across elements"
-.mat-input-wrapper {
+.mat-form-field-wrapper {
    font-size: 16px;
 }

@@ -34,7 +34,7 @@

    &.mat-form-field-type-mat-select {

-        .mat-input-infix {
+        .mat-form-field-infix {
            display: inline-flex;
            width: auto;

@@ -57,7 +57,7 @@
    }
 }

-// Fix: "Stepper icons are broken due to Fuse's icon helpers"
+// Fix: Stepper icons are broken due to Fuse's icon helpers
 mat-horizontal-stepper,
 mat-vertical-stepper {

@@ -68,7 +68,7 @@ mat-vertical-stepper {
            width: 16px !important;
            min-width: 0 !important;
            min-height: 0 !important;
-            color: rgba(255, 255, 255, 0.87) !important;
+            color: inherit !important;
        }
    }
 }
@@ -76,3 +76,12 @@ mat-vertical-stepper {
 mat-vertical-stepper {
    padding: 16px 0;
 }
+
+// Fix: Chip remove icon is broken due to Fuse's icon helpers
+mat-chip {
+
+    mat-icon {
+        min-width: 0 !important;
+        min-height: 0 !important;
+    }
+}
--- a/src/@fuse/scss/partials/_colors.scss
+++ b/src/@fuse/scss/partials/_colors.scss
@@ -1,6 +1,6 @@
 .secondary-text,
-.mat-icon,
-.icon {
+.icon,
+i {
    color: rgba(0, 0, 0, 0.54);
 }

@@ -51,7 +51,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
    // If the base text color is black...
    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {

-        .mat-icon,
+        i,
        .icon {
            color: rgba(0, 0, 0, 0.54);
        }
@@ -81,7 +81,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
        // If the base text color is white...
    @else {

-        .mat-icon,
+        i,
        .icon {
            color: rgba(255, 255, 255, 1);
        }
@@ -135,11 +135,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
    }

    // Input
-    .mat-input-placeholder {
+    .mat-form-field-label {
        color: map_get($fuseForeground, hint-text);
    }

-    .mat-input-underline {
+    .mat-form-field-underline {
        background-color: map_get($fuseForeground, divider);
    }

--- a/src/@fuse/scss/partials/_icons.scss
+++ b/src/@fuse/scss/partials/_icons.scss
@@ -1,6 +1,5 @@
 i,
 mat-icon {
-    color: rgba(0, 0, 0, 0.54);
    font-size: 24px;
    width: 24px;
    height: 24px;
--- a/src/@fuse/scss/partials/_reset.scss
+++ b/src/@fuse/scss/partials/_reset.scss
@@ -28,7 +28,7 @@ html, body {
 }

 // Reset non angular-material input's default browser/os styles
-*:not(mat-input-container) {
+*:not(mat-form-field) {

    > input {
        border: none;
@@ -55,7 +55,7 @@ html, body {
    }
 }

-*:not(mat-input-container) {
+*:not(mat-form-field) {

    > input[type="button"],
    > button,
--- a/src/@fuse/scss/variables/_theme.scss
+++ b/src/@fuse/scss/variables/_theme.scss
@@ -1,5 +1,6 @@
@import '~@angular/material/theming';

+// Custom color maps
 $mat-white: (
    500: white,
    contrast: (
@@ -47,13 +48,19 @@ $mat-fusedark: (
    )
 );

-// Palettes
+// Define the Material palettes
 $primary: mat-palette($mat-fusedark);
 $accent: mat-palette($mat-light-blue, 600, 400, 700);
 $warn: mat-palette($mat-red);

-// Create the theme object (a Sass map containing all of the palettes).
+// Create the Material theme object
 $theme: mat-light-theme($primary, $accent, $warn);

+// Store the background and foreground colors for easier access
 $background: map-get($theme, background);
 $foreground: map-get($theme, foreground);
+
+// Force the input field font sizes to 16px
+$typography: mat-typography-config(
+    $input: mat-typography-level(16px, 1.125, 400)
+)
--- a/src/@fuse/services/config.service.ts
+++ b/src/@fuse/services/config.service.ts
@@ -1,25 +1,8 @@
-import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Platform } from '@angular/cdk/platform';
-
-// Define the default config
-const DEFAULT_CONFIG = {
-    layout          : {
-        navigation      : 'left', // 'right', 'left', 'top', 'none'
-        navigationFolded: false, // true, false
-        toolbar         : 'below', // 'above', 'below', 'none'
-        footer          : 'below', // 'above', 'below', 'none'
-        mode            : 'fullwidth' // 'boxed', 'fullwidth'
-    },
-    colorClasses    : {
-        toolbar: 'mat-white-500-bg',
-        navbar : 'mat-fuse-dark-700-bg',
-        footer : 'mat-fuse-dark-900-bg'
-    },
-    customScrollbars: true,
-    routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
-};
+import * as _ from 'lodash';

 // Create the injection token for the custom config
 export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
@@ -29,6 +12,7 @@ export class FuseConfigService
 {
    config: any;
    defaultConfig: any;
+    isSetConfigRan = false;

    onConfigChanged: BehaviorSubject<any>;

@@ -42,18 +26,11 @@ export class FuseConfigService
    constructor(
        private router: Router,
        public platform: Platform,
-        @Inject(FUSE_CONFIG) @Optional() config
+        @Inject(FUSE_CONFIG) config
    )
    {
-        // Set the default settings from the constant
-        this.defaultConfig = DEFAULT_CONFIG;
-
-        // If custom config provided with forRoot,
-        // use them as default config...
-        if ( config )
-        {
+        // Set the default config from the user provided one (forRoot)
        this.defaultConfig = config;
-        }

        /**
         * Disable Custom Scrollbars if Browser is Mobile
@@ -64,14 +41,25 @@ export class FuseConfigService
        }

        // Set the config from the default config
-        this.config = {...this.defaultConfig};
+        this.config = _.cloneDeep(this.defaultConfig);

        // Reload the default settings for the
        // layout on every navigation start
        router.events.subscribe(
            (event) => {
+
                if ( event instanceof NavigationStart )
                {
+                    this.isSetConfigRan = false;
+                }
+
+                if ( event instanceof NavigationEnd )
+                {
+                    if ( this.isSetConfigRan )
+                    {
+                        return;
+                    }
+
                    this.setConfig({
                            layout: this.defaultConfig.layout
                        }
@@ -91,20 +79,11 @@ export class FuseConfigService
     */
    setConfig(config): void
    {
-        // Set the config from the given object
-        // Ugly, but works for now...
-        this.config = {
-            ...this.config,
-            ...config,
-            layout     : {
-                ...this.config.layout,
-                ...config.layout,
-            },
-            colorClasses: {
-                ...this.config.colorClasses,
-                ...config.colorClasses
-            }
-        };
+        // Set the SetConfigRan true
+        this.isSetConfigRan = true;
+
+        // Merge the config
+        this.config = _.merge({}, this.config, config);

        // Trigger the event
        this.onConfigChanged.next(this.config);
--- a/src/app/fuse-fake-db/mail.ts
+++ b/src/app/fuse-fake-db/mail.ts
@@ -442,13 +442,15 @@ export class MailFakeDb
            'id'    : 0,
            'handle': 'starred',
            'title' : 'Starred',
-            'icon'  : 'star'
+            'icon'  : 'star',
+            'color' : 'amber-fg'
        },
        {
            'id'    : 1,
            'handle': 'important',
            'title' : 'Important',
-            'icon'  : 'label'
+            'icon'  : 'label',
+            'color' : 'red-fg'
        }
    ];

--- a/src/app/main/content/apps/academy/course/course.component.html
+++ b/src/app/main/content/apps/academy/course/course.component.html
@@ -3,7 +3,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="academy-left-sidenav" mat-is-locked-open="gt-md">

            <div class="sidenav-content" fusePerfectScrollbar>
@@ -33,12 +33,12 @@
            <!-- HEADER -->
            <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

-                <button mat-button class="mat-icon-button mr-16 sidenav-toggle"
+                <button mat-icon-button class="mr-16 sidenav-toggle"
                        fuseMatSidenavToggler="academy-left-sidenav" fxHide.gt-md>
                    <mat-icon>menu</mat-icon>
                </button>

-                <button mat-button class="mat-icon-button mr-16" [routerLink]="'/apps/academy/courses'">
+                <button mat-icon-button class="mr-16" [routerLink]="'/apps/academy/courses'">
                    <mat-icon>arrow_back</mat-icon>
                </button>

--- a/src/app/main/content/apps/academy/courses/courses.component.html
+++ b/src/app/main/content/apps/academy/courses/courses.component.html
@@ -33,7 +33,7 @@
                <mat-form-field class="category-selector">

                    <mat-select placeholder="Select Category" [(ngModel)]="currentCategory"
-                                (change)="filterCoursesByCategory()">
+                                (selectionChange)="filterCoursesByCategory()">
                        <mat-option [value]="'all'">
                            All
                        </mat-option>
@@ -46,10 +46,11 @@

            </div>

-            <div class="courses" fxLayout="row wrap" fxLayoutAlign="center">
+            <div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [@animateStagger]="{value:'50'}"
+                 *fuseIfOnDom>

                <div class="course" *ngFor="let course of filteredCourses" fxFlex="100" fxFlex.gt-xs="50"
-                     fxFlex.gt-sm="33" [ngClass]="course.category">
+                     fxFlex.gt-sm="33" [ngClass]="course.category" [@animate]="{value:'*',params:{y:'100%'}}">

                    <div class="course-content" fxLayout="column">

--- a/src/app/main/content/apps/academy/courses/courses.component.ts
+++ b/src/app/main/content/apps/academy/courses/courses.component.ts
@@ -1,12 +1,15 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';

+import { fuseAnimations } from '@fuse/animations';
+
 import { AcademyCoursesService } from '../courses.service';

@Component({
    selector   : 'fuse-academy-courses',
    templateUrl: './courses.component.html',
-    styleUrls  : ['./courses.component.scss']
+    styleUrls  : ['./courses.component.scss'],
+    animations   : fuseAnimations
 })
 export class FuseAcademyCoursesComponent implements OnInit, OnDestroy
 {
--- a/src/app/main/content/apps/calendar/calendar.component.html
+++ b/src/app/main/content/apps/calendar/calendar.component.html
@@ -15,31 +15,27 @@
                <!-- TOOLBAR -->
                <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">

-                    <button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search">
+                    <button mat-icon-button aria-label="Search" matTooltip="Search">
                        <mat-icon>search</mat-icon>
                    </button>

-                    <button mat-button class="mat-icon-button"
+                    <button mat-icon-button
                            mwlCalendarToday
                            [(viewDate)]="viewDate"
                            (viewDateChange)="selectedDay = {date:$event}"
                            aria-label="Today" matTooltip="Today">
-                        <!--(click)="selectedDay = viewDate"-->
                        <mat-icon>today</mat-icon>
                    </button>

-                    <button mat-button class="mat-icon-button" (click)="view='day'"
-                            aria-label="Day" matTooltip="Day">
+                    <button mat-icon-button (click)="view='day'" aria-label="Day" matTooltip="Day">
                        <mat-icon>view_day</mat-icon>
                    </button>

-                    <button mat-button class="mat-icon-button" (click)="view='week'"
-                            aria-label="Week" matTooltip="Week">
+                    <button mat-icon-button (click)="view='week'" aria-label="Week" matTooltip="Week">
                        <mat-icon>view_week</mat-icon>
                    </button>

-                    <button mat-button class="mat-icon-button" (click)="view='month'"
-                            aria-label="Month" matTooltip="Month">
+                    <button mat-icon-button (click)="view='month'" aria-label="Month" matTooltip="Month">
                        <mat-icon>view_module</mat-icon>
                    </button>
                </div>
@@ -50,7 +46,7 @@
            <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
                 *fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}">

-                <button mat-button class="mat-icon-button arrow"
+                <button mat-icon-button class="arrow"
                        mwlCalendarPreviousView
                        [view]="view"
                        [(viewDate)]="viewDate"
@@ -63,7 +59,7 @@
                    {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
                </div>

-                <button mat-button class="mat-icon-button arrow"
+                <button mat-icon-button class="arrow"
                        mwlCalendarNextView
                        [view]="view"
                        [(viewDate)]="viewDate"
--- a/src/app/main/content/apps/calendar/event-form/event-form.component.html
+++ b/src/app/main/content/apps/calendar/event-form/event-form.component.html
@@ -1,13 +1,11 @@
 <div class="dialog-content-wrapper">
-    <mat-toolbar matDialogTitle class="mat-accent m-0">
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <mat-toolbar class="mat-accent m-0">
+        <mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="space-between center">
            <span class="title dialog-title">{{dialogTitle}}</span>
-            <button mat-button class="mat-icon-button"
-                    (click)="dialogRef.close()"
-                    aria-label="Close dialog">
+            <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                <mat-icon>close</mat-icon>
            </button>
-        </div>
+        </mat-toolbar-row>
    </mat-toolbar>

    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
@@ -136,8 +134,7 @@
        </button>

        <button *ngIf="action ==='edit'"
-                mat-button
-                class="mat-icon-button"
+                mat-icon-button
                (click)="dialogRef.close(['delete',eventForm])"
                aria-label="Delete"
                matTooltip="Delete">
--- a/src/app/main/content/apps/chat/chat-view/chat-view.component.html
+++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.html
@@ -9,11 +9,11 @@
            <div fxLayout="row" fxLayoutAlign="start center">

                <!-- RESPONSIVE CHATS BUTTON-->
-                <div mat-button fxHide.gt-md class="responsive-chats-button mat-icon-button mr-16"
+                <button mat-icon-button fxHide.gt-md class="responsive-chats-button mr-16"
                        fuseMatSidenavToggler="chat-left-sidenav"
                        aria-label="chats button">
-                    <mat-icon class="s-36">chat</mat-icon>
-                </div>
+                    <mat-icon>chat</mat-icon>
+                </button>
                <!-- / RESPONSIVE CHATS BUTTON-->

                <!-- CHAT CONTACT-->
@@ -40,8 +40,7 @@
            </div>

            <div>
-                <button mat-button class="mat-icon-button" [matMenuTriggerFor]="contactMenu"
-                        aria-label="more">
+                <button mat-icon-button [matMenuTriggerFor]="contactMenu" aria-label="more">
                    <mat-icon>more_vert</mat-icon>
                </button>

@@ -98,7 +97,7 @@
              fxLayout="row"
              fxLayoutAlign="start center">

-            <mat-form-field class="" fxFlex floatPlaceholder="never">
+            <mat-form-field class="" fxFlex floatLabel="never">
                <textarea matInput #replyInput placeholder="Type and hit enter to send message"
                          ngModel name="message"></textarea>
            </mat-form-field>
--- a/src/app/main/content/apps/chat/chat.component.html
+++ b/src/app/main/content/apps/chat/chat.component.html
@@ -13,7 +13,7 @@
            <mat-sidenav-container>

                <!-- LEFT SIDENAV -->
-                <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+                <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                             fuseMatSidenavHelper="chat-left-sidenav" mat-is-locked-open="gt-md">
                    <fuse-chat-left-sidenav></fuse-chat-left-sidenav>
                </mat-sidenav>
@@ -26,7 +26,7 @@
                <!-- / CONTENT -->

                <!-- RIGHT SIDENAV -->
-                <mat-sidenav class="sidenav" align="end" opened="false" mode="over"
+                <mat-sidenav class="sidenav" position="end" opened="false" mode="over"
                             fuseMatSidenavHelper="chat-right-sidenav">
                    <fuse-chat-right-sidenav></fuse-chat-right-sidenav>
                </mat-sidenav>
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
@@ -56,7 +56,7 @@
            <!-- / USER AVATAR -->

            <div>
-                <button mat-button class="mat-icon-button"
+                <button mat-icon-button
                        [matMenuTriggerFor]="userMenu"
                        aria-label="more">
                    <mat-icon>more_vert</mat-icon>
--- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.html
@@ -7,7 +7,7 @@
        <!-- TOOLBAR TOP -->
        <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">

-            <button mat-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back">
+            <button mat-icon-button (click)="changeLeftSidenavView('chats')" aria-label="back">
                <mat-icon>arrow_back</mat-icon>
            </button>

--- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html
@@ -9,7 +9,7 @@

            <div>Contact Info</div>

-            <button mat-button class="mat-icon-button" fuseMatSidenavToggler="chat-right-sidenav" aria-label="close">
+            <button mat-icon-button fuseMatSidenavToggler="chat-right-sidenav" aria-label="close">
                <mat-icon>close</mat-icon>
            </button>

@@ -36,7 +36,7 @@
    <!-- CONTACT MOOD -->
    <mat-card>

-        <mat-form-field fxFlex>
+        <mat-form-field class="w-100-p">
            <textarea matInput placeholder="Mood" name="mood"
                      [value]="contact.mood" rows="3" disabled>
            </textarea>
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.html
@@ -2,17 +2,15 @@
    <mat-toolbar matDialogTitle class="mat-accent m-0">
        <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
            <span class="title dialog-title">{{dialogTitle}}</span>
-            <button mat-button class="mat-icon-button"
-                    (click)="dialogRef.close()"
-                    aria-label="Close dialog">
+            <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                <mat-icon>close</mat-icon>
            </button>
        </mat-toolbar-row>

-        <mat-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
-            <img [src]="contact.avatar" class=" avatar contact-avatar huge"
+        <mat-toolbar-row class="toolbar-bottom py-16" fxLayout="column" fxLayoutAlign="center center">
+            <img [src]="contact.avatar" class="avatar contact-avatar huge m-0"
                 [alt]="contact.name"/>
-            <div class="contact-name">{{contact.name}}</div>
+            <div class="contact-name mt-8">{{contact.name}} {{contact.lastName}}</div>
        </mat-toolbar-row>
    </mat-toolbar>

@@ -21,56 +19,57 @@
        <form [formGroup]="contactForm">

            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">account_circle</mat-icon>
                <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
                    <input name="name" formControlName="name" placeholder="Name" matInput required>
                </mat-form-field>
            </div>

            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12"></mat-icon>
                <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
                    <input name="lastName" formControlName="lastName" placeholder="Lastname" matInput>
                </mat-form-field>
            </div>

            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">star</mat-icon>
                <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">star</mat-icon>
                    <input name="nickname" formControlName="nickname" matInput placeholder="Nickname">
                </mat-form-field>
            </div>

            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">phone</mat-icon>
                <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">phone</mat-icon>
                    <input formControlName="phone" matInput placeholder="Phone number">
                </mat-form-field>
            </div>

            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">email</mat-icon>
                <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">email</mat-icon>
                    <input name="email" formControlName="email" matInput type="email" placeholder="Email">
                </mat-form-field>
            </div>

            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">domain</mat-icon>
                <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">domain</mat-icon>
                    <input name="company" formControlName="company" matInput placeholder="Company">
                </mat-form-field>
            </div>

            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">work</mat-icon>
                <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">work</mat-icon>
                    <input name="jobTitle" formControlName="jobTitle" matInput placeholder="Job title">
                </mat-form-field>
            </div>

            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field class="mr-24" fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">cake</mat-icon>
                    <input matInput [matDatepicker]="birthdayDatePicker" placeholder="Birthday">
                    <mat-datepicker-toggle matSuffix [for]="birthdayDatePicker"></mat-datepicker-toggle>
                    <mat-datepicker #birthdayDatePicker></mat-datepicker>
@@ -78,16 +77,16 @@
            </div>

            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">home</mat-icon>
                <mat-form-field fxFlex>
+                    <mat-icon matPrefix class="mr-12 s-20 secondary-text">home</mat-icon>
                    <input name="address" formControlName="address" matInput placeholder="Address">
                </mat-form-field>
            </div>

            <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
-                <mat-icon class="mr-12 mt-12">note</mat-icon>
                <mat-form-field fxFlex>
-                    <textarea name="notes" formControlName="notes" placeholder="Notes" matInput type="text" max-rows="4"></textarea>
+                    <textarea name="notes" formControlName="notes" placeholder="Notes" matInput type="text"
+                              max-rows="4"></textarea>
                </mat-form-field>
            </div>

@@ -116,8 +115,7 @@
        </button>

        <button *ngIf="action ==='edit'"
-                mat-button
-                class="mat-icon-button"
+                mat-icon-button
                (click)="dialogRef.close(['delete',contactForm])"
                aria-label="Delete"
                matTooltip="Delete">
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
@@ -12,9 +12,9 @@

    .mat-dialog-container {
        padding: 0;
-        overflow: hidden;

        .mat-toolbar {
+            flex: 1 0 auto;
            min-height: initial;
        }

--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.html
@@ -73,13 +73,13 @@
        <mat-cell *cdkCellDef="let contact">
            <div fxFlex="row" fxLayoutAlign="end center">
                <button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
-                    <mat-icon *ngIf="user.starred.includes(contact.id)">star</mat-icon>
-                    <mat-icon *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
+                    <mat-icon class="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
+                    <mat-icon class="secondary-text" *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
                </button>

                <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More"
                        (click)="$event.stopPropagation();">
-                    <mat-icon>more_vert</mat-icon>
+                    <mat-icon class="secondary-text">more_vert</mat-icon>
                </button>

                <mat-menu #moreMenu="matMenu">
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
@@ -1,18 +1,18 @@
@import "src/@fuse/scss/fuse";

 fuse-contacts-contact-list {
-    flex: 1;
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;

    .mat-table {
+        width: 100%;
        background: transparent;
        box-shadow: none;

        .mat-column-checkbox {
-            flex: 0 1 48px;
-
-            .mat-checkbox-ripple {
-                display: none !important; //fix for broken rendering
-            }
+            flex: 0 1 64px;
+            padding-left: 18px;
        }

        .mat-column-avatar {
@@ -26,7 +26,7 @@ fuse-contacts-contact-list {
        .mat-row {
            position: relative;
            cursor: pointer;
-            padding: 8px 8px 8px 24px;
+            padding: 8px;

            .mat-cell {
                min-width: 0;
@@ -34,6 +34,7 @@ fuse-contacts-contact-list {
                &.mat-column-detail-button {
                    flex: 0 1 auto;
                    padding: 0 24px 0 0;
+
                    @include media-breakpoint('gt-md') {
                        display: none;
                    }
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
@@ -30,6 +30,7 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
    checkboxes: {};

    onContactsChangedSubscription: Subscription;
+    onFilterChangedSubscription: Subscription;
    onSelectedContactsChangedSubscription: Subscription;
    onUserDataChangedSubscription: Subscription;

@@ -72,6 +73,10 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
                this.user = user;
            });

+        this.onFilterChangedSubscription =
+            this.contactsService.onFilterChanged.subscribe(() => {
+                this.contactsService.deselectContacts();
+            });
    }

    ngOnInit()
@@ -82,6 +87,7 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
    ngOnDestroy()
    {
        this.onContactsChangedSubscription.unsubscribe();
+        this.onFilterChangedSubscription.unsubscribe();
        this.onSelectedContactsChangedSubscription.unsubscribe();
        this.onUserDataChangedSubscription.unsubscribe();
    }
--- a/src/app/main/content/apps/contacts/contacts.component.html
+++ b/src/app/main/content/apps/contacts/contacts.component.html
@@ -7,7 +7,7 @@
        <!-- APP TITLE -->
        <div fxLayout="row" fxLayoutAlign="start center">

-            <button mat-button class="mat-icon-button sidenav-toggle mr-12"
+            <button mat-icon-button class="sidenav-toggle mr-12"
                    fuseMatSidenavToggler="contacts-main-sidenav"
                    fxHide.gt-md>
                <mat-icon>menu</mat-icon>
@@ -26,7 +26,7 @@
            <label for="search" class="mr-8">
                <mat-icon>search</mat-icon>
            </label>
-            <mat-form-field mat-no-float class="m-0" floatPlaceholder="never">
+            <mat-form-field mat-no-float class="m-0" floatLabel="never">
                <input matInput [formControl]="searchInput" id="search" placeholder="Search for anything">
            </mat-form-field>
        </div>
@@ -42,7 +42,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="contacts-main-sidenav" mat-is-locked-open="gt-sm">

            <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>
--- a/src/app/main/content/apps/contacts/contacts.service.ts
+++ b/src/app/main/content/apps/contacts/contacts.service.ts
@@ -120,7 +120,7 @@ export class ContactsService implements Resolve<any>
     */
    toggleSelectedContact(id)
    {
-        // First, check if we already have that todo as selected...
+        // First, check if we already have that contact as selected...
        if ( this.selectedContacts.length > 0 )
        {
            const index = this.selectedContacts.indexOf(id);
--- a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
+++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
@@ -11,7 +11,7 @@

        <div>
            <span class="selected-contacts-count">
-                <span>{{selectedContacts.length}}</span>
+                <span class="mr-4">{{selectedContacts.length}}</span>
                <span>selected</span>
            </span>

--- a/src/app/main/content/apps/dashboards/analytics/analytics.component.html
+++ b/src/app/main/content/apps/dashboards/analytics/analytics.component.html
@@ -41,7 +41,7 @@

    <div class="content">

-        <div class="left mr-32">
+        <div class="left mr-lg-32">

            <div class="pb-24 font-size-18 font-weight-300">
                How are your active users trending over time?
@@ -265,7 +265,7 @@
            <div fxLayout="row wrap" fxLayout.gt-md="column">

                <!-- Widget 7 -->
-                <div class="mb-48" [ngClass.lt-lg]="'mr-32'">
+                <div class="mb-48" [ngClass.lt-lg]="'mr-32'" [ngClass.xs]="'mr-0'">

                    <div class="pb-24 font-size-18 font-weight-300">
                        What are your top devices?
@@ -337,7 +337,7 @@
                <!-- / Widget 7 -->

                <!-- Widget 8 -->
-                <div class="mb-48" [ngClass.lt-lg]="'mr-32'">
+                <div class="mb-48" [ngClass.lt-lg]="'mr-32'" [ngClass.xs]="'mr-0'">

                    <div class="pb-24 font-size-18 font-weight-300">
                        How are your sales?
@@ -439,7 +439,7 @@
                <!-- / Widget 8 -->

                <!-- Widget 9 -->
-                <div class="mb-48" [ngClass.lt-lg]="'mr-32'">
+                <div class="mb-48" [ngClass.lt-lg]="'mr-32'" [ngClass.xs]="'mr-0'">

                    <div class="pb-24 font-size-18 font-weight-300" [ngClass.lt-lg]="'pt-0'">
                        What are your top campaigns?
--- a/src/app/main/content/apps/dashboards/analytics/analytics.component.scss
+++ b/src/app/main/content/apps/dashboards/analytics/analytics.component.scss
@@ -43,6 +43,15 @@
                min-width: 0;
                max-width: none;
            }
+
+            .fuse-card {
+
+                @include media-breakpoint-down('md') {
+                    width: 100%;
+                    min-width: 0;
+                    max-width: none;
+                }
+            }
        }
    }

--- a/src/app/main/content/apps/dashboards/analytics/analytics.module.ts
+++ b/src/app/main/content/apps/dashboards/analytics/analytics.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';

-import { MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTabsModule } from '@angular/material';
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTabsModule } from '@angular/material';

 import { AgmCoreModule } from '@agm/core';
 import { ChartsModule } from 'ng2-charts';
@@ -31,6 +31,7 @@ const routes: Routes = [
    imports     : [
        RouterModule.forChild(routes),

+        MatButtonModule,
        MatFormFieldModule,
        MatIconModule,
        MatMenuModule,
--- a/src/app/main/content/apps/dashboards/project/project.component.html
+++ b/src/app/main/content/apps/dashboards/project/project.component.html
@@ -666,8 +666,8 @@

                                        <!-- Avatar Column -->
                                        <ng-container cdkColumnDef="avatar">
-                                            <mat-header-cell fxFlex="64px" *cdkHeaderCellDef></mat-header-cell>
-                                            <mat-cell fxFlex="64px" *cdkCellDef="let contact">
+                                            <mat-header-cell fxFlex="96px" *cdkHeaderCellDef></mat-header-cell>
+                                            <mat-cell fxFlex="96px" *cdkCellDef="let contact">
                                                <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                                                     [src]="contact.avatar"/>
                                            </mat-cell>
@@ -750,7 +750,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="end" mode="side" opened="true"
+        <mat-sidenav class="sidenav" position="end" mode="side" opened="true"
                     fuseMatSidenavHelper="dashboards-right-sidenav" mat-is-locked-open="gt-md">

            <div class="sidenav-content" fusePerfectScrollbar>
--- a/src/app/main/content/apps/e-commerce/order/order.component.html
+++ b/src/app/main/content/apps/e-commerce/order/order.component.html
@@ -14,7 +14,7 @@
            <!-- APP TITLE -->
            <div fxLayout="row" fxLayoutAlign="start center">

-                <button class="mr-16" mat-icon-button [routerLink]="'/apps/e-commerce/orders'">
+                <button mat-icon-button class="mr-16" [routerLink]="'/apps/e-commerce/orders'">
                    <mat-icon>arrow_back</mat-icon>
                </button>

@@ -49,7 +49,7 @@
                            <div class="section pb-48">

                                <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
-                                    <mat-icon class="m-0 mr-16">account_circle</mat-icon>
+                                    <mat-icon class="m-0 mr-16 secondary-text">account_circle</mat-icon>
                                    <div class="h2 secondary-text">Customer</div>
                                </div>

@@ -88,7 +88,7 @@
                                <mat-tab-group class="addresses">

                                    <mat-tab label="Shipping Address">
-                                        <div fxFlex fxLayout="column" *fuseIfOnDom>
+                                        <div fxFlex fxLayout="column">
                                            <div class="address h4 py-24">{{order.customer.shippingAddress.address}}</div>
                                            <agm-map class="w-100-p h-400" [zoom]="15"
                                                     [latitude]="order.customer.shippingAddress.lat"
@@ -101,7 +101,7 @@
                                    </mat-tab>

                                    <mat-tab label="Invoice Address" fxLayout="column">
-                                        <div fxFlex fxLayout="column" *fuseIfOnDom>
+                                        <div fxFlex fxLayout="column">
                                            <div class="address h4 py-24">{{order.customer.invoiceAddress.address}}</div>
                                            <agm-map class="w-100-p h-400" [zoom]="15"
                                                     [latitude]="order.customer.invoiceAddress.lat"
@@ -118,7 +118,7 @@
                            <div class="section pb-48">

                                <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
-                                    <mat-icon class="m-0 mr-16">access_time</mat-icon>
+                                    <mat-icon class="m-0 mr-16 secondary-text">access_time</mat-icon>
                                    <div class="h2 secondary-text">Order Status</div>
                                </div>

@@ -172,7 +172,7 @@
                            <div class="section pb-48">

                                <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
-                                    <mat-icon class="m-0 mr-16">attach_money</mat-icon>
+                                    <mat-icon class="m-0 mr-16 secondary-text">attach_money</mat-icon>
                                    <div class="h2 secondary-text">Payment</div>
                                </div>

@@ -216,7 +216,7 @@
                            <div class="section pb-48">

                                <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
-                                    <mat-icon class="m-0 mr-16">local_shipping</mat-icon>
+                                    <mat-icon class="m-0 mr-16 secondary-text">local_shipping</mat-icon>
                                    <div class="h2 secondary-text">Shipping</div>
                                </div>

--- a/src/app/main/content/apps/e-commerce/orders/orders.component.html
+++ b/src/app/main/content/apps/e-commerce/orders/orders.component.html
@@ -21,12 +21,12 @@
            <!-- / APP TITLE -->

            <!-- SEARCH -->
-            <div class="search-input-wrapper ml-8 m-sm-0"
+            <div class="search-input-wrapper ml-sm-16"
                 fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
                <label for="search" class="mr-8">
                    <mat-icon class="secondary-text">search</mat-icon>
                </label>
-                <mat-form-field floatPlaceholder="never" fxFlex="1 0 auto">
+                <mat-form-field floatLabel="never" fxFlex="1 0 auto">
                    <input id="search" matInput #filter placeholder="Search">
                </mat-form-field>
            </div>
--- a/src/app/main/content/apps/e-commerce/orders/orders.component.scss
+++ b/src/app/main/content/apps/e-commerce/orders/orders.component.scss
@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 :host {

    .header {
@@ -5,6 +7,13 @@
        .search-input-wrapper {
            max-width: 480px;
        }
+
+        @include media-breakpoint-down(xs) {
+            margin: 24px 0;
+            height: 128px !important;
+            min-height: 128px !important;
+            max-height: 128px !important;
+        }
    }

    .mat-tab-group,
--- a/src/app/main/content/apps/e-commerce/product/product.component.html
+++ b/src/app/main/content/apps/e-commerce/product/product.component.html
@@ -13,11 +13,12 @@
            <!-- APP TITLE -->
            <div fxLayout="row" fxLayoutAlign="start center">

-                <button class="mr-0 mr-sm-16" mat-icon-button [routerLink]="'/apps/e-commerce/products'">
+                <button mat-icon-button class="mr-0 mr-sm-16" [routerLink]="'/apps/e-commerce/products'">
                    <mat-icon>arrow_back</mat-icon>
                </button>

-                <div class="product-image mr-8 mr-sm-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+                <div class="product-image mr-8 mr-sm-16" *fuseIfOnDom
+                     [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
                    <img *ngIf="product.images[0]" [src]="product.images[0].url">
                    <img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
                </div>
@@ -38,14 +39,14 @@
            <!-- / APP TITLE -->

            <button mat-raised-button
-                    class="save-product-button mat-white-bg mt-16 mt-sm-0"
+                    class="save-product-button mat-white-bg"
                    [disabled]="productForm.invalid"
                    *ngIf="pageType ==='new'" (click)="addProduct()">
                <span>ADD</span>
            </button>

            <button mat-raised-button
-                    class="save-product-button mat-white-bg mt-16 mt-sm-0"
+                    class="save-product-button mat-white-bg"
                    [disabled]="productForm.invalid || productForm.pristine"
                    *ngIf="pageType ==='edit'" (click)="saveProduct()">
                <span>SAVE</span>
@@ -64,6 +65,7 @@
                    <mat-tab-group>

                        <mat-tab label="Basic Info">
+
                            <div class="tab-content p-24" fusePerfectScrollbar>

                                <mat-form-field class="w-100-p">
@@ -83,44 +85,46 @@
                                    </textarea>
                                </mat-form-field>

-                                <h3 class="mb-0">Categories</h3>
-                                <mat-form-field class="w-100-p" floatPlaceholder="never">
-                                    <mat-chip-list matPrefix #categoryList
-                                                   name="categories"
-                                                   formControlName="categories">
+                                <mat-form-field class="w-100-p">
+
+                                    <mat-chip-list #categoryList name="categories" formControlName="categories">

                                        <mat-chip *ngFor="let category of product.categories"
-                                                  removable="true" (removed)="product.removeCategory(category)">
+                                                  [removable]="true" (removed)="product.removeCategory(category)">
                                            {{category}}
                                            <mat-icon matChipRemove>cancel</mat-icon>
                                        </mat-chip>
+
+                                        <input placeholder="Categories"
+                                               [matChipInputFor]="categoryList"
+                                               [matChipInputAddOnBlur]="true"
+                                               (matChipInputTokenEnd)="product.addCategory($event)"/>
+
                                    </mat-chip-list>
-                                    <input matInput
-                                           matChipInputAddOnBlur="true"
-                                           (matChipInputTokenEnd)="product.addCategory($event)"
-                                           placeholder="Add category..."
-                                           [matChipInputFor]="categoryList"/>
+
                                </mat-form-field>

-                                <h3 class="mb-0">Tags</h3>
-                                <mat-form-field class="w-100-p" floatPlaceholder="never">
-                                    <mat-chip-list matPrefix #tagList
-                                                   name="tags"
-                                                   formControlName="tags">
+                                <mat-form-field class="w-100-p">
+
+                                    <mat-chip-list #tagList name="tags" formControlName="tags">

                                        <mat-chip *ngFor="let tag of product.tags"
-                                                  removable="true" (removed)="product.removeTag(tag)">
+                                                  [removable]="true" (removed)="product.removeTag(tag)">
                                            {{tag}}
                                            <mat-icon matChipRemove>cancel</mat-icon>
                                        </mat-chip>
+
+                                        <input placeholder="Tags"
+                                               [matChipInputFor]="tagList"
+                                               [matChipInputAddOnBlur]="true"
+                                               (matChipInputTokenEnd)="product.addTag($event)"/>
+
                                    </mat-chip-list>
-                                    <input matInput
-                                           matChipInputAddOnBlur="true"
-                                           (matChipInputTokenEnd)="product.addTag($event)"
-                                           placeholder="Add tag..."
-                                           [matChipInputFor]="tagList"/>
+
                                </mat-form-field>
+
                            </div>
+
                        </mat-tab>

                        <mat-tab label="Product Images">
@@ -129,7 +133,8 @@

                                    <div *ngIf="product.images.length === 0"
                                         class="product-image" fxlayout="row" fxLayoutAlign="center center">
-                                        <img class="media" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
+                                        <img class="media"
+                                             [src]="'assets/images/ecommerce/product-image-placeholder.png'">
                                    </div>

                                    <div *ngFor="let image of product.images">
@@ -175,7 +180,8 @@
                                           formControlName="comparedPrice"
                                           placeholder="Compared Price" type="number">
                                    <span matPrefix>$&nbsp;</span>
-                                    <mat-hint align="start">Add a compare price to show next to the real price</mat-hint>
+                                    <mat-hint align="start">Add a compare price to show next to the real price
+                                    </mat-hint>
                                </mat-form-field>

                            </div>
--- a/src/app/main/content/apps/e-commerce/products/products.component.html
+++ b/src/app/main/content/apps/e-commerce/products/products.component.html
@@ -15,18 +15,23 @@
            <!-- APP TITLE -->
            <div class="logo my-12 m-sm-0"
                 fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">shopping_basket</mat-icon>
-                <span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Products</span>
+                <mat-icon class="logo-icon mr-16" *fuseIfOnDom
+                          [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+                    shopping_basket
+                </mat-icon>
+                <span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
+                    Products
+                </span>
            </div>
            <!-- / APP TITLE -->

            <!-- SEARCH -->
-            <div class="search-input-wrapper mx-12 m-md-0"
+            <div class="search-input-wrapper mx-24 m-md-0"
                 fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
                <label for="search" class="mr-8">
                    <mat-icon class="secondary-text">search</mat-icon>
                </label>
-                <mat-form-field floatPlaceholder="never" fxFlex="1 0 auto">
+                <mat-form-field floatLabel="never" fxFlex="1 0 auto">
                    <input id="search" matInput #filter placeholder="Search">
                </mat-form-field>
            </div>
--- a/src/app/main/content/apps/e-commerce/products/products.component.scss
+++ b/src/app/main/content/apps/e-commerce/products/products.component.scss
@@ -9,9 +9,10 @@
        }

        @include media-breakpoint-down(xs) {
-            height: 176px !important;
-            min-height: 176px !important;
-            max-height: 176px !important;
+            margin: 8px 0;
+            height: 192px !important;
+            min-height: 192px !important;
+            max-height: 192px !important;
        }
    }

--- a/src/app/main/content/apps/file-manager/file-list/file-list.component.html
+++ b/src/app/main/content/apps/file-manager/file-list/file-list.component.html
@@ -44,7 +44,7 @@
        <mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
            <button mat-icon-button class="sidenav-toggle"
                    fuseMatSidenavToggler="file-manager-right-sidenav">
-                <mat-icon>info</mat-icon>
+                <mat-icon class="secondary-text">info</mat-icon>
            </button>
        </mat-cell>
    </ng-container>
--- a/src/app/main/content/apps/file-manager/file-manager.component.html
+++ b/src/app/main/content/apps/file-manager/file-manager.component.html
@@ -3,7 +3,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
+        <mat-sidenav class="sidenav left-sidenav" position="start" opened="false" mode="over"
                     fuseMatSidenavHelper="file-manager-left-sidenav">
            <fuse-file-manager-main-sidenav></fuse-file-manager-main-sidenav>
        </mat-sidenav>
@@ -26,7 +26,7 @@
                    </div>

                    <div class="right-side" fxLayout="row">
-                        <button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search">
+                        <button mat-icon-button aria-label="Search" matTooltip="Search">
                            <mat-icon>search</mat-icon>
                        </button>
                    </div>
@@ -69,7 +69,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav right-sidenav " align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav right-sidenav " position="end" opened="true" mode="side"
                     fuseMatSidenavHelper="file-manager-right-sidenav" mat-is-locked-open="gt-md">
            <fuse-file-manager-details-sidenav></fuse-file-manager-details-sidenav>
        </mat-sidenav>
--- a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
+++ b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
@@ -3,7 +3,7 @@

    <div class="toolbar" fxLayout="row" fxLayoutAlign="end center">

-        <button mat-icon-button class="mat-icon-button" matTooltip="Delete">
+        <button mat-icon-button matTooltip="Delete">
            <mat-icon>delete</mat-icon>
        </button>

@@ -11,7 +11,7 @@
            <mat-icon>file_download</mat-icon>
        </button>

-        <button mat-icon-button class="mat-icon-button" aria-label="More" matTooltip="More">
+        <button mat-icon-button aria-label="More" matTooltip="More">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
--- a/src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.html
+++ b/src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.html
@@ -1,13 +1,11 @@
 <div class="dialog-content-wrapper">
-    <mat-toolbar matDialogTitle class="mat-accent m-0">
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <mat-toolbar class="mat-accent m-0">
+        <mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="space-between center">
            <span class="title dialog-title">New Message</span>
-            <button mat-button class="mat-icon-button"
-                    (click)="dialogRef.close()"
-                    aria-label="Close dialog">
+            <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                <mat-icon>close</mat-icon>
            </button>
-        </div>
+        </mat-toolbar-row>
    </mat-toolbar>

    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
@@ -100,10 +98,7 @@
            </button>
        </div>

-        <button mat-button
-                class="mat-icon-button"
-                (click)="dialogRef.close(['delete',composeForm])"
-                aria-label="Delete"
+        <button mat-icon-button (click)="dialogRef.close(['delete',composeForm])" aria-label="Delete"
                matTooltip="Delete">
            <mat-icon>delete</mat-icon>
        </button>
--- a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html
+++ b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <mat-icon class="s-128 mb-16 select-message-icon">
+    <mat-icon class="s-128 mb-16 select-message-icon hint-text">
        email
    </mat-icon>
    <span class="select-message-text hint-text">
@@ -24,14 +24,14 @@
        </div>

        <div class="actions" fxLayout="row" fxLayoutAlign="start center">
-            <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
-                <mat-icon *ngIf="mail.starred">star</mat-icon>
-                <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
+            <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
+                <mat-icon class="amber-fg" *ngIf="mail.starred">star</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!mail.starred">star_outline</mat-icon>
            </button>

-            <button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
-                <mat-icon *ngIf="mail.important">label</mat-icon>
-                <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
+            <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
+                <mat-icon class="red-fg" *ngIf="mail.important">label</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!mail.important">label_outline</mat-icon>
            </button>
        </div>
    </div>
@@ -87,8 +87,7 @@
                </div>
            </div>

-            <button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    (click)="$event.stopPropagation()">
+            <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()">
                <mat-icon>more_vert</mat-icon>
            </button>

--- a/src/app/main/content/apps/mail-ngrx/mail.component.html
+++ b/src/app/main/content/apps/mail-ngrx/mail.component.html
@@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" mode="side" opened="true"
+        <mat-sidenav class="sidenav mat-sidenav-opened" position="start" mode="side" opened="true"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
            <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
        </mat-sidenav>
@@ -21,7 +21,7 @@

                <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">

-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                            fuseMatSidenavToggler="carded-left-sidenav"
                            fxHide.gt-md aria-label="Toggle Sidenav">
                        <mat-icon>menu</mat-icon>
--- a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html
@@ -9,7 +9,7 @@

    <div class="account" fxLayout="column">
        <div class="title">John Doe</div>
-        <mat-form-field floatPlaceholder="never">
+        <mat-form-field floatLabel="never">
            <mat-select class="account-selection" placeholder="Mail Selection"
                        [ngModel]="selectedAccount">
                <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
@@ -26,8 +26,8 @@
 <div class="content" fusePerfectScrollbar>

    <div class="p-24">
-        <button mat-raised-button fxFlex
-                class="mat-accent compose-dialog-button"
+        <button mat-raised-button
+                class="mat-accent compose-dialog-button w-100-p"
                (click)="composeDialog()"
                aria-label="Compose">
            {{ 'MAIL.COMPOSE' | translate }}
@@ -48,8 +48,9 @@
        <div class="nav-subheader">{{ 'MAIL.FILTERS' | translate }}</div>

        <div class="nav-item" *ngFor="let filter of (filters$ | async)">
-            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle" routerLinkActive="active">
-                <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle"
+               routerLinkActive="active">
+                <mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                <span>{{filter.title}}</span>
            </a>
        </div>
@@ -57,7 +58,8 @@
        <div class="nav-subheader">{{ 'MAIL.LABELS' | translate }}</div>

        <div class="nav-item" *ngFor="let label of (labels$ | async)">
-            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/label/' + label.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/label/' + label.handle"
+               routerLinkActive="active">
                <mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon>
                <span>{{label.title}}</span>
            </a>
--- a/src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts
+++ b/src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts
@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
 import { Action, Store } from '@ngrx/store';
 import { Actions, Effect } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-import { map, mergeMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { catchError, map, mergeMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
 import 'rxjs/add/operator/debounceTime';
+
 import { getRouterState, State } from 'app/store/reducers';
 import { getMailsState } from '../selectors';
 import * as MailsActions from '../actions/mails.actions';
@@ -48,7 +48,7 @@ export class MailsEffect
                        value: ''
                    };

-                    const routeParams = Observable.of('labelHandle', 'filterHandle', 'folderHandle');
+                    const routeParams = of('labelHandle', 'filterHandle', 'folderHandle');
                    routeParams.subscribe(param => {
                        if ( this.routerState.params[param] )
                        {
@@ -60,14 +60,16 @@ export class MailsEffect
                    });

                    return this.mailService.getMails(handle)
-                               .map((mails: Mail[]) => {
+                               .pipe(
+                                   map((mails: Mail[]) => {

                                       return new MailsActions.GetMailsSuccess({
                                           loaded: handle,
                                           mails : mails
                                       });
-                               })
-                               .catch(err => of(new MailsActions.GetMailsFailed(err)));
+                                   }),
+                                   catchError(err => of(new MailsActions.GetMailsFailed(err)))
+                               );
                })
            );

--- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
+++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
@@ -1,13 +1,11 @@
 <div class="dialog-content-wrapper">
-    <mat-toolbar matDialogTitle class="mat-accent m-0">
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <mat-toolbar class="mat-accent m-0">
+        <mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="space-between center">
            <span class="title dialog-title">New Message</span>
-            <button mat-button class="mat-icon-button"
-                    (click)="dialogRef.close()"
-                    aria-label="Close dialog">
+            <button mat-icon-button (click)="dialogRef.close()" aria-label="Close dialog">
                <mat-icon>close</mat-icon>
            </button>
-        </div>
+        </mat-toolbar-row>
    </mat-toolbar>

    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
@@ -105,9 +103,7 @@
            </button>
        </div>

-        <button mat-button
-                class="mat-icon-button"
-                (click)="dialogRef.close(['delete',composeForm])"
+        <button mat-icon-button (click)="dialogRef.close(['delete',composeForm])"
                aria-label="Delete"
                matTooltip="Delete">
            <mat-icon>delete</mat-icon>
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
@@ -1,5 +1,6 @@
 <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <mat-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
+    <mat-icon class="s-128 mb-16 select-message-icon hint-text" *fuseIfOnDom
+              [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
        email
    </mat-icon>
    <span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">
@@ -25,14 +26,14 @@
        </div>

        <div class="actions" fxLayout="row" fxLayoutAlign="start center">
-            <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
-                <mat-icon *ngIf="mail.starred">star</mat-icon>
-                <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
+            <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
+                <mat-icon class="amber-fg" *ngIf="mail.starred">star</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!mail.starred">star_outline</mat-icon>
            </button>

-            <button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
-                <mat-icon *ngIf="mail.important">label</mat-icon>
-                <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
+            <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
+                <mat-icon class="red-fg" *ngIf="mail.important">label</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!mail.important">label_outline</mat-icon>
            </button>
        </div>
    </div>
@@ -88,8 +89,7 @@
                </div>
            </div>

-            <button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    (click)="$event.stopPropagation()">
+            <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()">
                <mat-icon>more_vert</mat-icon>
            </button>

--- a/src/app/main/content/apps/mail/mail.component.html
+++ b/src/app/main/content/apps/mail/mail.component.html
@@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" mode="side" opened="true"
+        <mat-sidenav class="sidenav" position="start" mode="side" opened="true"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
            <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
        </mat-sidenav>
@@ -21,7 +21,7 @@

                <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">

-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                            fuseMatSidenavToggler="carded-left-sidenav"
                            fxHide.gt-md aria-label="Toggle Sidenav">
                        <mat-icon>menu</mat-icon>
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
@@ -9,7 +9,7 @@

    <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
        <div class="title">John Doe</div>
-        <mat-form-field floatPlaceholder="never">
+        <mat-form-field floatLabel="never">
            <mat-select class="account-selection" placeholder="Mail Selection"
                        [ngModel]="selectedAccount">
                <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
@@ -26,8 +26,8 @@
 <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">

    <div class="p-24">
-        <button mat-raised-button fxFlex
-                class="mat-accent compose-dialog-button"
+        <button mat-raised-button
+                class="mat-accent compose-dialog-button w-100-p"
                (click)="composeDialog()"
                aria-label="Compose">
            {{ 'MAIL.COMPOSE' | translate }}
@@ -49,7 +49,7 @@

        <div class="nav-item" *ngFor="let filter of filters">
            <a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
-                <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
+                <mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                <span>{{filter.title}}</span>
            </a>
        </div>
--- a/src/app/main/content/apps/scrumboard/board/board.component.html
+++ b/src/app/main/content/apps/scrumboard/board/board.component.html
@@ -13,7 +13,7 @@
                            [ngClass]="'mat-'+board.settings.color+'-700-bg'"
                            routerLink="/apps/scrumboard/boards"
                            aria-label="boards button">
-                        <mat-icon>assessment</mat-icon>
+                        <mat-icon class="mr-8">assessment</mat-icon>
                        <span>BOARDS</span>
                    </button>
                </div>
@@ -80,7 +80,7 @@
        <!-- primary content -->
    </div>

-    <mat-sidenav #settingsSidenav align="end">
+    <mat-sidenav #settingsSidenav position="end">
        <fuse-scrumboard-board-settings></fuse-scrumboard-board-settings>
    </mat-sidenav>

--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
@@ -1,5 +1,6 @@
 <div class="dialog-content-wrapper">
-    <mat-toolbar *ngIf="card" matDialogTitle class="mat-accent-bg m-0">
+
+    <mat-toolbar *ngIf="card" matDialogTitle class="mat-accent-bg m-0" fxFlex="1 0 auto" fxLayout="row">

        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">

@@ -8,7 +9,7 @@
                <!-- DUE DATE -->
                <div class="due-date" fxFlex="0 1 auto">

-                    <button *ngIf="card.due" mat-icon-button class="" [matMenuTriggerFor]="dueDateMenu">
+                    <button *ngIf="card.due" mat-icon-button [matMenuTriggerFor]="dueDateMenu">
                        <mat-icon>today</mat-icon>
                    </button>

@@ -34,7 +35,8 @@

                    <mat-menu #labelsMenu="matMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">

-                        <fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
+                        <fuse-scrumboard-label-selector [card]="card"
+                                                        (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>

                    </mat-menu>
                </div>
@@ -48,7 +50,8 @@
                    </button>

                    <mat-menu #membersMenu="matMenu" [overlapTrigger]="false">
-                        <div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()">
+                        <div fxFlex fxLayout="column" class="scrumboard-members-menu"
+                             (click)="$event.stopPropagation()">
                            <mat-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
                                          *ngFor="let member of board.members"
                                          (change)="toggleInArray(member.id, card.idMembers);updateCard()">
@@ -71,20 +74,25 @@
                <!-- CHECKLIST -->
                <div class="due-date " fxFlex="0 1 auto">

-                    <button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (menuOpened)="onChecklistMenuOpen()">
+                    <button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu"
+                            #checklistMenuTrigger="matMenuTrigger" (menuOpened)="onChecklistMenuOpen()">
                        <mat-icon>check_box</mat-icon>
                    </button>

                    <mat-menu #checklistMenu="matMenu" [overlapTrigger]="false">

-                        <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
+                        <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)"
+                              (click)="$event.stopPropagation()"
                              fxLayout="column" fxLayoutAlign="start end">

-                            <mat-form-field floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
-                                <input #newCheckListTitleField matInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
+                            <mat-form-field floatLabel="never" (click)="$event.stopPropagation()" fxFlex>
+                                <input #newCheckListTitleField matInput ngModel #checklistTitle="ngModel"
+                                       name="checklistTitle" placeholder="Checklist title" required>
                            </mat-form-field>

-                            <button mat-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
+                            <button mat-raised-button class="mat-accent" aria-label="Add Checklist"
+                                    [disabled]="!newChecklistForm.valid">Add Checklist
+                            </button>
                        </form>

                    </mat-menu>
@@ -126,7 +134,9 @@
                <mat-icon>close</mat-icon>
            </button>
            <!-- / CLOSE DIALOG BUTTON -->
+
        </div>
+
    </mat-toolbar>

    <div *ngIf="card" mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
@@ -145,7 +155,7 @@
            <!-- DUE DATE -->
            <div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">

-                <mat-form-field floatPlaceholder="never">
+                <mat-form-field floatLabel="never">
                    <input matInput [matDatepicker]="picker" [(ngModel)]="card.due" placeholder="Choose a due date">
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
@@ -163,7 +173,7 @@
        <div fxLayout="row" fxLayoutAlign="start center">
            <mat-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</mat-icon>
            <div class="card-name">
-                <mat-form-field floatPlaceholder="never" fxFlex>
+                <mat-form-field floatLabel="never" class="w-100-p">
                    <input matInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
                </mat-form-field>
            </div>
@@ -172,8 +182,9 @@

        <!-- DESCRIPTION -->
        <div class="description">
-            <mat-form-field fxFlex>
-                <textarea matInput [(ngModel)]="card.description" placeholder="Description" columns="1" mat-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
+            <mat-form-field class="w-100-p">
+                <textarea matInput [(ngModel)]="card.description" placeholder="Description" columns="1"
+                          mat-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
            </mat-form-field>
        </div>
        <!-- / DESCRIPTION -->
@@ -197,7 +208,9 @@
                                      [ngClass]="board.labels | getById:labelId:'color'"
                                      fxLayout="row" fxLayoutAlign="start center">
                                <span>{{board.labels|getById:labelId:'name'}}</span>
-                                <mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</mat-icon>
+                                <mat-icon class="ml-8 s-16 chip-remove"
+                                          (click)="toggleInArray(labelId, card.idLabels);updateCard()">close
+                                </mat-icon>
                            </mat-chip>
                        </mat-chip-list>
                    </div>
@@ -214,7 +227,9 @@
                                      fxLayout="row" fxLayoutAlign="start center">
                                <img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
                                     [matTooltip]="board.members | getById:memberId:'name'">
-                                <mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</mat-icon>
+                                <mat-icon class="ml-8 s-16 chip-remove"
+                                          (click)="toggleInArray(memberId, card.idMembers);updateCard()">close
+                                </mat-icon>
                            </mat-chip>
                        </mat-chip-list>
                    </div>
@@ -256,7 +271,8 @@
                                    <span class="attachment-time">{{item.time}}</span>

                                    <div>
-                                        <button mat-raised-button class="attachment-actions-button" [matMenuTriggerFor]="attachmentActionsMenu">
+                                        <button mat-raised-button class="attachment-actions-button"
+                                                [matMenuTriggerFor]="attachmentActionsMenu">
                                            <span fxLayout="row" fxLayoutAlign="center center">
                                                <span>Actions</span>
                                                <mat-icon class="s-20">arrow_drop_down</mat-icon>
@@ -310,17 +326,20 @@

                        <span fxFlex class="section-title">{{checklist.name}}</span>

-
                        <div>
-                            <button mat-icon-button class="checklist-actions-button" [matMenuTriggerFor]="checklistActionsMenu">
+
+                            <button mat-icon-button class="checklist-actions-button"
+                                    [matMenuTriggerFor]="checklistActionsMenu">
                                <mat-icon class="s-20">more_vert</mat-icon>
                            </button>
+
                            <mat-menu #checklistActionsMenu="matMenu">
                                <button mat-menu-item (click)="removeChecklist(checklist)">
                                    <mat-icon>delete</mat-icon>
                                    <span>Remove Checklist</span>
                                </button>
                            </mat-menu>
+
                        </div>

                    </div>
@@ -340,7 +359,8 @@

                        <div class="check-items">

-                            <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row"
+                                 fxLayoutAlign="space-between center">

                                <div fxFlex fxLayout="row" fxLayoutAlign="start center">
                                    <mat-checkbox [(ngModel)]="checkItem.checked"
@@ -352,21 +372,24 @@
                                    </mat-form-field>
                                </div>

-                                <button mat-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)">
-                                    <mat-icon class="s-20">delete</mat-icon>
+                                <button mat-icon-button class="checklist-actions-button"
+                                        (click)="removeChecklistItem(checkItem, checklist)">
+                                    <mat-icon class="secondary-text s-20">delete</mat-icon>
                                </button>

                            </div>
                        </div>

-                        <form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)" name="newCheckItemForm" class="new-check-item-form"
+                        <form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)"
+                              name="newCheckItemForm" class="new-check-item-form"
                              fxLayout="row" fxLayoutAlign="start center">

                            <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
                                <mat-icon class="s-20">add</mat-icon>

                                <mat-form-field class="no-errors-spacer mx-12" fxFlex>
-                                    <input matInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off">
+                                    <input matInput ngModel #checkItem="ngModel" name="checkItem"
+                                           placeholder="Add an item" autocomplete="off">
                                </mat-form-field>
                            </div>

@@ -443,7 +466,8 @@
                    </div>

                    <div class="section-content">
-                        <div class="activity" fxLayout="row" fxLayoutAlign="start center" *ngFor="let activity of card.activities">
+                        <div class="activity" fxLayout="row" fxLayoutAlign="start center"
+                             *ngFor="let activity of card.activities">
                            <img class="activity-member-avatar"
                                 [src]="board.members| getById:activity.idMember:'avatar'">
                            <div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>
@@ -459,4 +483,5 @@
        </div>
        <!-- / SECTIONS -->
    </div>
+
 </div>
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
@@ -37,6 +37,11 @@
                        }
                    }
                }
+
+                .mat-form-field-prefix .mat-datepicker-toggle-default-icon,
+                .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
+                    width: 24px;
+                }
            }
        }

--- a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html
@@ -11,7 +11,7 @@

    <form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column">

-        <mat-form-field fxFlex floatPlaceholder="never">
+        <mat-form-field fxFlex floatLabel="never">
            <input #nameInput matInput formControlName="name" placeholder="Card title" autocomplete="off" required>
        </mat-form-field>

--- a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
@@ -3,12 +3,12 @@
     class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
    <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
        <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
-        <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
+        <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-Do</span>
    </div>

    <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
        <div class="title">John Doe</div>
-        <mat-form-field floatPlaceholder="never">
+        <mat-form-field floatLabel="never">
            <mat-select class="account-selection" placeholder="Todo Selection"
                        [ngModel]="selectedAccount">
                <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
@@ -25,8 +25,8 @@
 <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">

    <div class="p-24">
-        <button mat-raised-button fxFlex
-                class="mat-accent add-todo-button"
+        <button mat-raised-button
+                class="mat-accent add-todo-button w-100-p"
                (click)="newTodo()"
                aria-label="ADD TASK">
            ADD TASK
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.html
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
@@ -1,9 +1,9 @@
 <div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <mat-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom
+    <mat-icon class="s-120 mb-12 select-todo-icon hint-text" *fuseIfOnDom
              [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box
    </mat-icon>
-    <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select
-        a todo
+    <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">
+        Select a todo
    </span>
 </div>

@@ -11,41 +11,43 @@

    <div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center">

-        <button mat-button class="toggle-complete-button p-0" (click)="toggleCompleted($event)"
+        <button mat-button class="toggle-complete-button" (click)="toggleCompleted($event)"
                aria-label="Toggle completed" fxFlex="0 1 auto">
            <mat-icon *ngIf="todo.completed">check_box</mat-icon>
            <mat-icon *ngIf="!todo.completed">check_box_outline_blank</mat-icon>
-            <span>Mark as Done</span>
+            <span class="ml-8">Mark as Done</span>
        </button>

        <div class="actions" fxLayout="row" fxLayoutAlign="start center">

-            <button mat-button class="mat-icon-button" (click)="toggleDeleted($event)" aria-label="Toggle delete">
-                <mat-icon *ngIf="todo.deleted">delete_forever</mat-icon>
-                <mat-icon *ngIf="!todo.deleted">delete</mat-icon>
+            <button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
+                <mat-icon class="red-fg" *ngIf="todo.important">error</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.important">error_outline</mat-icon>
            </button>

-            <button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
-                <mat-icon *ngIf="todo.important">error</mat-icon>
-                <mat-icon *ngIf="!todo.important">error_outline</mat-icon>
-            </button>
-
-            <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
-                <mat-icon *ngIf="todo.starred">star</mat-icon>
-                <mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
+            <button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
+                <mat-icon class="amber-fg" *ngIf="todo.starred">star</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.starred">star_outline</mat-icon>
            </button>

            <button mat-icon-button [matMenuTriggerFor]="labelMenu" fxFlex="0 1 auto">
-                <mat-icon>label</mat-icon>
+                <mat-icon class="secondary-text">label</mat-icon>
            </button>

            <mat-menu #labelMenu="matMenu">
                <button mat-menu-item *ngFor="let tag of tags"
                        (click)="toggleTagOnTodo(tag.id)">
-                    {{tag.title}}
+                    <mat-icon *ngIf="hasTag(tag.id)">check</mat-icon>
+                    <mat-icon *ngIf="!hasTag(tag.id)"></mat-icon>
+                    <span>{{tag.title}}</span>
                </button>
            </mat-menu>

+            <button mat-icon-button (click)="toggleDeleted($event)" aria-label="Toggle delete">
+                <mat-icon class="secondary-text" *ngIf="todo.deleted">delete_forever</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.deleted">delete</mat-icon>
+            </button>
+
        </div>
    </div>

@@ -53,7 +55,7 @@

        <form [formGroup]="todoForm" (submit)="addTodo()">

-            <mat-form-field class="title mt-8" floatPlaceholder="never" fxFill>
+            <mat-form-field class="title mt-8" floatLabel="never" fxFill>
                <textarea matInput
                          #titleInput
                          name="title"
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
@@ -14,7 +14,6 @@
        .actions {
            min-width: 88px;
        }
-
    }

    .todo-content {
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
@@ -157,6 +157,11 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
        this.todoService.toggleTagOnTodo(tagId, this.todo);
    }

+    hasTag(tagId)
+    {
+        return this.todoService.hasTag(tagId, this.todo);
+    }
+
    addTodo()
    {
        this.todoService.updateTodo(this.todoForm.getRawValue());
--- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
+++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
@@ -33,21 +33,21 @@

        <div class="actions" fxLayout="row" fxLayoutAlign="start center">

-            <button mat-button class="mat-icon-button" (click)="toggleImportant($event)"
+            <button mat-icon-button (click)="toggleImportant($event)"
                    aria-label="Toggle important" fxHide.xs>
-                <mat-icon *ngIf="todo.important">error</mat-icon>
-                <mat-icon *ngIf="!todo.important">error_outline</mat-icon>
+                <mat-icon class="red-fg" *ngIf="todo.important">error</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.important">error_outline</mat-icon>
            </button>

-            <button mat-button class="mat-icon-button" (click)="toggleStar($event)"
+            <button mat-icon-button (click)="toggleStar($event)"
                    aria-label="Toggle star" fxHide.xs>
-                <mat-icon *ngIf="todo.starred">star</mat-icon>
-                <mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
+                <mat-icon class="amber-fg" *ngIf="todo.starred">star</mat-icon>
+                <mat-icon class="secondary-text" *ngIf="!todo.starred">star_outline</mat-icon>
            </button>

-            <button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    (click)="$event.stopPropagation();" fxHide.xs>
-                <mat-icon>more_vert</mat-icon>
+            <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()"
+                    fxHide.xs>
+                <mat-icon class="secondary-text">more_vert</mat-icon>
            </button>

            <mat-menu #moreMenu="matMenu">
--- a/src/app/main/content/apps/todo/todo.component.html
+++ b/src/app/main/content/apps/todo/todo.component.html
@@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
            <fuse-todo-main-sidenav></fuse-todo-main-sidenav>
        </mat-sidenav>
@@ -21,7 +21,7 @@

                <div class="search-wrapper mat-white-bg" fxFlex fxLayout="row" fxLayoutAlign="start center">

-                    <button mat-button class="mat-icon-button sidenav-toggle"
+                    <button mat-icon-button class="sidenav-toggle"
                            fuseMatSidenavToggler="carded-left-sidenav"
                            fxHide.gt-md aria-label="Toggle Sidenav">
                        <mat-icon>menu</mat-icon>
@@ -29,7 +29,7 @@

                    <div class="search" flex fxLayout="row" fxLayoutAlign="start center">
                        <mat-icon>search</mat-icon>
-                        <input [formControl]="searchInput" placeholder="Search for an todo" fxFlex>
+                        <input [formControl]="searchInput" placeholder="Search for a task" fxFlex>
                    </div>
                </div>

--- a/src/app/main/content/apps/todo/todo.model.ts
+++ b/src/app/main/content/apps/todo/todo.model.ts
@@ -30,7 +30,7 @@ export class Todo
            this.starred = todo.starred;
            this.important = todo.important;
            this.deleted = todo.deleted;
-            this.tags = todo.tags;
+            this.tags = todo.tags || [];
        }
    }

--- a/src/app/main/content/apps/todo/todo.service.ts
+++ b/src/app/main/content/apps/todo/todo.service.ts
@@ -368,6 +368,16 @@ export class TodoService implements Resolve<any>
        this.updateTodo(todo);
    }

+    hasTag(tagId, todo)
+    {
+        if ( !todo.tags )
+        {
+            return false;
+        }
+
+        return todo.tags.indexOf(tagId) !== -1;
+    }
+
    /**
     * Update the todo
     * @param todo
--- a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html
+++ b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html
@@ -14,7 +14,7 @@
        <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0"
           href="https://github.com/swimlane/ngx-datatable"
           target="_blank">
-            <mat-icon>link</mat-icon>
+            <mat-icon class="mr-8">link</mat-icon>
            <span>Reference</span>
        </a>
    </div>
--- a/src/app/main/content/components-third-party/google-maps/google-maps.component.html
+++ b/src/app/main/content/components-third-party/google-maps/google-maps.component.html
@@ -14,7 +14,7 @@
        <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0"
           href="https://angular-maps.com"
           target="_blank">
-            <mat-icon>link</mat-icon>
+            <mat-icon class="mr-8">link</mat-icon>
            <span>Reference</span>
        </a>
    </div>
--- a/src/app/main/content/components/angular-material/angular-material.component.html
+++ b/src/app/main/content/components/angular-material/angular-material.component.html
@@ -15,7 +15,7 @@
        </div>

        <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io/" target="_blank">
-            <mat-icon>link</mat-icon>
+            <mat-icon class="mr-8">link</mat-icon>
            <span>Reference</span>
        </a>
    </div>
--- a/src/app/main/content/components/angular-material/example-components.ts
+++ b/src/app/main/content/components/angular-material/example-components.ts
--- a/src/app/main/content/components/angular-material/example-viewer/example-viewer.html
+++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.html
@@ -64,8 +64,8 @@
    </div>

    <div class="example-viewer-body" [fxHide]="showSource">
-        <!--<ng-template [portalHost]="selectedPortal"></ng-template>-->
-        <!--<ng-template [cdkPortalHost]="selectedPortal"></ng-template>-->
+        <!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
+        <!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
        <div #previewContainer></div>
    </div>
 </div>
--- a/src/app/main/content/components/angular-material/material.module.ts
+++ b/src/app/main/content/components/angular-material/material.module.ts
@@ -1,43 +1,25 @@
 import { NgModule } from '@angular/core';
-import {
-    MatAutocompleteModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatCheckboxModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    MatCardModule,
-    MatChipsModule,
-    MatDatepickerModule,
-    MatDialogModule,
-    MatExpansionModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatNativeDateModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
-    MatRippleModule,
-    MatSelectModule,
-    MatSidenavModule,
-    MatSliderModule,
-    MatSlideToggleModule,
-    MatSnackBarModule,
-    MatSortModule,
-    MatTableModule,
-    MatTabsModule,
-    MatStepperModule
-} from '@angular/material';
+
 import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import {
+    MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule,
+    MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
+    MatDialogModule, MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule,
+    MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule,
+    MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule,
+    MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule,
+    MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule
+} from '@angular/material';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';

@NgModule({
    imports: [
+        CdkTableModule,
+        CdkTreeModule,
        MatAutocompleteModule,
+        MatBadgeModule,
+        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
@@ -45,6 +27,7 @@ import { CdkTableModule } from '@angular/cdk/table';
        MatChipsModule,
        MatDatepickerModule,
        MatDialogModule,
+        MatDividerModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
@@ -52,7 +35,7 @@ import { CdkTableModule } from '@angular/cdk/table';
        MatInputModule,
        MatListModule,
        MatMenuModule,
-        MatNativeDateModule,
+        MatMomentDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
@@ -60,19 +43,23 @@ import { CdkTableModule } from '@angular/cdk/table';
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
-        MatSliderModule,
        MatSlideToggleModule,
+        MatSliderModule,
        MatSnackBarModule,
-        MatStepperModule,
        MatSortModule,
+        MatStepperModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
-        CdkTableModule
+        MatTreeModule
    ],
    exports: [
+        CdkTableModule,
+        CdkTreeModule,
        MatAutocompleteModule,
+        MatBadgeModule,
+        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
@@ -80,13 +67,15 @@ import { CdkTableModule } from '@angular/cdk/table';
        MatChipsModule,
        MatDatepickerModule,
        MatDialogModule,
+        MatDividerModule,
        MatExpansionModule,
+        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
-        MatNativeDateModule,
+        MatMomentDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
@@ -94,19 +83,18 @@ import { CdkTableModule } from '@angular/cdk/table';
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
-        MatSliderModule,
        MatSlideToggleModule,
+        MatSliderModule,
        MatSnackBarModule,
-        MatStepperModule,
        MatSortModule,
+        MatStepperModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
-        CdkTableModule
+        MatTreeModule
    ]
 })
 export class MaterialModule
 {
-
 }
--- a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.html
+++ b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.html
@@ -5,7 +5,7 @@
        <div id="mail-confirm-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">

            <div class="logo">
-                <mat-icon class="s-96">email</mat-icon>
+                <mat-icon class="blue-fg s-96">email</mat-icon>
            </div>

            <div class="title">Confirm your email address!</div>
--- a/src/app/main/content/pages/faq/faq.component.scss
+++ b/src/app/main/content/pages/faq/faq.component.scss
@@ -23,7 +23,7 @@
            h1 {
                color: white;
                font-size: 48px;
-                font-weight: 300;
+                font-weight: 400;
                letter-spacing: 0.01em;
                text-align: center;
                margin-top: 0;
@@ -39,7 +39,7 @@
                max-width: 480px;
                text-align: center;
                font-weight: 300;
-                letter-spacing: 0.03em;
+                letter-spacing: 0.075em;
                margin: 0;

                @include media-breakpoint-down('xs') {
--- a/src/app/main/content/pages/knowledge-base/knowledge-base.component.html
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.component.html
@@ -22,7 +22,7 @@

                <a mat-list-item *ngFor="let article of category.featuredArticles"
                   (click)="readArticle(article)">
-                    <mat-icon class="mr-8">note</mat-icon>
+                    <mat-icon class="secondary-text mr-8">note</mat-icon>
                    {{ article.title }}
                </a>

--- a/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
@@ -19,7 +19,7 @@
            h1 {
                color: white;
                font-size: 48px;
-                font-weight: 300;
+                font-weight: 400;
                letter-spacing: 0.01em;
                text-align: center;
                margin-top: 0;
@@ -35,7 +35,7 @@
                max-width: 480px;
                text-align: center;
                font-weight: 300;
-                letter-spacing: 0.03em;
+                letter-spacing: 0.075em;
                margin: 0;

                @include media-breakpoint-down('xs') {
--- a/src/app/main/content/pages/pricing/style-1/style-1.component.scss
+++ b/src/app/main/content/pages/pricing/style-1/style-1.component.scss
@@ -26,7 +26,7 @@
                .h1 {
                    color: white;
                    font-size: 48px;
-                    font-weight: 300;
+                    font-weight: 400;
                    letter-spacing: 0.01em;
                    text-align: center;

@@ -41,7 +41,7 @@
                    text-align: center;
                    margin-top: 16px;
                    font-weight: 300;
-                    letter-spacing: 0.03em;
+                    letter-spacing: 0.05em;

                    @include media-breakpoint-down('xs') {
                        font-size: 14px;
--- a/src/app/main/content/pages/pricing/style-2/style-2.component.scss
+++ b/src/app/main/content/pages/pricing/style-2/style-2.component.scss
@@ -26,7 +26,7 @@
                .h1 {
                    color: white;
                    font-size: 48px;
-                    font-weight: 300;
+                    font-weight: 400;
                    letter-spacing: 0.01em;
                    text-align: center;

@@ -41,7 +41,7 @@
                    text-align: center;
                    margin-top: 16px;
                    font-weight: 300;
-                    letter-spacing: 0.03em;
+                    letter-spacing: 0.05em;

                    @include media-breakpoint-down('xs') {
                        font-size: 14px;
--- a/src/app/main/content/pages/pricing/style-3/style-3.component.scss
+++ b/src/app/main/content/pages/pricing/style-3/style-3.component.scss
@@ -26,7 +26,7 @@
                .h1 {
                    color: white;
                    font-size: 48px;
-                    font-weight: 300;
+                    font-weight: 400;
                    letter-spacing: 0.01em;
                    text-align: center;

@@ -41,7 +41,7 @@
                    text-align: center;
                    margin-top: 16px;
                    font-weight: 300;
-                    letter-spacing: 0.03em;
+                    letter-spacing: 0.05em;

                    @include media-breakpoint-down('xs') {
                        font-size: 14px;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sercan Yemen	a2187e0134	Set the output path	2018-05-06 14:33:17 +03:00
Sercan Yemen	a1cf7dba91	Angular version name	2018-05-06 14:32:10 +03:00
Sercan Yemen	b8039899db	Fixed various dialog issues + (Shortcuts) Icon colors in shortcuts menu	2018-05-06 14:19:28 +03:00
Sercan Yemen	26e55d7f3d	(Navigation) Fixed: Horizontal navigation items don't have 'hidden' and 'custom function' features	2018-05-06 13:44:34 +03:00
Sercan Yemen	1a9229a3ae	(Contacts) Fixed: List item cell forces the list item width	2018-05-06 13:38:15 +03:00
Sercan Yemen	ebf865e2c7	Angular and Angular Material 6 compatibility + Small adjustments and polishing up in various apps and pages	2018-05-06 13:29:08 +03:00
Sercan Yemen	5fd146b8da	Angular and Angular Material 6 compatibility (wip)	2018-05-05 19:54:52 +03:00
Sercan Yemen	3401a67959	intl polyfill is no longer required	2018-05-05 15:31:29 +03:00
Sercan Yemen	10dad46d7c	Updated the position attribute of the sidenav Did some changes on the core styles + forced input font sizes to 16px	2018-05-05 15:28:05 +03:00
Sercan Yemen	1c4983c756	rxjs upgrade	2018-05-05 14:42:18 +03:00
Sercan Yemen	f4636d9a37	Update Angular, Angular Material and Flex Layout to 6 Updated additional project files Updated Angular Material examples	2018-05-04 19:28:20 +03:00
Sercan Yemen	02df48ab4e	Remove the {navigation} import from the ThemeOptions and inject it where we actually use the fuseThemeOptions	2018-04-04 14:41:43 +03:00
Sercan Yemen	831d48f5a3	Remove the {navigation} import from the Shortcuts and inject it from the toolbar where we actually use the fuseShortcuts	2018-04-04 14:36:33 +03:00
Sercan Yemen	ca42f71b0e	Added lodash for convenience + Removed the default settings from the settings service - this means the user must provide the default settings at all time	2018-04-04 14:30:52 +03:00
Sercan Yemen	ed4a3cb8d7	Move the layout settings reset to the 'NavigationEnd' to make things smoother on lazily loaded components	2018-04-04 14:20:45 +03:00
Sercan Yemen	5c66d95951	Warn the user about the missing sidebars in registry + Check if the sidebar exists before trying to close it	2018-04-04 13:37:59 +03:00
Sercan Yemen	44663342f4	Set the correct return type for the 'getSidebar' method + Close the navbar on NavigationEnd on mobile devices	2018-04-04 11:36:00 +03:00
Sercan Yemen	4e6207fef5	Fixed: Small issues caused by Flex Layout update Fixed: Profile page header bg image doesn't correctly cover the header on mobile devices Fixed: Contacts app form dialog header irregularities Fixed: Analytics module doesn't import MatButtons Fixed: Scrumboard card dialog toolbar issues	2018-03-31 13:20:22 +03:00
Sercan Yemen	bd67b660c8	Updated Flex Layout package + Fixed: Fuse sidebar doesn't scroll when the custom scrollbars disabled + Fixed: Expanded search bar style	2018-03-31 12:03:21 +03:00
Sercan Yemen	174789930d	Allow url and function on collapsable nav items + Allow url and function to be exist at the same time on collapsable and normal nav items	2018-03-11 18:26:57 +03:00