refactor: UHK Message component

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

@@ -1,7 +1 @@
-<span class="missing-device-wrapper">
-    <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>
+<uhk-message title="Cannot find your UHK" subtitle="Please plug it in!"></uhk-message>

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',
-    styleUrls: ['missing-device.component.scss']
+    templateUrl: 'missing-device.component.html'
 })
 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;
+}