Time range dropdown

- No label required
- Added icon back in (wasn’t showing up before) which makes it a lot
more clear
- Styles are generic so any icon inside a dropdown will get positioned
the same way

ui/src/chronograf/containers/Header.js

@@ -126,7 +126,6 @@ const Header = React.createClass({
             <span className="icon cpu"></span>
             {this.context.source.name}
           </div>
-          <h1>Range:</h1>
           <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
         </div>
         <DeleteExplorerModal onConfirm={this.confirmDeleteExplorer} />

ui/src/hosts/containers/HostPage.js

@@ -128,7 +128,6 @@ export const HostPage = React.createClass({
               <h1>{hostID}</h1>
             </div>
             <div className="page-header__right">
-              <h1>Range:</h1>
               <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
             </div>
           </div>

ui/src/kubernetes/components/KubernetesDashboard.js

@@ -73,7 +73,6 @@ export const KubernetesPage = React.createClass({
               <h1>Kubernetes Dashboard</h1>
             </div>
             <div className="page-header__right">
-              <h1>Range:</h1>
               <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
             </div>
           </div>

ui/src/shared/components/TimeRangeDropdown.js

@@ -44,7 +44,7 @@ const TimeRangeDropdown = React.createClass({
     return (
       <div className="dropdown time-range-dropdown">
         <div className="btn btn-sm btn-info dropdown-toggle" onClick={() => self.toggleMenu()}>
-          <span className="icon-clock"></span>
+          <span className="icon clock"></span>
           <span className="selected-time-range">{selected}</span>
           <span className="caret" />
         </div>

ui/src/style/enterprise_style/theme-dark.scss

@@ -148,6 +148,14 @@
     right: 8px;
     transform: translateY(-50%);
   }
+  > .icon {
+    font-size: 16px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 6px;
+    position: relative;
+    top: -1px;
+  }
 }
 .dropdown-menu {
   float: none !important;