From ef2f71e46e41153f4493c3f75fb046e4c75f690a Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 12 Jan 2017 13:16:38 -0800
Subject: [PATCH] Create new CSS component page-header-dropdown

---
 ui/src/hosts/containers/HostPage.js           |  4 +--
 ui/src/style/chronograf.scss                  |  1 +
 .../components/page-header-dropdown.scss      | 27 +++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/style/components/page-header-dropdown.scss

diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js
index b63ebc3603..21af5fa3ac 100644
--- a/ui/src/hosts/containers/HostPage.js
+++ b/ui/src/hosts/containers/HostPage.js
@@ -140,9 +140,9 @@ export const HostPage = React.createClass({
         <div className="page-header full-width">
           <div className="page-header__container">
             <div className="page-header__left">
-              <div className="dropdown minimal-dropdown">
+              <div className="dropdown page-header-dropdown">
                 <button className="dropdown-toggle" type="button" data-toggle="dropdown">
-                  <span className="button-text btn-info">{hostID}</span>
+                  <span className="button-text">{hostID}</span>
                   <span className="caret"></span>
                 </button>
                 <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 4ad566a564..da84df737d 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -27,6 +27,7 @@
 
 // Components
 @import 'components/group-by-time-dropdown';
+@import 'components/page-header-dropdown';
 @import 'components/multi-select-dropdown';
 @import 'components/page-spinner';
 @import 'components/flash-messages';
diff --git a/ui/src/style/components/page-header-dropdown.scss b/ui/src/style/components/page-header-dropdown.scss
new file mode 100644
index 0000000000..1386afee07
--- /dev/null
+++ b/ui/src/style/components/page-header-dropdown.scss
@@ -0,0 +1,27 @@
+.page-header-dropdown {
+  .dropdown-toggle {
+    height: 38px;
+    padding-left: 0;
+    min-width: 50px;
+    width: auto;
+    border: 0;
+    background-color: transparent;
+    text-transform: uppercase;
+    padding-right: (11px + 12px); // caret width + offset
+    font-size: 17px;
+    font-weight: 400;
+    transition: color 0.25s ease;
+  }
+  .dropdown-toggle > .caret {
+    right: 0;
+  }
+  .dropdown-toggle > .caret:after {
+    content: "\e910";
+    font-size: 17px;
+  }
+  /* Hover & Open State */
+  &.open .dropdown-toggle,
+  .dropdown-toggle:hover {
+    color: $c-pool;
+  }
+}
\ No newline at end of file