Update dropdowns, use FancyScroll when possible

ui/src/shared/components/AutoRefreshDropdown.js

@@ -44,7 +44,7 @@ const AutoRefreshDropdown = React.createClass({
     const {milliseconds, inputValue} = this.findAutoRefreshItem(selected)
 
     return (
-      <div className="dropdown dropdown-160">
+      <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
         <div
           className="btn btn-sm btn-info dropdown-toggle"
           onClick={() => self.toggleMenu()}
@@ -55,14 +55,14 @@ const AutoRefreshDropdown = React.createClass({
               +milliseconds > 0 ? 'refresh' : 'pause'
             )}
           />
-          <span className="selected-time-range">{inputValue}</span>
+          <span className="dropdown-selected">{inputValue}</span>
           <span className="caret" />
         </div>
-        <ul className={classnames('dropdown-menu', {show: isOpen})}>
+        <ul className="dropdown-menu">
           <li className="dropdown-header">AutoRefresh Interval</li>
           {autoRefreshItems.map(item => {
             return (
-              <li key={item.menuOption}>
+              <li className="dropdown-item" key={item.menuOption}>
                 <a
                   href="#"
                   onClick={() => self.handleSelection(item.milliseconds)}

ui/src/shared/components/Dropdown.js

@@ -94,7 +94,7 @@ class Dropdown extends Component {
           )
         })}
         {addNew
-          ? <li>
+          ? <li className="dropdown-item">
               <Link to={addNew.url}>
                 {addNew.text}
               </Link>

ui/src/shared/components/TimeRangeDropdown.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import OnClickOutside from 'shared/components/OnClickOutside'
+import FancyScrollbox from 'src/shared/components/FancyScrollbar'
 
 import moment from 'moment'
 
@@ -55,28 +56,30 @@ const TimeRangeDropdown = React.createClass({
     const {isOpen} = self.state
 
     return (
-      <div className="dropdown dropdown-160">
+      <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
         <div
           className="btn btn-sm btn-info dropdown-toggle"
           onClick={() => self.toggleMenu()}
         >
           <span className="icon clock" />
-          <span className="selected-time-range">
+          <span className="dropdown-selected">
             {self.findTimeRangeInputValue(selected)}
           </span>
           <span className="caret" />
         </div>
-        <ul className={classnames('dropdown-menu', {show: isOpen})}>
-          <li className="dropdown-header">Time Range</li>
-          {timeRanges.map(item => {
-            return (
-              <li key={item.menuOption}>
-                <a href="#" onClick={() => self.handleSelection(item)}>
-                  {item.menuOption}
-                </a>
-              </li>
-            )
-          })}
+        <ul className="dropdown-menu" style={{height: '270px'}}>
+          <FancyScrollbox>
+            <li className="dropdown-header">Time Range</li>
+            {timeRanges.map(item => {
+              return (
+                <li className="dropdown-item" key={item.menuOption}>
+                  <a href="#" onClick={() => self.handleSelection(item)}>
+                    {item.menuOption}
+                  </a>
+                </li>
+              )
+            })}
+          </FancyScrollbox>
         </ul>
       </div>
     )

ui/src/style/components/template-control-bar.scss

@@ -59,14 +59,15 @@ $template-control--min-height: 52px;
     @include gradient-h($c-star,$c-pool);
     @include custom-scrollbar-round($c-pool,$c-laser);
 
-    > li > a {
-      &, &:active {background-color: transparent !important;}
+    li.dropdown-item {
+      &:hover {@include gradient-h($c-comet,$c-pool);}
+    }
+    li.dropdown-item > a {
+      &, &:focus {background: none;}
+      &:active, &:active:focus {@include gradient-h($c-amethyst,$c-pool);}
       font-size: 12px;
       font-family: $code-font;
     }
-    > li {
-      &:hover {@include gradient-h($c-comet,$c-pool);}
-    }
   }
 }
 .template-control--label {