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

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">
-    <ngx-status-card title="Light" type="primary">
-      <i class="nb-lightbulb"></i>
-    </ngx-status-card>
-  </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>
+  <div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
+    <ngx-status-card [title]="statusCard.title"
+                     [type]="statusCard.type">
+      <i [ngClass]="statusCard.iconClass"></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);
+        }
       }
     }