[CORD-2869] Adding service status dropdown

Change-Id: I8faa6d96f202fc097cc12df87e1825d7dff2852f
diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index 56cf7f1..f416204 100644
--- a/src/app/core/header/header.html
+++ b/src/app/core/header/header.html
@@ -52,6 +52,16 @@
           typeahead-template-url="customTemplate.html"
           typeahead-on-select="vm.routeSelected($item, $model, $label)">
       </form>
+      <div class="nav navbar-nav navbar-right">
+        <div class="btn-group" uib-dropdown is-open="status.isopen">
+          <a id="single-button" class="btn btn-accent" uib-dropdown-toggle>
+            Service Status <span class="caret"></span>
+          </a>
+          <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
+            <service-status></service-status>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </nav>
diff --git a/src/app/core/header/header.scss b/src/app/core/header/header.scss
index 30347f8..f6006d2 100644
--- a/src/app/core/header/header.scss
+++ b/src/app/core/header/header.scss
@@ -39,24 +39,29 @@
 
   .dropdown-menu {
     background: #2a2d35 !important;
-    min-width: 275px;
-    max-height: 600px;
-    overflow-y: scroll;
+    min-width: 300px;
 
-    .active > a {
-      border-left: 6px solid #f6a821;
-      background: #494b54;
-      color: #fff !important;
+    .table {
+      margin-bottom: 0;
     }
 
-    a {
-      color: #c0c4c8 !important;
-      display: block;
-      width: 100%;
+    .table tr th:first-child {
+      padding-left: 20px;
     }
 
-    a:hover {
-      background: #494b54 !important;
+    .table tr th:last-child {
+      padding-right: 20px;
     }
   }
+
+  .navbar-nav a {
+    margin: 10px;
+  }
+
+  .navbar-nav > .open > a,
+  .navbar-nav > .open > a:hover {
+    color:#ffffff !important;
+    background-color:rgba(246,168,33,0.1) !important;;
+    border-color:#f6a821;
+  }
 }
\ No newline at end of file