feat(theme): add corporate theme (#1727)

angular.json

@@ -11,6 +11,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "preserveSymlinks": true,
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",

package.json

@@ -9,6 +9,11 @@
   "bugs": {
     "url": "https://github.com/akveo/ngx-admin/issues"
   },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "IE 11"
+  ],
   "scripts": {
     "ng": "ng",
     "conventional-changelog": "conventional-changelog",

src/app/@theme/components/header/header.component.html

@@ -6,21 +6,22 @@
     <div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
   </div>
   <ngx-theme-switcher></ngx-theme-switcher>
-  <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
 </div>
 
-<nb-actions
+<div class="header-container">
-  size="medium"
+  <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
-  class="header-container"
+  <nb-actions
-  [class.right]="position === 'normal'"
+    size="medium"
-  [class.left]="position === 'inverse'">
+    [class.right]="position === 'normal'"
-  <nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
+    [class.left]="position === 'inverse'">
-  <nb-action *nbIsGranted="['view', 'user']" >
+    <nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
-    <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
+    <nb-action *nbIsGranted="['view', 'user']" >
-  </nb-action>
+      <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
-  <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
+    </nb-action>
-  <nb-action class="control-item" icon="nb-email"></nb-action>
+    <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
-  <nb-action class="control-item">
+    <nb-action class="control-item" icon="nb-email"></nb-action>
-    <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
+    <nb-action class="control-item">
-  </nb-action>
+      <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
-</nb-actions>
+    </nb-action>
+  </nb-actions>
+</div>

src/app/@theme/components/header/header.component.scss

@@ -21,6 +21,7 @@
   .logo-containter {
     display: flex;
     align-items: center;
+    width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
   }
 
   .control-item {
@@ -30,7 +31,7 @@
   .header-container {
     display: flex;
     align-items: center;
-    width: 100%;
+    width: auto;
 
     .navigation {
       @include nb-ltr(padding-right, nb-theme(padding));
@@ -58,9 +59,33 @@
     }
   }
 
-  ngx-layout-direction-switcher,
+  @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 /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: 0 1em;
+    margin: nb-theme(layout-padding);
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   @include media-breakpoint-down(xl) {
@@ -142,10 +167,13 @@
       padding: 0;
     }
 
-    ngx-layout-direction-switcher,
+    ngx-layout-direction-switcher {
-    ngx-theme-switcher {
       display: none;
     }
+
+    ngx-theme-switcher {
+      margin: 0 0.5rem;
+    }
   }
 
   @include media-breakpoint-down(sm) {
@@ -167,6 +195,10 @@
       display: none;
     }
 
+    ngx-theme-switcher {
+      display: none;
+    }
+
     nb-action:not(.toggle-layout) {
       padding: 0;
     }

src/app/@theme/components/index.ts

@@ -6,3 +6,4 @@ 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'

src/app/@theme/components/switcher/switcher.component.scss

@@ -62,16 +62,16 @@
   .switch {
     position: relative;
     display: inline-block;
-    width: 4rem;
+    width: 3rem;
-    height: 1.75rem;
+    height: 1.5rem;
     margin: 0;
 
     input {
       display: none;
 
       &:checked + .slider::before {
-        @include nb-ltr(transform, translateX(2.25rem));
+        @include nb-ltr(transform, translateX(1.5rem));
-        @include nb-rtl(transform, translateX(-2.25rem));
+        @include nb-rtl(transform, translateX(-1.5rem));
       }
     }
 
@@ -88,8 +88,8 @@
     .slider::before {
       position: absolute;
       content: '';
-      height: 1.75rem;
+      height: 1.5rem;
-      width: 1.75rem;
+      width: 1.5rem;
       border-radius: 50%;
       background-color: nb-theme(color-success);
       transition: 0.2s;
@@ -99,6 +99,10 @@
       @include nb-for-theme(cosmic) {
         @include btn-hero-primary-gradient();
       }
+
+      @include nb-for-theme(corporate) {
+        background-color: nb-theme(color-primary);
+      }
     }
   }
 

src/app/@theme/components/theme-settings/theme-settings.component.ts

@@ -26,10 +26,6 @@ import { StateService } from '../../../@core/data/state.service';
         <i [attr.class]="sidebar.icon"></i>
       </a>
     </div>
-    <h6 class="settings">SETTINGS</h6>
-    <div class="switcher">
-      <ngx-theme-switcher [vertical]="true"></ngx-theme-switcher>
-    </div>
     <div class="switcher">
       <ngx-layout-direction-switcher [vertical]="true"></ngx-layout-direction-switcher>
     </div>

src/app/@theme/components/theme-switcher/theme-switcher.component.html

@@ -0,0 +1,7 @@
+<div class="themes-switcher"
+     [nbPopover]="switcherListComponent"
+     nbPopoverPlacement="bottom"
+     [nbPopoverContext]="{popover: popover}">
+  <i class="nb-drops"></i>
+  <span *ngIf="showTitle">Themes</span>
+</div>

src/app/@theme/components/theme-switcher/theme-switcher.component.scss

@@ -0,0 +1,49 @@
+@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);
+
+      background-color: tint($color, 14%);
+    }
+
+    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;
+      }
+    }
+  }
+}
+
+

