From 52cfeec2e75f11105071f2239af298b4b78642df Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 11 Jun 2018 19:15:12 +0300
Subject: [PATCH] (Layout) Apps and pages moved to the new layout system

---
 .../chat/sidenavs/left/left.component.html    |  3 ++-
 .../sidenavs/left/user/user.component.html    |  2 +-
 .../sidenavs/left/user/user.component.scss    |  1 +
 .../right/contact/contact.component.html      |  5 +----
 .../right/contact/contact.component.scss      |  1 +
 .../chat/sidenavs/right/right.component.html  |  3 ++-
 .../file-manager/file-manager.component.scss  |  1 +
 .../forgot-password-2.component.html          | 10 ++++-----
 .../forgot-password-2.component.ts            | 12 ++++++++---
 .../forgot-password.component.html            |  7 +++----
 .../forgot-password.component.scss            |  1 -
 .../forgot-password.component.ts              | 12 ++++++++---
 .../authentication/lock/lock.component.html   |  4 ++--
 .../authentication/lock/lock.component.scss   |  1 -
 .../authentication/lock/lock.component.ts     | 12 ++++++++---
 .../login-2/login-2.component.html            | 10 ++++-----
 .../login-2/login-2.component.ts              | 12 ++++++++---
 .../authentication/login/login.component.html |  4 ++--
 .../authentication/login/login.component.scss |  1 -
 .../authentication/login/login.component.ts   | 12 ++++++++---
 .../mail-confirm/mail-confirm.component.html  |  4 ++--
 .../mail-confirm/mail-confirm.component.scss  |  1 -
 .../mail-confirm/mail-confirm.component.ts    | 12 ++++++++---
 .../register-2/register-2.component.html      | 10 ++++-----
 .../register-2/register-2.component.ts        | 12 ++++++++---
 .../register/register.component.html          |  4 ++--
 .../register/register.component.scss          |  1 -
 .../register/register.component.ts            | 12 ++++++++---
 .../reset-password-2.component.html           | 10 ++++-----
 .../reset-password-2.component.ts             | 12 ++++++++---
 .../reset-password.component.html             |  7 +++----
 .../reset-password.component.scss             |  1 -
 .../reset-password.component.ts               | 12 ++++++++---
 .../coming-soon/coming-soon.component.html    |  4 ++--
 .../coming-soon/coming-soon.component.scss    |  1 -
 .../coming-soon/coming-soon.component.ts      | 12 ++++++++---
 .../pages/errors/404/error-404.component.scss |  1 -
 .../pages/errors/404/error-404.component.ts   | 12 ++++++++---
 .../pages/errors/500/error-500.component.scss |  1 -
 .../pages/errors/500/error-500.component.ts   | 21 ++++++++++++++-----
 src/app/main/pages/faq/faq.component.html     |  2 +-
 .../invoices/compact/compact.component.html   |  2 +-
 .../invoices/compact/compact.component.scss   |  1 -
 .../invoices/modern/modern.component.html     |  2 +-
 .../invoices/modern/modern.component.scss     |  1 -
 .../knowledge-base.component.html             |  2 +-
 .../maintenance/maintenance.component.html    |  4 ++--
 .../maintenance/maintenance.component.scss    |  1 -
 .../maintenance/maintenance.component.ts      | 12 ++++++++---
 .../pricing/style-1/style-1.component.html    |  2 +-
 .../pricing/style-2/style-2.component.html    |  2 +-
 .../pricing/style-3/style-3.component.html    |  2 +-
 .../main/pages/profile/profile.component.html |  9 ++++----
 .../main/pages/search/search.component.html   |  2 +-
 54 files changed, 192 insertions(+), 116 deletions(-)

diff --git a/src/app/main/apps/chat/sidenavs/left/left.component.html b/src/app/main/apps/chat/sidenavs/left/left.component.html
index 3c23e7eb..5fdf0436 100644
--- a/src/app/main/apps/chat/sidenavs/left/left.component.html
+++ b/src/app/main/apps/chat/sidenavs/left/left.component.html
@@ -6,6 +6,7 @@
 
     <chat-user-sidenav class="view"
                        *ngSwitchCase="'user'"
