Use "tablist" nav styles from theme, remove excess styles

ui/src/data_explorer/components/VisHeader.js

@@ -4,14 +4,14 @@ import classnames from 'classnames'
 const VisHeader = ({views, view, onToggleView, name}) => (
   <div className="graph-heading">
     {views.length
-      ? <ul className="toggle toggle-sm">
+      ? <ul className="nav nav-tablist nav-tablist-sm">
           {views.map(v => (
             <li
               key={v}
               onClick={() => onToggleView(v)}
-              className={classnames('toggle-btn ', {active: view === v})}
+              className={classnames({active: view === v})}
             >
-              {v}
+              {v.charAt(0).toUpperCase() + v.slice(1)}
             </li>
           ))}
         </ul>

ui/src/kapacitor/components/RuleMessage.js

@@ -58,12 +58,13 @@ export const RuleMessage = React.createClass({
         <div className="rule-section-body">
           <div className="kapacitor-values-tabs">
             <p>Send this Alert to:</p>
-            <ul className="btn-group btn-group-lg tab-group">
+            <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
               {alerts.map(alert => (
                 <li
-                  key={alert.text}
+                  key={alert.text.toLowerCase()}
-                  className={classnames('btn tab', {
+                  className={classnames({
-                    active: alert.text === selectedAlert,
+                    active: alert.text.toLowerCase() ===
+                      selectedAlert.toLowerCase(),
                   })}
                   onClick={() => this.handleChooseAlert(alert)}
                 >

ui/src/kapacitor/components/ValuesSection.js

@@ -27,7 +27,9 @@ export const ValuesSection = React.createClass({
         <div className="rule-section-body">
           <Tabs initialIndex={initialIndex} onSelect={this.handleChooseTrigger}>
             <TabList isKapacitorTabs="true">
-              {TABS.map(tab => <Tab key={tab}>{tab}</Tab>)}
+              {TABS.map(tab => (
+                <Tab key={tab} isKapacitorTab={true}>{tab}</Tab>
+              ))}
             </TabList>
 
             <TabPanels>

ui/src/shared/components/Tabs.js

@@ -8,9 +8,20 @@ export const Tab = React.createClass({
     onClick: func,
     isDisabled: bool,
     isActive: bool,
+    isKapacitorTab: bool,
   },
 
   render() {
+    if (this.props.isKapacitorTab) {
+      return (
+        <li
+          className={classnames({active: this.props.isActive})}
+          onClick={this.props.isDisabled ? null : this.props.onClick}
+        >
+          {this.props.children}
+        </li>
+      )
+    }
     return (
       <div
         className={classnames('btn tab', {active: this.props.isActive})}
@@ -49,7 +60,9 @@ export const TabList = React.createClass({
       return (
         <div className="kapacitor-values-tabs">
           <p>Alert Type</p>
-          <div className="btn-group btn-group-lg tab-group">{children}</div>
+          <div className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
+            {children}
+          </div>
         </div>
       )
     }

ui/src/style/pages/kapacitor.scss

@@ -419,33 +419,6 @@ $kapacitor-font-sm: 13px;
 .kapacitor-alert-message, {
   border-radius: $kap-radius-lg $kap-radius-lg 0 0;
   border-bottom: 2px solid $kapacitor-divider-color;
-
-  .tab-group {
-    padding: 0;
-
-    > .btn.tab {
-      padding: 0 $kap-padding-md;
-      height: $kap-input-height;
-      line-height: ($kap-input-height - 4px);
-      font-size: $kapacitor-font-sm;
-      font-weight: 700;
-      background-color: $kapacitor-graphic-color;
-      border-color: $g5-pepper;
-      color: $g11-sidewalk;
-
-      &:hover {
-        background-color: $g4-onyx;
-        color: $g20-white;
-      }
-      &.active {
-        background-color: $g5-pepper;
-        color: $kapacitor-accent;
-      }
-    }
-  }
-}
-.rule-builder .form-control--green {
-  font-weight: 600 !important;
 }
 
 input.size-486 {width: 486px;}