Create shared toggle component to re-use

frontend/src/app/lightning/node/node.component.html

@@ -140,14 +140,7 @@
 
   <div class="d-flex justify-content-between" *ngIf="!error">
     <h2>Channels ({{ channelsListStatus === 'open' ? node.channel_active_count : node.channel_closed_count }})</h2>
-    <div class="d-flex align-items-center justify-content-end">
-      <span style="margin-bottom: 0.5rem">List</span>&nbsp;
-      <label class="switch">
-        <input type="checkbox" (change)="channelsListModeChange($event)">
-        <span class="slider round"></span>
-      </label>
-      &nbsp;<span style="margin-bottom: 0.5rem">Map</span>
-    </div>
+    <app-toggle [textLeft]="'List'" [textRight]="'Map'" (toggleStatusChanged)="channelsListModeChange($event)"></app-toggle>
   </div>
 
   <app-nodes-channels-map *ngIf="channelsListMode === 'map' && !error" [style]="'nodepage'" [publicKey]="node.public_key">

frontend/src/app/lightning/node/node.component.scss

@@ -56,67 +56,4 @@ app-fiat {
     display: inline-block;
     margin-left: 10px;
   }
-}
-
- /* The switch - the box around the slider */
- .switch {
-  position: relative;
-  display: inline-block;
-  width: 30px;
-  height: 17px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 13px;
-  width: 13px;
-  left: 2px;
-  bottom: 2px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: #2196F3;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(13px);
-  -ms-transform: translateX(13px);
-  transform: translateX(13px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 17px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-} 
+}

frontend/src/app/lightning/node/node.component.ts

@@ -75,8 +75,8 @@ export class NodeComponent implements OnInit {
     this.selectedSocketIndex = index;
   }
 
-  channelsListModeChange(e) {
-    if (e.target.checked === true) {
+  channelsListModeChange(toggle) {
+    if (toggle === true) {
       this.channelsListMode = 'map';
     } else {
       this.channelsListMode = 'list';