Re-implement "add node" popover menu with colors

src/app/components/editor/node-picker/node-picker.component.html

@@ -1,50 +1,18 @@
 <ion-list>
-  <ion-item button (click)="onSelect('paragraph')">
-    <ion-icon slot="start" name="menu"></ion-icon>
+  <ion-item button (click)="onSelect('node')" class="node">
+    <i class="fa" slot="start" [ngClass]="typeIcons.node"></i>
     <ion-label>Paragraph</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('header1')">
-    <ion-icon slot="start" name="alert"></ion-icon>
-    <ion-label>Heading 1</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('header2')">
-    <ion-icon slot="start" name="alert"></ion-icon>
-    <ion-label>Heading 2</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('header3')">
-    <ion-icon slot="start" name="alert"></ion-icon>
-    <ion-label>Heading 3</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('header4')">
-    <ion-icon slot="start" name="alert"></ion-icon>
-    <ion-label>Heading 4</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('ul')">
-    <ion-icon slot="start" name="list"></ion-icon>
-    <ion-label>Unordered List</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('block_code')">
-    <ion-icon slot="start" name="information"></ion-icon>
-    <ion-label>Monospace Block</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('click_link')">
-    <ion-icon slot="start" name="link"></ion-icon>
-    <ion-label>Hyperlink</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('database_ref')">
-    <ion-icon slot="start" name="analytics"></ion-icon>
+  <ion-item button (click)="onSelect('db')" class="db">
+    <i class="fa" slot="start" [ngClass]="typeIcons.db"></i>
     <ion-label>Database</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('code_ref')">
-    <ion-icon slot="start" name="code"></ion-icon>
+  <ion-item button (click)="onSelect('code')" class="code">
+    <i class="fa" slot="start" [ngClass]="typeIcons.code"></i>
     <ion-label>Code Editor</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('file_ref')">
-    <ion-icon slot="start" name="document"></ion-icon>
+  <ion-item button (click)="onSelect('files')" class="files">
+    <i class="fa" slot="start" [ngClass]="typeIcons.node"></i>
     <ion-label>Upload Files</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('page_sep')">
-    <ion-icon slot="start" name="remove"></ion-icon>
-    <ion-label>Horizontal Row</ion-label>
-  </ion-item>
 </ion-list>

src/app/components/editor/node-picker/node-picker.component.scss

@@ -0,0 +1,21 @@
+i {
+  min-width: 21px;
+}
+
+.node {
+  i {
+    color: var(--noded-background-node);
+  }
+}
+
+.db {
+  i {
+    color: var(--noded-background-db);
+  }
+}
+
+.code {
+  i {
+    color: var(--noded-background-code);
+  }
+}

src/app/components/editor/node-picker/node-picker.component.ts

@@ -8,6 +8,15 @@ import {PopoverController} from '@ionic/angular';
 })
 export class NodePickerComponent implements OnInit {
 
+  public typeIcons = {
+    branch: 'fa fa-folder',
+    node: 'fa fa-quote-left',
+    norm: 'fa fa-quote-left',
+    page: 'fa fa-sticky-note',
+    db: 'fa fa-database',
+    code: 'fa fa-code',
+  };
+
   constructor(
       private popover: PopoverController,
   ) { }