From 41009c5f3e8c8c4215fe5e24b34ffcc2b4143c87 Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Wed, 13 Sep 2017 18:50:33 +0300
Subject: [PATCH] fix(dashboard): improve temperature dragger responsiveness

---
 .../temperature-dragger.component.html           |  2 +-
 .../temperature-dragger.component.scss           |  2 +-
 .../temperature/temperature.component.scss       | 16 ++++++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
index 9c8e1deb..5b0ddcba 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
@@ -36,5 +36,5 @@
 </div>
 
 <div class="power-bg" [ngClass]="{'off': off}" (click)="switchPower()">
-  <i class="ion-power"></i>
+  <i class="nb-power"></i>
 </div>
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
index e19dcbe1..84f973ec 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
@@ -53,7 +53,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    font-size: 2.5rem;
+    font-size: 4rem;
     color: nb-theme(color-fg-heading);
     transition: all 0.1s ease-out;
     border: 2px solid nb-theme(separator);
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss
index 1bc620fd..1f1812ea 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@@ -1,4 +1,6 @@
 @import '../../../@theme/styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
 
 @include nb-install-component() {
 
@@ -34,6 +36,7 @@
   ngx-temperature-dragger {
     margin-top: -1.5rem;
     width: 80%;
+    max-width: 300px;
   }
 
   .slider-value-container {
@@ -90,6 +93,7 @@
 
   .btn-group {
     padding: 1.25rem;
+    justify-content: center
   }
 
   .btn-icon {
@@ -98,6 +102,7 @@
     justify-content: center;
 
     border-color: nb-theme(form-control-border-color);
+    width: 4.5rem;
     height: 4.5rem;
     padding: 0;
     margin-bottom: 0;
@@ -126,4 +131,15 @@
       }
     }
   }
+
+  @include media-breakpoint-down(xs) {
+    .btn-icon {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    nb-tabset /deep/ ul {
+      padding: 0 0.5rem;
+    }
+  }
 }