UI: Amends blocking queries text and toggle component in settings (#5467)

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;
 }

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;

ui-v2/app/styles/core/typography.scss

@@ -85,6 +85,7 @@ h2,
 }
 body,
 %action-group-action,
+fieldset h2,
 pre code,
 input,
 textarea,

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>