From f1c8db1447b44388ce42259da11998f20336a75c Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Fri, 22 Mar 2019 17:08:18 +0000
Subject: [PATCH] UI: Amends blocking queries text and toggle component in
 settings (#5467)

---
 ui-v2/app/styles/components/app-view/layout.scss | 5 +++++
 ui-v2/app/styles/components/app-view/skin.scss   | 3 +++
 ui-v2/app/styles/core/typography.scss            | 1 +
 ui-v2/app/templates/settings.hbs                 | 6 ++++--
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui-v2/app/styles/components/app-view/layout.scss b/ui-v2/app/styles/components/app-view/layout.scss
index f518b5d38..4c1fa4403 100644
--- a/ui-v2/app/styles/components/app-view/layout.scss
+++ b/ui-v2/app/styles/components/app-view/layout.scss
@@ -30,6 +30,11 @@
   padding-bottom: 0.2em;
   margin-bottom: 1.1em;
 }
+%app-view fieldset h2,
+%app-view fieldset p {
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
 %app-view header .actions > *:not(:last-child) {
   margin-right: 12px;
 }
diff --git a/ui-v2/app/styles/components/app-view/skin.scss b/ui-v2/app/styles/components/app-view/skin.scss
index a117fa125..607135363 100644
--- a/ui-v2/app/styles/components/app-view/skin.scss
+++ b/ui-v2/app/styles/components/app-view/skin.scss
@@ -1,6 +1,9 @@
 %app-view h2 {
   border-bottom: $decor-border-200;
 }
+%app-view fieldset h2 {
+  border-bottom: none;
+}
 @media #{$--horizontal-selects} {
   %app-view header h1 {
     border-bottom: $decor-border-200;
diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss
index 298874a03..35792cc43 100644
--- a/ui-v2/app/styles/core/typography.scss
+++ b/ui-v2/app/styles/core/typography.scss
@@ -85,6 +85,7 @@ h2,
 }
 body,
 %action-group-action,
+fieldset h2,
 pre code,
 input,
 textarea,
diff --git a/ui-v2/app/templates/settings.hbs b/ui-v2/app/templates/settings.hbs
index f38dfe069..aaf956534 100644
--- a/ui-v2/app/templates/settings.hbs
+++ b/ui-v2/app/templates/settings.hbs
@@ -7,14 +7,16 @@
         {{/block-slot}}
         {{#block-slot 'content'}}
             <p>
-                These settings allow you to configure your browser for the Consul Web UI. Everything is saved to localstorage, and persists through visits and browser usage.
+                These settings are specific to the Consul web UI. They are saved to local storage and persist through browser usage and visits.
             </p>
             <form>
                 <fieldset>
+                    <h2>Blocking Queries</h2>
+                    <p>Automatically get updated catalog information without refreshing the page. Any changes made to services and nodes would be reflected in real time.</p>
                     <div class="type-toggle">
                       <label>
                           <input type="checkbox" name="client[blocking]" checked={{if item.client.blocking 'checked' }} onchange={{action 'change'}} />
-                          <span>Enable Catalog realtime updates (blocking queries)</span>
+                          <span>{{if item.client.blocking 'On' 'Off' }}</span>
                       </label>
                     </div>
                 </fieldset>