From 566c9974d2c6634db808ea4e933b6917949b169b Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 22 May 2017 19:17:28 -0700
Subject: [PATCH] Use "tablist" nav styles from theme, remove excess styles

---
 ui/src/data_explorer/components/VisHeader.js |  6 ++---
 ui/src/kapacitor/components/RuleMessage.js   |  9 ++++---
 ui/src/kapacitor/components/ValuesSection.js |  4 ++-
 ui/src/shared/components/Tabs.js             | 15 ++++++++++-
 ui/src/style/pages/kapacitor.scss            | 27 --------------------
 5 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/ui/src/data_explorer/components/VisHeader.js b/ui/src/data_explorer/components/VisHeader.js
index 30f80de1fc..54a5cd06fc 100644
--- a/ui/src/data_explorer/components/VisHeader.js
+++ b/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>
diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 78f6d3efc1..fd596a2c7e 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/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}
-                  className={classnames('btn tab', {
-                    active: alert.text === selectedAlert,
+                  key={alert.text.toLowerCase()}
+                  className={classnames({
+                    active: alert.text.toLowerCase() ===
+                      selectedAlert.toLowerCase(),
                   })}
                   onClick={() => this.handleChooseAlert(alert)}
                 >
diff --git a/ui/src/kapacitor/components/ValuesSection.js b/ui/src/kapacitor/components/ValuesSection.js
index 4664d42892..0fa97e60c3 100644
--- a/ui/src/kapacitor/components/ValuesSection.js
+++ b/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>
diff --git a/ui/src/shared/components/Tabs.js b/ui/src/shared/components/Tabs.js
index 6fb0907122..34b640650d 100644
--- a/ui/src/shared/components/Tabs.js
+++ b/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>
       )
     }
diff --git a/ui/src/style/pages/kapacitor.scss b/ui/src/style/pages/kapacitor.scss
index 79d963fb56..d0788453b7 100644
--- a/ui/src/style/pages/kapacitor.scss
+++ b/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;}