From ba0f8ffc000faebf6bde4f77091aa181e0efd65f Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 5 Oct 2017 17:57:37 -0700
Subject: [PATCH 01/10] Use h2 elements for titles in Sharing dropdown.

---
 src/ui/public/share/views/share.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ui/public/share/views/share.html b/src/ui/public/share/views/share.html
index fd325c0c08f54..72ea890010a26 100644
--- a/src/ui/public/share/views/share.html
+++ b/src/ui/public/share/views/share.html
@@ -2,12 +2,12 @@
   <!-- Left panel -->
   <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
     <!-- Title -->
-    <div
+    <h2
       data-test-subj="shareUiTitle"
       class="kuiLocalDropdownTitle"
     >
       Share saved {{share.objectType}}
-    </div>
+    </h2>
 
     <!-- Help text -->
     <div ng-if="share.urls.original" class="kuiLocalDropdownHelpText">
@@ -99,9 +99,9 @@
   <!-- Right panel -->
   <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--right">
     <!-- Title -->
-    <div class="kuiLocalDropdownTitle">
+    <h2 class="kuiLocalDropdownTitle">
       Share Snapshot
-    </div>
+    </h2>
 
     <!-- Help text -->
     <div class="kuiLocalDropdownHelpText">

From 35d540f3c53d4d08f06c20a17a560281ddea1059 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 5 Oct 2017 17:59:03 -0700
Subject: [PATCH 02/10] Override inherited typographic styles in
 kuiLocalDropdownTitle.

