fix(temperature): fix temperature dragger gradient, fix switcher button hover background (#1745)

Author: denStrigo

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

@@ -14,8 +14,9 @@
 
     &:hover {
       $color: nb-theme(switcher-background);
+      $percentage: nb-theme(switcher-background-percentage);
 
-      background-color: tint($color, 14%);
+      background-color: tint($color, $percentage);
     }
 
     span {

src/app/@theme/styles/themes.scss

@@ -16,6 +16,7 @@ $nb-themes: nb-register-theme((
   font-secondary: Exo,
 
   switcher-background: #ebeff5,
+  switcher-background-percentage: 50%,
   drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
 ), default, default);
 
@@ -29,6 +30,7 @@ $nb-themes: nb-register-theme((
   font-secondary: Exo,
 
   switcher-background: #4e41a5,
+  switcher-background-percentage: 14%,
   drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
 ), cosmic, cosmic);
 
@@ -42,5 +44,6 @@ $nb-themes: nb-register-theme((
   font-secondary: Exo,
 
   switcher-background: #2b2d34,
+  switcher-background-percentage: 14%,
   drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
 ), corporate, corporate);

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

@@ -2,7 +2,7 @@ import {Component, OnDestroy} from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators/takeWhile' ;
 
-interface ICardSettings {
+interface CardSettings {
   title: string;
   iconClass: string;
   type: string;
@@ -17,40 +17,40 @@ export class DashboardComponent implements OnDestroy {
 
   private alive = true;
 
-  lightCard: ICardSettings = {
+  lightCard: CardSettings = {
     title: 'Light',
     iconClass: 'nb-lightbulb',
     type: 'primary',
   };
-  rollerShadesCard: ICardSettings = {
+  rollerShadesCard: CardSettings = {
     title: 'Roller Shades',
     iconClass: 'nb-roller-shades',
     type: 'success',
   };
-  wirelessAudioCard: ICardSettings = {
+  wirelessAudioCard: CardSettings = {
     title: 'Wireless Audio',
     iconClass: 'nb-audio',
     type: 'info',
   };
-  coffeeMakerCard: ICardSettings = {
+  coffeeMakerCard: CardSettings = {
     title: 'Coffee Maker',
     iconClass: 'nb-coffee-maker',
     type: 'warning',
   };
 
   statusCards: string;
 
-  commonStatusCardsSet: ICardSettings[] = [
+  commonStatusCardsSet: CardSettings[] = [
     this.lightCard,
     this.rollerShadesCard,
     this.wirelessAudioCard,
     this.coffeeMakerCard,
   ];
 
   statusCardsByThemes: {
-    default: ICardSettings[];
-    cosmic: ICardSettings[];
-    corporate: ICardSettings[];
+    default: CardSettings[];
+    cosmic: CardSettings[];
+    corporate: CardSettings[];
   } = {
     default: this.commonStatusCardsSet,
     cosmic: this.commonStatusCardsSet,

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

@@ -119,8 +119,13 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
     this.calculateVars();
 
     this.invalidateClipPathStr();
-    this.invalidateGradientArcs();
     this.invalidatePinPosition();
+
+    // Chrome fix, temporary solution
+    // TODO: review set data to styles object
+    setTimeout(() => {
+      this.invalidateGradientArcs();
+    })
   }
 
   private calculateVars() {