src/app/@theme/components/theme-switcher/theme-switcher.component.ts

@@ -1,57 +1,19 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
+import { NbPopoverDirective } from '@nebular/theme';
 import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
-import { AnalyticsService } from '../../../@core/utils/analytics.service';
+
+import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
 
 @Component({
   selector: 'ngx-theme-switcher',
-  template: `
+  templateUrl: './theme-switcher.component.html',
-    <ngx-switcher
+  styleUrls: ['./theme-switcher.component.scss'],
-      [firstValue]="false"
-      [secondValue]="true"
-      [firstValueLabel]="'Light'"
-      [secondValueLabel]="'Cosmic'"
-      [value]="currentBoolTheme()"
-      (valueChange)="toggleTheme($event)"
-      [vertical]="vertical"
-    >
-    </ngx-switcher>
-  `,
 })
-export class ThemeSwitcherComponent implements OnInit {
+export class ThemeSwitcherComponent {
+  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
+
+  @Input() showTitle: boolean = true;
+
+  switcherListComponent = ThemeSwitcherListComponent;
   theme: NbJSThemeOptions;
-
-  firstTheme = 'default';
-  secondTheme = 'cosmic';
-
-  @Input() vertical: boolean = false;
-
-  constructor(
-    private themeService: NbThemeService,
-    private analyticsService: AnalyticsService,
-  ) {}
-
-  ngOnInit() {
-    this.themeService.getJsTheme()
-      .subscribe((theme: NbJSThemeOptions) => this.theme = theme);
-  }
-
-  toggleTheme(theme: boolean) {
-    const themeName = this.boolToTheme(theme);
-    this.themeService.changeTheme(themeName);
-
-    this.analyticsService.trackEvent('switchTheme');
-  }
-
-  currentBoolTheme() {
-    return this.themeToBool(this.theme);
-  }
-
-  private themeToBool(theme: NbJSThemeOptions) {
-    return theme.name === this.secondTheme;
-  }
-
-  private boolToTheme(theme: boolean) {
-    return theme ? this.secondTheme : this.firstTheme;
-  }
 }

src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss

@@ -0,0 +1,76 @@
+@import '../../../styles/themes';
+@import '~@nebular/theme/styles/core/mixins';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/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() {
+  /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) {
+    /deep/ .themes-switcher-list {
+      display: none;
+    }
+  }
+}

src/app/@theme/components/theme-switcher/themes-switcher-list/themes-switcher-list.component.ts

@@ -0,0 +1,51 @@
+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();
+  }
+}

src/app/@theme/layouts/one-column/one-column.layout.scss

@@ -47,11 +47,31 @@
 
     margin-top: nb-theme(sidebar-header-gap);
 
+    @include nb-for-theme(corporate) {
+      margin-top: 0;
+    }
+
     /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;
+      }
+    }
+
+    /deep/ .scrollable {
+      @include nb-for-theme(corporate) {
+        padding-top: 0;
+
+        .menu-item:first-child {
+          border-top: none;
+        }
+      }
     }
 
     /deep/ nb-sidebar-header {
@@ -67,6 +87,10 @@
       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);

