feat(dashboard): change team to kitten component

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

@@ -53,7 +53,7 @@
       </nb-card-body>
     </nb-card>
 
-    <ngx-team></ngx-team>
+    <ngx-kitten></ngx-kitten>
   </div>
 
   <div class="col-lg-3">

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

@@ -10,6 +10,7 @@ import { RoomSelectorComponent } from './rooms/room-selector/room-selector.compo
 import { TemperatureComponent } from './temperature/temperature.component';
 import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
 import { TeamComponent } from './team/team.component';
+import { KittenComponent } from './kitten/kitten.component';
 import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
 import { ElectricityComponent } from './electricity/electricity.component';
 import { ElectricityChartComponent } from './electricity/electricity-chart/electricity-chart.component';
@@ -34,6 +35,7 @@ import { TrafficChartComponent } from './traffic/traffic-chart.component';
     TemperatureComponent,
     RoomsComponent,
     TeamComponent,
+    KittenComponent,
     SecurityCamerasComponent,
     ElectricityComponent,
     ElectricityChartComponent,

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

@@ -0,0 +1,27 @@
+<nb-card size="medium">
+  <div class="picture" style.background-image="url('/assets/images/kitten-{{currentTheme}}.png')"></div>
+
+  <div class="details">
+    <div class="title">
+      React Native UI Kitten
+    </div>
+    <div class="description">
+      React Native UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
+    </div>
+  </div>
+
+  <div class="links">
+    <a href="https://akveo.github.io/react-native-ui-kitten" target="_blank">
+      <i class="ion-ios-world"></i>
+    </a>
+    <a href="https://itunes.apple.com/us/app/kitten-tricks/id1246143230" target="_blank">
+      <i class="ion-social-apple"></i>
+    </a>
+    <a href="https://play.google.com/store/apps/details?id=com.akveo.kittenTricks" target="_blank">
+      <i class="ion-social-android"></i>
+    </a>
+    <a href="https://github.com/akveo/react-native-ui-kitten" target="_blank">
+      <i class="ion-social-github"></i>
+    </a>
+  </div>
+</nb-card>

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

@@ -0,0 +1,52 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  .picture {
+    background-position: center;
+    background-size: cover;
+    position: relative;
+    border-top-left-radius: nb-theme(card-border-radius);
+    border-top-right-radius: nb-theme(card-border-radius);
+
+    flex: 1;
+    max-height: 50%;
+  }
+
+  .details {
+    padding: 1.25rem 1.25rem 0;
+
+    .title {
+      font-family: nb-theme(font-secondary);
+      font-weight: nb-theme(font-weight-bolder);
+      color: nb-theme(color-fg-heading);
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .description {
+      text-align: justify;
+      color: nb-theme(color-fg-text);
+      font-weight: nb-theme(font-weight-light);
+    }
+  }
+
+  .links {
+    display: flex;
+    justify-content: space-around;
+    padding: 0.75rem 0;
+
+    a {
+      text-decoration: none;
+      color: nb-theme(color-fg);
+
+      &:hover {
+        color: nb-theme(color-fg-heading);
+      }
+
+      i {
+        font-size: 1.75rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-kitten',
+  styleUrls: ['./kitten.component.scss'],
+  templateUrl: './kitten.component.html',
+})
+export class KittenComponent {
+
+  currentTheme: string;
+
+  constructor(private themeService: NbThemeService) {
+    this.themeService.getJsTheme().subscribe(theme => {
+      this.currentTheme = theme.name;
+    });
+  }
+}