nebular update and structure refactoring

2025-12-18 00:10:14 +01:00 · 2019-06-11 18:18:58 +03:00 · 2019-06-11 18:18:58 +03:00 · df489ad17e
commit df489ad17e
parent 78e4d2cfe9
100 changed files with 736 additions and 3945 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1639,24 +1639,29 @@
      "dev": true
    },
    "@nebular/auth": {
-      "version": "4.0.0-rc.6",
-      "resolved": "https://registry.npmjs.org/@nebular/auth/-/auth-4.0.0-rc.6.tgz",
-      "integrity": "sha512-fHn+6WMOQvj6dIuvPcbb2P3m1yp+gPX05vrgUYhRQeT0WzXZi/3vwu8+EvHUgqFowy/Tk0jCiTvHEYj5kWgrYA=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@nebular/auth/-/auth-4.0.0.tgz",
+      "integrity": "sha512-VShBFTpWDjaM1yWPZLilwaf1+/ZDs+W3bEKtmW8MTs+eG6pJX9ulyicPax/B3l5MT2PQ2AKdvRNEd9LgfBTT5Q=="
    },
    "@nebular/bootstrap": {
-      "version": "4.0.0-rc.5",
-      "resolved": "https://registry.npmjs.org/@nebular/bootstrap/-/bootstrap-4.0.0-rc.5.tgz",
-      "integrity": "sha512-58/vfemsHXjv6OFaVk8MPAzX2EDjb9PNOrPjYTeoa5337Lv098vG9tlYNo1Eq1anOFepAG/uFJoMbntTUFfO5w=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@nebular/bootstrap/-/bootstrap-4.0.0.tgz",
+      "integrity": "sha512-YiHPeAp2HOXf0yGmA0wfDVTonc1Aiy4I6yn42Xd2PlBKv7a8sXq+W7vBkUNdMiS/+8vQeCCvCxelcdXDsTxjXw=="
+    },
+    "@nebular/eva-icons": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@nebular/eva-icons/-/eva-icons-4.0.0.tgz",
+      "integrity": "sha512-Cce27XeE1U8opWyf4jXZWXDxx0EsaxLuz5SA5iyyBPV21JcXXdhmO8+jFwnu0YlqrwNePF0pKj/7GYJGs1JWfw=="
    },
    "@nebular/security": {
-      "version": "4.0.0-rc.6",
-      "resolved": "https://registry.npmjs.org/@nebular/security/-/security-4.0.0-rc.6.tgz",
-      "integrity": "sha512-ZpxF3fmr68ER4Os4dkJGguq7nh9CFG68c+U210bUWrPDP6TqvZUeO76Txpetvinkw3ze65QX6Sh0xxG7SiYxaA=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@nebular/security/-/security-4.0.0.tgz",
+      "integrity": "sha512-e5SEZIMGOT1DwNql+TmAv1hC9WcH5DMHyfbJWzfJST1t8I9rkuSFYIYg5Luvf0id5LknjsqrNbjxu3lC01uitQ=="
    },
    "@nebular/theme": {
-      "version": "4.0.0-rc.6",
-      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-4.0.0-rc.6.tgz",
-      "integrity": "sha512-lRdwiVkiqrAMEjYQfhQuH96dIpJoQIEWG2Hr68Io3U0XF3Y+OcWVO9iA8BZ9YqI8ZCNAFCoRI3uuqdLpUQNbUw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-4.0.0.tgz",
+      "integrity": "sha512-wFPLMRvHKkcKH/oKuc8TtXFJOaeFWYOvG7AvkgI3IqtkHa+x8fEsz4EMLFPOh4XADOjxXHo8wAHI3vhsgyavcg==",
      "requires": {
        "intersection-observer": "0.5.0"
      }
--- a/package.json
+++ b/package.json
@ -40,10 +40,11 @@
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "4.0.0-rc.6",
-    "@nebular/bootstrap": "4.0.0-rc.5",
-    "@nebular/security": "4.0.0-rc.6",
-    "@nebular/theme": "4.0.0-rc.6",
+    "@nebular/auth": "4.0.0",
+    "@nebular/bootstrap": "4.0.0",
+    "@nebular/eva-icons": "^4.0.0",
+    "@nebular/security": "4.0.0",
+    "@nebular/theme": "4.0.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@swimlane/ngx-charts": "^10.0.0",
    "angular-tree-component": "7.2.0",
--- a/src/app/@theme/components/header/header.component.html
+++ b/src/app/@theme/components/header/header.component.html
@ -1,26 +1,29 @@
 <div class="header-container"
     [class.left]="position === 'normal'"
     [class.right]="position === 'inverse'">
-  <div class="logo-containter">
-    <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
-    <div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
+  <div class="logo-container">
+    <a (click)="toggleSidebar()" href="#" class="navigation">
+      <nb-icon icon="menu-2-outline"></nb-icon>
+    </a>
+    <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
  </div>
-  <ngx-theme-switcher></ngx-theme-switcher>
+  <nb-select [(selected)]="currentTheme" (selectedChange)="toggleTheme()" status="primary">
+    <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
+  </nb-select>
 </div>

 <div class="header-container">
-  <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
  <nb-actions
-    size="medium"
+    size="small"
    [class.right]="position === 'normal'"
    [class.left]="position === 'inverse'">
    <nb-action *nbIsGranted="['view', 'user']" >
      <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
    </nb-action>
-    <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
-    <nb-action class="control-item" icon="nb-email"></nb-action>
+    <nb-action class="control-item" icon="bell-outline"></nb-action>
+    <nb-action class="control-item" icon="email-outline"></nb-action>
    <nb-action class="control-item">
-      <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
+      <nb-search type="rotate-layout"></nb-search>
    </nb-action>
  </nb-actions>
 </div>
--- a/src/app/@theme/components/header/header.component.scss
+++ b/src/app/@theme/components/header/header.component.scss
@ -1,7 +1,7 @@
@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
+//@import '~bootstrap/scss/mixins/breakpoints';
+//@import '~@nebular/theme/styles/global/breakpoints';
+//
@include nb-install-component() {
  display: flex;
  justify-content: space-between;
@ -18,14 +18,24 @@
    flex-direction: row-reverse;
  }

-  .logo-containter {
+  .logo-container {
    display: flex;
    align-items: center;
    width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
  }

-  .control-item {
-    display: block;
+  nb-action {
+    height: auto;
+    display: flex;
+    align-content: center;
+  }
+
+  nb-user {
+    cursor: pointer;
+  }
+
+  ::ng-deep nb-search button {
+    padding: 0!important;
  }

  .header-container {
@ -34,179 +44,173 @@
    width: auto;

    .navigation {
-      @include nb-ltr(padding-right, nb-theme(padding));
-      @include nb-rtl(padding-left, nb-theme(padding));
-      font-size: 2.5rem;
+      @include nb-ltr(padding-right, 1.25rem);
+      @include nb-rtl(padding-left, 1.25rem);
      text-decoration: none;

-      i {
-        display: block;
+      nb-icon {
+        font-size: 2.5rem;
      }
-
    }

    .logo {
-      padding: 0 nb-theme(padding);
+      padding: 0 1.25rem;
      font-size: 1.75rem;
-      font-weight: nb-theme(font-weight-bolder);
-      @include nb-ltr(border-left, 1px solid nb-theme(separator));
-      @include nb-rtl(border-right, 1px solid nb-theme(separator));
+      @include nb-ltr(border-left, 1px solid nb-theme(divider-color));
+      @include nb-rtl(border-right, 1px solid nb-theme(divider-color));
      white-space: nowrap;
-
-      span {
-        font-weight: nb-theme(font-weight-normal);
-      }
-    }
-  }
-
-  @include nb-for-theme(corporate) {
-    $menu-action-separator-color: #3f4550;
-
-    nb-action {
-      @include nb-ltr(border-left-color, $menu-action-separator-color);
-      @include nb-rtl(border-right-color, $menu-action-separator-color);
-    }
-
-    .header-container .logo {
-      @include nb-ltr(border, none);
-      @include nb-rtl(border, none);
-    }
-
-    .header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
-      color: nb-theme(color-white);
-      background: transparent;
-    }
-  }
-
-  ngx-layout-direction-switcher {
-    margin: 0 1.5rem;
-  }
-
-  ngx-theme-switcher {
-    margin: nb-theme(layout-padding);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  @include media-breakpoint-down(xl) {
-    ngx-layout-direction-switcher {
-      display: none;
-    }
-  }
-
-  .toggle-settings ::ng-deep a {
-    display: block;
-    text-decoration: none;
-    line-height: 1;
-
-    i {
-      color: nb-theme(color-fg-highlight);
-      font-size: 2.25rem;
-      border-radius: 50%;
-      position: relative;
-      animation-name: pulse-light;
-
-      &::after {
-        content: ' ';
-        // hack to be able to set border-radius
-        background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
-        border-radius: 50%;
-        pointer-events: none;
-
-        position: absolute;
-        top: 52.3%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 13%;
-        height: 13%;
-
-        animation: 3s linear infinite pulse;
-
-        @include nb-for-theme(default) {
-          animation-name: pulse-light;
-        }
-      }
-    }
-  }
-
-  @include keyframes(pulse) {
-    0% {
-      //box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
-    }
-    20% {
-      //box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
-    }
-    100% {
-      //box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
-    }
-  }
-
-  @include keyframes(pulse-light) {
-    0% {
-      box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
-    }
-    20% {
-      box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
-    }
-    100% {
-      box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
-    }
-  }
-
-  @include media-breakpoint-down(md) {
-
-    nb-action:not(.toggle-settings) {
-      border: none;
-    }
-
-    .control-item {
-      display: none;
-    }
-
-    .toggle-settings {
-      padding: 0;
-    }
-
-    ngx-layout-direction-switcher {
-      display: none;
-    }
-
-    ngx-theme-switcher {
-      margin: 0 0.5rem;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-user ::ng-deep .user-name {
-      display: none;
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-
-    .header-container {
-      .logo {
-        font-size: 1.25rem;
-      }
-    }
-
-    .toggle-settings {
-      display: none;
-    }
-
-    ngx-theme-switcher {
-      display: none;
-    }
-
-    nb-action:not(.toggle-settings) {
-      padding: 0;
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .right ::ng-deep {
-      display: none;
+      text-decoration: none;
    }
  }
+//
+//  @include nb-for-theme(corporate) {
+//    $menu-action-separator-color: #3f4550;
+//
+//    nb-action {
+//      @include nb-ltr(border-left-color, $menu-action-separator-color);
+//      @include nb-rtl(border-right-color, $menu-action-separator-color);
+//    }
+//
+//    .header-container .logo {
+//      @include nb-ltr(border, none);
+//      @include nb-rtl(border, none);
+//    }
+//
+//    .header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
+//      color: nb-theme(color-white);
+//      background: transparent;
+//    }
+//  }
+//
+//  ngx-layout-direction-switcher {
+//    margin: 0 1.5rem;
+//  }
+//
+//  ngx-theme-switcher {
+//    margin: nb-theme(layout-padding);
+//    margin-top: 0;
+//    margin-bottom: 0;
+//  }
+//
+//  @include media-breakpoint-down(xl) {
+//    ngx-layout-direction-switcher {
+//      display: none;
+//    }
+//  }
+//
+//  .toggle-settings ::ng-deep a {
+//    display: block;
+//    text-decoration: none;
+//    line-height: 1;
+//
+//    i {
+//      color: nb-theme(color-fg-highlight);
+//      font-size: 2.25rem;
+//      border-radius: 50%;
+//      position: relative;
+//      animation-name: pulse-light;
+//
+//      &::after {
+//        content: ' ';
+//        // hack to be able to set border-radius
+//        background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
+//        border-radius: 50%;
+//        pointer-events: none;
+//
+//        position: absolute;
+//        top: 52.3%;
+//        left: 50%;
+//        transform: translate(-50%, -50%);
+//        width: 13%;
+//        height: 13%;
+//
+//        animation: 3s linear infinite pulse;
+//
+//        @include nb-for-theme(default) {
+//          animation-name: pulse-light;
+//        }
+//      }
+//    }
+//  }
+//
+//  @include keyframes(pulse) {
+//    0% {
+//      //box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
+//    }
+//    20% {
+//      //box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
+//    }
+//    100% {
+//      //box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
+//    }
+//  }
+//
+//  @include keyframes(pulse-light) {
+//    0% {
+//      box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
+//    }
+//    20% {
+//      box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
+//    }
+//    100% {
+//      box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
+//    }
+//  }
+//
+//  @include media-breakpoint-down(md) {
+//
+//    nb-action:not(.toggle-settings) {
+//      border: none;
+//    }
+//
+//    .control-item {
+//      display: none;
+//    }
+//
+//    .toggle-settings {
+//      padding: 0;
+//    }
+//
+//    ngx-layout-direction-switcher {
+//      display: none;
+//    }
+//
+//    ngx-theme-switcher {
+//      margin: 0 0.5rem;
+//    }
+//  }
+//
+//  @include media-breakpoint-down(sm) {
+//
+//    nb-user ::ng-deep .user-name {
+//      display: none;
+//    }
+//  }
+//
+//  @include media-breakpoint-down(is) {
+//
+//    .header-container {
+//      .logo {
+//        font-size: 1.25rem;
+//      }
+//    }
+//
+//    .toggle-settings {
+//      display: none;
+//    }
+//
+//    ngx-theme-switcher {
+//      display: none;
+//    }
+//
+//    nb-action:not(.toggle-settings) {
+//      padding: 0;
+//    }
+//  }
+//
+//  @include media-breakpoint-down(xs) {
+//    .right ::ng-deep {
+//      display: none;
+//    }
+//  }
 }
--- a/src/app/@theme/components/header/header.component.ts
+++ b/src/app/@theme/components/header/header.component.ts
@ -1,8 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';

-import { NbMenuService, NbSidebarService } from '@nebular/theme';
 import { UserData } from '../../../@core/data/users';
-import { AnalyticsService } from '../../../@core/utils';
 import { LayoutService } from '../../../@core/utils';

@Component({
@ -16,12 +15,33 @@ export class HeaderComponent implements OnInit {

  user: any;

-  userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
+  themes = [
+    {
+      value: 'default',
+      name: 'Light',
+    },
+    {
+      value: 'dark',
+      name: 'Dark',
+    },
+    {
+      value: 'cosmic',
+      name: 'Cosmic',
+    },
+    {
+      value: 'corporate',
+      name: 'Corporate',
+    },
+  ];
+
+  currentTheme = 'default';
+
+  userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];

  constructor(private sidebarService: NbSidebarService,
              private menuService: NbMenuService,
+              private themeService: NbThemeService,
              private userService: UserData,
-              private analyticsService: AnalyticsService,
              private layoutService: LayoutService) {
  }

@ -30,6 +50,10 @@ export class HeaderComponent implements OnInit {
      .subscribe((users: any) => this.user = users.nick);
  }

+  toggleTheme() {
+    this.themeService.changeTheme(this.currentTheme);
+  }
+
  toggleSidebar(): boolean {
    this.sidebarService.toggle(true, 'menu-sidebar');
    this.layoutService.changeLayoutSize();
@ -37,11 +61,8 @@ export class HeaderComponent implements OnInit {
    return false;
  }

-  goToHome() {
+  navigateHome() {
    this.menuService.navigateHome();
-  }
-
-  startSearch() {
-    this.analyticsService.trackEvent('startSearch');
+    return false;
  }
 }
--- a/src/app/@theme/components/index.ts
+++ b/src/app/@theme/components/index.ts
@ -2,9 +2,3 @@ export * from './header/header.component';
 export * from './footer/footer.component';
 export * from './search-input/search-input.component';
 export * from './tiny-mce/tiny-mce.component';
-export * from './theme-settings/theme-settings.component';
-export * from './theme-switcher/theme-switcher.component';
-export * from './switcher/switcher.component';
-export * from './layout-direction-switcher/layout-direction-switcher.component';
-export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
-export * from './toggle-settings-button/toggle-settings-button.component';
--- a/src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts
+++ b/src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts
@ -1,42 +0,0 @@
-import { Component, OnDestroy, Input } from '@angular/core';
-import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
-
-@Component({
-  selector: 'ngx-layout-direction-switcher',
-  template: `
-    <ngx-switcher
-      [firstValue]="directions.RTL"
-      [secondValue]="directions.LTR"
-      [firstValueLabel]="'RTL'"
-      [secondValueLabel]="'LTR'"
-      [value]="currentDirection"
-      (valueChange)="toggleDirection($event)"
-      [vertical]="vertical"
-    >
-    </ngx-switcher>
-  `,
-})
-export class LayoutDirectionSwitcherComponent implements OnDestroy {
-  directions = NbLayoutDirection;
-  currentDirection: NbLayoutDirection;
-  alive = true;
-
-  @Input() vertical: boolean = false;
-
-  constructor(private directionService: NbLayoutDirectionService) {
-    this.currentDirection = this.directionService.getDirection();
-
-    this.directionService.onDirectionChange()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(newDirection => this.currentDirection = newDirection);
-  }
-
-  toggleDirection(newDirection) {
-    this.directionService.setDirection(newDirection);
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}
--- a/src/app/@theme/components/switcher/switcher.component.scss
+++ b/src/app/@theme/components/switcher/switcher.component.scss
@ -1,112 +0,0 @@
-//@import '../../styles/themes';
-//@import '~@nebular/bootstrap/styles/hero-buttons';
-//@import '~bootstrap/scss/mixins/breakpoints';
-//@import '~@nebular/theme/styles/global/breakpoints';
-//
-//@include nb-install-component() {
-//  .switch-label {
-//    display: flex;
-//    justify-content: space-between;
-//    align-items: center;
-//    cursor: pointer;
-//    margin: 0;
-//
-//    &.vertical {
-//      flex-direction: column;
-//      align-items: flex-start;
-//
-//      .first,
-//      .second {
-//        padding: 0;
-//      }
-//
-//      .switch {
-//        margin-top: 0.5em;
-//      }
-//    }
-//
-//    & > span {
-//      font-size: 1.125rem;
-//      font-weight: nb-theme(font-weight-bold);
-//      transition: opacity 0.3s ease;
-//      color: nb-theme(color-fg);
-//
-//      &.first {
-//        @include nb-ltr(padding-right, 10px);
-//        @include nb-rtl(padding-left, 10px);
-//      }
-//
-//      &.second {
-//        @include nb-ltr(padding-left, 10px);
-//        @include nb-rtl(padding-right, 10px);
-//      }
-//
-//      &.active {
-//        color: nb-theme(color-fg-text);
-//      }
-//
-//      @include nb-for-theme(cosmic) {
-//        color: nb-theme(color-fg);
-//
-//        &.active {
-//          color: nb-theme(color-white);
-//        }
-//      }
-//
-//      &:active {
-//        opacity: 0.78;
-//      }
-//    }
-//  }
-//
-//  .switch {
-//    position: relative;
-//    display: inline-block;
-//    width: 3rem;
-//    height: 1.5rem;
-//    margin: 0;
-//
-//    input {
-//      display: none;
-//
-//      &:checked + .slider::before {
-//        @include nb-ltr(transform, translateX(1.5rem));
-//        @include nb-rtl(transform, translateX(-1.5rem));
-//      }
-//    }
-//
-//    .slider {
-//      position: absolute;
-//      top: 0;
-//      left: 0;
-//      right: 0;
-//      bottom: 0;
-//      border-radius: 1.75rem;
-//      background-color: nb-theme(layout-bg);
-//    }
-//
-//    .slider::before {
-//      position: absolute;
-//      content: '';
-//      height: 1.5rem;
-//      width: 1.5rem;
-//      border-radius: 50%;
-//      background-color: nb-theme(color-success);
-//      transition: 0.2s;
-//
-//      //box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
-//
-//      @include nb-for-theme(cosmic) {
-//        @include btn-hero-primary-gradient();
-//      }
-//
-//      @include nb-for-theme(corporate) {
-//        background-color: nb-theme(color-primary);
-//      }
-//    }
-//  }
-//
-//  @include media-breakpoint-down(xs) {
-//    align-items: flex-end;
-//  }
-//}
--- a/src/app/@theme/components/switcher/switcher.component.ts
+++ b/src/app/@theme/components/switcher/switcher.component.ts
@ -1,60 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'ngx-switcher',
-  styleUrls: ['./switcher.component.scss'],
-  template: `
-    <label class="switch-label" [class.vertical]="vertical">
-      <span class="first" [class.active]="vertical || isFirstValue()">
-        {{vertical ? currentValueLabel() : firstValueLabel}}
-      </span>
-
-      <div class="switch">
-        <input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
-        <span class="slider"></span>
-      </div>
-
-      <span
-        *ngIf="!vertical"
-        class="second"
-        [class.active]="isSecondValue()"
-      >
-          {{secondValueLabel}}
-      </span>
-    </label>
-  `,
-})
-export class SwitcherComponent {
-  @Input() firstValue: any;
-  @Input() secondValue: any;
-
-  @Input() firstValueLabel: string;
-  @Input() secondValueLabel: string;
-
-  @Input() vertical: boolean;
-
-  @Input() value: any;
-  @Output() valueChange = new EventEmitter<any>();
-
-  isFirstValue() {
-    return this.value === this.firstValue;
-  }
-
-  isSecondValue() {
-    return this.value === this.secondValue;
-  }
-
-  currentValueLabel() {
-    return this.isFirstValue()
-      ? this.firstValueLabel
-      : this.secondValueLabel;
-  }
-
-  changeValue() {
-    this.value = this.isFirstValue()
-      ? this.secondValue
-      : this.firstValue;
-
-    this.valueChange.emit(this.value);
-  }
-}
--- a/src/app/@theme/components/theme-settings/theme-settings.component.scss
+++ b/src/app/@theme/components/theme-settings/theme-settings.component.scss
@ -1,91 +0,0 @@
-@import '../../styles/themes';
-
-@include nb-install-component() {
-  h6 {
-    margin-bottom: 0.875rem;
-    text-align: center;
-    font-weight: bold;
-    text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
-  }
-
-  .settings-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 100%;
-    margin: 0 0 2.575rem;
-
-    a {
-      display: flex;
-      justify-content: center;
-      align-content: center;
-      align-items: center;
-      width: 4.15rem;
-      height: 4.15rem;
-      border-radius: nb-theme(radius);
-      background-color: nb-theme(color-white);
-      border: 2px solid transparent;
-      margin: 0.875rem;
-      text-decoration: none;
-      font-size: 2.25rem;
-      color: nb-theme(color-fg);
-
-      &.selected {
-        color: nb-theme(color-success);
-        border-color: nb-theme(color-success);
-      }
-
-      @include nb-for-theme(cosmic) {
-        box-shadow: 0 4px 14px 0 rgba(19, 19, 94, 0.4);
-        background-color: #3e367e;
-        border: 2px solid #3e367e;
-        &.selected {
-          color: nb-theme(link-color);
-        }
-      }
-    }
-  }
-
-  .settings {
-    margin-bottom: 1em;
-  }
-
-  .switcher {
-    margin-bottom: 1rem;
-    font-size: 1.524rem;
-    width: 12rem;
-
-    ::ng-deep ngx-switcher {
-      .switch-label span {
-        font-size: 1em;
-        font-weight: normal;
-        &.first, &.second {
-          font-size: 1rem;
-        }
-      }
-
-      .switch {
-        height: 1.5em;
-        width: 3em;
-
-        .slider::before {
-          height: 1.5em;
-          width: 1.5em;
-        }
-
-        input:checked + .slider::before {
-          @include nb-ltr(transform, translateX(1.5em)!important);
-          @include nb-rtl(transform, translateX(-1.5em)!important);
-        }
-      }
-
-      @include nb-for-theme(cosmic) {
-        .switch .slider {
-          background-color: nb-theme(color-bg);
-        }
-      }
-    }
-  }
-}
--- a/src/app/@theme/components/theme-settings/theme-settings.component.ts
+++ b/src/app/@theme/components/theme-settings/theme-settings.component.ts
@ -1,70 +0,0 @@
-import { Component } from '@angular/core';
-
-import { StateService } from '../../../@core/utils';
-
-@Component({
-  selector: 'ngx-theme-settings',
-  styleUrls: ['./theme-settings.component.scss'],
-  template: `
-    <h6>LAYOUTS</h6>
-    <div class="settings-row">
-      <a *ngFor="let layout of layouts"
-         href="#"
-         [class.selected]="layout.selected"
-         [attr.title]="layout.name"
-         (click)="layoutSelect(layout)">
-        <i [attr.class]="layout.icon"></i>
-      </a>
-    </div>
-    <h6>SIDEBAR</h6>
-    <div class="settings-row">
-      <a *ngFor="let sidebar of sidebars"
-         href="#"
-         [class.selected]="sidebar.selected"
-         [attr.title]="sidebar.name"
-         (click)="sidebarSelect(sidebar)">
-        <i [attr.class]="sidebar.icon"></i>
-      </a>
-    </div>
-    <div class="settings-row">
-      <div class="switcher">
-        <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
-      </div>
-    </div>
-  `,
-})
-export class ThemeSettingsComponent {
-
-  layouts = [];
-  sidebars = [];
-
-  constructor(protected stateService: StateService) {
-    this.stateService.getLayoutStates()
-      .subscribe((layouts: any[]) => this.layouts = layouts);
-
-    this.stateService.getSidebarStates()
-      .subscribe((sidebars: any[]) => this.sidebars = sidebars);
-  }
-
-  layoutSelect(layout: any): boolean {
-    this.layouts = this.layouts.map((l: any) => {
-      l.selected = false;
-      return l;
-    });
-
-    layout.selected = true;
-    this.stateService.setLayoutState(layout);
-    return false;
-  }
-
-  sidebarSelect(sidebars: any): boolean {
-    this.sidebars = this.sidebars.map((s: any) => {
-      s.selected = false;
-      return s;
-    });
-
-    sidebars.selected = true;
-    this.stateService.setSidebarState(sidebars);
-    return false;
-  }
-}
--- a/src/app/@theme/components/theme-switcher/theme-switcher.component.html
+++ b/src/app/@theme/components/theme-switcher/theme-switcher.component.html
@ -1,7 +0,0 @@
-<div class="themes-switcher"
-     [nbPopover]="switcherListComponent"
-     nbPopoverPlacement="bottom"
-     [nbPopoverContext]="{popover: popover}">
-  <i class="nb-drops"></i>
-  <span *ngIf="showTitle">Themes</span>
-</div>
--- a/src/app/@theme/components/theme-switcher/theme-switcher.component.scss
+++ b/src/app/@theme/components/theme-switcher/theme-switcher.component.scss
@ -1,50 +0,0 @@
-@import '../../styles/themes';
-@import '~@nebular/theme/styles/core/mixins';
-@import '~@nebular/theme/styles/core/functions';
-
-@include nb-install-component() {
-  .themes-switcher {
-    display: flex;
-    font-size: 1.25rem;
-    padding: 0.8rem 1.25rem;
-    align-items: center;
-    cursor: pointer;
-    background-color: nb-theme(switcher-background);
-    border-radius: nb-theme(radius);
-
-    &:hover {
-      $color: nb-theme(switcher-background);
-      $percentage: nb-theme(switcher-background-percentage);
-
-      background-color: tint($color, $percentage);
-    }
-
-    span {
-      margin: 0 1.2rem;
-    }
-
-    i {
-      color: nb-theme(color-primary);
-      font-size: 1.8rem;
-      border-radius: 50%;
-      position: relative;
-
-      @include nb-for-theme(default) {
-        color: nb-theme(color-success);
-      }
-
-      @include nb-for-theme(corporate) {
-        color: nb-theme(color-fg-highlight);
-      }
-
-      &::before {
-        // Hack for IE11, IE11 should not set background
-        background: nb-theme(drops-icon-line-gadient);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-    }
-  }
-}
-
-
--- a/src/app/@theme/components/theme-switcher/theme-switcher.component.ts
+++ b/src/app/@theme/components/theme-switcher/theme-switcher.component.ts
@ -1,19 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { NbPopoverDirective } from '@nebular/theme';
-import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
-
-import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
-
-@Component({
-  selector: 'ngx-theme-switcher',
-  templateUrl: './theme-switcher.component.html',
-  styleUrls: ['./theme-switcher.component.scss'],
-})
-export class ThemeSwitcherComponent {
-  @ViewChild(NbPopoverDirective, { static: true }) popover: NbPopoverDirective;
-
-  @Input() showTitle: boolean = true;
-
-  switcherListComponent = ThemeSwitcherListComponent;
-  theme: NbJSThemeOptions;
-}
--- a/src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss
+++ b/src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss
@ -1,76 +0,0 @@
-@import '../../../styles/themes';
-@import '~@nebular/theme/styles/core/mixins';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-$icon-color-default: #0bbb79;
-$icon-color-cosmic: #7958fa;
-$icon-color-corporate: #a7a2be;
-
-$icon-top-color-default: #01dbb5;
-$icon-top-color-cosmic: #a258fe;
-$icon-top-color-corporate: #e9e8eb;
-
-@include nb-install-component() {
-  ::ng-deep .themes-switcher-list {
-    padding: 1rem 2rem 1.25rem 0.5rem;
-    margin: 0;
-
-    @include nb-ltr(text-align, start);
-    @include nb-rtl(text-align, end);
-
-    .themes-switcher-item {
-      list-style: none;
-      cursor: pointer;
-
-      &:hover span {
-        opacity: 0.5;
-      }
-
-      i {
-        font-size: 2rem;
-
-        &.drop-icon-default {
-          color: $icon-color-default;
-
-          // Hack for IE11, IE11 should not set background
-          background: -webkit-linear-gradient($icon-top-color-default, $icon-color-default);
-        }
-
-        &.drop-icon-cosmic {
-          color: $icon-color-cosmic;
-
-          // Hack for IE11, IE11 should not set background
-          background: -webkit-linear-gradient($icon-top-color-cosmic, $icon-color-cosmic);
-        }
-
-        &.drop-icon-corporate {
-          color: $icon-color-corporate;
-
-          // Hack for IE11, IE11 should not set background
-          background: -webkit-linear-gradient($icon-top-color-corporate, $icon-color-corporate);
-        }
-
-        &.drop-icon-default,
-        &.drop-icon-cosmic,
-        &.drop-icon-corporate {
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-      }
-
-      span {
-        font-weight: 300;
-        vertical-align: super;
-        padding-left: 1rem;
-        color: nb-theme(color-fg-heading);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-    ::ng-deep .themes-switcher-list {
-      display: none;
-    }
-  }
-}
--- a/src/app/@theme/components/theme-switcher/themes-switcher-list/themes-switcher-list.component.ts
+++ b/src/app/@theme/components/theme-switcher/themes-switcher-list/themes-switcher-list.component.ts
@ -1,51 +0,0 @@
-import {Component, Input} from '@angular/core';
-import { NbThemeService, NbPopoverDirective } from '@nebular/theme';
-import { AnalyticsService } from '../../../../@core/utils/analytics.service';
-import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
-
-@Component({
-  selector: 'ngx-theme-switcher-list',
-  template: `
-    <ul class="themes-switcher-list">
-      <li class="themes-switcher-item"
-          *ngFor="let theme of themes"
-          (click)="onToggleTheme(theme.key)">
-        <i class="nb-drop" [ngClass]="'drop-icon-' + theme.key"></i>
-        <span>{{ theme.title }}</span>
-      </li>
-    </ul>
-  `,
-  styleUrls: ['./theme-switcher-list.component.scss'],
-})
-export class ThemeSwitcherListComponent {
-
-  @Input() popover: NbPopoverDirective;
-
-  theme: NbJSThemeOptions;
-
-  themes = [
-    {
-      title: 'Light',
-      key: 'default',
-    },
-    {
-      title: 'Cosmic',
-      key: 'cosmic',
-    },
-    {
-      title: 'Corporate',
-      key: 'corporate',
-    },
-  ];
-
-  constructor(
-    private themeService: NbThemeService,
-    private analyticsService: AnalyticsService,
-  ) {}
-
-  onToggleTheme(themeKey: string) {
-    this.themeService.changeTheme(themeKey);
-    this.analyticsService.trackEvent('switchTheme');
-    this.popover.hide();
-  }
-}
--- a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
+++ b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
@ -1,118 +0,0 @@
-//@import '../../styles/themes';
-//@import '~bootstrap/scss/mixins/breakpoints';
-//@import '~@nebular/theme/styles/global/breakpoints';
-////@import '~@nebular/bootstrap/styles/hero-buttons';
-//
-//@include nb-install-component() {
-//  .toggle-settings {
-//    position: fixed;
-//    top: 50%;
-//    height: 3rem;
-//    width: 3rem;
-//    padding: 0;
-//    text-align: center;
-//    border: none;
-//    transition: transform 0.3s ease, background-image 0.3s ease;
-//    transform: translate(0, -50%);
-//    z-index: 998;
-//
-//    @include nb-ltr() {
-//      border-top-left-radius: nb-theme(radius);
-//      border-bottom-left-radius: nb-theme(radius);
-//      right: 0;
-//
-//      &.sidebar-end {
-//        border-top-left-radius: 0;
-//        border-bottom-left-radius: 0;
-//        right: auto;
-//        border-top-right-radius: nb-theme(radius);
-//        border-bottom-right-radius: nb-theme(radius);
-//        left: 0;
-//      }
-//    }
-//
-//    @include nb-rtl() {
-//      border-top-right-radius: nb-theme(radius);
-//      border-bottom-right-radius: nb-theme(radius);
-//      left: 0;
-//
-//      &.sidebar-end {
-//        border-top-right-radius: 0;
-//        border-bottom-right-radius: 0;
-//        left: auto;
-//        border-top-left-radius: nb-theme(radius);
-//        border-bottom-left-radius: nb-theme(radius);
-//        right: 0;
-//      }
-//    }
-//
-//    &.expanded {
-//      @include nb-ltr(transform, translate(-19rem, -50%));
-//      @include nb-rtl(transform, translate(19rem, -50%));
-//
-//      &.sidebar-end {
-//        @include nb-rtl(transform, translate(-19rem, -50%));
-//        @include nb-ltr(transform, translate(19rem, -50%));
-//      }
-//    }
-//
-//    @include nb-for-theme(cosmic) {
-//      box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
-//      @include btn-hero-success-gradient();
-//    }
-//
-//    @include nb-for-theme(default) {
-//      border: 1px solid #d5dbe0;
-//      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
-//      background-color: #ffffff;
-//    }
-//
-//    @include nb-for-theme(corporate) {
-//      border: 1px solid #d5dbe0;
-//      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
-//      color: nb-theme(color-danger);
-//      background-color: #ffffff;
-//    }
-//
-//    i {
-//      font-size: 2.75rem;
-//      color: #ffffff;
-//      display: block;
-//
-//
-//      @include nb-for-theme(default) {
-//        color: nb-theme(color-danger);
-//      }
-//
-//      @include nb-for-theme(corporate) {
-//        color: nb-theme(color-warning);
-//      }
-//    }
-//
-//    &:not(.was-expanded) i {
-//      animation-name: gear-pulse;
-//      animation-duration: 1s;
-//      animation-iteration-count: infinite;
-//    }
-//
-//    @keyframes gear-pulse {
-//      from {
-//        transform: scale3d(1, 1, 1);
-//      }
-//
-//      50% {
-//        transform: scale3d(1.2, 1.2, 1.2);
-//      }
-//
-//      to {
-//        transform: scale3d(1, 1, 1);
-//      }
-//    }
-//  }
-//
-//  @include media-breakpoint-down(sm) {
-//    .toggle-settings {
-//      display: none;
-//    }
-//  }
-//}
--- a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
+++ b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
@ -1,37 +0,0 @@
-import { Component } from '@angular/core';
-import { NbSidebarService } from '@nebular/theme';
-import { StateService } from '../../../@core/utils';
-
-@Component({
-  selector: 'ngx-toggle-settings-button',
-  styleUrls: ['./toggle-settings-button.component.scss'],
-  template: `
-    <button class="toggle-settings"
-            (click)="toggleSettings()"
-            [class.expanded]="expanded"
-            [class.sidebar-end]="sidebarEnd"
-            [class.was-expanded]="wasExpanded"
-    >
-      <i class="nb-gear"></i>
-    </button>
-  `,
-})
-export class ToggleSettingsButtonComponent {
-
-  sidebarEnd = false;
-  expanded = false;
-  wasExpanded = false;
-
-  constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
-    this.stateService.onSidebarState()
-      .subscribe(({id}) => {
-        this.sidebarEnd = id === 'end';
-      });
-  }
-
-  toggleSettings() {
-    this.sidebarService.toggle(false, 'settings-sidebar');
-    this.expanded = !this.expanded;
-    this.wasExpanded = true;
-  }
-}
--- a/src/app/@theme/layouts/index.ts
+++ b/src/app/@theme/layouts/index.ts
@ -1,4 +1,3 @@
 export * from './one-column/one-column.layout';
 export * from './two-columns/two-columns.layout';
 export * from './three-columns/three-columns.layout';
-export * from './sample/sample.layout';
--- a/src/app/@theme/layouts/one-column/one-column.layout.scss
+++ b/src/app/@theme/layouts/one-column/one-column.layout.scss
@ -42,116 +42,4 @@
      }
    }
  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    ::ng-deep .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      }
-    }
-
-    ::ng-deep .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    ::ng-deep nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      ::ng-deep nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      ::ng-deep .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
-  }
 }
--- a/src/app/@theme/layouts/one-column/one-column.layout.ts
+++ b/src/app/@theme/layouts/one-column/one-column.layout.ts
@ -1,6 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
+import { Component } from '@angular/core';

 // TODO: move layouts into the framework
@Component({
@ -13,10 +11,7 @@ import { takeWhile } from 'rxjs/operators';
      </nb-layout-header>

      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
+        <nb-sidebar-header>
        </nb-sidebar-header>
        <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>
@ -31,21 +26,5 @@ import { takeWhile } from 'rxjs/operators';
    </nb-layout>
  `,
 })
-export class OneColumnLayoutComponent implements OnDestroy {
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
+export class OneColumnLayoutComponent {
 }
--- a/src/app/@theme/layouts/sample/sample.layout.scss
+++ b/src/app/@theme/layouts/sample/sample.layout.scss
@ -1,182 +0,0 @@
-@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  nb-layout-column.small {
-    flex: 0.15 !important;
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 19rem;
-
-    transition: transform 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-    @include nb-ltr(transform, translate3d(100%, 0, 0));
-    @include nb-rtl(transform, translate3d(-100%, 0, 0));
-    &.start {
-      @include nb-ltr(transform, translate3d(-100%, 0, 0));
-      @include nb-rtl(transform, translate3d(100%, 0, 0));
-    }
-
-    &.expanded, &.expanded.start {
-      transform: translate3d(0, 0, 0);
-    }
-
-    ::ng-deep .scrollable {
-      width: $sidebar-width;
-      padding: 3.4rem 0.25rem;
-    }
-
-    ::ng-deep .main-container {
-      width: $sidebar-width;
-      background: nb-theme(color-bg);
-      transition: transform 0.3s ease;
-      overflow: hidden;
-      position: relative;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    ::ng-deep .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      }
-    }
-
-    ::ng-deep .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    ::ng-deep nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    ::ng-deep nb-menu {
-      & > .menu-items {
-        & > .menu-item:first-child {
-          .menu-title {
-            &::after {
-              content: 'new';
-              color: nb-theme(color-white);
-              margin-left: 1rem;
-              background: nb-theme(color-danger);
-              padding: 0 0.5rem;
-              border-radius: nb-theme(radius);
-              font-size: nb-theme(font-size-sm);
-            }
-          }
-        }
-      }
-
-      .nb-e-commerce {
-        font-size: 2rem;
-      }
-    }
-
-    &.compacted {
-
-      ::ng-deep nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      ::ng-deep .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
-  }
-}
--- a/src/app/@theme/layouts/sample/sample.layout.ts
+++ b/src/app/@theme/layouts/sample/sample.layout.ts
@ -1,152 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
-import {
-  NbMediaBreakpoint,
-  NbMediaBreakpointsService,
-  NbMenuItem,
-  NbMenuService,
-  NbSidebarService,
-  NbThemeService,
-} from '@nebular/theme';
-
-import { StateService } from '../../../@core/utils';
-
-// TODO: move layouts into the framework
-@Component({
-  selector: 'ngx-sample-layout',
-  styleUrls: ['./sample.layout.scss'],
-  template: `
-    <nb-layout [center]="layout.id === 'center-column'" windowMode>
-      <nb-layout-header fixed>
-        <ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
-      </nb-layout-header>
-
-      <nb-sidebar class="menu-sidebar"
-                   tag="menu-sidebar"
-                   responsive
-                   [end]="sidebar.id === 'end'">
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
-        <ng-content select="nb-menu"></ng-content>
-      </nb-sidebar>
-
-      <nb-layout-column class="main-content">
-        <ng-content select="router-outlet"></ng-content>
-      </nb-layout-column>
-
-      <nb-layout-column start class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
-        <nb-menu [items]="subMenu"></nb-menu>
-      </nb-layout-column>
-
-      <nb-layout-column class="small" *ngIf="layout.id === 'three-column'">
-        <nb-menu [items]="subMenu"></nb-menu>
-      </nb-layout-column>
-
-      <nb-layout-footer fixed>
-        <ngx-footer></ngx-footer>
-      </nb-layout-footer>
-
-      <nb-sidebar class="settings-sidebar"
-                   tag="settings-sidebar"
-                   state="collapsed"
-                   fixed
-                   [end]="sidebar.id !== 'end'">
-        <ngx-theme-settings></ngx-theme-settings>
-      </nb-sidebar>
-    </nb-layout>
-    <ngx-toggle-settings-button></ngx-toggle-settings-button>
-  `,
-})
-export class SampleLayoutComponent implements OnDestroy {
-
-  subMenu: NbMenuItem[] = [
-    {
-      title: 'PAGE LEVEL MENU',
-      group: true,
-    },
-    {
-      title: 'Buttons',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/buttons',
-    },
-    {
-      title: 'Grid',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/grid',
-    },
-    {
-      title: 'Icons',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/icons',
-    },
-    {
-      title: 'Modals',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/modals',
-    },
-    {
-      title: 'Typography',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/typography',
-    },
-    {
-      title: 'Animated Searches',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/search-fields',
-    },
-    {
-      title: 'Tabs',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/tabs',
-    },
-  ];
-  layout: any = {};
-  sidebar: any = {};
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected stateService: StateService,
-              protected menuService: NbMenuService,
-              protected themeService: NbThemeService,
-              protected bpService: NbMediaBreakpointsService,
-              protected sidebarService: NbSidebarService) {
-    this.stateService.onLayoutState()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((layout: string) => this.layout = layout);
-
-    this.stateService.onSidebarState()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((sidebar: string) => {
-        this.sidebar = sidebar;
-      });
-
-    const isBp = this.bpService.getByName('is');
-    this.menuService.onItemSelect()
-      .pipe(
-        takeWhile(() => this.alive),
-        withLatestFrom(this.themeService.onMediaQueryChange()),
-        delay(20),
-      )
-      .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
-
-        if (bpTo.width <= isBp.width) {
-          this.sidebarService.collapse('menu-sidebar');
-        }
-      });
-
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}
--- a/src/app/@theme/styles/font-size.scss
+++ b/src/app/@theme/styles/font-size.scss
@ -1,3 +0,0 @@
-html {
-  //font-size: 14px;
-}
--- a/src/app/@theme/styles/pace.theme.scss
+++ b/src/app/@theme/styles/pace.theme.scss
@ -7,16 +7,14 @@
 @mixin ngx-pace-theme() {

  .pace .pace-progress {
-    background: nb-theme(color-fg-highlight);
+    background: nb-theme(color-primary-default);
  }

  .pace .pace-progress-inner {
-    box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight);
+    box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default);
  }

  .pace .pace-activity {
    display: none;
-    // border-top-color: nb-theme(color-fg-highlight);
-    // border-left-color: nb-theme(color-fg-highlight);
  }
 }
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@ -4,11 +4,8 @@
 // framework component themes (styles tied to theme variables)
@import '~@nebular/theme/styles/globals';
@import '~@nebular/auth/styles/all';
-//@import '~@nebular/bootstrap/styles/globals';
-// ...
+@import '~@nebular/bootstrap/styles/globals';

-// global app font size
-@import './font-size';

 // loading progress bar theme
@import './pace.theme';
@ -19,7 +16,7 @@
  // framework global styles
  @include nb-theme-global();
  @include nb-auth-global();
-  //@include nb-bootstrap-global();
+  @include nb-bootstrap-global();

  // loading progress bar
  @include ngx-pace-theme();
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@ -4,7 +4,7 @@
@import '~@nebular/theme/styles/themes';

 // which themes you what to enable (empty to enable all)
-$nb-enabled-themes: (default/*, cosmic, corporate, dark*/);
+$nb-enabled-themes: (default);

 $nb-themes: nb-register-theme((
  // app wise variables for each theme
--- a/src/app/@theme/theme.module.ts
+++ b/src/app/@theme/theme.module.ts
@ -36,21 +36,16 @@ import {
  NbChatModule,
  NbTooltipModule,
  NbCalendarKitModule,
+  NbIconModule,
 } from '@nebular/theme';
-
+import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { NbSecurityModule } from '@nebular/security';

 import {
  FooterComponent,
  HeaderComponent,
  SearchInputComponent,
-  ThemeSettingsComponent,
-  SwitcherComponent,
-  LayoutDirectionSwitcherComponent,
-  ThemeSwitcherComponent,
  TinyMCEComponent,
-  ThemeSwitcherListComponent,
-  ToggleSettingsButtonComponent,
 } from './components';
 import {
  CapitalizePipe,
@ -62,7 +57,6 @@ import {
 } from './pipes';
 import {
  OneColumnLayoutComponent,
-  SampleLayoutComponent,
  ThreeColumnsLayoutComponent,
  TwoColumnsLayoutComponent,
 } from './layouts';
@ -106,27 +100,18 @@ const NB_MODULES = [
  NbChatModule,
  NbTooltipModule,
  NbCalendarKitModule,
+  NbIconModule,
+  NbEvaIconsModule,
 ];

 const COMPONENTS = [
-  SwitcherComponent,
-  LayoutDirectionSwitcherComponent,
-  ThemeSwitcherComponent,
-  ThemeSwitcherListComponent,
  HeaderComponent,
  FooterComponent,
  SearchInputComponent,
-  ThemeSettingsComponent,
  TinyMCEComponent,
  OneColumnLayoutComponent,
-  SampleLayoutComponent,
  ThreeColumnsLayoutComponent,
  TwoColumnsLayoutComponent,
-  ToggleSettingsButtonComponent,
-];
-
-const ENTRY_COMPONENTS = [
-  ThemeSwitcherListComponent,
 ];

 const PIPES = [
@ -141,7 +126,7 @@ const PIPES = [
 const NB_THEME_PROVIDERS = [
  ...NbThemeModule.forRoot(
    {
-      name: 'cosmic',
+      name: 'default',
    },
    [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
  ).providers,
@ -160,7 +145,6 @@ const NB_THEME_PROVIDERS = [
  imports: [...BASE_MODULES, ...NB_MODULES],
  exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
  declarations: [...COMPONENTS, ...PIPES],
-  entryComponents: [...ENTRY_COMPONENTS],
 })
 export class ThemeModule {
  static forRoot(): ModuleWithProviders {
--- a/src/app/pages/bootstrap/bootstrap-routing.module.ts
+++ b/src/app/pages/bootstrap/bootstrap-routing.module.ts
@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { BootstrapComponent } from './bootstrap.component';
-import { ModalsComponent } from './modals/modals.component';
-import { ButtonsComponent } from './buttons/buttons.component';
-import { FormInputsComponent } from './form-inputs/form-inputs.component';
-
-
-const routes: Routes = [{
-  path: '',
-  component: BootstrapComponent,
-  children: [
-    {
-      path: 'inputs',
-      component: FormInputsComponent,
-    },
-    {
-      path: 'buttons',
-      component: ButtonsComponent,
-    },
-    {
-      path: 'modal',
-      component: ModalsComponent,
-    },
-  ],
-}];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class BootstrapRoutingModule { }
--- a/src/app/pages/bootstrap/bootstrap.module.ts
+++ b/src/app/pages/bootstrap/bootstrap.module.ts
@ -1,36 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { ThemeModule } from '../../@theme/theme.module';
-
-import { BootstrapRoutingModule } from './bootstrap-routing.module';
-import { ModalsComponent } from './modals/modals.component';
-import { ModalComponent } from './modals/modal/modal.component';
-import { BootstrapComponent } from './bootstrap.component';
-import { ButtonsModule } from './buttons/buttons.module';
-import { FormInputsComponent } from './form-inputs/form-inputs.component';
-
-const COMPONENTS = [
-  BootstrapComponent,
-  ModalsComponent,
-  ModalComponent,
-  FormInputsComponent,
-];
-
-const ENTRY_COMPONENTS = [
-  ModalComponent,
-];
-
-@NgModule({
-  imports: [
-    ThemeModule,
-    BootstrapRoutingModule,
-    ButtonsModule,
-  ],
-  declarations: [
-    ...COMPONENTS,
-  ],
-  entryComponents: [
-    ...ENTRY_COMPONENTS,
-  ],
-})
-export class BootstrapModule { }
--- a/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html
@ -1,16 +0,0 @@
-<nb-card>
-  <nb-card-header>Block Level Buttons</nb-card-header>
-  <nb-card-body>
-    <div class="row block-level-buttons">
-      <div class="col-md-12">
-        <div class="btn-group btn-group-full-width" role="group">
-          <button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
-            <i class="nb-home"></i>
-          </button>
-          <button type="button" class="btn btn-primary">Icon Block Button</button>
-        </div>
-        <button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts
@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-block-level-buttons',
-  templateUrl: './block-level-buttons.component.html',
-})
-export class BlockLevelButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.html
+++ b/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.html
@ -1,144 +0,0 @@
-<nb-card>
-  <nb-card-header>Button Groups</nb-card-header>
-  <nb-card-body>
-    <div class="row">
-      <div class="col-md-12">
-        <div class="example-container toggle-types">
-          <div class="container-title">Toggle Types</div>
-          <div [(ngModel)]="radioModel" ngbRadioGroup
-               class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
-            <label ngbButtonLabel class="btn btn-outline-primary">
-              <input ngbButton type="radio" value="left"> Left
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-primary">
-              <input ngbButton type="radio" value="middle"> Middle
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-primary">
-              <input ngbButton type="radio" value="right"> Right
-            </label>
-          </div>
-          <div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
-            <label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.left">
-              <input ngbButton type="checkbox" [(ngModel)]="checkboxModel.left"> Left
-            </label>
-            <label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.middle">
-              <input ngbButton type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
-            </label>
-            <label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.right">
-              <input ngbButton type="checkbox" [(ngModel)]="checkboxModel.right"> Right
-            </label>
-          </div>
-        </div>
-        <div class="example-container toolbars-container">
-          <div class="pagination-container">
-            <div class="container-title">Pagination</div>
-            <div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons"
-                 [(ngModel)]="paginationModel" ngbRadioGroup>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="1"> 1
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="2"> 2
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="3"> 3
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="4"> 4
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="5"> 5
-              </label>
-            </div>
-          </div>
-
-          <div class="icon-toolbar-container">
-            <div class="container-title">Icon Toolbar</div>
-            <div class="btn-group btn-group-toggle" data-toggle="buttons">
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.one">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.two">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.three">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.four">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.five">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
-              </label>
-            </div>
-          </div>
-        </div>
-        <div class="example-container">
-          <div class="container-title divided-button-group">Divided Button Group</div>
-          <div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
-            data-toggle="buttons">
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
-              class="nb-arrow-thin-down"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
-              class="nb-arrow-thin-up"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
-              class="nb-arrow-thin-right"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
-              class="nb-arrow-right"></i>
-            </label>
-          </div>
-        </div>
-        <div class="example-container">
-          <div class="container-title">Divided Button Group</div>
-          <div class="row">
-            <div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
-                 class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
-              <label ngbButtonLabel class="btn btn-outline-primary">
-                <input ngbButton type="radio" value="left"> Left
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-primary">
-                <input ngbButton type="radio" value="middle"> Middle
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-primary">
-                <input ngbButton type="radio" value="right"> Right
-              </label>
-            </div>
-          </div>
-          <div class="btn-group btn-group-toggle btn-divided-group btn-group-full-width" data-toggle="buttons">
-            <label ngbButtonLabel
-                   class="btn btn-primary"
-                   [class.active]="dividedButtonGroupTwo.left"
-                   [class.focus]="dividedButtonGroupTwo.left">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
-            </label>
-            <label ngbButtonLabel
-                   class="btn btn-primary"
-                   [class.active]="dividedButtonGroupTwo.middle"
-                   [class.focus]="dividedButtonGroupTwo.middle">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
-            </label>
-            <label ngbButtonLabel
-                   class="btn btn-primary"
-                   [class.active]="dividedButtonGroupTwo.right"
-                   [class.focus]="dividedButtonGroupTwo.right">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.scss
+++ b/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.scss
@ -1,67 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  .toolbars-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .pagination-container {
-    @include nb-ltr(margin-right, 1rem);
-    @include nb-rtl(margin-left, 1rem);
-
-    .btn-group > .btn {
-      padding-left: 1.125rem;
-      padding-right: 1.125rem;
-    }
-  }
-
-  .icon-toolbar-container {
-    .btn-group > .btn {
-      padding-left: 1.125rem;
-      padding-right: 1.125rem;
-    }
-  }
-
-  .toggle-types {
-    .btn-toggle-radio-group {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .divided-button-group {
-    .btn-divided-checkbox-group {
-      margin-bottom: 1rem;
-      flex-wrap: wrap;
-    }
-  }
-
-  .example-container:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
-
-  .example-container > div {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .example-container > .btn-divided-checkbox-group {
-    flex-wrap: wrap;
-
-    > label {
-      flex-basis: 10%;
-      @include nb-ltr(margin, 0 0.25rem 0.5rem 0);
-      @include nb-rtl(margin, 0 0 0.5rem 0.25rem);
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    .btn {
-      padding: 0.75rem 0.7rem;
-    }
-  }
-}
--- a/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.ts
+++ b/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.ts
@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-button-groups',
-  styleUrls: ['./button-groups.component.scss'],
-  templateUrl: './button-groups.component.html',
-})
-export class ButtonGroupsComponent {
-
-  radioModel = 'left';
-
-  checkboxModel = {
-    left: false,
-    middle: false,
-    right: false,
-  };
-
-  dividedCheckboxModel = {
-    monday: true,
-    tuesday: true,
-    wednesday: false,
-    thursday: false,
-    friday: false,
-    saturday: false,
-  };
-
-  paginationModel = 1;
-
-  iconToolbarModel = {
-    one: false,
-    two: false,
-    three: true,
-    four: false,
-    five: false,
-  };
-
-  dividedButtonGroupOne = 'left';
-
-  dividedButtonGroupTwo = {
-    left: false,
-    middle: false,
-    right: false,
-  };
-}
--- a/src/app/pages/bootstrap/buttons/buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/buttons.component.html
@ -1,23 +0,0 @@
-<div class="row">
-  <div class="col-lg-12">
-    <ngx-hero-buttons></ngx-hero-buttons>
-  </div>
-  <div class="col-md-12 col-lg-12 col-xxxl-6">
-    <ngx-shape-buttons></ngx-shape-buttons>
-
-    <div class="row">
-      <div class="col-lg-5">
-        <ngx-dropdown-buttons></ngx-dropdown-buttons>
-        <ngx-icon-buttons></ngx-icon-buttons>
-      </div>
-      <div class="col-lg-7">
-        <ngx-button-groups></ngx-button-groups>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-12 col-lg-12 col-xxxl-6">
-    <ngx-size-buttons></ngx-size-buttons>
-    <ngx-default-buttons></ngx-default-buttons>
-    <ngx-block-level-buttons></ngx-block-level-buttons>
-  </div>
-</div>
--- a/src/app/pages/bootstrap/buttons/buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/buttons.component.scss
@ -1,103 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  ::ng-deep {
-    $button-size: 50px;
-
-    .container-title {
-      color: nb-theme(color-fg);
-      font-family: nb-theme(font-secondary);
-      margin-bottom: 0.5rem;
-    }
-
-    .header {
-      color: nb-theme(color-fg-header);
-      font-size: 0.875rem;
-    }
-
-    .subheader {
-      font-size: 0.75rem;
-      font-weight: nb-theme(font-weight-light);
-      color: nb-theme(color-fg);
-    }
-
-    .btn-demo {
-      width: 180px;
-    }
-
-    .state-container {
-      display: flex;
-
-      &:not(:last-child) {
-        margin-bottom: 1rem;
-      }
-
-      .state-value {
-        width: $button-size;
-        height: $button-size;
-        border-radius: nb-theme(btn-border-radius);
-
-        @include nb-for-theme(corporate) {
-          border-radius: nb-theme(btn-semi-round-border-radius);
-        }
-      }
-
-      .state-details {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-left: 1rem;
-        margin-right: 1rem;
-        height: $button-size;
-      }
-    }
-
-    .example-container {
-      @include nb-ltr(padding-right, 0);
-      @include nb-rtl(padding-left, 0);
-    }
-
-    .example-container .container-btn {
-      margin-bottom: 1.5rem;
-    }
-
-    .block-level-buttons .btn-group {
-      margin-bottom: 1rem;
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-    ngx-default-buttons ::ng-deep nb-card-header {
-      flex-direction: column;
-      align-items: left;
-
-      span {
-        margin-bottom: 1rem;
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-
-    ::ng-deep.icon-buttons .icon-button-examples {
-      button {
-        @include nb-ltr(margin-right, 1rem);
-        @include nb-rtl(margin-left, 1rem);
-      }
-    }
-
-    ngx-default-buttons ::ng-deep nb-card-header {
-      flex-direction: column;
-      margin-bottom: 0.5rem;
-    }
-
-    ngx-block-level-buttons ::ng-deep {
-      .btn-primary {
-        padding: 0.75rem 1rem;
-      }
-    }
-  }
-}
--- a/src/app/pages/bootstrap/buttons/buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/buttons.component.ts
@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-buttons',
-  styleUrls: ['./buttons.component.scss'],
-  templateUrl: './buttons.component.html',
-})
-export class ButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/buttons.module.ts
+++ b/src/app/pages/bootstrap/buttons/buttons.module.ts
@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { ThemeModule } from '../../../@theme/theme.module';
-import { DefaultButtonsComponent } from './default-buttons/default-buttons.component';
-import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
-import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
-import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
-import { ButtonsComponent } from './buttons.component';
-import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
-import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
-import { ButtonGroupsComponent } from './button-groups/button-groups.component';
-import { IconButtonsComponent } from './icon-buttons/icon-buttons.component';
-
-const components = [
-  ButtonsComponent,
-  DefaultButtonsComponent,
-  HeroButtonComponent,
-  ShapeButtonsComponent,
-  SizeButtonsComponent,
-  DropdownButtonsComponent,
-  BlockLevelButtonsComponent,
-  ButtonGroupsComponent,
-  IconButtonsComponent,
-];
-
-@NgModule({
-  imports: [
-    ThemeModule,
-  ],
-  exports: [
-    ...components,
-  ],
-  declarations: [
-    ...components,
-  ],
-  providers: [],
-})
-export class ButtonsModule { }
--- a/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.html
@ -1,48 +0,0 @@
-<nb-card>
-  <nb-card-header>
-    <span>Default Buttons</span>
-    <div class="dropdown" ngbDropdown>
-      <button class="btn btn-primary" type="button" ngbDropdownToggle>
-        {{ selectedView.title }}
-      </button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item" *ngFor="let v of buttonsViews" (click)="this.selectedView = v">{{ v.title }}</li>
-      </ul>
-    </div>
-  </nb-card-header>
-  <nb-card-body>
-    <div class="row">
-      <div class="example-container col-md-4" *ngFor="let b of buttons[selectedView.key]">
-        <div class="container-title">
-          <span>{{ b.containerTitle }}</span>
-        </div>
-        <div class="container-btn">
-          <button class="btn {{ b.class }} btn-demo">{{ b.title }}</button>
-        </div>
-        <div class="{{ b.container }}">
-          <div class="state-container">
-            <div class="state-value original"></div>
-            <div class="state-details">
-              <span class="header">Default</span>
-              <span class="subheader">{{ b.default }}</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value hover"></div>
-            <div class="state-details">
-              <span class="header">Hover</span>
-              <span class="subheader">14% white</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value active"></div>
-            <div class="state-details">
-              <span class="header">Active</span>
-              <span class="subheader">14% black</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.scss
@ -1,126 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .dropdown {
-      flex-basis: 30%;
-      min-width: 220px;
-    }
-  }
-
-  nb-card-body {
-    padding-bottom: 0;
-  }
-
-  .example-container {
-    margin-bottom: 1.5rem;
-  }
-
-  .primary-container {
-    .original {
-      background-color: nb-theme(btn-primary-bg);
-    }
-    .hover {
-      @include btn-primary-hover();
-    }
-    .active {
-      @include btn-primary-active();
-    }
-  }
-
-  .primary-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-primary-bg);
-  }
-
-  .success-container {
-    .original {
-      background-color: nb-theme(btn-success-bg);
-    }
-    .hover {
-      @include btn-success-hover();
-    }
-    .active {
-      @include btn-success-active();
-    }
-  }
-
-  .success-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-success-bg);
-  }
-
-  .warning-container {
-    .original {
-      background-color: nb-theme(btn-warning-bg);
-    }
-    .hover {
-      @include btn-warning-hover();
-    }
-    .active {
-      @include btn-warning-active();
-    }
-  }
-
-  .warning-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-warning-bg);
-  }
-
-  .info-container {
-    .original {
-      background-color: nb-theme(btn-info-bg);
-    }
-    .hover {
-      @include btn-info-hover();
-    }
-    .active {
-      @include btn-info-active();
-    }
-  }
-
-  .info-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-info-bg);
-  }
-
-  .danger-container {
-    .original {
-      background-color: nb-theme(btn-danger-bg);
-    }
-    .hover {
-      @include btn-danger-hover();
-    }
-    .active {
-      @include btn-danger-active();
-    }
-  }
-
-  .danger-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-danger-bg);
-  }
-
-  .secondary-container {
-    .original {
-      border: 2px solid nb-theme(btn-secondary-border);
-    }
-    .hover {
-      @include btn-secondary-hover();
-    }
-    .active {
-      @include btn-secondary-active();
-    }
-  }
-
-  .secondary-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-secondary-border);
-  }
-}
--- a/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.ts
@ -1,101 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-default-buttons',
-  styleUrls: ['./default-buttons.component.scss'],
-  templateUrl: './default-buttons.component.html',
-})
-export class DefaultButtonsComponent {
-
-  buttonsViews = [{
-    title: 'Default Buttons',
-    key: 'default',
-  }, {
-    title: 'Outline Buttons',
-    key: 'outline',
-  }];
-
-  selectedView = this.buttonsViews[0];
-
-  buttons = {
-    'default': [
-      {
-        class: 'btn-primary',
-        container: 'primary-container',
-        containerTitle: 'Primary Button',
-        title: 'Primary',
-        default: '#7659ff',
-      }, {
-        class: 'btn-warning',
-        container: 'warning-container',
-        containerTitle: 'Warning Button',
-        title: 'Warning',
-        default: '#ffcb17',
-      }, {
-        class: 'btn-success',
-        container: 'success-container',
-        containerTitle: 'Success Button',
-        title: 'Success',
-        default: '#00d977',
-      }, {
-        class: 'btn-info',
-        container: 'info-container',
-        containerTitle: 'Info Button',
-        title: 'Info',
-        default: '#0088ff',
-      }, {
-        class: 'btn-danger',
-        container: 'danger-container',
-        containerTitle: 'Danger Button',
-        title: 'Danger',
-        default: '#ff386a',
-      }, {
-        class: 'btn-secondary',
-        container: 'secondary-container',
-        containerTitle: 'Default Button',
-        title: 'Default',
-        default: '#bdbaff',
-      },
-    ],
-
-    'outline': [
-      {
-        class: 'btn-outline-primary',
-        container: 'primary-container outline',
-        containerTitle: 'Primary Button',
-        title: 'Primary',
-        default: '#7659ff',
-      }, {
-        class: 'btn-outline-warning',
-        container: 'warning-container outline',
-        containerTitle: 'Warning Button',
-        title: 'Warning',
-        default: '#ffcb17',
-      }, {
-        class: 'btn-outline-success',
-        container: 'success-container outline',
-        containerTitle: 'Success Button',
-        title: 'Success',
-        default: '#00d977',
-      }, {
-        class: 'btn-outline-info',
-        container: 'info-container',
-        containerTitle: 'Info Button',
-        title: 'Info',
-        default: '#0088ff',
-      }, {
-        class: 'btn-outline-danger',
-        container: 'danger-container outline',
-        containerTitle: 'Danger Button',
-        title: 'Danger',
-        default: '#ff386a',
-      }, {
-        class: 'btn-outline-secondary',
-        container: 'secondary-container outline',
-        containerTitle: 'Default Button',
-        title: 'Default',
-        default: '#bdbaff',
-      },
-    ],
-  };
-}
--- a/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.html
+++ b/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.html
@ -1,44 +0,0 @@
-<nb-card>
-  <nb-card-header>Button Dropdowns</nb-card-header>
-  <nb-card-body>
-    <div class="dropdown btn-group" ngbDropdown>
-      <button type="button" class="btn btn-primary">Dropdown</button>
-      <button type="button" class="btn btn-primary" ngbDropdownToggle></button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item">Icon Button</li>
-        <li class="dropdown-item">Hero Button</li>
-        <li class="dropdown-item">Default</li>
-      </ul>
-    </div>
-    <div class="dropdown" ngbDropdown>
-      <button class="btn btn-primary" type="button" ngbDropdownToggle>
-        Dropdown
-      </button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item">Icon Button</li>
-        <li class="dropdown-item">Hero Button</li>
-        <li class="dropdown-item">Default</li>
-      </ul>
-    </div>
-    <div class="dropdown" placement="top" ngbDropdown>
-      <button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
-        Dropup
-      </button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item">Icon Button</li>
-        <li class="dropdown-item">Hero Button</li>
-        <li class="dropdown-item">Default</li>
-      </ul>
-    </div>
-    <div class="dropdown ghost-dropdown" ngbDropdown>
-      <button class="btn btn-primary" type="button" ngbDropdownToggle>
-        Dropdown
-      </button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item">Icon Button</li>
-        <li class="dropdown-item">Hero Button</li>
-        <li class="dropdown-item">Default</li>
-      </ul>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.scss
+++ b/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.scss
@ -1,13 +0,0 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  text-align: center;
-
-  .dropdown, .dropup, .btn-group {
-    margin-bottom: 1rem;
-  }
-
-  nb-card-body {
-    overflow: visible;
-  }
-}
--- a/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.ts
+++ b/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.ts
@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-dropdown-buttons',
-  styleUrls: ['./dropdown-button.component.scss'],
-  templateUrl: './dropdown-button.component.html',
-})
-
-export class DropdownButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.html
@ -1,72 +0,0 @@
-<nb-card>
-  <nb-card-header>Hero Buttons</nb-card-header>
-  <nb-card-body>
-    <div class="row">
-      <div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
-        <div class="container-title">
-          <span>{{ hb.title }}</span>
-        </div>
-        <div class="container-btn">
-          <button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
-        </div>
-        <div class="{{ hb.container }}">
-          <div class="state-container" *ngIf="hb[themeName].border">
-            <div class="state-value border"></div>
-            <div class="state-details">
-              <span class="header">Border</span>
-              <span class="subheader">{{ hb[themeName].border }}</span>
-            </div>
-          </div>
-          <div class="state-container" *ngIf="hb[themeName].color">
-            <div class="state-value color"></div>
-            <div class="state-details">
-              <span class="header">Color</span>
-              <span class="subheader">{{ hb[themeName].color }}</span>
-            </div>
-          </div>
-          <div class="state-container" *ngIf="hb[themeName].gradientLeft">
-            <div class="state-value gradient"></div>
-            <div class="state-details">
-              <span class="header">Linear Gradient</span>
-              <span class="subheader">{{ hb[themeName].gradientLeft }}</span>
-              <span class="subheader">{{ hb[themeName].gradientRight }}</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
-            <div class="state-details" *ngIf="hb[themeName].bevel">
-              <span class="header">Bevel</span>
-              <span class="subheader">0 3px 0 0</span>
-              <span class="subheader">{{ hb[themeName].bevel }}</span>
-            </div>
-            <div class="state-details" *ngIf="!hb[themeName].bevel">
-              <span class="header">No Bevel</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
-            <div class="state-details" *ngIf="hb[themeName].shadow">
-              <span class="header">Shadow</span>
-              <span class="subheader">0 4px 10px 0</span>
-              <span class="subheader">{{ hb[themeName].shadow }}</span>
-            </div>
-            <div class="state-details" *ngIf="!hb[themeName].shadow">
-              <span class="header">No Shadow</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
-            <div class="state-details" *ngIf="hb[themeName].glow">
-              <span class="header">Glow</span>
-              <span class="subheader">{{ hb[themeName].glow.params }}</span>
-              <span class="subheader">{{ hb[themeName].glow.color }}</span>
-            </div>
-            <div class="state-details" *ngIf="!hb[themeName].glow">
-              <span class="header">No Glow</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss
@ -1,135 +0,0 @@
-//@import '../../../../@theme/styles/themes';
-//@import '~@nebular/bootstrap/styles/buttons';
-//
-//@include nb-install-component() {
-//
-//  nb-card-body {
-//    padding-bottom: 0;
-//  }
-//
-//  .none {
-//    position: relative;
-//    transform: rotate(45deg);
-//
-//    &::before, &::after {
-//      position: absolute;
-//      content: '';
-//      background: nb-theme(form-control-border-color);
-//    }
-//
-//    &::before {
-//      left: 50%;
-//      top: 10%;
-//      transform: translateX(-50%);
-//      width: 1px;
-//      height: 80%;
-//    }
-//
-//    &::after {
-//      top: 50%;
-//      left: 10%;
-//      transform: translateY(-50%);
-//      height: 1px;
-//      width: 80%;
-//    }
-//  }
-//
-//  .shadow {
-//    box-shadow: nb-theme(btn-hero-shadow);
-//  }
-//
-//  .primary-container {
-//    .color {
-//      background-color: nb-theme(color-primary);
-//    }
-//    .gradient {
-//      @include btn-hero-primary-gradient();
-//    }
-//    .glow {
-//      box-shadow: btn-hero-primary-glow();
-//    }
-//    .bevel {
-//      box-shadow: btn-hero-primary-bevel();
-//    }
-//  }
-//
-//  .warning-container {
-//    .color {
-//      background-color: nb-theme(color-warning);
-//    }
-//    .gradient {
-//      @include btn-hero-warning-gradient();
-//    }
-//    .glow {
-//      box-shadow: btn-hero-warning-glow();
-//    }
-//    .bevel {
-//      box-shadow: btn-hero-warning-bevel();
-//    }
-//  }
-//
-//  .success-container {
-//    .color {
-//      background-color: nb-theme(color-success);
-//    }
-//    .gradient {
-//      @include btn-hero-success-gradient();
-//    }
-//    .glow {
-//      box-shadow: btn-hero-success-glow();
-//    }
-//    .bevel {
-//      box-shadow: btn-hero-success-bevel();
-//    }
-//  }
-//
-//  .info-container {
-//    .color {
-//      background-color: nb-theme(color-info);
-//    }
-//    .gradient {
-//      @include btn-hero-info-gradient();
-//    }
-//    .glow {
-//      box-shadow: btn-hero-info-glow();
-//    }
-//    .bevel {
-//      box-shadow: btn-hero-info-bevel();
-//    }
-//  }
-//
-//  .danger-container {
-//    .color {
-//      background-color: nb-theme(color-danger);
-//    }
-//    .gradient {
-//      @include btn-hero-danger-gradient();
-//    }
-//    .glow {
-//      box-shadow: btn-hero-danger-glow();
-//    }
-//    .bevel {
-//      box-shadow: btn-hero-danger-bevel();
-//    }
-//  }
-//
-//  .secondary-container {
-//    .color {
-//      background-color: nb-theme(btn-secondary-bg);
-//    }
-//    .border {
-//      color: nb-theme(btn-secondary-color);
-//      border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
-//    }
-//    .glow {
-//      box-shadow: btn-hero-secondary-glow();
-//    }
-//    .bevel {
-//      box-shadow: btn-hero-secondary-bevel();
-//    }
-//  }
-//
-//  .example-container {
-//    margin-bottom: 1.5rem;
-//  }
-//}
--- a/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.ts
@ -1,180 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'ngx-hero-buttons',
-  styleUrls: ['./hero-buttons.component.scss'],
-  templateUrl: './hero-buttons.component.html',
-})
-export class HeroButtonComponent implements OnDestroy {
-
-  themeName = 'default';
-  settings: Array<any>;
-  themeSubscription: Subscription;
-
-  constructor(private themeService: NbThemeService) {
-    this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
-      this.themeName = theme.name;
-      this.init(theme.variables);
-    });
-  }
-
-  init(colors: any) {
-    this.settings = [{
-      class: 'btn-hero-primary',
-      container: 'primary-container',
-      title: 'Primary Button',
-      buttonTitle: 'Primary',
-      default: {
-        gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
-        gradientRight: colors.primary,
-      },
-      corporate: {
-        color: colors.primary,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (115, 161, 255, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
-        gradientRight: colors.primary,
-        bevel: `shade(${colors.primary}, 14%)`,
-        shadow: 'rgba (6, 7, 64, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.primary}, 10deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-warning',
-      container: 'warning-container',
-      title: 'Warning Button',
-      buttonTitle: 'Warning',
-      default: {
-        gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
-        gradientRight: colors.warning,
-      },
-      corporate: {
-        color: colors.warning,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (256, 163, 107, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
-        gradientRight: colors.warning,
-        bevel: `shade(${colors.warning}, 14%)`,
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.warning}, 5deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-success',
-      container: 'success-container',
-      title: 'Success Button',
-      buttonTitle: 'Success',
-      default: {
-        gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
-        gradientRight: colors.success,
-      },
-      corporate: {
-        color: colors.success,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (93, 207, 227, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
-        gradientRight: colors.success,
-        bevel: `shade(${colors.success}, 14%)`,
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.success}, 10deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-info',
-      container: 'info-container',
-      title: 'Info Button',
-      buttonTitle: 'Info',
-      default: {
-        gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
-        gradientRight: colors.info,
-      },
-      corporate: {
-        color: colors.info,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (186, 127, 236, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
-        gradientRight: colors.info,
-        bevel: `shade(${colors.info}, 14%)`,
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.info}, -5deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-danger',
-      container: 'danger-container',
-      title: 'Danger Button',
-      buttonTitle: 'Danger',
-      default: {
-        gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
-        gradientRight: colors.danger,
-      },
-      corporate: {
-        color: colors.danger,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (255, 107, 131, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
-        gradientRight: colors.danger,
-        bevel: `shade(${colors.danger}, 14%)`,
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.danger}, -10deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-secondary',
-      container: 'secondary-container',
-      title: 'Ghost Button',
-      buttonTitle: 'Ghost',
-      default: {
-        border: '#dadfe6',
-      },
-      corporate: {
-        color: '#edf2f5',
-      },
-      cosmic: {
-        border: colors.primary,
-        bevel: '#665ebd',
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: 'rgba (146, 141, 255, 1)',
-        },
-      },
-    }];
-  }
-
-  ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
-  }
-}
--- a/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.html
@ -1,43 +0,0 @@
-<nb-card>
-  <nb-card-header>Icon buttons</nb-card-header>
-  <nb-card-body>
-    <div class="row icon-buttons">
-      <div class="col-md-12">
-        <div class="btn-group">
-          <button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
-            <i class="nb-home"></i>
-          </button>
-          <button type="button" class="btn btn-primary">Icon Button</button>
-        </div>
-        <div class="btn-with-icon-example">
-          <button type="button" class="btn btn-primary btn-with-icon">
-            <i class="nb-home"></i>
-            <span>Icon Button</span>
-          </button>
-        </div>
-        <div class="icon-button-examples">
-          <button type="button" class="btn btn-outline-primary btn-icon">
-            <i class="nb-layout-centre"></i>
-          </button>
-          <button type="button" class="btn btn-outline-success btn-icon">
-            <i class="nb-layout-default"></i>
-          </button>
-          <button type="button" class="btn btn-outline-danger btn-icon">
-            <i class="nb-layout-one-column"></i>
-          </button>
-        </div>
-        <div class="icon-button-examples">
-          <button type="button" class="btn btn-primary btn-icon">
-            <i class="nb-shuffle"></i>
-          </button>
-          <button type="button" class="btn btn-success btn-icon">
-            <i class="nb-skip-backward-outline"></i>
-          </button>
-          <button type="button" class="btn btn-danger btn-icon">
-            <i class="nb-skip-forward-outline"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.scss
@ -1,30 +0,0 @@
-nb-card-body {
-  div:not(:last-child) {
-    margin-bottom: 1rem;
-  }
-}
-
-.btn-with-icon-example {
-  width: 100%;
-
-  .btn {
-    width: 100%;
-  }
-}
-
-.btn-group:not(:last-child) {
-  margin-bottom: 1rem;
-}
-
-.icon-button-examples {
-  display: flex;
-  justify-content: space-between;
-
-  button {
-    min-width: 4rem;
-  }
-}
-
-.icon-button-examples:not(:last-child) {
-  margin-bottom: 1rem;
-}
--- a/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.ts
@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-icon-buttons',
-  styleUrls: ['./icon-buttons.component.scss'],
-  templateUrl: './icon-buttons.component.html',
-})
-export class IconButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.html
@ -1,43 +0,0 @@
-<nb-card>
-  <nb-card-header>Button Shapes</nb-card-header>
-  <nb-card-body>
-    <div class="shape-container">
-      <div class="container-title">
-        <span>Rectangle Button</span>
-      </div>
-      <div class="subheader">
-        <span>Border radius:</span>
-        <span>4px</span>
-      </div>
-      <div>
-        <button class="btn btn-success btn-rectangle btn-demo">Rectangle</button>
-      </div>
-    </div>
-
-    <div class="shape-container">
-      <div class="container-title">
-        <span>Semi-round Button</span>
-      </div>
-      <div class="subheader">
-        <span>Border radius:</span>
-        <span>12px</span>
-      </div>
-      <div>
-        <button class="btn btn-success btn-semi-round btn-demo">Semi-round</button>
-      </div>
-    </div>
-
-    <div class="shape-container">
-      <div class="container-title">
-        <span>Rounded Button</span>
-      </div>
-      <div class="subheader">
-        <span>Border radius:</span>
-        <span>round</span>
-      </div>
-      <div>
-        <button class="btn btn-success btn-round btn-demo">Round</button>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.scss
@ -1,30 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    padding: 0 0 29px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  .shape-container {
-    margin: 1.25rem 1.25rem 0;
-  }
-
-  .container-title {
-    margin-bottom: 0.25rem;
-  }
-
-  .subheader {
-    margin-bottom: 1rem;
-    font-size: 0.875rem;
-
-    span:nth-child(2) {
-      color: nb-theme(color-fg-heading);
-      font-weight: nb-theme(font-weight-bold);
-    }
-  }
-}
--- a/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.ts
@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-shape-buttons',
-  styleUrls: ['./shape-buttons.component.scss'],
-  templateUrl: './shape-buttons.component.html',
-})
-export class ShapeButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.html
@ -1,50 +0,0 @@
-<nb-card>
-  <nb-card-header>Button Sizes</nb-card-header>
-
-  <nb-card-body>
-    <div class="size-container">
-      <div class="container-title">
-        <span>Large Button</span>
-      </div>
-      <div class="subheader">
-        <span>0.875rem 1.75rem</span>
-      </div>
-      <div>
-        <button class="btn btn-primary btn-lg">Large Button</button>
-      </div>
-    </div>
-    <div class="size-container">
-      <div class="container-title">
-        <span>Medium Button</span>
-      </div>
-      <div class="subheader">
-        <span>0.75rem 1.5rem</span>
-      </div>
-      <div>
-        <button class="btn btn-primary btn-md">Medium Button</button>
-      </div>
-    </div>
-    <div class="size-container">
-      <div class="container-title">
-        <span>Small Button</span>
-      </div>
-      <div class="subheader">
-        <span>0.675rem 1.5rem</span>
-      </div>
-      <div>
-        <button class="btn btn-primary btn-sm">Small Button</button>
-      </div>
-    </div>
-    <div class="size-container">
-      <div class="container-title">
-        <span>X-Small Button</span>
-      </div>
-      <div class="subheader">
-        <span>0.5rem 1.25rem</span>
-      </div>
-      <div>
-        <button class="btn btn-primary btn-xs">X-Small Button</button>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.scss
@ -1,26 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    padding: 0 1.25rem 1.25rem 0;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .container-title {
-    margin-bottom: 0.25rem;
-  }
-
-  .size-container {
-    margin: 1.25rem 0 0 1.25rem;
-  }
-
-  .subheader {
-    margin-bottom: 0.75rem;
-    font-size: 0.875rem;
-    font-weight: nb-theme(font-weight-bolder);
-    color: nb-theme(color-fg-heading);
-  }
-}
--- a/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.ts
@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-size-buttons',
-  styleUrls: ['./size-buttons.component.scss'],
-  templateUrl: './size-buttons.component.html',
-})
-export class SizeButtonsComponent {
-}
--- a/src/app/pages/bootstrap/form-inputs/form-inputs.component.html
+++ b/src/app/pages/bootstrap/form-inputs/form-inputs.component.html
@ -1,235 +0,0 @@
-<div class="row">
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Default Inputs</nb-card-header>
-      <nb-card-body>
-        <div class="input-group">
-          <input type="text" placeholder="Project" class="form-control"/>
-        </div>
-        <div class="row full-name-inputs">
-          <div class="col-sm-6 input-group">
-            <input type="text" placeholder="Nick" class="form-control"/>
-          </div>
-          <div class="col-sm-6 input-group">
-            <input type="text" placeholder="Last Name" class="form-control"/>
-          </div>
-        </div>
-        <div class="input-group">
-          <input type="password" placeholder="Password" class="form-control"/>
-        </div>
-        <div class="input-group has-person-icon">
-          <input type="text" placeholder="With Icon" class="form-control"/>
-        </div>
-        <div class="input-group input-group-rounded">
-          <input type="text" placeholder="Rounded border" class="form-control"/>
-        </div>
-        <div class="form-group">
-          <input type="text" placeholder="Project" class="form-control"/>
-          <small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.
-          </small>
-        </div>
-        <div class="input-group">
-          <input type="text" placeholder="Disabled input" class="form-control" disabled/>
-        </div>
-        <div class="input-group">
-          <textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
-        </div>
-        <div class="input-group input-group-sm">
-          <input type="text" placeholder="Small Input" class="form-control"/>
-        </div>
-        <div class="input-group input-group-lg">
-          <input type="text" placeholder="Large Input" class="form-control"/>
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-header>Input Groups</nb-card-header>
-      <nb-card-body>
-        <div class="input-group">
-          <span class="input-group-addon success">@</span>
-          <input type="text" class="form-control" placeholder="Username"/>
-        </div>
-
-        <div class="input-group mail-btn-group">
-          <span class="input-group-prepend">
-            <button class="btn btn-primary btn-icon input-group-text">
-              <i class="ion-ios-email-outline"></i>
-            </button>
-          </span>
-          <input type="text" class="form-control" placeholder="Recipient's username">
-          <span class="input-group-append">
-            <button class="btn btn-primary input-group-text">
-              @example.com
-            </button>
-          </span>
-        </div>
-        <div class="input-group">
-          <input type="text" class="form-control" placeholder="Search for...">
-          <span class="input-group-append">
-            <button class="btn btn-danger input-group-text">
-              Search
-            </button>
-          </span>
-        </div>
-        <div class="input-group">
-          <div class="dropdown input-group-prepend input-group-btn" ngbDropdown>
-            <button type="button" class="btn btn-success dropdown-toggle" ngbDropdownToggle>
-              Action
-            </button>
-            <ul class="dropdown-menu" ngbDropdownMenu>
-              <li class="dropdown-item">Action</li>
-              <li class="dropdown-item">Another action</li>
-              <li class="dropdown-item">Something else here</li>
-              <div role="separator" class="dropdown-divider"></div>
-              <li class="dropdown-item">Separated link</li>
-            </ul>
-          </div>
-          <input type="text" class="form-control">
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-header>Selects</nb-card-header>
-      <nb-card-body>
-        <div class="form-group">
-          <label>Simple Select</label>
-          <select class="form-control">
-            <option>Minsk</option>
-            <option>Gomel</option>
-            <option>Brest</option>
-            <option>Grodno</option>
-            <option>Mogilev</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label>Multiple Select</label>
-          <select multiple class="form-control">
-            <option>Item 1</option>
-            <option>Item 2</option>
-            <option>Item 3</option>
-            <option>Item 4</option>
-            <option>Item 5</option>
-          </select>
-        </div>
-      </nb-card-body>
-    </nb-card>
-  </div>
-
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Input Styles</nb-card-header>
-      <nb-card-body>
-        <div class="input-group input-group-border-only">
-          <input type="text" placeholder="Border Only" class="form-control"/>
-        </div>
-        <div class="input-group">
-          <input type="text" placeholder="Default Input" class="form-control">
-        </div>
-        <div class="input-group input-group-fill-only">
-          <input type="text" placeholder="Fill Only" class="form-control">
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-header>Validation States</nb-card-header>
-      <nb-card-body>
-        <div class="form-group">
-          <input type="text" placeholder="Input with Success" class="form-control form-control-success">
-        </div>
-        <div class="form-group">
-          <input type="text" placeholder="Input with Warning" class="form-control form-control-warning">
-        </div>
-        <div class="form-group">
-          <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
-        </div>
-        <div class="form-group validation-checkboxes row">
-          <nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
-          <nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
-          <nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox>
-        </div>
-        <div class="form-group has-success">
-          <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
-        </div>
-        <div class="form-group has-warning">
-          <input type="text" placeholder="Input with Warning Icon" class="form-control form-control-warning">
-        </div>
-        <div class="form-group has-danger">
-          <input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-header>Checkboxes & Radios</nb-card-header>
-      <nb-card-body>
-        <div class="row demo-checkboxes-radio">
-          <div class="demo-checkboxes col-sm-4">
-            <nb-checkbox>Checkbox 1</nb-checkbox>
-            <nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
-
-            <div class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input" id="b-checkbox">
-              <label class="custom-control-label" for="b-checkbox">Bootstrap Checkbox</label>
-            </div>
-          </div>
-          <div class="demo-radio col-sm-4">
-            <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input" name="customRadio">
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Radio 1</span>
-            </label>
-            <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input" name="customRadio" checked>
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Radio 2</span>
-            </label>
-            <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input" name="customRadio">
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Radio 3</span>
-            </label>
-          </div>
-          <div class="demo-disabled-checkbox-radio col-sm-4">
-            <nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
-            <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input" disabled>
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Disabled Radio</span>
-            </label>
-          </div>
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-body class="demo-rating">
-        <span class="rating-header">Rating</span>
-        <div>
-          <ngb-rating [(rate)]="starRate" max=5>
-            <ng-template let-fill="fill">
-              <span class="star fill" [class.filled]="fill === 100">
-                <i class="ion-android-star" *ngIf="fill === 100"></i>
-                <i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
-              </span>
-            </ng-template>
-          </ngb-rating>
-          <span class="current-rate">{{ starRate }}</span>
-        </div>
-        <div>
-          <ngb-rating [(rate)]="heartRate" max=5>
-            <ng-template let-fill="fill">
-              <span class="star fill" [class.filled]="fill === 100">
-                <i class="ion-ios-heart" *ngIf="fill === 100"></i>
-                <i class="ion-ios-heart-outline" *ngIf="fill !== 100"></i>
-              </span>
-            </ng-template>
-          </ngb-rating>
-          <span class="current-rate">{{ heartRate }}</span>
-        </div>
-      </nb-card-body>
-    </nb-card>
-  </div>
-</div>
--- a/src/app/pages/bootstrap/form-inputs/form-inputs.component.scss
+++ b/src/app/pages/bootstrap/form-inputs/form-inputs.component.scss
@ -1,130 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    overflow: visible;
-  }
-
-  .input-group {
-    margin-bottom: 1rem;
-  }
-
-  .validation-checkboxes {
-    display: flex;
-    justify-content: space-between;
-
-    .custom-control {
-      margin-left: 1rem;
-    }
-  }
-
-  .demo-checkboxes {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-  }
-
-  .demo-radio {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-  }
-
-  .demo-disabled-checkbox-radio {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-  }
-
-  .demo-checkboxes-radio {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .demo-rating {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-
-  .star {
-    font-size: 1.5rem;
-    color: nb-theme(color-fg);
-  }
-
-  .filled {
-    color: nb-theme(color-fg);
-  }
-
-  // TODO: Replace with the card header styles mixin
-  .rating-header {
-    line-height: 2rem;
-    font-size: 1.25rem;
-    font-family: nb-theme(font-secondary);
-    font-weight: nb-theme(font-weight-bolder);
-    color: nb-theme(color-fg-heading);
-  }
-
-  .current-rate {
-    font-size: 1.5rem;
-    @include nb-ltr(padding-left, 1rem);
-    @include nb-rtl(padding-right, 1rem);
-    color: nb-theme(color-fg-heading);
-  }
-
-  .full-name-inputs {
-    display: flex;
-  }
-
-  .input-group.has-person-icon {
-    position: relative;
-
-    .form-control {
-
-      padding-left: 3rem;
-    }
-
-    &::before {
-      content: '\F47D';
-      font-family: 'Ionicons';
-      font-size: 2rem;
-      position: absolute;
-      z-index: 100;
-      left: 1rem;
-      top: 0.25rem;
-    }
-  }
-
-  .dropdown {
-    min-width: 7rem;
-  }
-
-  .dropdown-menu {
-    width: auto;
-  }
-
-  .form-group label {
-    padding: 0 0 0.75rem;
-  }
-
-  ngb-rating {
-    outline: none;
-  }
-
-  ngb-rating i {
-    color: nb-theme(color-success);
-    @include nb-for-theme(cosmic) {
-      color: nb-theme(color-primary);
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    button:not(.btn-icon) {
-      padding: 0.75rem 1rem;
-      font-size: 0.75rem;
-    }
-  }
-}
--- a/src/app/pages/bootstrap/form-inputs/form-inputs.component.ts
+++ b/src/app/pages/bootstrap/form-inputs/form-inputs.component.ts
@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-form-inputs',
-  styleUrls: ['./form-inputs.component.scss'],
-  templateUrl: './form-inputs.component.html',
-})
-export class FormInputsComponent {
-
-  starRate = 2;
-  heartRate = 4;
-}
--- a/src/app/pages/bootstrap/modals/modal/modal.component.html
+++ b/src/app/pages/bootstrap/modals/modal/modal.component.html
@ -1 +0,0 @@
-
--- a/src/app/pages/bootstrap/modals/modal/modal.component.ts
+++ b/src/app/pages/bootstrap/modals/modal/modal.component.ts
@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: 'ngx-modal',
-  template: `
-    <div class="modal-header">
-      <span>{{ modalHeader }}</span>
-      <button class="close" aria-label="Close" (click)="closeModal()">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-    <div class="modal-body">
-      {{ modalContent }}
-    </div>
-    <div class="modal-footer">
-      <button class="btn btn-md btn-primary" (click)="closeModal()">Save changes</button>
-    </div>
-  `,
-})
-export class ModalComponent {
-
-  modalHeader: string;
-  modalContent = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
-    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
-
-  constructor(private activeModal: NgbActiveModal) { }
-
-  closeModal() {
-    this.activeModal.close();
-  }
-}
--- a/src/app/pages/bootstrap/modals/modals.component.html
+++ b/src/app/pages/bootstrap/modals/modals.component.html
@ -1,12 +0,0 @@
-<div class="row">
-  <div class="col-md-12">
-    <nb-card>
-      <nb-card-header>Modals</nb-card-header>
-      <nb-card-body>
-        <button class="btn btn-success" (click)="showLargeModal()">Large modal</button>
-        <button class="btn btn-warning" (click)="showSmallModal()">Small modal</button>
-        <button class="btn btn-primary" (click)="showStaticModal()">Static modal</button>
-      </nb-card-body>
-    </nb-card>
-  </div>
-</div>
--- a/src/app/pages/bootstrap/modals/modals.component.scss
+++ b/src/app/pages/bootstrap/modals/modals.component.scss
@ -1,8 +0,0 @@
-@import '~@nebular/theme/styles/core/mixins';
-
-:host {
-  button {
-    @include nb-ltr(margin, 0 0.75rem 2rem 0);
-    @include nb-rtl(margin, 0 0 2rem 0.75rem);
-  }
-}
--- a/src/app/pages/bootstrap/modals/modals.component.ts
+++ b/src/app/pages/bootstrap/modals/modals.component.ts
@ -1,38 +0,0 @@
-import { Component } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-
-import { ModalComponent } from './modal/modal.component';
-
-@Component({
-  selector: 'ngx-modals',
-  styleUrls: ['./modals.component.scss'],
-  templateUrl: './modals.component.html',
-})
-export class ModalsComponent {
-
-  constructor(private modalService: NgbModal) { }
-
-  showLargeModal() {
-    const activeModal = this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });
-
-    activeModal.componentInstance.modalHeader = 'Large Modal';
-  }
-  showSmallModal() {
-    const activeModal = this.modalService.open(ModalComponent, { size: 'sm', container: 'nb-layout' });
-
-    activeModal.componentInstance.modalHeader = 'Small Modal';
-  }
-
-  showStaticModal() {
-    const activeModal = this.modalService.open(ModalComponent, {
-      size: 'sm',
-      backdrop: 'static',
-      container: 'nb-layout',
-    });
-
-    activeModal.componentInstance.modalHeader = 'Static modal';
-    activeModal.componentInstance.modalContent = `This is static modal, backdrop click
-                                                    will not close it. Click × or confirmation button to close modal.`;
-  }
-
-}
--- a/src/app/pages/extra-components/extra-components-routing.module.ts
+++ b/src/app/pages/extra-components/extra-components-routing.module.ts
@ -2,18 +2,11 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';

 import { ExtraComponentsComponent } from './extra-components.component';
-import { TreeComponent } from './tree/tree.component';
 import { AlertComponent } from './alert/alert.component';
 import { ProgressBarComponent } from './progress-bar/progress-bar.component';
 import { SpinnerComponent } from './spinner/spinner.component';
 import { CalendarComponent } from './calendar/calendar.component';
 import { ChatComponent } from './chat/chat.component';
-import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
-import { AccordionComponent } from './accordion/accordion.component';
-import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component';
-import { InfiniteListComponent } from './infinite-list/infinite-list.component';
-import { ListComponent } from './list/list.component';
-import { StepperComponent } from './stepper/stepper.component';
 import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component';

 const routes: Routes = [{
@ -24,26 +17,6 @@ const routes: Routes = [{
      path: 'calendar',
      component: CalendarComponent,
    },
-    {
-      path: 'stepper',
-      component: StepperComponent,
-    },
-    {
-      path: 'list',
-      component: ListComponent,
-    },
-    {
-      path: 'infinite-list',
-      component: InfiniteListComponent,
-    },
-    {
-      path: 'form-inputs',
-      component: NebularFormInputsComponent,
-    },
-    {
-      path: 'accordion',
-      component: AccordionComponent,
-    },
    {
      path: 'progress-bar',
      component: ProgressBarComponent,
@ -56,29 +29,6 @@ const routes: Routes = [{
      path: 'alert',
      component: AlertComponent,
    },
-    {
-      path: 'tree',
-      component: TreeComponent,
-    },
-    {
-      path: 'tabs',
-      component: TabsComponent,
-      children: [
-        {
-          path: '',
-          redirectTo: 'tab1',
-          pathMatch: 'full',
-        },
-        {
-          path: 'tab1',
-          component: Tab1Component,
-        },
-        {
-          path: 'tab2',
-          component: Tab2Component,
-        },
-      ],
-    },
    {
      path: 'calendar-kit',
      component: CalendarKitFullCalendarShowcaseComponent,
--- a/src/app/pages/extra-components/extra-components.module.ts
+++ b/src/app/pages/extra-components/extra-components.module.ts
@ -1,14 +1,9 @@
 import { NgModule } from '@angular/core';
-
-import { TreeModule } from 'angular-tree-component';
-import { ToasterModule } from 'angular2-toaster';
-
 import { ThemeModule } from '../../@theme/theme.module';
 import { ExtraComponentsRoutingModule } from './extra-components-routing.module';

 // components
 import { ExtraComponentsComponent } from './extra-components.component';
-import { TreeComponent } from './tree/tree.component';
 import { SpinnerInTabsComponent } from './spinner/spinner-in-tabs/spinner-in-tabs.component';
 import { SpinnerInButtonsComponent } from './spinner/spinner-in-buttons/spinner-in-buttons.component';
 import { SpinnerSizesComponent } from './spinner/spinner-sizes/spinner-sizes.component';
@ -20,26 +15,15 @@ import {
 import { ProgressBarComponent } from './progress-bar/progress-bar.component';
 import { AlertComponent } from './alert/alert.component';
 import { ChatComponent } from './chat/chat.component';
-import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
 import { CalendarComponent } from './calendar/calendar.component';
 import { DayCellComponent } from './calendar/day-cell/day-cell.component';
-import { StepperComponent } from './stepper/stepper.component';
-import { ListComponent } from './list/list.component';
-import { InfiniteListComponent } from './infinite-list/infinite-list.component';
-import { NewsPostComponent } from './infinite-list/news-post/news-post.component';
-import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
-import { AccordionComponent } from './accordion/accordion.component';
 import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component';
 import { NebularSelectComponent } from './form-inputs/nebular-select/nebular-select.component';
 import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component';
 import { CalendarKitMonthCellComponent } from './calendar-kit/month-cell/month-cell.component';

-// service
-import { NewsService } from './services/news.service';
-
 const COMPONENTS = [
  ExtraComponentsComponent,
-  TreeComponent,
  AlertComponent,
  ProgressBarComponent,
  InteractiveProgressBarComponent,
@ -51,30 +35,15 @@ const COMPONENTS = [
  CalendarComponent,
  DayCellComponent,
  ChatComponent,
-  TabsComponent,
-  Tab1Component,
-  Tab2Component,
-  StepperComponent,
-  ListComponent,
-  InfiniteListComponent,
-  NewsPostComponent,
-  NewsPostPlaceholderComponent,
-  AccordionComponent,
  NebularFormInputsComponent,
  NebularSelectComponent,
  CalendarKitFullCalendarShowcaseComponent,
  CalendarKitMonthCellComponent,
 ];

-const SERVICES = [
-  NewsService,
-];
-
 const MODULES = [
  ThemeModule,
  ExtraComponentsRoutingModule,
-  TreeModule,
-  ToasterModule.forRoot(),
 ];

@NgModule({
@ -84,8 +53,5 @@ const MODULES = [
  declarations: [
    ...COMPONENTS,
  ],
-  providers: [
-    ...SERVICES,
-  ],
 })
 export class ExtraComponentsModule { }
--- a/src/app/pages/extra-components/tree/tree.component.html
+++ b/src/app/pages/extra-components/tree/tree.component.html
@ -1,10 +0,0 @@
-<div class="row">
-  <div class="col-md-6">
-    <nb-card>
-      <nb-card-header>Tree</nb-card-header>
-      <nb-card-body>
-        <tree-root [nodes]="nodes"></tree-root>
-      </nb-card-body>
-    </nb-card>
-  </div>
-</div>
--- a/src/app/pages/extra-components/tree/tree.component.scss
+++ b/src/app/pages/extra-components/tree/tree.component.scss
@ -1,20 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-@include nb-install-component() {
-
-  ::ng-deep .angular-tree-component {
-    cursor: default;
-
-    .node-wrapper {
-      .node-content-wrapper {
-        background: none;
-        box-shadow: none;
-        cursor: default;
-      }
-
-      .toggle-children-wrapper {
-        cursor: pointer;
-      }
-    }
-  }
-}
--- a/src/app/pages/extra-components/tree/tree.component.ts
+++ b/src/app/pages/extra-components/tree/tree.component.ts
@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-tree',
-  templateUrl: './tree.component.html',
-  styleUrls: ['./tree.component.scss'],
-})
-export class TreeComponent {
-
-  nodes = [{
-    name: 'Programming languages by programming paradigm',
-    children: [{
-      name: 'Object-oriented programming',
-      children: [{
-        name: 'Java',
-      }, {
-        name: 'C++',
-      }, {
-        name: 'C#',
-      }],
-    }, {
-      name: 'Prototype-based programming',
-      children: [{
-        name: 'JavaScript',
-      }, {
-        name: 'CoffeeScript',
-      }, {
-        name: 'Lua',
-      }],
-    }],
-  }];
-
-}
--- a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss
+++ b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss
@ -1,130 +1,130 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  nb-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  nb-card-body {
-    padding-bottom: 0;
-  }
-
-  .example-container {
-    margin-bottom: 1.5rem;
-  }
-
-  .primary-container {
-    .original {
-      background-color: nb-theme(btn-primary-bg);
-    }
-    .hover {
-      @include btn-primary-hover();
-    }
-    .active {
-      @include btn-primary-active();
-    }
-  }
-
-  .primary-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-primary-bg);
-  }
-
-  .success-container {
-    .original {
-      background-color: nb-theme(btn-success-bg);
-    }
-    .hover {
-      @include btn-success-hover();
-    }
-    .active {
-      @include btn-success-active();
-    }
-  }
-
-  .success-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-success-bg);
-  }
-
-  .warning-container {
-    .original {
-      background-color: nb-theme(btn-warning-bg);
-    }
-    .hover {
-      @include btn-warning-hover();
-    }
-    .active {
-      @include btn-warning-active();
-    }
-  }
-
-  .warning-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-warning-bg);
-  }
-
-  .info-container {
-    .original {
-      background-color: nb-theme(btn-info-bg);
-    }
-    .hover {
-      @include btn-info-hover();
-    }
-    .active {
-      @include btn-info-active();
-    }
-  }
-
-  .info-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-info-bg);
-  }
-
-  .danger-container {
-    .original {
-      background-color: nb-theme(btn-danger-bg);
-    }
-    .hover {
-      @include btn-danger-hover();
-    }
-    .active {
-      @include btn-danger-active();
-    }
-  }
-
-  .danger-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-danger-bg);
-  }
-
-  .secondary-container {
-    .original {
-      border: 2px solid nb-theme(btn-secondary-border);
-    }
-    .hover {
-      @include btn-secondary-hover();
-    }
-    .active {
-      @include btn-secondary-active();
-    }
-  }
-
-  .secondary-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-secondary-border);
-  }
-
-  @include media-breakpoint-up(xxl) {
-    .example-container {
-      flex: 0 0 20%;
-      max-width: 20%;
-    }
-  }
-}
+//@import '../../../../@theme/styles/themes';
+//@import '~@nebular/bootstrap/styles/buttons';
+//@import '~bootstrap/scss/mixins/breakpoints';
+//@import '~@nebular/theme/styles/global/breakpoints';
+//
+//@include nb-install-component() {
+//
+//  nb-card-header {
+//    display: flex;
+//    align-items: center;
+//    justify-content: space-between;
+//  }
+//
+//  nb-card-body {
+//    padding-bottom: 0;
+//  }
+//
+//  .example-container {
+//    margin-bottom: 1.5rem;
+//  }
+//
+//  .primary-container {
+//    .original {
+//      background-color: nb-theme(btn-primary-bg);
+//    }
+//    .hover {
+//      @include btn-primary-hover();
+//    }
+//    .active {
+//      @include btn-primary-active();
+//    }
+//  }
+//
+//  .primary-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-primary-bg);
+//  }
+//
+//  .success-container {
+//    .original {
+//      background-color: nb-theme(btn-success-bg);
+//    }
+//    .hover {
+//      @include btn-success-hover();
+//    }
+//    .active {
+//      @include btn-success-active();
+//    }
+//  }
+//
+//  .success-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-success-bg);
+//  }
+//
+//  .warning-container {
+//    .original {
+//      background-color: nb-theme(btn-warning-bg);
+//    }
+//    .hover {
+//      @include btn-warning-hover();
+//    }
+//    .active {
+//      @include btn-warning-active();
+//    }
+//  }
+//
+//  .warning-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-warning-bg);
+//  }
+//
+//  .info-container {
+//    .original {
+//      background-color: nb-theme(btn-info-bg);
+//    }
+//    .hover {
+//      @include btn-info-hover();
+//    }
+//    .active {
+//      @include btn-info-active();
+//    }
+//  }
+//
+//  .info-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-info-bg);
+//  }
+//
+//  .danger-container {
+//    .original {
+//      background-color: nb-theme(btn-danger-bg);
+//    }
+//    .hover {
+//      @include btn-danger-hover();
+//    }
+//    .active {
+//      @include btn-danger-active();
+//    }
+//  }
+//
+//  .danger-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-danger-bg);
+//  }
+//
+//  .secondary-container {
+//    .original {
+//      border: 2px solid nb-theme(btn-secondary-border);
+//    }
+//    .hover {
+//      @include btn-secondary-hover();
+//    }
+//    .active {
+//      @include btn-secondary-active();
+//    }
+//  }
+//
+//  .secondary-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-secondary-border);
+//  }
+//
+//  @include media-breakpoint-up(xxl) {
+//    .example-container {
+//      flex: 0 0 20%;
+//      max-width: 20%;
+//    }
+//  }
+//}
--- a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss
+++ b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss
@ -1,130 +1,130 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  nb-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  nb-card-body {
-    padding-bottom: 0;
-  }
-
-  .example-container {
-    margin-bottom: 1.5rem;
-  }
-
-  .primary-container {
-    .original {
-      background-color: nb-theme(btn-primary-bg);
-    }
-    .hover {
-      @include btn-primary-hover();
-    }
-    .active {
-      @include btn-primary-active();
-    }
-  }
-
-  .primary-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-primary-bg);
-  }
-
-  .success-container {
-    .original {
-      background-color: nb-theme(btn-success-bg);
-    }
-    .hover {
-      @include btn-success-hover();
-    }
-    .active {
-      @include btn-success-active();
-    }
-  }
-
-  .success-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-success-bg);
-  }
-
-  .warning-container {
-    .original {
-      background-color: nb-theme(btn-warning-bg);
-    }
-    .hover {
-      @include btn-warning-hover();
-    }
-    .active {
-      @include btn-warning-active();
-    }
-  }
-
-  .warning-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-warning-bg);
-  }
-
-  .info-container {
-    .original {
-      background-color: nb-theme(btn-info-bg);
-    }
-    .hover {
-      @include btn-info-hover();
-    }
-    .active {
-      @include btn-info-active();
-    }
-  }
-
-  .info-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-info-bg);
-  }
-
-  .danger-container {
-    .original {
-      background-color: nb-theme(btn-danger-bg);
-    }
-    .hover {
-      @include btn-danger-hover();
-    }
-    .active {
-      @include btn-danger-active();
-    }
-  }
-
-  .danger-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-danger-bg);
-  }
-
-  .secondary-container {
-    .original {
-      border: 2px solid nb-theme(btn-secondary-border);
-    }
-    .hover {
-      @include btn-secondary-hover();
-    }
-    .active {
-      @include btn-secondary-active();
-    }
-  }
-
-  .secondary-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-secondary-border);
-  }
-
-  @include media-breakpoint-up(xxl) {
-    .example-container {
-      flex: 0 0 20%;
-      max-width: 20%;
-    }
-  }
-}
+//@import '../../../../@theme/styles/themes';
+//@import '~@nebular/bootstrap/styles/buttons';
+//@import '~bootstrap/scss/mixins/breakpoints';
+//@import '~@nebular/theme/styles/global/breakpoints';
+//
+//@include nb-install-component() {
+//
+//  nb-card-header {
+//    display: flex;
+//    align-items: center;
+//    justify-content: space-between;
+//  }
+//
+//  nb-card-body {
+//    padding-bottom: 0;
+//  }
+//
+//  .example-container {
+//    margin-bottom: 1.5rem;
+//  }
+//
+//  .primary-container {
+//    .original {
+//      background-color: nb-theme(btn-primary-bg);
+//    }
+//    .hover {
+//      @include btn-primary-hover();
+//    }
+//    .active {
+//      @include btn-primary-active();
+//    }
+//  }
+//
+//  .primary-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-primary-bg);
+//  }
+//
+//  .success-container {
+//    .original {
+//      background-color: nb-theme(btn-success-bg);
+//    }
+//    .hover {
+//      @include btn-success-hover();
+//    }
+//    .active {
+//      @include btn-success-active();
+//    }
+//  }
+//
+//  .success-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-success-bg);
+//  }
+//
+//  .warning-container {
+//    .original {
+//      background-color: nb-theme(btn-warning-bg);
+//    }
+//    .hover {
+//      @include btn-warning-hover();
+//    }
+//    .active {
+//      @include btn-warning-active();
+//    }
+//  }
+//
+//  .warning-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-warning-bg);
+//  }
+//
+//  .info-container {
+//    .original {
+//      background-color: nb-theme(btn-info-bg);
+//    }
+//    .hover {
+//      @include btn-info-hover();
+//    }
+//    .active {
+//      @include btn-info-active();
+//    }
+//  }
+//
+//  .info-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-info-bg);
+//  }
+//
+//  .danger-container {
+//    .original {
+//      background-color: nb-theme(btn-danger-bg);
+//    }
+//    .hover {
+//      @include btn-danger-hover();
+//    }
+//    .active {
+//      @include btn-danger-active();
+//    }
+//  }
+//
+//  .danger-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-danger-bg);
+//  }
+//
+//  .secondary-container {
+//    .original {
+//      border: 2px solid nb-theme(btn-secondary-border);
+//    }
+//    .hover {
+//      @include btn-secondary-hover();
+//    }
+//    .active {
+//      @include btn-secondary-active();
+//    }
+//  }
+//
+//  .secondary-container.outline .original {
+//    background-color: transparent;
+//    border: 2px solid nb-theme(btn-secondary-border);
+//  }
+//
+//  @include media-breakpoint-up(xxl) {
+//    .example-container {
+//      flex: 0 0 20%;
+//      max-width: 20%;
+//    }
+//  }
+//}
--- a/src/app/pages/extra-components/accordion/accordion.component.html
+++ b/src/app/pages/extra-components/accordion/accordion.component.html
--- a/src/app/pages/extra-components/accordion/accordion.component.scss
+++ b/src/app/pages/extra-components/accordion/accordion.component.scss
@ -1,5 +1,5 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '../../../../../node_modules/bootstrap/scss/mixins/breakpoints';
+@import '../../../../../node_modules/@nebular/theme/styles/global/breakpoints';

@import '../../../@theme/styles/themes';

--- a/src/app/pages/extra-components/accordion/accordion.component.ts
+++ b/src/app/pages/extra-components/accordion/accordion.component.ts
--- a/src/app/pages/extra-components/infinite-list/infinite-list.component.html
+++ b/src/app/pages/extra-components/infinite-list/infinite-list.component.html
--- a/src/app/pages/extra-components/infinite-list/infinite-list.component.scss
+++ b/src/app/pages/extra-components/infinite-list/infinite-list.component.scss
--- a/src/app/pages/extra-components/infinite-list/infinite-list.component.ts
+++ b/src/app/pages/extra-components/infinite-list/infinite-list.component.ts
--- a/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.html
+++ b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.html
--- a/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
+++ b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
--- a/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.ts
+++ b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.ts
--- a/src/app/pages/extra-components/infinite-list/news-post/news-post.component.html
+++ b/src/app/pages/extra-components/infinite-list/news-post/news-post.component.html
--- a/src/app/pages/extra-components/infinite-list/news-post/news-post.component.ts
+++ b/src/app/pages/extra-components/infinite-list/news-post/news-post.component.ts
--- a/src/app/pages/layout/layout-routing.module.ts
+++ b/src/app/pages/layout/layout-routing.module.ts
@ -0,0 +1,58 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LayoutComponent } from './layout.component';
+import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
+import { AccordionComponent } from './accordion/accordion.component';
+import { InfiniteListComponent } from './infinite-list/infinite-list.component';
+import { ListComponent } from './list/list.component';
+import { StepperComponent } from './stepper/stepper.component';
+
+const routes: Routes = [{
+  path: '',
+  component: LayoutComponent,
+  children: [
+    {
+      path: 'stepper',
+      component: StepperComponent,
+    },
+    {
+      path: 'list',
+      component: ListComponent,
+    },
+    {
+      path: 'infinite-list',
+      component: InfiniteListComponent,
+    },
+    {
+      path: 'accordion',
+      component: AccordionComponent,
+    },
+    {
+      path: 'tabs',
+      component: TabsComponent,
+      children: [
+        {
+          path: '',
+          redirectTo: 'tab1',
+          pathMatch: 'full',
+        },
+        {
+          path: 'tab1',
+          component: Tab1Component,
+        },
+        {
+          path: 'tab2',
+          component: Tab2Component,
+        },
+      ],
+    },
+  ],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LayoutRoutingModule {
+}
--- a/src/app/pages/bootstrap/bootstrap.component.ts
+++ b/src/app/pages/bootstrap/bootstrap.component.ts
@ -1,10 +1,10 @@
 import { Component } from '@angular/core';

@Component({
-  selector: 'ngx-bootstrap',
+  selector: 'ngx-components',
  template: `
    <router-outlet></router-outlet>
  `,
 })
-export class BootstrapComponent {
+export class LayoutComponent {
 }
--- a/src/app/pages/layout/layout.module.ts
+++ b/src/app/pages/layout/layout.module.ts
@ -0,0 +1,51 @@
+import { NgModule } from '@angular/core';
+
+import { ThemeModule } from '../../@theme/theme.module';
+import { LayoutRoutingModule } from './layout-routing.module';
+
+// components
+import { LayoutComponent } from './layout.component';
+import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
+import { StepperComponent } from './stepper/stepper.component';
+import { ListComponent } from './list/list.component';
+import { InfiniteListComponent } from './infinite-list/infinite-list.component';
+import { NewsPostComponent } from './infinite-list/news-post/news-post.component';
+import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
+import { AccordionComponent } from './accordion/accordion.component';
+// service
+import { NewsService } from './services/news.service';
+
+const COMPONENTS = [
+  LayoutComponent,
+  TabsComponent,
+  Tab1Component,
+  Tab2Component,
+  StepperComponent,
+  ListComponent,
+  NewsPostPlaceholderComponent,
+  InfiniteListComponent,
+  NewsPostComponent,
+  AccordionComponent,
+];
+
+const SERVICES = [
+  NewsService,
+];
+
+const MODULES = [
+  ThemeModule,
+  LayoutRoutingModule,
+];
+
+@NgModule({
+  imports: [
+    ...MODULES,
+  ],
+  declarations: [
+    ...COMPONENTS,
+  ],
+  providers: [
+    ...SERVICES,
+  ],
+})
+export class LayoutModule { }
--- a/src/app/pages/extra-components/list/fruits-list.ts
+++ b/src/app/pages/extra-components/list/fruits-list.ts
--- a/src/app/pages/extra-components/list/list.component.html
+++ b/src/app/pages/extra-components/list/list.component.html
--- a/src/app/pages/extra-components/list/list.component.scss
+++ b/src/app/pages/extra-components/list/list.component.scss
--- a/src/app/pages/extra-components/list/list.component.ts
+++ b/src/app/pages/extra-components/list/list.component.ts
--- a/src/app/pages/extra-components/services/news.service.ts
+++ b/src/app/pages/extra-components/services/news.service.ts
--- a/src/app/pages/extra-components/stepper/stepper.component.html
+++ b/src/app/pages/extra-components/stepper/stepper.component.html
--- a/src/app/pages/extra-components/stepper/stepper.component.scss
+++ b/src/app/pages/extra-components/stepper/stepper.component.scss
--- a/src/app/pages/extra-components/stepper/stepper.component.ts
+++ b/src/app/pages/extra-components/stepper/stepper.component.ts
--- a/src/app/pages/extra-components/tabs/tabs.component.html
+++ b/src/app/pages/extra-components/tabs/tabs.component.html
--- a/src/app/pages/extra-components/tabs/tabs.component.scss
+++ b/src/app/pages/extra-components/tabs/tabs.component.scss
@ -1,6 +1,6 @@
@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '../../../../../node_modules/bootstrap/scss/mixins/breakpoints';
+@import '../../../../../node_modules/@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  nb-tabset {
--- a/src/app/pages/extra-components/tabs/tabs.component.ts
+++ b/src/app/pages/extra-components/tabs/tabs.component.ts
--- a/src/app/pages/pages-menu.ts
+++ b/src/app/pages/pages-menu.ts
@ -3,13 +3,13 @@ import { NbMenuItem } from '@nebular/theme';
 export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: 'E-commerce',
-    icon: 'nb-e-commerce',
+    icon: 'shopping-cart-outline',
    link: '/pages/dashboard',
    home: true,
  },
  {
    title: 'IoT Dashboard',
-    icon: 'nb-home',
+    icon: 'home-outline',
    link: '/pages/iot-dashboard',
  },
  {
@ -17,66 +17,34 @@ export const MENU_ITEMS: NbMenuItem[] = [
    group: true,
  },
  {
-    title: 'Extra Components',
-    icon: 'nb-star',
+    title: 'Layout',
+    icon: 'layout-outline',
    children: [
-      {
-        title: 'Calendar',
-        link: '/pages/extra-components/calendar',
-      },
      {
        title: 'Stepper',
-        link: '/pages/extra-components/stepper',
+        link: '/pages/layout/stepper',
      },
      {
        title: 'List',
-        link: '/pages/extra-components/list',
+        link: '/pages/layout/list',
      },
      {
        title: 'Infinite List',
-        link: '/pages/extra-components/infinite-list',
-      },
-      {
-        title: 'Form Inputs',
-        link: '/pages/extra-components/form-inputs',
+        link: '/pages/layout/infinite-list',
      },
      {
        title: 'Accordion',
-        link: '/pages/extra-components/accordion',
-      },
-      {
-        title: 'Progress Bar',
-        link: '/pages/extra-components/progress-bar',
-      },
-      {
-        title: 'Spinner',
-        link: '/pages/extra-components/spinner',
-      },
-      {
-        title: 'Alert',
-        link: '/pages/extra-components/alert',
-      },
-      {
-        title: 'Tree',
-        link: '/pages/extra-components/tree',
+        link: '/pages/layout/accordion',
      },
      {
        title: 'Tabs',
-        link: '/pages/extra-components/tabs',
-      },
-      {
-        title: 'Calendar Kit',
-        link: '/pages/extra-components/calendar-kit',
-      },
-      {
-        title: 'Chat',
-        link: '/pages/extra-components/chat',
+        link: '/pages/layout/tabs',
      },
    ],
  },
  {
    title: 'Forms',
-    icon: 'nb-compose',
+    icon: 'edit-2-outline',
    children: [
      {
        title: 'Form Inputs',
@ -98,7 +66,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
  },
  {
    title: 'UI Features',
-    icon: 'nb-keypad',
+    icon: 'keypad-outline',
    link: '/pages/ui-features',
    children: [
      {
@ -121,7 +89,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
  },
  {
    title: 'Modal & Overlays',
-    icon: 'nb-layout-default',
+    icon: 'browser-outline',
    children: [
      {
        title: 'Dialog',
@ -146,26 +114,38 @@ export const MENU_ITEMS: NbMenuItem[] = [
    ],
  },
  {
-    title: 'Bootstrap',
-    icon: 'nb-gear',
+    title: 'Extra Components',
+    icon: 'message-circle-outline',
    children: [
      {
-        title: 'Form Inputs',
-        link: '/pages/bootstrap/inputs',
+        title: 'Calendar',
+        link: '/pages/extra-components/calendar',
      },
      {
-        title: 'Buttons',
-        link: '/pages/bootstrap/buttons',
+        title: 'Progress Bar',
+        link: '/pages/extra-components/progress-bar',
      },
      {
-        title: 'Modal',
-        link: '/pages/bootstrap/modal',
+        title: 'Spinner',
+        link: '/pages/extra-components/spinner',
+      },
+      {
+        title: 'Alert',
+        link: '/pages/extra-components/alert',
+      },
+      {
+        title: 'Calendar Kit',
+        link: '/pages/extra-components/calendar-kit',
+      },
+      {
+        title: 'Chat',
+        link: '/pages/extra-components/chat',
      },
    ],
  },
  {
    title: 'Maps',
-    icon: 'nb-location',
+    icon: 'map-outline',
    children: [
      {
        title: 'Google Maps',
@ -187,7 +167,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
  },
  {
    title: 'Charts',
-    icon: 'nb-bar-chart',
+    icon: 'pie-chart-outline',
    children: [
      {
        title: 'Echarts',
@ -205,7 +185,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
  },
  {
    title: 'Editors',
-    icon: 'nb-title',
+    icon: 'text-outline',
    children: [
      {
        title: 'TinyMCE',
@ -218,8 +198,8 @@ export const MENU_ITEMS: NbMenuItem[] = [
    ],
  },
  {
-    title: 'Tables',
-    icon: 'nb-tables',
+    title: 'Tables & Data',
+    icon: 'grid-outline',
    children: [
      {
        title: 'Smart Table',
@ -229,7 +209,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
  },
  {
    title: 'Miscellaneous',
-    icon: 'nb-shuffle',
+    icon: 'shuffle-2-outline',
    children: [
      {
        title: '404',
@ -239,7 +219,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
  },
  {
    title: 'Auth',
-    icon: 'nb-locked',
+    icon: 'lock-outline',
    children: [
      {
        title: 'Login',
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@ -9,60 +9,74 @@ import { NotFoundComponent } from './miscellaneous/not-found/not-found.component
 const routes: Routes = [{
  path: '',
  component: PagesComponent,
-  children: [{
-    path: 'dashboard',
-    component: ECommerceComponent,
-  }, {
-    path: 'iot-dashboard',
-    component: DashboardComponent,
-  }, {
-    path: 'ui-features',
-    loadChildren: () => import('./ui-features/ui-features.module')
-      .then(m => m.UiFeaturesModule),
-  }, {
-    path: 'modal-overlays',
-    loadChildren: () => import('./modal-overlays/modal-overlays.module')
-      .then(m => m.ModalOverlaysModule),
-  }, {
-    path: 'extra-components',
-    loadChildren: () => import('./extra-components/extra-components.module')
-      .then(m => m.ExtraComponentsModule),
-  }, {
-    path: 'bootstrap',
-    loadChildren: () => import('./bootstrap/bootstrap.module')
-      .then(m => m.BootstrapModule),
-  }, {
-    path: 'maps',
-    loadChildren: () => import('./maps/maps.module')
-      .then(m => m.MapsModule),
-  }, {
-    path: 'charts',
-    loadChildren: () => import('./charts/charts.module')
-      .then(m => m.ChartsModule),
-  }, {
-    path: 'editors',
-    loadChildren: () => import('./editors/editors.module')
-      .then(m => m.EditorsModule),
-  }, {
-    path: 'forms',
-    loadChildren: () => import('./forms/forms.module')
-      .then(m => m.FormsModule),
-  }, {
-    path: 'tables',
-    loadChildren: () => import('./tables/tables.module')
-      .then(m => m.TablesModule),
-  }, {
-    path: 'miscellaneous',
-    loadChildren: () => import('./miscellaneous/miscellaneous.module')
-      .then(m => m.MiscellaneousModule),
-  }, {
-    path: '',
-    redirectTo: 'dashboard',
-    pathMatch: 'full',
-  }, {
-    path: '**',
-    component: NotFoundComponent,
-  }],
+  children: [
+    {
+      path: 'dashboard',
+      component: ECommerceComponent,
+    },
+    {
+      path: 'iot-dashboard',
+      component: DashboardComponent,
+    },
+    {
+      path: 'layout',
+      loadChildren: () => import('./layout/layout.module')
+        .then(m => m.LayoutModule),
+    },
+    {
+      path: 'forms',
+      loadChildren: () => import('./forms/forms.module')
+        .then(m => m.FormsModule),
+    },
+    {
+      path: 'ui-features',
+      loadChildren: () => import('./ui-features/ui-features.module')
+        .then(m => m.UiFeaturesModule),
+    },
+    {
+      path: 'modal-overlays',
+      loadChildren: () => import('./modal-overlays/modal-overlays.module')
+        .then(m => m.ModalOverlaysModule),
+    },
+    {
+      path: 'extra-components',
+      loadChildren: () => import('./extra-components/extra-components.module')
+        .then(m => m.ExtraComponentsModule),
+    },
+    {
+      path: 'maps',
+      loadChildren: () => import('./maps/maps.module')
+        .then(m => m.MapsModule),
+    },
+    {
+      path: 'charts',
+      loadChildren: () => import('./charts/charts.module')
+        .then(m => m.ChartsModule),
+    },
+    {
+      path: 'editors',
+      loadChildren: () => import('./editors/editors.module')
+        .then(m => m.EditorsModule),
+    },
+    {
+      path: 'tables',
+      loadChildren: () => import('./tables/tables.module')
+        .then(m => m.TablesModule),
+    },
+    {
+      path: 'miscellaneous',
+      loadChildren: () => import('./miscellaneous/miscellaneous.module')
+        .then(m => m.MiscellaneousModule),
+    },
+    {
+      path: '',
+      redirectTo: 'dashboard',
+      pathMatch: 'full',
+    },
+    {
+      path: '**',
+      component: NotFoundComponent,
+    }],
 }];

@NgModule({
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@ -6,10 +6,10 @@ import { MENU_ITEMS } from './pages-menu';
  selector: 'ngx-pages',
  styleUrls: ['pages.component.scss'],
  template: `
-    <ngx-sample-layout>
+    <ngx-one-column-layout>
      <nb-menu [items]="menu"></nb-menu>
      <router-outlet></router-outlet>
-    </ngx-sample-layout>
+    </ngx-one-column-layout>
  `,
 })
 export class PagesComponent {