src/app/@theme/layouts/one-column/one-column.layout.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators/takeWhile';
 
 // TODO: move layouts into the framework
 @Component({
@@ -11,7 +13,7 @@ import { Component } from '@angular/core';
       </nb-layout-header>
 
       <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
-        <nb-sidebar-header>
+        <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>
@@ -29,5 +31,21 @@ import { Component } from '@angular/core';
     </nb-layout>
   `,
 })
-export class OneColumnLayoutComponent {
+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;
+  }
 }

src/app/@theme/layouts/sample/sample.layout.scss

@@ -47,11 +47,31 @@
 
     margin-top: nb-theme(sidebar-header-gap);
 
+    @include nb-for-theme(corporate) {
+      margin-top: 0;
+    }
+
     /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;
+      }
+    }
+
+    /deep/ .scrollable {
+      @include nb-for-theme(corporate) {
+        padding-top: 0;
+
+        .menu-item:first-child {
+          border-top: none;
+        }
+      }
     }
 
     /deep/ nb-sidebar-header {
@@ -67,6 +87,10 @@
       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);

src/app/@theme/layouts/sample/sample.layout.ts

@@ -1,6 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { delay, withLatestFrom } from 'rxjs/operators';
+import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
-import { Subscription } from 'rxjs';
 import {
   NbMediaBreakpoint,
   NbMediaBreakpointsService,
@@ -26,7 +25,7 @@ import { StateService } from '../../../@core/data/state.service';
                    tag="menu-sidebar"
                    responsive
                    [end]="sidebar.id === 'end'">
-        <nb-sidebar-header>
+        <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>
@@ -106,26 +105,29 @@ export class SampleLayoutComponent implements OnDestroy {
   layout: any = {};
   sidebar: any = {};
 
-  protected layoutState$: Subscription;
+  private alive = true;
-  protected sidebarState$: Subscription;
+
-  protected menuClick$: Subscription;
+  currentTheme: string;
 
   constructor(protected stateService: StateService,
               protected menuService: NbMenuService,
               protected themeService: NbThemeService,
               protected bpService: NbMediaBreakpointsService,
               protected sidebarService: NbSidebarService) {
-    this.layoutState$ = this.stateService.onLayoutState()
+    this.stateService.onLayoutState()
+      .pipe(takeWhile(() => this.alive))
       .subscribe((layout: string) => this.layout = layout);
 
-    this.sidebarState$ = this.stateService.onSidebarState()
+    this.stateService.onSidebarState()
+      .pipe(takeWhile(() => this.alive))
       .subscribe((sidebar: string) => {
         this.sidebar = sidebar;
       });
 
     const isBp = this.bpService.getByName('is');
-    this.menuClick$ = this.menuService.onItemSelect()
+    this.menuService.onItemSelect()
       .pipe(
+        takeWhile(() => this.alive),
         withLatestFrom(this.themeService.onMediaQueryChange()),
         delay(20),
       )
@@ -135,11 +137,15 @@ export class SampleLayoutComponent implements OnDestroy {
           this.sidebarService.collapse('menu-sidebar');
         }
       });
+
+    this.themeService.getJsTheme()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(theme => {
+        this.currentTheme = theme.name;
+    });
   }
 
   ngOnDestroy() {
-    this.layoutState$.unsubscribe();
+    this.alive = false;
-    this.sidebarState$.unsubscribe();
-    this.menuClick$.unsubscribe();
   }
 }

src/app/@theme/layouts/three-columns/three-columns.layout.scss

@@ -47,11 +47,31 @@
 
     margin-top: nb-theme(sidebar-header-gap);
 
+    @include nb-for-theme(corporate) {
+      margin-top: 0;
+    }
+
     /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;
+      }
+    }
+
+    /deep/ .scrollable {
+      @include nb-for-theme(corporate) {
+        padding-top: 0;
+
+        .menu-item:first-child {
+          border-top: none;
+        }
+      }
     }
 
     /deep/ nb-sidebar-header {
@@ -67,6 +87,10 @@
       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);

src/app/@theme/layouts/three-columns/three-columns.layout.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators/takeWhile';
 
 // TODO: move layouts into the framework
 @Component({
@@ -11,7 +13,7 @@ import { Component } from '@angular/core';
       </nb-layout-header>
 
       <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
-        <nb-sidebar-header>
+        <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>
@@ -35,5 +37,21 @@ import { Component } from '@angular/core';
     </nb-layout>
   `,
 })
-export class ThreeColumnsLayoutComponent {
+export class ThreeColumnsLayoutComponent 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;
+  }
 }

src/app/@theme/layouts/two-columns/two-columns.layout.scss

@@ -47,11 +47,32 @@
 
     margin-top: nb-theme(sidebar-header-gap);
 
