fix(dashboard): restructure components

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

@@ -8,3 +8,8 @@
     padding-top: 0;
   }
 }
+
+//global styles for thw whole application
+[class^='col-'] {
+  padding: 0 0.75rem;
+}

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

@@ -3,19 +3,7 @@
 
 <div class="row">
   <div class="col-lg-3">
-    <nga-card size="xmedium">
-      <nga-tabset fullWidth>
-        <nga-tab tabTitle="Temperature">
-          <ngx-temperature-dragger [arcThickness]="15" [knobRadius]="15" [(value)]="currentValue" [bottomAngle]="90"
-                               disableArcColor="#2c2961"
-                               [fillColors]="['#2ec6ff', '#31ffad', '#7bff24', '#fff024', '#ff6c00']">
-          </ngx-temperature-dragger>
-        </nga-tab>
-        <nga-tab tabTitle="Humidity">
-          <span>Content #2</span>
-        </nga-tab>
-      </nga-tabset>
-    </nga-card>
+    <ngx-temperature></ngx-temperature>
   </div>
 
   <div class="col-lg-9">
@@ -29,14 +17,7 @@
 
 <div class="row">
   <div class="col-lg-9">
-    <nga-card size="xmedium">
-      <nga-card-header>
-        Room Management
-      </nga-card-header>
-      <nga-card-body>
-        <ngx-room-selector></ngx-room-selector>
-      </nga-card-body>
-    </nga-card>
+    <ngx-rooms></ngx-rooms>
   </div>
 
   <div class="col-lg-3">

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

@@ -6,5 +6,4 @@ import { Component } from '@angular/core';
   templateUrl: './dashboard.component.html',
 })
 export class DashboardComponent {
-  currentValue = 0.5;
 }

src/app/pages/dashboard/dashboard.module.ts

@@ -4,9 +4,11 @@ import { NgaTabsetModule, NgaUserModule } from '@akveo/nga-theme';
 import { SharedModule } from '../../shared.module';
 import { DashboardComponent } from './dashboard.component';
 import { StatusCardsComponent } from './status-cards/status-cards.component';
-import { TemperatureDraggerComponent } from './temperature-dragger/temperature-dragger.component';
 import { ContactsComponent } from './contacts/contacts.component';
-import { RoomSelectorComponent } from './room-selector/room-selector.component';
+import { RoomsComponent } from './rooms/rooms.component';
+import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
+import { TemperatureComponent } from './temperature/temperature.component';
+import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
 
 @NgModule({
   imports: [
@@ -20,6 +22,8 @@ import { RoomSelectorComponent } from './room-selector/room-selector.component';
     TemperatureDraggerComponent,
     ContactsComponent,
     RoomSelectorComponent,
+    TemperatureComponent,
+    RoomsComponent,
   ],
 })
 export class DashboardModule { }

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

@@ -44,6 +44,7 @@ svg {
 .room-text {
   cursor: pointer;
   user-select: none;
+  fill: #fff;
 }
 
 .selected-room {

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

@@ -0,0 +1,9 @@
+@import '../../../@theme/styles/variables';
+@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
+
+@include nga-install-component() {
+
+  ngx-room-selector {
+    width: 65%;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-rooms',
+  styleUrls: ['./rooms.component.scss'],
+  template: `
+    <nga-card size="xmedium">
+      <nga-card-header>
+        Room Management
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-room-selector></ngx-room-selector>
+      </nga-card-body>
+    </nga-card>
+  `,
+})
+export class RoomsComponent {
+}

src/app/pages/dashboard/status-cards/status-cards.component.ts

@@ -23,8 +23,8 @@ import { Component } from '@angular/core';
 export class StatusCardsComponent {
   statusCards = [
     { title: 'Light', on: true, type: 'primary', icon: 'ion-ios-game-controller-b-outline' },
-    { title: 'RollerShades', on: false, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'RollerShades', on: true, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
     { title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
-    { title: 'Coffee Maker', on: false, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'Coffee Maker', on: true, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
   ];
 }

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

@@ -0,0 +1,14 @@
+@import '../../../@theme/styles/variables';
+@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
+
+@include nga-install-component() {
+
+  nga-tab.content-active {
+    display: flex;
+    justify-content: center;
+  }
+
+  ngx-temperature-dragger {
+    width: 80%;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-temperature',
+  styleUrls: ['./temperature.component.scss'],
+  template: `
+    <nga-card size="xmedium">
+      <nga-tabset fullWidth>
+        <nga-tab tabTitle="Temperature">
+          <ngx-temperature-dragger [(value)]="temperature" [arcThickness]="20" [knobRadius]="15" [bottomAngle]="90"
+             disableArcColor="#2c2961" [fillColors]="['#2ec6ff', '#31ffad', '#7bff24', '#EAE75F']">
+          </ngx-temperature-dragger>
+        </nga-tab>
+        <nga-tab tabTitle="Humidity">
+          <span>Content #2</span>
+        </nga-tab>
+      </nga-tabset>
+    </nga-card>
+  `,
+})
+export class TemperatureComponent {
+  temperature = 0.5;
+}