-                       [@slideInLeft]>
+                       [@slideInLeft]
+                       fusePerfectScrollbar>
     </chat-user-sidenav>
 </div>
diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.html b/src/app/main/apps/chat/sidenavs/left/user/user.component.html
index 9ecb4ddf..919d8058 100644
--- a/src/app/main/apps/chat/sidenavs/left/user/user.component.html
+++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.html
@@ -28,7 +28,7 @@
 </div>
 
 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex>
+<div class="sidenav-content p-16" fxFlex>
 
     <!-- USER MOOD -->
     <mat-card>
diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss
index 7130f9cb..af7de534 100644
--- a/src/app/main/apps/chat/sidenavs/left/user/user.component.scss
+++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss
@@ -4,6 +4,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+    overflow: auto;
 
     mat-toolbar {
 
diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html
index a60d9c39..a8c904c8 100644
--- a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html
+++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html
@@ -18,11 +18,8 @@
 
         <!-- TOOLBAR BOTTOM -->
         <mat-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
-
             <img [src]="contact.avatar" class="avatar contact-avatar huge" alt="{{contact.name}}"/>
-
             <div class="contact-name my-8">{{contact.name}}</div>
-
         </mat-toolbar-row>
         <!-- / TOOLBAR BOTTOM -->
 
@@ -31,7 +28,7 @@
 </div>
 
 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex *ngIf="contact">
+<div class="sidenav-content p-16" fxFlex *ngIf="contact">
 
     <!-- CONTACT MOOD -->
     <mat-card>
diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss
index 7130f9cb..af7de534 100644
--- a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss
+++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss
@@ -4,6 +4,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+    overflow: auto;
 
     mat-toolbar {
 
diff --git a/src/app/main/apps/chat/sidenavs/right/right.component.html b/src/app/main/apps/chat/sidenavs/right/right.component.html
index 1b28582a..e6817050 100644
--- a/src/app/main/apps/chat/sidenavs/right/right.component.html
+++ b/src/app/main/apps/chat/sidenavs/right/right.component.html
@@ -2,7 +2,8 @@
 
     <chat-contact-sidenav class="view"
                           *ngSwitchCase="'contact'"
-                          [@slideInRight]>
+                          [@slideInRight]
+                          fusePerfectScrollbar>
     </chat-contact-sidenav>
 
 </div>
diff --git a/src/app/main/apps/file-manager/file-manager.component.scss b/src/app/main/apps/file-manager/file-manager.component.scss
index 88c56c85..0866d229 100644
--- a/src/app/main/apps/file-manager/file-manager.component.scss
+++ b/src/app/main/apps/file-manager/file-manager.component.scss
@@ -42,6 +42,7 @@
 
         .content {
             flex: 1 1 auto;
+            overflow: auto;
         }
     }
 
diff --git a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html
index 1a6992e0..b5eca591 100644
--- a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html
+++ b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html
@@ -1,23 +1,23 @@
-<div id="forgot-password" fxLayout="row" fxLayoutAlign="start">
+<div id="forgot-password" class="inner-scroll" fxLayout="row" fxLayoutAlign="start">
 
     <div id="forgot-password-intro" fxFlex fxHide fxShow.gt-xs>
 
-        <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
+        <div class="logo" [@animate]="{value:'*',params:{scale:'0.2'}}">
             <img src="assets/images/logos/fuse.svg">
         </div>
 
-        <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
+        <div class="title" [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
             Welcome to the FUSE!
         </div>
 
-        <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
+        <div class="description" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
             vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
         </div>
 
     </div>
 
-    <div id="forgot-password-form-wrapper" fusePerfectScrollbar *fuseIfOnDom
+    <div id="forgot-password-form-wrapper" fusePerfectScrollbar
          [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="forgot-password-form">
diff --git a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts
index ec751674..5a2a75d1 100644
--- a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts
+++ b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts
@@ -34,9 +34,15 @@ export class ForgotPassword2Component implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.component.html b/src/app/main/pages/authentication/forgot-password/forgot-password.component.html
index 5fdedb29..b3d0ccbe 100644
--- a/src/app/main/pages/authentication/forgot-password/forgot-password.component.html
+++ b/src/app/main/pages/authentication/forgot-password/forgot-password.component.html
@@ -1,9 +1,8 @@
-<div id="forgot-password" fxLayout="column" fusePerfectScrollbar>
+<div id="forgot-password" fxLayout="column">
 
-    <div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center" *fuseIfOnDom
-         [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+    <div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="forgot-password-form">
+        <div id="forgot-password-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
                 <img src="assets/images/logos/fuse.svg">
diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.component.scss b/src/app/main/pages/authentication/forgot-password/forgot-password.component.scss
index f626e4f8..f8449614 100644
--- a/src/app/main/pages/authentication/forgot-password/forgot-password.component.scss
+++ b/src/app/main/pages/authentication/forgot-password/forgot-password.component.scss
@@ -4,7 +4,6 @@
 
     #forgot-password {
         width: 100%;
-        overflow: auto;
         background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat;
         background-size: cover;
 
diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts b/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts
index f27a85dd..e59477b7 100644
--- a/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts
+++ b/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts
@@ -34,9 +34,15 @@ export class ForgotPasswordComponent implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/authentication/lock/lock.component.html b/src/app/main/pages/authentication/lock/lock.component.html
index a22dea14..e56890b7 100644
--- a/src/app/main/pages/authentication/lock/lock.component.html
+++ b/src/app/main/pages/authentication/lock/lock.component.html
@@ -1,8 +1,8 @@
-<div id="lock" fxLayout="column" fusePerfectScrollbar>
+<div id="lock" fxLayout="column">
 
     <div id="lock-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="lock-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+        <div id="lock-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="lock-form-header" fxLayout="column" fxLayoutAlign="center center"
                  fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center">
diff --git a/src/app/main/pages/authentication/lock/lock.component.scss b/src/app/main/pages/authentication/lock/lock.component.scss
index b5e4f62b..6abcd749 100644
--- a/src/app/main/pages/authentication/lock/lock.component.scss
+++ b/src/app/main/pages/authentication/lock/lock.component.scss
@@ -4,7 +4,6 @@
 
     #lock {
         width: 100%;
-        overflow: auto;
         background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat;
         background-size: cover;
 
diff --git a/src/app/main/pages/authentication/lock/lock.component.ts b/src/app/main/pages/authentication/lock/lock.component.ts
index ac1398a4..b0399f8b 100644
--- a/src/app/main/pages/authentication/lock/lock.component.ts
+++ b/src/app/main/pages/authentication/lock/lock.component.ts
@@ -34,9 +34,15 @@ export class LockComponent implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/authentication/login-2/login-2.component.html b/src/app/main/pages/authentication/login-2/login-2.component.html
index 13ff9bb2..9873abd1 100644
--- a/src/app/main/pages/authentication/login-2/login-2.component.html
+++ b/src/app/main/pages/authentication/login-2/login-2.component.html
@@ -1,23 +1,23 @@
-<div id="login" fxLayout="row" fxLayoutAlign="start">
+<div id="login" class="inner-scroll" fxLayout="row" fxLayoutAlign="start">
 
     <div id="login-intro" fxFlex fxHide fxShow.gt-xs>
 
-        <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
+        <div class="logo" [@animate]="{value:'*',params:{scale:'0.2'}}">
             <img src="assets/images/logos/fuse.svg">
         </div>
 
-        <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
+        <div class="title" [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
             Welcome to the FUSE!
         </div>
 
-        <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
+        <div class="description" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
             vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
         </div>
 
     </div>
 
-    <div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom
+    <div id="login-form-wrapper" fusePerfectScrollbar
          [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="login-form">
diff --git a/src/app/main/pages/authentication/login-2/login-2.component.ts b/src/app/main/pages/authentication/login-2/login-2.component.ts
index 0531a0e2..f9da1110 100644
--- a/src/app/main/pages/authentication/login-2/login-2.component.ts
+++ b/src/app/main/pages/authentication/login-2/login-2.component.ts
@@ -34,9 +34,15 @@ export class Login2Component implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/authentication/login/login.component.html b/src/app/main/pages/authentication/login/login.component.html
index b94ddc49..8e40bd50 100644
--- a/src/app/main/pages/authentication/login/login.component.html
+++ b/src/app/main/pages/authentication/login/login.component.html
@@ -1,8 +1,8 @@
-<div id="login" fxLayout="column" fusePerfectScrollbar>
+<div id="login" fxLayout="column">
 
     <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="login-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+        <div id="login-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
                 <img src="assets/images/logos/fuse.svg">
diff --git a/src/app/main/pages/authentication/login/login.component.scss b/src/app/main/pages/authentication/login/login.component.scss
index f02c7d2c..1d426d1e 100644
--- a/src/app/main/pages/authentication/login/login.component.scss
+++ b/src/app/main/pages/authentication/login/login.component.scss
@@ -4,7 +4,6 @@
 
     #login {
         width: 100%;
-        overflow: auto;
         background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat;
         background-size: cover;
 
diff --git a/src/app/main/pages/authentication/login/login.component.ts b/src/app/main/pages/authentication/login/login.component.ts
index 6f272924..cd3a83b7 100644
--- a/src/app/main/pages/authentication/login/login.component.ts
+++ b/src/app/main/pages/authentication/login/login.component.ts
@@ -34,9 +34,15 @@ export class LoginComponent implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.html b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.html
index e1d3dc96..2fb92005 100644
--- a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.html
+++ b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.html
@@ -1,8 +1,8 @@
-<div id="mail-confirm" fxLayout="column" fusePerfectScrollbar>
+<div id="mail-confirm" fxLayout="column">
 
     <div id="mail-confirm-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="mail-confirm-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+        <div id="mail-confirm-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
                 <mat-icon class="mat-accent s-96">email</mat-icon>
diff --git a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.scss b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.scss
index 3670f0eb..3d6b4c22 100644
--- a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.scss
+++ b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.scss
@@ -4,7 +4,6 @@
 
     #mail-confirm {
         width: 100%;
-        overflow: auto;
         background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat;
         background-size: cover;
 
diff --git a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts
index 35495d64..e69c2256 100644
--- a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts
+++ b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts
@@ -23,9 +23,15 @@ export class MailConfirmComponent
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
     }
diff --git a/src/app/main/pages/authentication/register-2/register-2.component.html b/src/app/main/pages/authentication/register-2/register-2.component.html
index ec5ad4e1..ed067ad3 100644
--- a/src/app/main/pages/authentication/register-2/register-2.component.html
+++ b/src/app/main/pages/authentication/register-2/register-2.component.html
@@ -1,23 +1,23 @@
-<div id="register" fxLayout="row" fxLayoutAlign="start">
+<div id="register" class="inner-scroll" fxLayout="row" fxLayoutAlign="start">
 
     <div id="register-intro" fxFlex fxHide fxShow.gt-xs>
 
-        <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
+        <div class="logo" [@animate]="{value:'*',params:{scale:'0.2'}}">
             <img src="assets/images/logos/fuse.svg">
         </div>
 
-        <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
+        <div class="title" [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
             Welcome to the FUSE!
         </div>
 
-        <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
+        <div class="description" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
             vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
         </div>
 
     </div>
 
-    <div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom
+    <div id="register-form-wrapper" fusePerfectScrollbar
          [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="register-form">
diff --git a/src/app/main/pages/authentication/register-2/register-2.component.ts b/src/app/main/pages/authentication/register-2/register-2.component.ts
index fb403b1f..5ef53f56 100644
--- a/src/app/main/pages/authentication/register-2/register-2.component.ts
+++ b/src/app/main/pages/authentication/register-2/register-2.component.ts
@@ -34,9 +34,15 @@ export class Register2Component implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/authentication/register/register.component.html b/src/app/main/pages/authentication/register/register.component.html
index 12c92522..7e0ad465 100644
--- a/src/app/main/pages/authentication/register/register.component.html
+++ b/src/app/main/pages/authentication/register/register.component.html
@@ -1,8 +1,8 @@
-<div id="register" fxLayout="column" fusePerfectScrollbar>
+<div id="register" fxLayout="column">
 
     <div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="register-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+        <div id="register-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
                 <img src="assets/images/logos/fuse.svg">
diff --git a/src/app/main/pages/authentication/register/register.component.scss b/src/app/main/pages/authentication/register/register.component.scss
index de627ee8..e3f90e25 100644
--- a/src/app/main/pages/authentication/register/register.component.scss
+++ b/src/app/main/pages/authentication/register/register.component.scss
@@ -4,7 +4,6 @@
 
     #register {
         width: 100%;
-        overflow: auto;
         background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat;
         background-size: cover;
 
diff --git a/src/app/main/pages/authentication/register/register.component.ts b/src/app/main/pages/authentication/register/register.component.ts
index 0002f0cd..aebc79a0 100644
--- a/src/app/main/pages/authentication/register/register.component.ts
+++ b/src/app/main/pages/authentication/register/register.component.ts
@@ -28,9 +28,15 @@ export class RegisterComponent implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html
index ed45a2b8..eb28c43b 100644
--- a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html
+++ b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html
@@ -1,23 +1,23 @@
-<div id="reset-password" fxLayout="row" fxLayoutAlign="start">
+<div id="reset-password" class="inner-scroll" fxLayout="row" fxLayoutAlign="start">
 
     <div id="reset-password-intro" fxFlex fxHide fxShow.gt-xs>
 
-        <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
+        <div class="logo" [@animate]="{value:'*',params:{scale:'0.2'}}">
             <img src="assets/images/logos/fuse.svg">
         </div>
 
-        <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
+        <div class="title" [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
             Welcome to the FUSE!
         </div>
 
-        <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
+        <div class="description" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
             vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
         </div>
 
     </div>
 
-    <div id="reset-password-form-wrapper" fusePerfectScrollbar *fuseIfOnDom
+    <div id="reset-password-form-wrapper" fusePerfectScrollbar
          [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="reset-password-form">
diff --git a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts
index da812b29..052beba7 100644
--- a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts
+++ b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts
@@ -28,9 +28,15 @@ export class ResetPassword2Component implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/authentication/reset-password/reset-password.component.html b/src/app/main/pages/authentication/reset-password/reset-password.component.html
index 190b9a5e..bdb49919 100644
--- a/src/app/main/pages/authentication/reset-password/reset-password.component.html
+++ b/src/app/main/pages/authentication/reset-password/reset-password.component.html
@@ -1,9 +1,8 @@
-<div id="reset-password" fxLayout="column" fusePerfectScrollbar>
+<div id="reset-password" fxLayout="column">
 
-    <div id="reset-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center"
-         *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+    <div id="reset-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="reset-password-form">
+        <div id="reset-password-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
                 <img src="assets/images/logos/fuse.svg">
diff --git a/src/app/main/pages/authentication/reset-password/reset-password.component.scss b/src/app/main/pages/authentication/reset-password/reset-password.component.scss
index 1465f371..fd89326c 100644
--- a/src/app/main/pages/authentication/reset-password/reset-password.component.scss
+++ b/src/app/main/pages/authentication/reset-password/reset-password.component.scss
@@ -4,7 +4,6 @@
 
     #reset-password {
         width: 100%;
-        overflow: auto;
         background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat;
         background-size: cover;
 
diff --git a/src/app/main/pages/authentication/reset-password/reset-password.component.ts b/src/app/main/pages/authentication/reset-password/reset-password.component.ts
index 749d5a4b..d231c341 100644
--- a/src/app/main/pages/authentication/reset-password/reset-password.component.ts
+++ b/src/app/main/pages/authentication/reset-password/reset-password.component.ts
@@ -34,9 +34,15 @@ export class ResetPasswordComponent implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/coming-soon/coming-soon.component.html b/src/app/main/pages/coming-soon/coming-soon.component.html
index 3a04bd26..94b80ced 100644
--- a/src/app/main/pages/coming-soon/coming-soon.component.html
+++ b/src/app/main/pages/coming-soon/coming-soon.component.html
@@ -1,8 +1,8 @@
-<div id="coming-soon" fxLayout="column" fusePerfectScrollbar>
+<div id="coming-soon" fxLayout="column">
 
     <div id="coming-soon-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="coming-soon-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+        <div id="coming-soon-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="top">
 
diff --git a/src/app/main/pages/coming-soon/coming-soon.component.scss b/src/app/main/pages/coming-soon/coming-soon.component.scss
index 75a10c32..2f295589 100644
--- a/src/app/main/pages/coming-soon/coming-soon.component.scss
+++ b/src/app/main/pages/coming-soon/coming-soon.component.scss
@@ -4,7 +4,6 @@
 
     #coming-soon {
         width: 100%;
-        overflow: auto;
         background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat;
         background-size: cover;
 
diff --git a/src/app/main/pages/coming-soon/coming-soon.component.ts b/src/app/main/pages/coming-soon/coming-soon.component.ts
index 5fdfdd2c..39cbe734 100644
--- a/src/app/main/pages/coming-soon/coming-soon.component.ts
+++ b/src/app/main/pages/coming-soon/coming-soon.component.ts
@@ -34,9 +34,15 @@ export class ComingSoonComponent implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
 
diff --git a/src/app/main/pages/errors/404/error-404.component.scss b/src/app/main/pages/errors/404/error-404.component.scss
index 9b63891d..8c94f7f3 100644
--- a/src/app/main/pages/errors/404/error-404.component.scss
+++ b/src/app/main/pages/errors/404/error-404.component.scss
@@ -4,7 +4,6 @@
 
     #error-404 {
         width: 100%;
-        overflow: auto;
 
         .content {
             width: 90%;
diff --git a/src/app/main/pages/errors/404/error-404.component.ts b/src/app/main/pages/errors/404/error-404.component.ts
index 04c0048b..2f8a6986 100644
--- a/src/app/main/pages/errors/404/error-404.component.ts
+++ b/src/app/main/pages/errors/404/error-404.component.ts
@@ -21,9 +21,15 @@ export class Error404Component
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
     }
diff --git a/src/app/main/pages/errors/500/error-500.component.scss b/src/app/main/pages/errors/500/error-500.component.scss
index 6b7667e8..c8123c56 100644
--- a/src/app/main/pages/errors/500/error-500.component.scss
+++ b/src/app/main/pages/errors/500/error-500.component.scss
@@ -4,7 +4,6 @@
 
     #error-500 {
         width: 100%;
-        overflow: auto;
 
         .content {
             width: 90%;
diff --git a/src/app/main/pages/errors/500/error-500.component.ts b/src/app/main/pages/errors/500/error-500.component.ts
index 8303f8b5..f68e94e3 100644
--- a/src/app/main/pages/errors/500/error-500.component.ts
+++ b/src/app/main/pages/errors/500/error-500.component.ts
@@ -9,16 +9,27 @@ import { FuseConfigService } from '@fuse/services/config.service';
 })
 export class Error500Component
 {
+    /**
+     * Constructor
+     *
+     * @param {FuseConfigService} _fuseConfigService
+     */
     constructor(
-        private fuseConfig: FuseConfigService
+        private _fuseConfigService: FuseConfigService
     )
     {
         // Configure the layout
-        this.fuseConfig.config = {
+        this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
     }
diff --git a/src/app/main/pages/faq/faq.component.html b/src/app/main/pages/faq/faq.component.html
index 4ccb44cd..fcbe8208 100644
--- a/src/app/main/pages/faq/faq.component.html
+++ b/src/app/main/pages/faq/faq.component.html
@@ -1,4 +1,4 @@
-<div id="faq" class="page-layout simple" fusePerfectScrollbar>
+<div id="faq" class="page-layout simple full-width">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
diff --git a/src/app/main/pages/invoices/compact/compact.component.html b/src/app/main/pages/invoices/compact/compact.component.html
index 10772e32..2d798393 100644
--- a/src/app/main/pages/invoices/compact/compact.component.html
+++ b/src/app/main/pages/invoices/compact/compact.component.html
@@ -1,4 +1,4 @@
-<div id="invoice" class="compact page-layout blank" fxLayout="row" fusePerfectScrollbar>
+<div id="invoice" class="compact page-layout blank" fxLayout="row">
 
     <div class="invoice-container">
 
diff --git a/src/app/main/pages/invoices/compact/compact.component.scss b/src/app/main/pages/invoices/compact/compact.component.scss
index 46726dd7..bece3292 100644
--- a/src/app/main/pages/invoices/compact/compact.component.scss
+++ b/src/app/main/pages/invoices/compact/compact.component.scss
@@ -6,7 +6,6 @@
 
         &.compact {
             padding: 0;
-            overflow: auto;
 
             .invoice-container {
                 padding: 64px;
diff --git a/src/app/main/pages/invoices/modern/modern.component.html b/src/app/main/pages/invoices/modern/modern.component.html
index 9a30b89d..98e08a2f 100644
--- a/src/app/main/pages/invoices/modern/modern.component.html
+++ b/src/app/main/pages/invoices/modern/modern.component.html
@@ -1,4 +1,4 @@
-<div id="invoice" class="modern page-layout blank" fxLayout="row" fusePerfectScrollbar>
+<div id="invoice" class="modern page-layout blank" fxLayout="row">
 
     <div class="invoice-container">
 
diff --git a/src/app/main/pages/invoices/modern/modern.component.scss b/src/app/main/pages/invoices/modern/modern.component.scss
index cad1ef80..d077de58 100644
--- a/src/app/main/pages/invoices/modern/modern.component.scss
+++ b/src/app/main/pages/invoices/modern/modern.component.scss
@@ -6,7 +6,6 @@
 
         &.modern {
             padding: 0;
-            overflow: auto;
 
             .invoice-container {
                 padding: 64px;
diff --git a/src/app/main/pages/knowledge-base/knowledge-base.component.html b/src/app/main/pages/knowledge-base/knowledge-base.component.html
index dd1c904a..b20480d4 100644
--- a/src/app/main/pages/knowledge-base/knowledge-base.component.html
+++ b/src/app/main/pages/knowledge-base/knowledge-base.component.html
@@ -1,4 +1,4 @@
-<div id="knowledgebase" class="page-layout simple" fusePerfectScrollbar>
+<div id="knowledgebase" class="page-layout simple full-width">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
diff --git a/src/app/main/pages/maintenance/maintenance.component.html b/src/app/main/pages/maintenance/maintenance.component.html
index 4706e03e..92f1e9d9 100644
--- a/src/app/main/pages/maintenance/maintenance.component.html
+++ b/src/app/main/pages/maintenance/maintenance.component.html
@@ -1,8 +1,8 @@
-<div id="maintenance" fxLayout="column" fusePerfectScrollbar>
+<div id="maintenance" fxLayout="column">
 
     <div id="maintenance-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="maintenance-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+        <div id="maintenance-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
                 <img src="assets/images/logos/fuse.svg">
diff --git a/src/app/main/pages/maintenance/maintenance.component.scss b/src/app/main/pages/maintenance/maintenance.component.scss
index 8c737059..ba98ed99 100644
--- a/src/app/main/pages/maintenance/maintenance.component.scss
+++ b/src/app/main/pages/maintenance/maintenance.component.scss
@@ -4,7 +4,6 @@
 
     #maintenance {
         width: 100%;
-        overflow: auto;
         background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat;
         background-size: cover;
 
diff --git a/src/app/main/pages/maintenance/maintenance.component.ts b/src/app/main/pages/maintenance/maintenance.component.ts
index 37e3451d..4e86c78e 100644
--- a/src/app/main/pages/maintenance/maintenance.component.ts
+++ b/src/app/main/pages/maintenance/maintenance.component.ts
@@ -23,9 +23,15 @@ export class MaintenanceComponent
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navigation: 'none',
-                toolbar   : 'none',
-                footer    : 'none'
+                navbar : {
+                    hidden: true
+                },
+                toolbar: {
+                    hidden: true
+                },
+                footer : {
+                    hidden: true
+                }
             }
         };
     }
diff --git a/src/app/main/pages/pricing/style-1/style-1.component.html b/src/app/main/pages/pricing/style-1/style-1.component.html
index d006775d..1a32a0d4 100644
--- a/src/app/main/pages/pricing/style-1/style-1.component.html
+++ b/src/app/main/pages/pricing/style-1/style-1.component.html
@@ -1,4 +1,4 @@
-<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="price-tables" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header" fxLayout="row" fxLayoutAlign="start start">
diff --git a/src/app/main/pages/pricing/style-2/style-2.component.html b/src/app/main/pages/pricing/style-2/style-2.component.html
index d79f0b5e..70f0ab43 100644
--- a/src/app/main/pages/pricing/style-2/style-2.component.html
+++ b/src/app/main/pages/pricing/style-2/style-2.component.html
@@ -1,4 +1,4 @@
-<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="price-tables" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header" fxLayout="row" fxLayoutAlign="start start">
diff --git a/src/app/main/pages/pricing/style-3/style-3.component.html b/src/app/main/pages/pricing/style-3/style-3.component.html
index a4d7759a..4d31cf9d 100644
--- a/src/app/main/pages/pricing/style-3/style-3.component.html
+++ b/src/app/main/pages/pricing/style-3/style-3.component.html
@@ -1,4 +1,4 @@
-<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="price-tables" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header" fxLayout="row" fxLayoutAlign="start start">
diff --git a/src/app/main/pages/profile/profile.component.html b/src/app/main/pages/profile/profile.component.html
index 35f630bc..49be7b5f 100644
--- a/src/app/main/pages/profile/profile.component.html
+++ b/src/app/main/pages/profile/profile.component.html
@@ -1,4 +1,4 @@
-<div id="profile" class="page-layout simple tabbed" fusePerfectScrollbar>
+<div id="profile" class="page-layout simple tabbed">
 
     <!-- HEADER -->
     <div class="header p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
@@ -7,13 +7,12 @@
         <div class="user-info" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
              fxLayoutAlign.gt-sm="start center">
             <img class="profile-image avatar huge" src="assets/images/avatars/katherine.jpg"
-                 *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
-            <div class="name" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson
+                 [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+            <div class="name" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson
             </div>
         </div>
 
-        <div class="actions" fxLayout="row" fxLayoutAlign="end center" *fuseIfOnDom
-             [@animate]="{value:'*',params:{delay:'200ms'}}">
+        <div class="actions" fxLayout="row" fxLayoutAlign="end center" [@animate]="{value:'*',params:{delay:'200ms'}}">
             <button mat-raised-button color="accent" aria-label="Follow">Follow</button>
             <button mat-raised-button color="primary" aria-label="Send Message">Send Message</button>
         </div>
diff --git a/src/app/main/pages/search/search.component.html b/src/app/main/pages/search/search.component.html
index abc38e17..62e931ac 100644
--- a/src/app/main/pages/search/search.component.html
+++ b/src/app/main/pages/search/search.component.html
@@ -1,4 +1,4 @@
-<div id="search" class="page-layout simple tabbed" fusePerfectScrollbar>
+<div id="search" class="page-layout simple tabbed">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"