From d442f494de386b617a7590eb622a539446634cad Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 4 Oct 2017 15:04:57 -0700
Subject: [PATCH] Add progress "dots" to rule builder sub-headers

---
 ui/src/kapacitor/components/ValuesSection.js |  4 +--
 ui/src/style/pages/kapacitor.scss            | 28 +++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/ui/src/kapacitor/components/ValuesSection.js b/ui/src/kapacitor/components/ValuesSection.js
index edae3aa4f0..c1578729e2 100644
--- a/ui/src/kapacitor/components/ValuesSection.js
+++ b/ui/src/kapacitor/components/ValuesSection.js
@@ -49,7 +49,7 @@ const ValuesSection = ({
           )}
         </TabList>
         <div>
-          <h3 className="rule-builder--sub-header">Time Series</h3>
+          <h3 className="rule-section--sub-heading">Time Series</h3>
           <DataSection
             query={query}
             timeRange={timeRange}
@@ -60,7 +60,7 @@ const ValuesSection = ({
             isDeadman={isDeadman(rule)}
           />
         </div>
-        <h3 className="rule-builder--sub-header">Rule Conditions</h3>
+        <h3 className="rule-section--sub-heading">Rule Conditions</h3>
         <TabPanels>
           <TabPanel>
             <Threshold
diff --git a/ui/src/style/pages/kapacitor.scss b/ui/src/style/pages/kapacitor.scss
index 9498e45c00..2dd325913b 100644
--- a/ui/src/style/pages/kapacitor.scss
+++ b/ui/src/style/pages/kapacitor.scss
@@ -82,6 +82,27 @@ $rule-builder--radius-lg: 5px;
     left: ($rule-builder--dot / 2);
   }
 }
+.rule-section--sub-heading {
+  margin: 0;
+  padding: $rule-builder--section-gap 0 $rule-builder--padding-md 0;
+  font-size: $page-header-size;
+  font-weight: $page-header-weight;
+  color: $g12-forge;
+  position: relative;
+
+  // Dot
+  &:after {
+    content: '';
+    position: absolute;
+    width: $rule-builder--dot;
+    height: $rule-builder--dot;
+    background-color: $rule-builder--accent-color;
+    border: 6px solid $rule-builder--accent-line-color;
+    border-radius: 50%;
+    top: ($rule-builder--section-gap + 3px);
+    left: -$rule-builder--left-gutter;
+  }
+}
 // Override appearance of lines and dots for first section
 .rule-section:first-of-type {
   .rule-section--heading {
@@ -213,13 +234,6 @@ $rule-builder--radius-lg: 5px;
   Sectiom 2 - Rule Conditions
   -----------------------------------------------------------------------------
 */
-.rule-builder--sub-header {
-  margin: 0;
-  padding: 30px 0 13px 0;
-  font-size: 19px;
-  font-weight: 400 !important;
-  color: #a4a8b6;
-}
 .rule-builder--metric {
   height: 30px;
   line-height: 30px;