build: style and cleanup a bit better nav menu

src/app/dropdown-nav-button/dropdown-nav-button.component.css

@@ -0,0 +1,18 @@
+.nav-button {
+  color: #1a1e21;
+  margin-right: 1em;
+}
+
+.dropdown-menu-pane {
+  background: #141a42;
+  border: 1px solid #1aafb7;
+  border-radius: 0.15rem 0.05rem 0.5rem 0.5rem;
+}
+
+.dropdown-menu-pane a {
+  color: #ccc;
+}
+
+.dropdown-menu-pane a:hover {
+  background: #212529;
+}

src/app/dropdown-nav-button/dropdown-nav-button.component.html

@@ -5,8 +5,8 @@
   (mouseleave)="onMouseLeave()"
   class="d-inline-block"
 >
-  <button class="btn btn-outline-primary" ngbDropdownToggle>{{ buttonLabel }}</button>
+  <button class="btn btn-outline-warning btn-warning nav-button" ngbDropdownToggle>{{ buttonLabel }}</button>
-  <div ngbDropdownMenu>
+  <div ngbDropdownMenu class="dropdown-menu-pane">
     <a *ngFor="let item of items" ngbDropdownItem [routerLink]="item.route">
       {{ item.label }}
     </a>

src/app/dropdown-nav-button/dropdown-nav-button.component.ts

@@ -21,6 +21,6 @@ export class DropdownNavButtonComponent {
   onMouseLeave() {
     this.timeout = setTimeout(() => {
       this.myDrop.close();
-    }, 140);
+    }, 70);
   }
 }

src/app/main-navigation/main-navigation.component.html

@@ -21,7 +21,7 @@
   <app-dropdown-nav-button
     buttonLabel="Trade"
     [items]="[
-      { label: 'Holdings', route: '/trade/coinbase' },
+      { label: 'Coinbase', route: '/trade/coinbase' },
       { label: 'Alerts', route: '/trade/alerts' },
     ]"
   >