---
 ui_framework/dist/ui_framework.css                         | 5 +++++
 ui_framework/src/components/local_nav/_local_dropdown.scss | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 83a150fc08bf8..1d7821d65f8fe 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1911,7 +1911,12 @@ main {
 .kuiLocalDropdownPanel--right {
   margin-left: 30px; }
 
+/**
+ * 1. Override inherited styles.
+ */
 .kuiLocalDropdownTitle {
+  margin-top: 0;
+  /* 1 */
   margin-bottom: 12px;
   font-size: 18px;
   color: #2d2d2d; }
diff --git a/ui_framework/src/components/local_nav/_local_dropdown.scss b/ui_framework/src/components/local_nav/_local_dropdown.scss
index 78f2d6c754b8a..042fbe2e84a74 100644
--- a/ui_framework/src/components/local_nav/_local_dropdown.scss
+++ b/ui_framework/src/components/local_nav/_local_dropdown.scss
@@ -41,7 +41,11 @@
   margin-left: 30px;
 }
 
+/**
+ * 1. Override inherited styles.
+ */
 .kuiLocalDropdownTitle {
+  margin-top: 0; /* 1 */
   margin-bottom: 12px;
   font-size: 18px;
   color: $localNavTextColor;

From 208095c7cd73ca3f83a7ac5afa1d7b0e96d16270 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 5 Oct 2017 18:02:11 -0700
Subject: [PATCH 03/10] Use h2 elements for titles in Console dropdowns.

---
 src/core_plugins/console/public/src/directives/help.html     | 2 +-
 src/core_plugins/console/public/src/directives/history.html  | 2 +-
 src/core_plugins/console/public/src/directives/settings.html | 2 +-
 src/core_plugins/console/public/src/directives/welcome.html  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/core_plugins/console/public/src/directives/help.html b/src/core_plugins/console/public/src/directives/help.html
index 9030f8559b668..5fbb645b095e8 100644
--- a/src/core_plugins/console/public/src/directives/help.html
+++ b/src/core_plugins/console/public/src/directives/help.html
@@ -1,4 +1,4 @@
-<div class="kuiLocalDropdownTitle">Help</div>
+<h2 class="kuiLocalDropdownTitle">Help</h2>
 
 <tabset>
   <tab heading="Request format">
diff --git a/src/core_plugins/console/public/src/directives/history.html b/src/core_plugins/console/public/src/directives/history.html
index 120fc615d6a38..630ab2b264578 100644
--- a/src/core_plugins/console/public/src/directives/history.html
+++ b/src/core_plugins/console/public/src/directives/history.html
@@ -1,4 +1,4 @@
-<div class="kuiLocalDropdownTitle">History</div>
+<h2 class="kuiLocalDropdownTitle">History</h2>
 
 <div class="history-body">
   <ul
diff --git a/src/core_plugins/console/public/src/directives/settings.html b/src/core_plugins/console/public/src/directives/settings.html
index 0648abf07948f..be4c46cc7acb4 100644
--- a/src/core_plugins/console/public/src/directives/settings.html
+++ b/src/core_plugins/console/public/src/directives/settings.html
@@ -1,4 +1,4 @@
-<div class="kuiLocalDropdownTitle">Settings</div>
+<h2 class="kuiLocalDropdownTitle">Settings</h2>
 
 <form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
   <div class="form-group">
diff --git a/src/core_plugins/console/public/src/directives/welcome.html b/src/core_plugins/console/public/src/directives/welcome.html
index 906c52083bd0b..ed612655eddc2 100644
--- a/src/core_plugins/console/public/src/directives/welcome.html
+++ b/src/core_plugins/console/public/src/directives/welcome.html
@@ -1,4 +1,4 @@
-<div class="kuiLocalDropdownTitle">Welcome to Console</div>
+<h2 class="kuiLocalDropdownTitle">Welcome to Console</h2>
 
 <p><strong>Quick intro to the UI</strong></p>
 

From 91fdae9f69e43b6f2a34231d77464f3c623680f1 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 6 Oct 2017 11:36:18 -0700
Subject: [PATCH 04/10] Update kuiLocalDropdownHeader__label class to be
 applicable to legend elements.

---
 ui_framework/dist/ui_framework.css                         | 5 +++++
 ui_framework/src/components/local_nav/_local_dropdown.scss | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 1d7821d65f8fe..adde2d719e256 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1943,9 +1943,14 @@ main {
           justify-content: space-between;
   margin-bottom: 6px; }
 
+/**
+   * 1. Override inherited styles.
+   */
 .kuiLocalDropdownHeader__label {
   font-size: 14px;
   font-weight: 700;
+  margin-bottom: 0;
+  /* 1 */
   color: #2d2d2d; }
   .theme-dark .kuiLocalDropdownHeader__label {
     color: #cecece; }
diff --git a/ui_framework/src/components/local_nav/_local_dropdown.scss b/ui_framework/src/components/local_nav/_local_dropdown.scss
index 042fbe2e84a74..d1ccc3560c4d6 100644
--- a/ui_framework/src/components/local_nav/_local_dropdown.scss
+++ b/ui_framework/src/components/local_nav/_local_dropdown.scss
@@ -70,9 +70,13 @@
   margin-bottom: 6px;
 }
 
+  /**
+   * 1. Override inherited styles.
+   */
   .kuiLocalDropdownHeader__label {
     font-size: 14px;
     font-weight: 700;
+    margin-bottom: 0; /* 1 */
     color: $localNavTextColor;
 
     @include darkTheme {

From f1ed13fbedeb5d62437361f91915dd259a614498 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 6 Oct 2017 11:36:48 -0700
Subject: [PATCH 05/10] Update Console settings menu with aria labeling and UI
 Framework styles.

---
 .../public/src/directives/settings.html       | 112 +++++++++++-------
 1 file changed, 68 insertions(+), 44 deletions(-)

diff --git a/src/core_plugins/console/public/src/directives/settings.html b/src/core_plugins/console/public/src/directives/settings.html
index be4c46cc7acb4..949fb74f65b8b 100644
--- a/src/core_plugins/console/public/src/directives/settings.html
+++ b/src/core_plugins/console/public/src/directives/settings.html
@@ -1,67 +1,91 @@
 <h2 class="kuiLocalDropdownTitle">Settings</h2>
 
 <form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
-  <div class="form-group">
+  <fieldset
+    class="kuiVerticalRhythm"
+    role="group"
+  >
     <div class="kuiLocalDropdownHeader">
-      <div class="kuiLocalDropdownHeader__label">Font Size</div>
-    </div>
-
-    <div>
-      <input
-        input-focus
-        ng-model="settings.vals.fontSize"
-        name="fontSize"
-        type="number"
-        required
-        class="form-control"
-        data-test-subj="setting-font-size-input"
+      <legend
+        id="consoleFontSize"
+        class="kuiLocalDropdownHeader__label"
       >
+        Font Size
+      </legend>
     </div>
 
-    <div class="checkbox">
-      <label>
-        <input type="checkbox" ng-model="settings.vals.wrapMode"/> Wrap long lines
-      </label>
-    </div>
+    <input
+      input-focus
+      ng-model="settings.vals.fontSize"
+      name="fontSize"
+      type="number"
+      required
+      class="kuiLocalDropdownInput kuiVerticalRhythmSmall"
+      aria-describedby="consoleFontSize"
+      data-test-subj="setting-font-size-input"
+    >
 
-  </div>
+    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
+      <input
+        class="kuiCheckBox"
+        type="checkbox"
+        ng-model="settings.vals.wrapMode"
+        aria-describedby="consoleFontSize"
+      >
+      <span class="kuiCheckBoxLabel__text">
+        Wrap long lines
+      </span>
+    </label>
+  </fieldset>
 
-  <div class="form-group">
+  <fieldset
+    class="kuiVerticalRhythm"
+    role="group"
+  >
     <div class="kuiLocalDropdownHeader">
-      <div class="kuiLocalDropdownHeader__label">Autocomplete</div>
-    </div>
-
-    <div class="checkbox">
-      <label>
-        <input
-          name="autocompleteFields"
-          type="checkbox"
-          ng-model="settings.vals.autocomplete.fields">
-          Fields
-        </input>
-      </label>
+      <legend
+        id="consoleAutocomplete"
+        class="kuiLocalDropdownHeader__label"
+      >
+        Autocomplete
+      </legend>
     </div>
 
-    <div class="checkbox">
-      <label>
-        <input
-          name="autocompleteIndices"
-          type="checkbox"
-          ng-model="settings.vals.autocomplete.indices">
-          Indices &amp; Aliases
-        </input>
-      </label>
-    </div>
+    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
+      <input
+        class="kuiCheckBox"
+        name="autocompleteFields"
+        type="checkbox"
+        ng-model="settings.vals.autocomplete.fields"
+        aria-describedby="consoleAutocomplete"
+      >
+      <span class="kuiCheckBoxLabel__text">
+        Fields
+      </span>
+    </label>
 
-  </div>
+    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
+      <input
+        class="kuiCheckBox"
+        name="autocompleteIndices"
+        type="checkbox"
+        ng-model="settings.vals.autocomplete.indices"
+        aria-describedby="consoleAutocomplete"
+      >
+      <span class="kuiCheckBoxLabel__text">
+        Indices &amp; Aliases
+      </span>
+    </label>
+  </fieldset>
 
-  <div class="settings-footer">
+  <div class="kuiVerticalRhythm">
     <button
       ng-click="kbnTopNav.close()"
       class="kuiButton kuiButton--hollow"
     >
       Cancel
     </button>
+
     <button
       type="submit"
       ng-disabled="settingsForm.$invalid"

From e87182661dd03175329184fd6e36a0571cf61285 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 6 Oct 2017 12:38:52 -0700
Subject: [PATCH 06/10] Remove unused config-close styles.

---
 src/ui/public/styles/config.less              | 9 ---------
 src/ui/public/styles/dark-theme.less          | 4 ----
 src/ui/public/styles/dark-variables.less      | 1 -
 src/ui/public/styles/variables/for-theme.less | 2 --
 4 files changed, 16 deletions(-)

diff --git a/src/ui/public/styles/config.less b/src/ui/public/styles/config.less
index 72fcb2e05b142..1fd7401359e19 100644
--- a/src/ui/public/styles/config.less
+++ b/src/ui/public/styles/config.less
@@ -6,15 +6,6 @@
   border-bottom: 1px solid;
   border-bottom-color: @config-border;
 
-  .config-close {
-    width: 100%;
-    background-color: @config-close-bg;
-    border-radius: 0;
-    text-align: right;
-    padding: 10px;
-    line-height: 1em;
-  }
-
   .container-fluid {
     background-color: @config-bg;
     padding: 10px;
diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less
index 4d5d7ad5c8073..c4671c9863eef 100644
--- a/src/ui/public/styles/dark-theme.less
+++ b/src/ui/public/styles/dark-theme.less
@@ -466,10 +466,6 @@
   .config {
     border-bottom: 0 none transparent;
 
-    .config-close {
-      background-color: @config-close-bg;
-    }
-
     .container-fluid {
       background-color: @config-bg;
     }
diff --git a/src/ui/public/styles/dark-variables.less b/src/ui/public/styles/dark-variables.less
index 4bd6b74327b56..c846c7eff00a1 100644
--- a/src/ui/public/styles/dark-variables.less
+++ b/src/ui/public/styles/dark-variables.less
@@ -128,7 +128,6 @@
 
 @config-border:                               @gray4;
 @config-bg:                                   @body-bg;
-@config-close-bg:                             @gray3;
 
 @saved-object-finder-link-color:              @text-color;
 @saved-object-finder-icon-color:              darken(@saved-object-finder-link-color, 10%);
diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less
index 2a030f29464ac..8000bdd343ce6 100644
--- a/src/ui/public/styles/variables/for-theme.less
+++ b/src/ui/public/styles/variables/for-theme.less
@@ -212,8 +212,6 @@
 @config-border: darken(@body-bg, 10%);
 @config-bg: @kibanaGray6;
 
-@config-close-bg: @globalColorLightGray;
-
 
 // Hintbox =====================================================================
 @hintbox-link-color: @link-color;

From 9e957a287f567d923ea824a5ea5569e01f482181 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 6 Oct 2017 12:45:21 -0700
Subject: [PATCH 07/10] Update Dashboard local nav dropdowns with form labels
 and h2 elements.

---
 .../public/dashboard/top_nav/add_panel.html   |  5 +++-
 .../public/dashboard/top_nav/options.html     |  4 +++-
 .../kibana/public/dashboard/top_nav/save.html | 24 +++++++++++++++----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html b/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
index 370f6a10c9297..12df7a176a8aa 100644
--- a/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
+++ b/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
@@ -2,7 +2,9 @@
   ng-switch="mode"
   ng-init="mode = 'visualization'"
 >
-  <div class="kuiLocalDropdownTitle">Add Panels</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Add Panels
+  </h2>
 
   <div class="kuiTabs">
     <button
@@ -13,6 +15,7 @@
     >
       Visualization
     </button>
+
     <button
       ng-class="{ 'kuiTab-isSelected': mode == 'search' }"
       class="kuiTab"
diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/options.html b/src/core_plugins/kibana/public/dashboard/top_nav/options.html
index a549d182b6488..d57406092b91c 100644
--- a/src/core_plugins/kibana/public/dashboard/top_nav/options.html
+++ b/src/core_plugins/kibana/public/dashboard/top_nav/options.html
@@ -1,5 +1,7 @@
 <form role="form">
-  <div class="kuiLocalDropdownTitle">Options</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Options
+  </h2>
 
   <div class="input-group">
     <label>
diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/save.html b/src/core_plugins/kibana/public/dashboard/top_nav/save.html
index 7f9c2cfcdfb9e..3ca2efde10795 100644
--- a/src/core_plugins/kibana/public/dashboard/top_nav/save.html
+++ b/src/core_plugins/kibana/public/dashboard/top_nav/save.html
@@ -2,14 +2,22 @@
   role="form"
   ng-submit="opts.save()"
 >
-  <div class="kuiLocalDropdownTitle">Save {{opts.displayName}}</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Save {{opts.displayName}}
+  </h2>
+
   <div class="kuiLocalDropdownSection">
     <div class="kuiLocalDropdownHeader">
-      <div class="kuiLocalDropdownHeader__label">
+      <label
+        class="kuiLocalDropdownHeader__label"
+        for="saveDashboardTitle"
+      >
         Title
-      </div>
+      </label>
     </div>
+
     <input
+      id="saveDashboardTitle"
       class="kuiLocalDropdownInput"
       data-test-subj="dashboardTitle"
       type="text"
@@ -18,13 +26,19 @@
       input-focus="select"
     >
   </div>
+
   <div class="kuiLocalDropdownSection">
     <div class="kuiLocalDropdownHeader">
-      <div class="kuiLocalDropdownHeader__label">
+      <label
+        class="kuiLocalDropdownHeader__label"
+        for="saveDashboardDescription"
+      >
         Description
-      </div>
+      </label>
     </div>
+
     <input
+      id="saveDashboardDescription"
       class="kuiLocalDropdownInput"
       data-test-subj="dashboardDescription"
       type="text"

From 7447ded9b75e7681b284088e686d4ba81e989c06 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 6 Oct 2017 12:50:40 -0700
Subject: [PATCH 08/10] Add support for dark theme to kuiCheckBox.

---
 ui_framework/dist/ui_framework.css                |  5 +++++
 .../doc_site/src/views/form/form_example.js       | 15 ++++++++++-----
 ui_framework/src/components/form/_check_box.scss  |  9 +++++++++
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index adde2d719e256..7a289a5601450 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1059,6 +1059,11 @@ main {
   .kuiCheckBox:disabled {
     opacity: 0.3;
     cursor: not-allowed; }
+  .theme-dark .kuiCheckBox {
+    background-color: #444444;
+    border-color: #444444; }
+    .theme-dark .kuiCheckBox:checked {
+      background-color: #0079a5; }
 
 .kuiCheckBoxLabel {
   display: -webkit-box;
diff --git a/ui_framework/doc_site/src/views/form/form_example.js b/ui_framework/doc_site/src/views/form/form_example.js
index 71ba5fd95ead5..837738d955c1b 100644
--- a/ui_framework/doc_site/src/views/form/form_example.js
+++ b/ui_framework/doc_site/src/views/form/form_example.js
@@ -46,7 +46,7 @@ export default props => (
 
       <GuideDemo
         html={textInputHtml}
-        isDarkTheme={true}
+        isDarkTheme
       />
     </GuideSection>
 
@@ -70,7 +70,7 @@ export default props => (
 
       <GuideDemo
         html={assistedInputHtml}
-        isDarkTheme={true}
+        isDarkTheme
       />
     </GuideSection>
 
@@ -87,7 +87,7 @@ export default props => (
 
       <GuideDemo
         html={searchInputHtml}
-        isDarkTheme={true}
+        isDarkTheme
       />
     </GuideSection>
 
@@ -120,7 +120,7 @@ export default props => (
 
       <GuideDemo
         html={textAreaHtml}
-        isDarkTheme={true}
+        isDarkTheme
       />
     </GuideSection>
 
@@ -146,6 +146,11 @@ export default props => (
       <GuideDemo
         html={checkBoxHtml}
       />
+
+      <GuideDemo
+        html={checkBoxHtml}
+        isDarkTheme
+      />
     </GuideSection>
 
     <GuideSection
@@ -161,7 +166,7 @@ export default props => (
 
       <GuideDemo
         html={selectHtml}
-        isDarkTheme={true}
+        isDarkTheme
       />
     </GuideSection>
   </GuidePage>
diff --git a/ui_framework/src/components/form/_check_box.scss b/ui_framework/src/components/form/_check_box.scss
index 531d9820fafd2..47ef70e36e150 100644
--- a/ui_framework/src/components/form/_check_box.scss
+++ b/ui_framework/src/components/form/_check_box.scss
@@ -52,6 +52,15 @@ $checkboxDisabledOpacity: 0.3;
     opacity: $checkboxDisabledOpacity;
     cursor: not-allowed;
   }
+
+  @include darkTheme {
+    background-color: $globalInputBackgroundColor--darkTheme;
+    border-color: $globalInputBorderColor--darkTheme;
+
+    &:checked {
+      background-color: $checkboxCheckedBackgroundColor;
+    }
+  }
 }
 
 .kuiCheckBoxLabel {

From 80cc6e9196759649fa4fe29d53ec90575782f293 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 6 Oct 2017 13:13:36 -0700
Subject: [PATCH 09/10] Update Dashboard local nav dropdowns and
 saved-object-save-as-check-box directive with kuiCheckBoxLabel styles.

---
 .../public/dashboard/top_nav/options.html     | 10 ++++--
 .../kibana/public/dashboard/top_nav/save.html | 22 ++++++++----
 .../public/discover/partials/save_search.html |  9 +++--
 .../public/visualize/editor/panels/save.html  |  7 ++--
 .../timelion/public/partials/save_sheet.html  | 36 +++++++++++++------
 .../ui/saved_object_save_as_checkbox.html     | 12 +++++--
 .../ui/saved_object_save_as_checkbox.js       |  1 +
 7 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/options.html b/src/core_plugins/kibana/public/dashboard/top_nav/options.html
index d57406092b91c..be98d0c802416 100644
--- a/src/core_plugins/kibana/public/dashboard/top_nav/options.html
+++ b/src/core_plugins/kibana/public/dashboard/top_nav/options.html
@@ -3,15 +3,19 @@ <h2 class="kuiLocalDropdownTitle">
     Options
   </h2>
 
-  <div class="input-group">
-    <label>
+  <div class="kuiLocalDropdownSection">
+    <label class="kuiCheckBoxLabel">
       <input
+        class="kuiCheckBox"
         type="checkbox"
         ng-model="model.darkTheme"
         ng-checked="model.darkTheme"
         data-test-subj="dashboardDarkThemeCheckbox"
       >
-      Use dark theme
+
+      <span class="kuiCheckBoxLabel__text">
+        Use dark theme
+      </span>
     </label>
   </div>
 </form>
diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/save.html b/src/core_plugins/kibana/public/dashboard/top_nav/save.html
index 3ca2efde10795..8fa203a401965 100644
--- a/src/core_plugins/kibana/public/dashboard/top_nav/save.html
+++ b/src/core_plugins/kibana/public/dashboard/top_nav/save.html
@@ -47,26 +47,36 @@ <h2 class="kuiLocalDropdownTitle">
     >
   </div>
 
-  <saved-object-save-as-check-box saved-object="opts.dashboard"></saved-object-save-as-check-box>
+  <saved-object-save-as-check-box
+    class="kuiVerticalRhythmSmall"
+    saved-object="opts.dashboard"
+  ></saved-object-save-as-check-box>
 
-  <div class="form-group">
-    <label>
+  <div class="kuiVerticalRhythm">
+    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
       <input
+        class="kuiCheckBox"
         type="checkbox"
         ng-model="model.timeRestore"
         ng-checked="model.timeRestore"
         data-test-subj="storeTimeWithDashboard"
       >
-      Store time with {{opts.displayName}}
-      <kbn-info placement="bottom" info="Change the time filter to the currently selected time each time this dashboard is loaded"></kbn-info>
+
+      <span class="kuiCheckBoxLabel__text">
+        Store time with {{opts.displayName}}
+      </span>
     </label>
+
+    <div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
+      This changes the time filter to the currently selected time each time this dashboard is loaded.
+    </div>
   </div>
 
   <button
     data-test-subj="confirmSaveDashboardButton"
     type="submit"
     ng-disabled="!model.title"
-    class="kuiButton kuiButton--primary"
+    class="kuiButton kuiButton--primary kuiVerticalRhythm"
     aria-label="Save dashboard"
   >
     Save
diff --git a/src/core_plugins/kibana/public/discover/partials/save_search.html b/src/core_plugins/kibana/public/discover/partials/save_search.html
index 478a78e97a4c1..ebf9532df9fa6 100644
--- a/src/core_plugins/kibana/public/discover/partials/save_search.html
+++ b/src/core_plugins/kibana/public/discover/partials/save_search.html
@@ -3,6 +3,7 @@
   ng-submit="opts.saveDataSource()"
 >
   <div class="kuiLocalDropdownTitle">Save Search</div>
+
   <input
     class="kuiLocalDropdownInput"
     id="SaveSearch"
@@ -11,12 +12,16 @@
     placeholder="Name this search..."
   >
 
-  <saved-object-save-as-check-box saved-object="opts.savedSearch"></saved-object-save-as-check-box>
+  <saved-object-save-as-check-box
+    class="kuiVerticalRhythmSmall"
+    saved-object="opts.savedSearch"
+  ></saved-object-save-as-check-box>
+
   <button
     ng-disabled="!opts.savedSearch.title"
     data-test-subj="discoverSaveSearchButton"
     type="submit"
-    class="kuiButton kuiButton--primary"
+    class="kuiButton kuiButton--primary kuiVerticalRhythmSmall"
   >
     Save
   </button>
diff --git a/src/core_plugins/kibana/public/visualize/editor/panels/save.html b/src/core_plugins/kibana/public/visualize/editor/panels/save.html
index 48dc4102b18b3..c5edade52479c 100644
--- a/src/core_plugins/kibana/public/visualize/editor/panels/save.html
+++ b/src/core_plugins/kibana/public/visualize/editor/panels/save.html
@@ -13,12 +13,15 @@
     required
   >
 
-  <saved-object-save-as-check-box saved-object="opts.savedVis"></saved-object-save-as-check-box>
+  <saved-object-save-as-check-box
+    class="kuiVerticalRhythmSmall"
+    saved-object="opts.savedVis"
+  ></saved-object-save-as-check-box>
 
   <button
     data-test-subj="saveVisualizationButton"
     type="submit"
-    class="kuiButton kuiButton--primary"
+    class="kuiButton kuiButton--primary kuiVerticalRhythmSmall"
   >
     {{ opts.isAddToDashMode() ? 'Save and Add to Dashboard' : 'Save'}}
   </button>
diff --git a/src/core_plugins/timelion/public/partials/save_sheet.html b/src/core_plugins/timelion/public/partials/save_sheet.html
index c96e3ef0270f5..57955c8dea233 100644
--- a/src/core_plugins/timelion/public/partials/save_sheet.html
+++ b/src/core_plugins/timelion/public/partials/save_sheet.html
@@ -10,17 +10,33 @@ <h4 class="list-group-item-heading">Save entire Timelion sheet</h4>
 
   <div class="list-group-item" ng-show="section == 'sheet'">
     <form role="form" class="container-fluid" ng-submit="opts.saveSheet()">
-      <div class="form-group">
-        <label for="savedSheet" class="control-label">Save sheet as</label>
-        <input id="savedSheet" ng-model="opts.savedSheet.title" input-focus="select" class="form-control" placeholder="Name this sheet...">
-      </div>
+      <label
+        for="savedSheet"
+        class="kuiLabel kuiVerticalRhythmSmall"
+      >
+        Save sheet as
+      </label>
 
-      <saved-object-save-as-check-box saved-object="opts.savedSheet"></saved-object-save-as-check-box>
-      <div class="form-group">
-        <button ng-disabled="!opts.savedSheet.title" type="submit" class="kuiButton kuiButton--primary">
-          Save
-        </button>
-      </div>
+      <input
+        id="savedSheet"
+        ng-model="opts.savedSheet.title"
+        input-focus="select"
+        class="form-control kuiVerticalRhythmSmall"
+        placeholder="Name this sheet..."
+      >
+
+      <saved-object-save-as-check-box
+        class="kuiVerticalRhythmSmall"
+        saved-object="opts.savedSheet"
+      ></saved-object-save-as-check-box>
+
+      <button
+        ng-disabled="!opts.savedSheet.title"
+        type="submit"
+        class="kuiButton kuiButton--primary kuiVerticalRhythmSmall"
+      >
+        Save
+      </button>
     </form>
   </div>
 
diff --git a/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html b/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
index 63e03489ad642..7a60990d20ed6 100644
--- a/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
+++ b/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
@@ -1,14 +1,20 @@
 <div ng-hide="!savedObject.id || savedObject.isSaving">
-  <div ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave" class="kuiLocalDropdownWarning">
+  <div ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave" class="kuiLocalDropdownWarning kuiVerticalRhythmSmall">
     In previous versions of Kibana, changing the name of a {{savedObject.getDisplayName()}} would make a copy with the new name. Use the 'Save as a new {{savedObject.getDisplayName()}}' checkbox to do this now.
   </div>
-  <label>
+
+  <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
     <input
+      class="kuiCheckBox"
       type="checkbox"
       data-test-subj="saveAsNewCheckbox"
       ng-model="savedObject.copyOnSave"
       ng-checked="savedObject.copyOnSave"
     >
-    Save as a new {{savedObject.getDisplayName()}}
+
+    <span class="kuiCheckBoxLabel__text">
+      Save as a new {{savedObject.getDisplayName()}}
+    </span>
   </label>
 </div>
+
diff --git a/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.js b/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.js
index ee7fc1ee84960..71e9561042d7d 100644
--- a/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.js
+++ b/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.js
@@ -7,6 +7,7 @@ uiModules
     return {
       restrict: 'E',
       template: saveObjectSaveAsCheckboxTemplate,
+      replace: true,
       scope: {
         savedObject: '='
       }

From 3aae1e1ace23e1276b0338793f280e7e0759f680 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 6 Oct 2017 13:18:17 -0700
Subject: [PATCH 10/10] Update Discover local nav with h2 elements.

---
 .../kibana/public/discover/partials/load_search.html         | 5 ++++-
 .../kibana/public/discover/partials/save_search.html         | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/core_plugins/kibana/public/discover/partials/load_search.html b/src/core_plugins/kibana/public/discover/partials/load_search.html
index df6839ebd609a..7076fd686686f 100644
--- a/src/core_plugins/kibana/public/discover/partials/load_search.html
+++ b/src/core_plugins/kibana/public/discover/partials/load_search.html
@@ -1,4 +1,7 @@
 <form role="form" ng-submit="fetch()">
-  <div class="kuiLocalDropdownTitle">Open Search</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Open Search
+  </h2>
+
   <saved-object-finder type="searches"></saved-object-finder>
 </form>
diff --git a/src/core_plugins/kibana/public/discover/partials/save_search.html b/src/core_plugins/kibana/public/discover/partials/save_search.html
index ebf9532df9fa6..8a628433c2a40 100644
--- a/src/core_plugins/kibana/public/discover/partials/save_search.html
+++ b/src/core_plugins/kibana/public/discover/partials/save_search.html
@@ -2,7 +2,9 @@
   role="form"
   ng-submit="opts.saveDataSource()"
 >
-  <div class="kuiLocalDropdownTitle">Save Search</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Save Search
+  </h2>
 
   <input
     class="kuiLocalDropdownInput"