refactor: UHK Message component

electron/src/app.module.ts

@@ -11,6 +11,7 @@ import { DragulaModule } from 'ng2-dragula/ng2-dragula';
 import { Select2Module } from 'ng2-select2/ng2-select2';
 
 import { MissingDeviceComponent } from './components/missing-device/missing-device.component';
+import { UhkMessageComponent } from './components/uhk-message';
 import { AddOnComponent } from './shared/components/add-on';
 import { KeyboardSliderComponent } from './shared/components/keyboard/slider';
 import { KeymapAddComponent, KeymapHeaderComponent } from './shared/components/keymap';
@@ -140,6 +141,7 @@ const storeConfig = {
         SettingsComponent,
         KeyboardSliderComponent,
         MissingDeviceComponent,
+        UhkMessageComponent,
         CancelableDirective
     ],
     imports: [

electron/src/components/missing-device/missing-device.component.html

@@ -1,7 +1 @@
-<span class="missing-device-wrapper">
+<uhk-message title="Cannot find your UHK" subtitle="Please plug it in!"></uhk-message>
-    <img class="agent-logo" src="images/agent-icon.png"/>
-    <div class="messages">
-        <h1> Cannot find your UHK </h1>
-        <h2> Please plug it in! </h2>
-    </div>
-</span>

electron/src/components/missing-device/missing-device.component.ts

@@ -10,8 +10,7 @@ import { UhkDeviceService } from './../../services/uhk-device.service';
 
 @Component({
     selector: 'missing-device',
-    templateUrl: 'missing-device.component.html',
+    templateUrl: 'missing-device.component.html'
-    styleUrls: ['missing-device.component.scss']
 })
 export class MissingDeviceComponent {
 

electron/src/components/uhk-message/index.ts

@@ -0,0 +1 @@
+export * from './uhk-message.component';

electron/src/components/uhk-message/uhk-message.component.html

@@ -0,0 +1,7 @@
+<span class="uhk-message-wrapper">
+    <img class="agent-logo" src="images/agent-icon.png"/>
+    <div class="messages">
+        <h1> {{ title }} </h1>
+        <h2> {{ subtitle }} </h2>
+    </div>
+</span>

electron/src/components/uhk-message/uhk-message.component.scss

@@ -1,4 +1,4 @@
-.missing-device-wrapper {
+.uhk-message-wrapper {
     display: flex;
     height: 100%;
     align-items: center;

electron/src/components/uhk-message/uhk-message.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+    selector: 'uhk-message',
+    templateUrl: 'uhk-message.component.html',
+    styleUrls: ['uhk-message.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UhkMessageComponent {
+   @Input() title: string;
+   @Input() subtitle: string;
+}