+    @include nb-for-theme(corporate) {
+      margin-top: 0;
+    }
+
     /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;
+
+      }
+    }
+
+    /deep/ .scrollable {
+      @include nb-for-theme(corporate) {
+        padding-top: 0;
+
+        .menu-item:first-child {
+          border-top: none;
+        }
+      }
     }
 
     /deep/ nb-sidebar-header {
@@ -67,6 +88,10 @@
       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);

src/app/@theme/layouts/two-columns/two-columns.layout.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators/takeWhile';
 
 // TODO: move layouts into the framework
 @Component({
@@ -11,7 +13,7 @@ import { Component } from '@angular/core';
       </nb-layout-header>
 
       <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
-        <nb-sidebar-header>
+        <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>
@@ -33,5 +35,21 @@ import { Component } from '@angular/core';
     </nb-layout>
   `,
 })
-export class TwoColumnsLayoutComponent {
+export class TwoColumnsLayoutComponent 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;
+  }
 }

src/app/@theme/styles/theme.corporate.ts

@@ -0,0 +1,86 @@
+export const CORPORATE_THEME = {
+  name: 'corporate',
+  base: 'default',
+  variables: {
+    temperature: [
+      '#ffa36b',
+      '#ffa36b',
+      '#ff9e7a',
+      '#ff9888',
+      '#ff8ea0',
+    ],
+
+    solar: {
+      gradientLeft: '#ff8ea0',
+      gradientRight: '#ffa36b',
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      colorBlack: '#000000',
+      tooltipBg: '#eef2f5',
+      tooltipBorderColor: '#eef2f5',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: '#2a2a2a',
+      tooltipFontWeight: '400',
+
+      lineBg: '#c0c8d1',
+      lineShadowBlur: '0',
+      itemColor: '#bcc3cc',
+      itemBorderColor: '#bcc3cc',
+      itemEmphasisBorderColor: '#74a2ff',
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: '#ffffff',
+      gradTo: '#ffffff',
+    },
+
+    electricity: {
+      tooltipBg: '#edf0f4',
+      tooltipLineColor: '#bdc4cd',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: '#ebeef2',
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: '#2a2a2a',
+      tooltipFontWeight: 'bolder',
+
+      axisLineColor: 'rgba(0, 0, 0, 0)',
+      xAxisTextColor: '#2a2a2a',
+      yAxisSplitLine: '#ebeef2',
+
+      itemBorderColor: '#73a1ff',
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: '#bdc4cd',
+      lineGradTo: '#c0c8d1',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: 'rgba(255, 255, 255, 0)',
+      areaGradTo: 'rgba(255, 255, 255, 0)',
+      shadowLineDarkBg: 'rgba(255, 255, 255, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: '#484848',
+      areaColor: '#dddddd',
+      areaHoverColor: '#cccccc',
+      areaBorderColor: '#ebeef2',
+    },
+
+    echarts: {
+      bg: '#ffffff',
+      textColor: '#484848',
+      axisLineColor: '#bbbbbb',
+      splitLineColor: '#ebeef2',
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: '#6a7985',
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: '#cccccc',
+      textColor: '#484848',
+    },
+  },
+};

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);
+$nb-enabled-themes: (default, cosmic, corporate);
 
 $nb-themes: nb-register-theme((
  // app wise variables for each theme
@@ -14,6 +14,9 @@ $nb-themes: nb-register-theme((
 
   font-main: Roboto,
   font-secondary: Exo,
+
+  switcher-background: #ebeff5,
+  drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
 ), default, default);
 
 $nb-themes: nb-register-theme((
@@ -24,4 +27,20 @@ $nb-themes: nb-register-theme((
 
   font-main: Roboto,
   font-secondary: Exo,
+
+  switcher-background: #4e41a5,
+  drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
 ), cosmic, cosmic);
+
+$nb-themes: nb-register-theme((
+  // app wise variables for each theme
+  sidebar-header-gap: 2rem,
+  sidebar-header-height: initial,
+  layout-content-width: 1400px,
+
+  font-main: Roboto,
+  font-secondary: Exo,
+
+  switcher-background: #2b2d34,
+  drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
+), corporate, corporate);

src/app/@theme/theme.module.ts

@@ -30,6 +30,7 @@ import {
   LayoutDirectionSwitcherComponent,
   ThemeSwitcherComponent,
   TinyMCEComponent,
+  ThemeSwitcherListComponent,
 } from './components';
 import { CapitalizePipe, PluralPipe, RoundPipe, TimingPipe } from './pipes';
 import {
@@ -40,6 +41,7 @@ import {
 } from './layouts';
 import { DEFAULT_THEME } from './styles/theme.default';
 import { COSMIC_THEME } from './styles/theme.cosmic';
+import { CORPORATE_THEME } from './styles/theme.corporate';
 
 const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
 
@@ -64,6 +66,7 @@ const COMPONENTS = [
   SwitcherComponent,
   LayoutDirectionSwitcherComponent,
   ThemeSwitcherComponent,
+  ThemeSwitcherListComponent,
   HeaderComponent,
   FooterComponent,
   SearchInputComponent,
@@ -75,6 +78,10 @@ const COMPONENTS = [
   TwoColumnsLayoutComponent,
 ];
 
+const ENTRY_COMPONENTS = [
+  ThemeSwitcherListComponent,
+];
+
 const PIPES = [
   CapitalizePipe,
   PluralPipe,
@@ -87,7 +94,7 @@ const NB_THEME_PROVIDERS = [
     {
       name: 'cosmic',
     },
-    [ DEFAULT_THEME, COSMIC_THEME ],
+    [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
   ).providers,
   ...NbSidebarModule.forRoot().providers,
   ...NbMenuModule.forRoot().providers,
@@ -97,6 +104,7 @@ 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 {

src/app/pages/dashboard/contacts/contacts.component.scss

@@ -23,6 +23,10 @@
 
     &:not(:last-child) {
       border-bottom: 1px solid nb-theme(separator);
+
+      @include nb-for-theme(corporate) {
+        border-bottom-color: nb-theme(tabs-separator);
+      }
     }
   }
 

src/app/pages/dashboard/dashboard.component.html

@@ -1,25 +1,8 @@
 <div class="row">
-  <div class="col-xxxl-3 col-md-6">
+  <div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
-    <ngx-status-card title="Light" type="primary">
+    <ngx-status-card [title]="statusCard.title"
-      <i class="nb-lightbulb"></i>
+                     [type]="statusCard.type">
-    </ngx-status-card>
+      <i [ngClass]="statusCard.iconClass"></i>
-  </div>
-
-  <div class="col-xxxl-3 col-md-6">
-    <ngx-status-card title="Roller Shades" type="success">
-      <i class="nb-roller-shades"></i>
-    </ngx-status-card>
-  </div>
-
-  <div class="col-xxxl-3 col-md-6">
-    <ngx-status-card title="Wireless Audio" type="info">
-      <i class="nb-audio"></i>
-    </ngx-status-card>
-  </div>
-
-  <div class="col-xxxl-3 col-md-6">
-    <ngx-status-card title="Coffee Maker" type="warning">
-      <i class="nb-coffee-maker"></i>
     </ngx-status-card>
   </div>
 </div>

src/app/pages/dashboard/dashboard.component.ts

@@ -1,9 +1,88 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators/takeWhile' ;
+
+interface ICardSettings {
+  title: string;
+  iconClass: string;
+  type: string;
+}
 
 @Component({
   selector: 'ngx-dashboard',
   styleUrls: ['./dashboard.component.scss'],
   templateUrl: './dashboard.component.html',
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnDestroy {
+
+  private alive = true;
+
+  lightCard: ICardSettings = {
+    title: 'Light',
+    iconClass: 'nb-lightbulb',
+    type: 'primary',
+  };
+  rollerShadesCard: ICardSettings = {
+    title: 'Roller Shades',
+    iconClass: 'nb-roller-shades',
+    type: 'success',
+  };
+  wirelessAudioCard: ICardSettings = {
+    title: 'Wireless Audio',
+    iconClass: 'nb-audio',
+    type: 'info',
+  };
+  coffeeMakerCard: ICardSettings = {
+    title: 'Coffee Maker',
+    iconClass: 'nb-coffee-maker',
+    type: 'warning',
+  };
+
+  statusCards: string;
+
+  commonStatusCardsSet: ICardSettings[] = [
+    this.lightCard,
+    this.rollerShadesCard,
+    this.wirelessAudioCard,
+    this.coffeeMakerCard,
+  ];
+
+  statusCardsByThemes: {
+    default: ICardSettings[];
+    cosmic: ICardSettings[];
+    corporate: ICardSettings[];
+  } = {
+    default: this.commonStatusCardsSet,
+    cosmic: this.commonStatusCardsSet,
+    corporate: [
+      {
+        ...this.lightCard,
+        type: 'warning',
+      },
+      {
+        ...this.rollerShadesCard,
+        type: 'primary',
+      },
+      {
+        ...this.wirelessAudioCard,
+        type: 'danger',
+      },
+      {
+        ...this.coffeeMakerCard,
+        type: 'secondary',
+      },
+    ],
+  };
+
+  constructor(private themeService: NbThemeService) {
+    this.themeService.getJsTheme()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(theme => {
+        this.statusCards = this.statusCardsByThemes[theme.name];
+    });
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
 }

src/app/pages/dashboard/electricity/electricity.component.html

@@ -31,7 +31,7 @@
           </div>
         </div>
 
-        <div class="stats-block">
+        <div class="stats-block currency">
           <div class="subtitle">Spent</div>
           <div>
             <span class="value">291</span>
@@ -40,7 +40,9 @@
         </div>
       </div>
 
-      <div class="dropdown" ngbDropdown>
+      <div class="dropdown"
+           [ngClass]="{ 'ghost-dropdown': currentTheme === 'corporate' }"
+           ngbDropdown>
         <button type="button" ngbDropdownToggle class="btn"
                 [ngClass]="{ 'btn-outline-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
           {{ type }}

src/app/pages/dashboard/electricity/electricity.component.scss

@@ -3,6 +3,7 @@
 @import '~@nebular/theme/styles/global/typography/typography';
 @import '~bootstrap/scss/mixins/breakpoints';
 @import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
 
 @include nb-install-component() {
 
@@ -22,6 +23,10 @@
     height: 100%;
     z-index: 2;
     box-shadow: nb-theme(card-shadow);
+
+    @include nb-for-theme(corporate) {
+      border-right: 1px solid nb-theme(card-border-color);
+    }
   }
 
   .table-header {
@@ -88,9 +93,29 @@
     justify-content: space-between;
     padding: nb-theme(padding);
     color: nb-theme(color-fg);
+    position: relative;
 
     &:not(:first-child) {
       border-top: 1px solid nb-theme(separator);
+
+      @include nb-for-theme(corporate) {
+        border-top-color: nb-theme(tabs-separator);
+      }
+    }
+
+    &:hover {
+      background-color: nb-theme(layout-bg);
+
+      &::before {
+        position: absolute;
+        content: '';
+        height: 100%;
+        width: 6px;
+        left: 0;
+        top: 0;
+        background-color: nb-theme(color-success);
+        border-radius: nb-theme(radius);
+      }
     }
 
     .month {
@@ -169,7 +194,7 @@
   .stats-block {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: normal;
     color: nb-theme(color-fg);
     padding: 0 1.5rem;
     border-right: 1px solid nb-theme(separator);
@@ -210,6 +235,48 @@
     .stats-block .value {
       font-weight: nb-theme(font-weight-bolder);
     }
+
+    .stats-month {
+      &:hover {
+        &::before {
+          $color-top: nb-theme(btn-success-bg);
+          $color-bottom: btn-hero-success-left-color();
+
+          background-image: linear-gradient(to top, $color-top, $color-bottom);
+          box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
+        }
+      }
+    }
+  }
+
+  @include nb-for-theme(corporate) {
+    nb-tabset /deep/ ul li.active {
+      &::before {
+        display: none;
+      }
+    }
+
+    .stats-block {
+      border-right: none;
+    }
+
+    .stats-month {
+      &:hover {
+        &::before {
+          background-color: nb-theme(color-primary);
+        }
+      }
+
+      .delta {
+        &.down {
+          color: text-primary();
+
+          &::before {
+            border-top: 8px solid text-primary();
+          }
+        }
+      }
+    }
   }
 
   @include media-breakpoint-down(xxl) {

src/app/pages/dashboard/rooms/player/player.component.scss

@@ -67,6 +67,10 @@
       @include nb-for-theme(cosmic) {
         background-color: nb-theme(link-color);
       }
+
+      @include nb-for-theme(corporate) {
+        background-color: nb-theme(color-primary);
+      }
     }
 
     .progress {
@@ -99,6 +103,12 @@
           background: nb-theme(link-color);
         }
       }
+
+      @include nb-for-theme(corporate) {
+        @include install-thumb() {
+          background: nb-theme(color-primary);
+        }
+      }
     }
   }
 

src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss

@@ -92,4 +92,12 @@
       }
     }
   }
+
+  @include nb-for-theme(corporate) {
+    .selected-room {
+      .room-border {
+        stroke: nb-theme(color-primary);
+      }
+    }
+  }
 }

src/app/pages/dashboard/rooms/rooms.component.scss

@@ -12,6 +12,11 @@
     @include nb-for-theme(cosmic) {
       background-image: url('../../../../assets/images/square_pattern_cosmic.svg');
     }
+
+    @include nb-for-theme(corporate) {
+      background: none;
+      border-right-color: nb-theme(tabs-separator);
+    }
   }
 
   ngx-player {

src/app/pages/dashboard/security-cameras/security-cameras.component.scss

@@ -115,6 +115,10 @@
       color: nb-theme(color-fg);
       font-size: 3rem;
       margin-right: 0.5rem;
+
+      @include nb-for-theme(corporate) {
+        color: nb-theme(actions-fg);
+      }
     }
 
     span {
@@ -145,6 +149,19 @@
     }
   }
 
+  @include nb-for-theme(corporate) {
+    .cameras-filter a {
+      &.active {
+        color: nb-theme(color-primary);
+      }
+
+      &:first-child {
+        @include nb-ltr(border-left, 1px solid nb-theme(border-color));
+        @include nb-rtl(border-right, 1px solid nb-theme(border-color));
+      }
+    }
+  }
+
   @include media-breakpoint-down(lg) {
     nb-action {
       padding: 0;

src/app/pages/dashboard/status-card/status-card.component.scss

@@ -47,6 +47,26 @@
         @include btn-hero-warning-gradient();
         @include btn-hero-warning-bevel-glow-shadow();
       }
+      &.danger {
+        @include btn-hero-danger-gradient();
+        @include btn-hero-danger-bevel-glow-shadow();
+      }
+      &.secondary {
+        @include btn-hero-secondary-bg();
+        @include btn-hero-secondary-bevel-glow-shadow();
+        color: nb-theme(card-fg);
+      }
+
+      @include nb-for-theme(corporate) {
+        &.primary,
+        &.success,
+        &.info,
+        &.warning,
+        &.danger,
+        &.secondary {
+          box-shadow: none;
+        }
+      }
     }
 
     &:hover {
@@ -65,6 +85,12 @@
         &.warning {
           background-image: btn-hero-warning-light-gradient();
         }
+        &.danger {
+          background-image: btn-hero-danger-light-gradient();
+        }
+        &.secondary {
+          background-image: btn-hero-secondary-light-gradient();
+        }
       }
     }
 
@@ -74,10 +100,14 @@
       .icon {
         color: nb-theme(card-fg);
 
-        &.primary, &.success, &.info, &.warning {
+        &.primary, &.success, &.info, &.warning, &.danger {
           box-shadow: none;
           background-image: linear-gradient(to right, transparent, transparent);
         }
+
+        &.secondary {
+          background: transparent;
+        }
       }
 
       .title {
@@ -143,4 +173,12 @@
       }
     }
   }
+
+  @include nb-for-theme(corporate) {
+    nb-card {
+      .icon-container {
+        height: auto;
+      }
+    }
+  }
 }

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss

@@ -91,4 +91,14 @@
       text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
     }
   }
+
+  @include nb-for-theme(corporate) {
+    .circle {
+      stroke: nb-theme(color-warning);
+    }
+
+    .power-bg {
+      color: nb-theme(separator);
+    }
+  }
 }

src/app/pages/dashboard/temperature/temperature.component.scss

@@ -124,6 +124,14 @@
     }
   }
 
+  @include nb-for-theme(corporate) {
+    .btn-icon.active {
+      color: nb-theme(color-primary);
+      border: none;
+      background-color: nb-theme(layout-bg);
+    }
+  }
+
   @include media-breakpoint-down(is) {
     ngx-temperature-dragger {
       max-width: 250px;

src/app/pages/dashboard/weather/weather.component.scss

@@ -59,6 +59,10 @@
           0 4px 10px rgba(33, 7, 77, 0.5),
           0 2px 10px #928dff;
         }
+
+        @include nb-for-theme(corporate) {
+          color: nb-theme(color-warning);
+        }
       }
     }
 

src/app/pages/ui-features/buttons/buttons.component.scss

@@ -39,6 +39,10 @@
         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 {

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html

@@ -17,6 +17,13 @@
               <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">
@@ -51,8 +58,8 @@
             <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">0 2px 12px 0</span>
+              <span class="subheader">{{ hb[themeName].glow.params }}</span>
-              <span class="subheader">{{ hb[themeName].glow }}</span>
+              <span class="subheader">{{ hb[themeName].glow.color }}</span>
             </div>
             <div class="state-details" *ngIf="!hb[themeName].glow">
               <span class="header">No Glow</span>

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss

@@ -39,6 +39,9 @@
   }
 
   .primary-container {
+    .color {
+      background-color: nb-theme(color-primary);
+    }
     .gradient {
       @include btn-hero-primary-gradient();
     }
@@ -51,6 +54,9 @@
   }
 
   .warning-container {
+    .color {
+      background-color: nb-theme(color-warning);
+    }
     .gradient {
       @include btn-hero-warning-gradient();
     }
@@ -63,6 +69,9 @@
   }
 
   .success-container {
+    .color {
+      background-color: nb-theme(color-success);
+    }
     .gradient {
       @include btn-hero-success-gradient();
     }
@@ -75,6 +84,9 @@
   }
 
   .info-container {
+    .color {
+      background-color: nb-theme(color-info);
+    }
     .gradient {
       @include btn-hero-info-gradient();
     }
@@ -87,6 +99,9 @@
   }
 
   .danger-container {
+    .color {
+      background-color: nb-theme(color-danger);
+    }
     .gradient {
       @include btn-hero-danger-gradient();
     }
@@ -99,6 +114,9 @@
   }
 
   .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);

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ngx-hero-buttons',
@@ -10,7 +11,7 @@ export class HeroButtonComponent implements OnDestroy {
 
   themeName = 'default';
   settings: Array<any>;
-  themeSubscription: any;
+  themeSubscription: Subscription;
 
   constructor(private themeService: NbThemeService) {
     this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
@@ -29,12 +30,22 @@ export class HeroButtonComponent implements OnDestroy {
         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: `adjust-hue(${colors.primary}, 10deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.primary}, 10deg)`,
+        },
       },
     }, {
       class: 'btn-hero-warning',
@@ -45,12 +56,22 @@ export class HeroButtonComponent implements OnDestroy {
         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: `adjust-hue(${colors.warning}, 5deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.warning}, 5deg)`,
+        },
       },
     }, {
       class: 'btn-hero-success',
@@ -61,12 +82,22 @@ export class HeroButtonComponent implements OnDestroy {
         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: `adjust-hue(${colors.success}, 10deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.success}, 10deg)`,
+        },
       },
     }, {
       class: 'btn-hero-info',
@@ -77,12 +108,22 @@ export class HeroButtonComponent implements OnDestroy {
         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: `adjust-hue(${colors.info}, -5deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.info}, -5deg)`,
+        },
       },
     }, {
       class: 'btn-hero-danger',
@@ -93,12 +134,22 @@ export class HeroButtonComponent implements OnDestroy {
         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: `adjust-hue(${colors.danger}, -10deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.danger}, -10deg)`,
+        },
       },
     }, {
       class: 'btn-hero-secondary',
@@ -108,11 +159,17 @@ export class HeroButtonComponent implements OnDestroy {
       default: {
         border: '#dadfe6',
       },
+      corporate: {
+        color: '#edf2f5',
+      },
       cosmic: {
         border: colors.primary,
         bevel: '#665ebd',
         shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: 'rgba (146, 141, 255, 1)',
+        glow: {
+          params: '0 2px 12px 0',
+          color: 'rgba (146, 141, 255, 1)',
+        },
       },
     }];
   }

src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss

@@ -14,6 +14,10 @@
       font-size: 2.5rem;
       @include nb-ltr(margin-right, 1rem);
       @include nb-rtl(margin-left, 1rem);
+
+      @include nb-for-theme(corporate) {
+        color: nb-theme(actions-fg);
+      }
     }
 
     span {

src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss

@@ -7,6 +7,7 @@
     padding: 0 0 29px;
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
   }
 
   .shape-container {

src/tsconfig.app.json

@@ -16,6 +16,12 @@
   },
   "exclude": [
     "test.ts",
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "../node_modules/@nebular/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/*.ts",
+    "../src/**/*.ts",
+    "../node_modules/@nebular/**/*.ts"
   ]
 }