From 8eec62619207ba671b2fb69b823ec678c5015982 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Wed, 20 Dec 2017 13:48:53 -0500
Subject: [PATCH 1/4] First pass at applying EUI styles to the index pattern
 creation page

---
 .../create_index_pattern_wizard.html          | 214 +++++-------
 .../matching_indices_list.html                | 140 +++++---
 .../step_index_pattern.html                   | 317 ++++++++---------
 .../step_index_pattern.less                   |   8 +-
 .../step_time_field/step_time_field.html      | 329 ++++++++++--------
 5 files changed, 523 insertions(+), 485 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
index dc4d1fe66df41..fb71d3b98d779 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
@@ -6,105 +6,84 @@
       class="kuiViewContent"
     >
       <!-- Intro -->
-      <div class="kuiVerticalRhythm">
-        <div class="kuiBar">
-          <h1 class="kuiTitle">
-            Create index pattern
-          </h1>
-
-          <div class="kuiBarSection">
-            <!-- Include system indices -->
-            <label
-              ng-if="controller.isSystemIndicesCheckBoxVisible()"
-              class="kuiCheckBoxLabel"
-              for="indexPatternCreationIncludeSystemIndices"
+      <h1 class="euiTitle">
+        Create index pattern
+      </h1>
+      <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive">
+        <p class="euiFlexItem euiFlexItem--flexGrowZero euiTextColor euiTextColor--subdued">
+          Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
+        </p>
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <label
+            ng-if="controller.isSystemIndicesCheckBoxVisible()"
+            class="kuiCheckBoxLabel "
+            for="indexPatternCreationIncludeSystemIndices"
+          >
+            <input
+              type="checkbox"
+              id="indexPatternCreationIncludeSystemIndices"
+              class="kuiCheckBox"
+              ng-model="controller.doesIncludeSystemIndices"
+              ng-change="controller.onIncludeSystemIndicesChange()"
             >
-              <input
-                type="checkbox"
-                id="indexPatternCreationIncludeSystemIndices"
-                class="kuiCheckBox"
-                ng-model="controller.doesIncludeSystemIndices"
-                ng-change="controller.onIncludeSystemIndicesChange()"
-              >
 
-              <span class="kuiCheckBoxLabel__text">
-                Include system indices
-              </span>
-            </label>
-          </div>
+            <span class="kuiCheckBoxLabel__text">
+              Include system indices
+            </span>
+          </label>
         </div>
-
-        <p class="kuiText kuiSubduedText">
-          Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
-        </p>
       </div>
 
-      <!-- User has no data -->
-      <div
-        class="kuiPanel kuiVerticalRhythm"
-        ng-if="!controller.hasIndices()"
-      >
-        <div class="kuiPanelBody">
-          <!-- Fetching state -->
-          <div
-            ng-if="controller.isFetchingExistingIndices"
-            class="kuiPanel kuiPanel--prompt kuiPanel--noBorder kuiVerticalRhythm"
-          >
-            <div class="kuiPanelBody">
-              <h2 class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
-                Checking for Elasticsearch data
-              </h2>
+      <div class="euiSpacer euiSpacer--m"></div>
 
-              <div class="kuiVerticalRhythm">
-                <p class="kuiText kuiSubduedText kuiVerticalRhythmSmall">
-                  <span class="kuiStatusText">
-                    <span
-                      aria-hidden="true"
-                      class="kuiStatusText__icon kuiIcon fa-spinner fa-spin"
-                    ></span>
-                    <span>
-                      Reticulating splines...
-                    </span>
-                  </span>
+      <div class="euiPanel euiPanel--paddingLarge">
+        <!-- User has no data -->
+        <div ng-if="!controller.hasIndices()">
+          <div class="euiPageContentBody">
+            <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--alignItemsCenter euiFlexGroup--responsive" style="height:100%">
+              <!-- Fetching state -->
+              <div
+                ng-if="controller.isFetchingExistingIndices"
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <h2 class="euiTitle euiTextColor euiTextColor--subdued">
+                  Checking for Elasticsearch data
+                </h2>
+                <div class="euiSpacer euiSpacer--s"></div>
+                <p class="euiTextColor euiTextColor--subdued">
+                  Reticulating splines...
                 </p>
               </div>
-            </div>
-          </div>
 
-          <!-- Empty state -->
-          <div ng-if="!controller.isFetchingExistingIndices">
-            <div class="kuiPanel kuiPanel--prompt kuiPanel--noBorder kuiVerticalRhythm">
-              <div class="kuiPanelBody">
-                <h1 class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
+              <!-- Empty state -->
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+                ng-if="!controller.isFetchingExistingIndices"
+              >
+                <h1 class="euiTitle euiTextColor euiTextColor--subdued">
                   Couldn't find any Elasticsearch data
                 </h1>
-
-                <div class="kuiVerticalRhythm">
-                  <p class="kuiText kuiSubduedText kuiVerticalRhythmSmall">
-                    <span>
-                      You'll need to index some data into Elasticsearch before you can create an index pattern.
-                    </span>
-                    <a
-                      class="kuiLink"
-                      aria-label="Learn how to index data into Elasticsearch"
-                      documentation-href="indexPatterns.loadingData"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Learn how.
-                    </a>
-                  </p>
-                </div>
-
+                <div class="euiSpacer euiSpacer--s"></div>
+                <p class="euiTextColor euiTextColor--subdued">
+                  <span>
+                    You'll need to index some data into Elasticsearch before you can create an index pattern.
+                  </span>
+                  <a
+                    class="kuiLink"
+                    aria-label="Learn how to index data into Elasticsearch"
+                    documentation-href="indexPatterns.loadingData"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Learn how.
+                  </a>
+                </p>
+                <div class="euiSpacer euiSpacer--s"></div>
                 <button
-                  class="kuiButton kuiButton--secondary kuiButton--iconText kuiVerticalRhythm"
+                  class="euiButton euiButton--secondary"
                   ng-click="controller.fetchExistingIndices()"
                 >
-                  <span class="kuiButton__inner">
-                    <span
-                      aria-hidden="true"
-                      class="kuiButton__icon kuiIcon fa-refresh"
-                    ></span>
+                  <span class="euiButton__content">
                     <span>
                       Check for new data
                     </span>
@@ -114,41 +93,40 @@ <h1 class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- User has data -->
-      <div
-        class="kuiVerticalRhythm"
-        ng-if="controller.hasIndices()"
-        ng-switch="controller.wizardStep"
-      >
-        <!-- Specify index pattern -->
-        <step-index-pattern
-          ng-switch-when="indexPattern"
-          fetch-existing-indices="controller.fetchExistingIndices()"
-          is-fetching-existing-indices="controller.isFetchingExistingIndices"
-          fetch-matching-indices="controller.fetchMatchingIndices()"
-          is-fetching-matching-indices="controller.isFetchingMatchingIndices"
-          has-indices="controller.hasIndices()"
-          index-pattern-name="controller.formValues.name"
-          all-indices="controller.allIndices"
-          partial-matching-indices="controller.partialMatchingIndices"
-          matching-indices="controller.matchingIndices"
-          go-to-next-step="controller.goToTimeFieldStep()"
-        ></step-index-pattern>
+        <!-- User has data -->
+        <div
+          ng-if="controller.hasIndices()"
+          ng-switch="controller.wizardStep"
+        >
+          <!-- Specify index pattern -->
+          <step-index-pattern
+            ng-switch-when="indexPattern"
+            fetch-existing-indices="controller.fetchExistingIndices()"
+            is-fetching-existing-indices="controller.isFetchingExistingIndices"
+            fetch-matching-indices="controller.fetchMatchingIndices()"
+            is-fetching-matching-indices="controller.isFetchingMatchingIndices"
+            has-indices="controller.hasIndices()"
+            index-pattern-name="controller.formValues.name"
+            all-indices="controller.allIndices"
+            partial-matching-indices="controller.partialMatchingIndices"
+            matching-indices="controller.matchingIndices"
+            go-to-next-step="controller.goToTimeFieldStep()"
+          ></step-index-pattern>
 
-        <!-- Specify optional time field -->
-        <step-time-field
-          ng-switch-when="timeField"
-          index-pattern-id="controller.formValues.id"
-          index-pattern-name="controller.formValues.name"
-          time-field-options="controller.timeFieldOptions"
-          selected-time-field-option="controller.formValues.timeFieldOption"
-          fetch-time-field-options="controller.fetchTimeFieldOptions()"
-          is-fetching-time-field-options="controller.isFetchingTimeFieldOptions"
-          go-to-previous-step="controller.goToIndexPatternStep()"
-          create-index-pattern="controller.createIndexPattern()"
-        ></step-time-field>
+          <!-- Specify optional time field -->
+          <step-time-field
+            ng-switch-when="timeField"
+            index-pattern-id="controller.formValues.id"
+            index-pattern-name="controller.formValues.name"
+            time-field-options="controller.timeFieldOptions"
+            selected-time-field-option="controller.formValues.timeFieldOption"
+            fetch-time-field-options="controller.fetchTimeFieldOptions()"
+            is-fetching-time-field-options="controller.isFetchingTimeFieldOptions"
+            go-to-previous-step="controller.goToIndexPatternStep()"
+            create-index-pattern="controller.createIndexPattern()"
+          ></step-time-field>
+        </div>
       </div>
     </div>
   </kbn-management-indices>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/matching_indices_list/matching_indices_list.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/matching_indices_list/matching_indices_list.html
index f7946f2518bde..4f54312e919b3 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/matching_indices_list/matching_indices_list.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/matching_indices_list/matching_indices_list.html
@@ -1,68 +1,112 @@
 <div>
   <div
     ng-if="matchingIndicesList.isLoading"
-    class="kuiPanel kuiPanel--prompt kuiVerticalRhythm matchingIndicesListLoadingPrompt"
+    class="euiPanel euiPanel--paddingMedium"
   >
-    <div class="kuiPanelBody">
-      <p class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
-        Looking for matching indices
-      </p>
-
-      <div class="kuiVerticalRhythm">
-        <p class="kuiText kuiSubduedText kuiVerticalRhythmSmall">
-          Just a sec...
-        </p>
-      </div>
-    </div>
+    <h2 class="euiTitle euiTextColor euiTextColor--subdued" style="text-align:center">
+      Looking for matching indices
+    </h2>
+    <div class="euiSpacer euiSpacer--s"></div>
+    <p class="euiTextColor euiTextColor--subdued" style="text-align:center">
+      Just a sec...
+    </p>
   </div>
 
+  <div class="euiSpacer euiSpacer--s"></div>
+
   <div
     ng-if="!matchingIndicesList.isLoading"
-    class="kuiControlledTable"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
   >
-    <!-- ToolBar -->
-    <div class="kuiToolBar">
-      <div class="kuiToolBarSection">
-        <p class="kuiText">
-          <ng-transclude></ng-transclude>
-        </p>
-      </div>
-
-      <div class="kuiToolBarSection">
-        <!-- Pagination -->
-        <tool-bar-pager-text
-          start-item="matchingIndicesList.pager.startItem"
-          end-item="matchingIndicesList.pager.endItem"
-          total-items="matchingIndicesList.pager.totalItems"
-          ng-if="matchingIndicesList.hasMultiplePages()"
-        ></tool-bar-pager-text>
-
-        <tool-bar-pager-buttons
-          has-previous-page="matchingIndicesList.pager.hasPreviousPage"
-          has-next-page="matchingIndicesList.pager.hasNextPage"
-          on-page-next="matchingIndicesList.onPageNext"
-          on-page-previous="matchingIndicesList.onPagePrevious"
-          ng-if="matchingIndicesList.hasMultiplePages()"
-        ></tool-bar-pager-buttons>
-
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      <p>
+        <ng-transclude></ng-transclude>
         <span
           ng-if="matchingIndicesList.hasMultiplePages()"
-          class="kuiSubduedText"
+          class="euiTextColor euiTextColor--subdued euiText euiText--small"
         >
           (representative sample only)
         </span>
+      </p>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+      ng-if="matchingIndicesList.hasMultiplePages()"
+    >
+      <div class="euiPagination">
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+          type="button"
+          ng-if="matchingIndicesList.pager.hasPreviousPage"
+          ng-click="matchingIndicesList.onPagePrevious()"
+        >
+          <span class="euiButtonEmpty__content">
+            <svg class="euiIcon euiButtonEmpty__icon euiIcon--medium" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+              <defs>
+                <path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"></path>
+              </defs>
+              <use fill-rule="nonzero" transform="rotate(90 8 8)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow_left-a">
+              </use>
+            </svg>
+            <span>Previous</span>
+          </span>
+        </button>
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
+          ng-class="{
+            'euiPaginationButton-isActive': true || page == matchingIndicesList.pager.currentPage
+          }"
+          type="button"
+          ng-repeatt="page in matchingIndicesList.getPaginationList()"
+          ng-clickk="matchingIndicesList.goToPage(page)"
+        >
+          <span class="euiButtonEmpty__content">
+            <span>{{matchingIndicesList.pager.currentPage}}</span>
+          </span>
+        </button>
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--iconRight euiPaginationButton"
+          type="button"
+          ng-if="matchingIndicesList.pager.hasNextPage"
+          ng-click="matchingIndicesList.onPageNext()"
+        >
+          <span class="euiButtonEmpty__content">
+            <svg class="euiIcon euiButtonEmpty__icon euiIcon--medium" aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"
+            width="16" height="16" viewBox="0 0 16 16">
+              <defs>
+                <path id="arrow_right-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                />
+              </defs>
+              <use fill-rule="nonzero" transform="matrix(0 1 1 0 0 0)" href="#arrow_right-a"
+              />
+            </svg>
+            <span>Next</span>
+          </span>
+        </button>
       </div>
     </div>
+  </div>
+
+  <div class="euiSpacer euiSpacer--m"></div>
 
-    <!-- Indices list -->
-    <ul class="kuiMenu kuiMenu--contained">
-      <li
-        class="kuiMenuItem"
+  <table
+    ng-if="!matchingIndicesList.isLoading"
+    class="euiTable"
+  >
+    <tbody>
+      <!-- Indices list -->
+      <tr
+        class="euiTableRow"
         ng-repeat="index in matchingIndicesList.pageOfIndices"
       >
-        <p class="kuiText" ng-bind-html="index.name | highlight:matchingIndicesList.formattedPattern">
-        </p>
-      </li>
-    </ul>
-  </div>
+        <td class="euiTableRowCell">
+          <span
+            class="euiTableCellContent"
+            ng-bind-html="index.name | highlight:matchingIndicesList.formattedPattern"
+          ></span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
index 0fbe58a816515..337771d2a39db 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
@@ -1,169 +1,170 @@
-<div class="kuiPanel">
-  <div class="kuiPanelHeader">
-    <div class="kuiPanelHeaderSection">
-      <h2 class="kuiPanelHeader__title">
-        Step 1 of 2: Define index pattern
-      </h2>
-    </div>
-  </div>
-
-  <div class="kuiPanelBody">
-    <div>
-      <form
-        name="stepIndexPattern.indexPatternNameForm"
-        role="form"
-        ng-submit="stepIndexPattern.goToNextStep()"
-        class="kuiVerticalRhythm"
-      >
-        <div class="createIndexPatternInputContainer kuiVerticalRhythm">
-          <!-- Index pattern input -->
-          <div>
-            <label
-              for="indexPatternNameField"
-              class="kuiLabel kuiVerticalRhythmSmall"
-            >
-              Index pattern
-            </label>
-
-            <div class="kuiVerticalRhythmSmall kuiVerticalRhythm">
-              <input
-                id="indexPatternNameField"
-                class="kuiTextInput kuiTextInput--large createIndexPatternInputField"
-                data-test-subj="createIndexPatternNameInput"
-                ng-model="stepIndexPattern.indexPatternName"
-                placeholder="index-name-*"
-                validate-index-pattern
-                validate-index-pattern-allow-wildcard
-                append-wildcard
-                name="name"
-                required
-                type="text"
-                aria-describedby="indexPatternNameFieldHelp1 indexPatternNameFieldHelp2"
-              >
-            </div>
-
-            <p
-              id="indexPatternNameFieldHelp1"
-              class="kuiText kuiSubduedText kuiVerticalRhythm"
-            >
-              You can use a <strong>*</strong> as a wildcard in your index pattern.
-            </p>
+<div>
+  <h2 class="euiTitle">
+    Step 1 of 2: Define index pattern
+  </h2>
 
-            <p
-              id="indexPatternNameFieldHelp2"
-              class="kuiText kuiSubduedText"
-            >
-              You can't use empty spaces or the characters <strong>\ / ? " < > |</strong>.
-            </p>
-          </div>
+  <div class="euiSpacer euiSpacer--m"></div>
 
-          <!-- Action -->
-          <button
-            data-test-subj="createIndexPatternGoToStep2Button"
-            class="kuiButton kuiButton--primary kuiButton--iconText kuiVerticalRhythmSmall"
-            ng-click="stepIndexPattern.goToNextStep()"
-            ng-disabled="!stepIndexPattern.canGoToNextStep()"
-          >
-            <span class="kuiButton__inner">
-              <span>
-                Next step
-              </span>
-              <span
-                aria-hidden="true"
-                class="kuiButton__icon kuiIcon fa-chevron-right"
-              ></span>
-            </span>
-          </button>
-        </div>
-      </form>
-
-      <!-- List of matching indices -->
-      <div
-        class="kuiVerticalRhythm"
-        ng-switch="stepIndexPattern.matchingIndicesListType"
+  <form
+    name="stepIndexPattern.indexPatternNameForm"
+    role="form"
+    ng-submit="stepIndexPattern.goToNextStep()"
+  >
+    <div class="euiFormRow">
+      <label
+        for="indexPatternNameField"
+        class="euiFormLabel"
       >
-        <div ng-switch-when="invalidIndexPattern">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.allIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-           <span class="kuiStatusText kuiStatusText--error">
-              <span
-                aria-hidden="true"
-                class="kuiStatusText__icon kuiIcon fa-hand-stop-o"
-              ></span>
-
-              <span>
-                You've entered an invalid index pattern. Please adjust it to match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div><div ng-switch-when="noInput">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.allIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-            <span class="kuiStatusText kuiStatusText--info">
-              <span ng-if="!stepIndexPattern.allIndices.length">
-                You only have a single index. You can create an index pattern to match it.
-              </span>
+        Index pattern
+      </label>
+      <div class="euiFormControlLayout">
+        <!-- Index pattern input -->
+        <input
+          id="indexPatternNameField"
+          class="euiFieldText euiFieldText--fullWidth createIndexPatternInputField"
+          data-test-subj="createIndexPatternNameInput"
+          ng-model="stepIndexPattern.indexPatternName"
+          placeholder="index-name-*"
+          validate-index-pattern
+          validate-index-pattern-allow-wildcard
+          append-wildcard
+          name="name"
+          required
+          type="text"
+          aria-describedby="indexPatternNameFieldHelp1 indexPatternNameFieldHelp2"
+        >
+      </div>
+    </div>
+    <div class="euiSpacer euiSpacer--xs"></div>
+    <div class="euiFlexGroup">
+      <div class="euiFlexItem">
+        <p
+          id="indexPatternNameFieldHelp1"
+          class="euiTextColor euiTextColor--subdued"
+        >
+          You can use a <strong>*</strong> as a wildcard in your index pattern.
+        </p>
+        <div class="euiSpacer euiSpacer--xs"></div>
+        <p
+          id="indexPatternNameFieldHelp2"
+          class="euiTextColor euiTextColor--subdued"
+        >
+          You can't use empty spaces or the characters <strong>\ / ? " < > |</strong>.
+        </p>
+      </div>
+      <div class="euiFlexItem euiFlexItem--flexGrowZero">
+        <!-- Action -->
+        <button
+          data-test-subj="createIndexPatternGoToStep2Button"
+          class="euiButton euiButton--primary euiButton--iconText"
+          ng-click="stepIndexPattern.goToNextStep()"
+          ng-disabled="!stepIndexPattern.canGoToNextStep()"
+        >
+          <span class="euiButton__content">
+            Next step
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
 
-              <span ng-if="stepIndexPattern.allIndices.length">
-                Your index pattern can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div>
+  <div class="euiSpacer euiSpacer--m"></div>
 
-        <div ng-switch-when="noMatches">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.allIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-            <span class="kuiStatusText kuiStatusText--info">
-              <span>
-                The index pattern you've entered doesn't match any indices. You can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div>
+  <!-- List of matching indices -->
+  <div ng-switch="stepIndexPattern.matchingIndicesListType">
+    <div ng-switch-when="invalidIndexPattern">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.allIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span class="euiTextColor euiTextColor--danger">
+          <span aria-hidden="true">
+            <svg class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+              width="16" height="16" viewBox="0 0 16 16">
+              <g fill="#13252D" fill-rule="evenodd">
+                <circle cx="5" cy="5" r="1" />
+                <circle cx="10" cy="5" r="1" />
+                <path fill-rule="nonzero" d="M7.5 14a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zm0 1a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z"
+                />
+                <path fill-rule="nonzero" d="M12.332 9.626C10.747 8.217 9.133 7.5 7.5 7.5s-3.247.717-4.832 2.126a.5.5 0 1 0 .664.748C4.747 9.116 6.133 8.5 7.5 8.5s2.753.616 4.168 1.874a.5.5 0 0 0 .664-.748z"
+                />
+              </g>
+            </svg>
+          </span>
 
-        <div ng-switch-when="partialMatches">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.partialMatchingIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-            <span class="kuiStatusText kuiStatusText--info">
-              <span>
-                Your index pattern doesn't match any indices, but you have <strong>{{stepIndexPattern.partialMatchingIndices.length}} {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'indices' : 'index'}}</strong> which {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'look' : 'looks'}} similar.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div>
+          <span>
+            You've entered an invalid index pattern. Please adjust it to match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
+          </span>
+        </span>
+      </matching-indices-list>
+    </div>
+    <div ng-switch-when="noInput">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.allIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span class="euiTextColor euiTextColor--primary">
+          <span ng-if="!stepIndexPattern.allIndices.length">
+            You only have a single index. You can create an index pattern to match it.
+          </span>
 
-        <div ng-switch-when="exactMatches">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.matchingIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-            <span class="kuiStatusText kuiStatusText--success">
-              <span
-                aria-hidden="true"
-                class="kuiStatusText__icon kuiIcon fa-check"
-              ></span>
+          <span ng-if="stepIndexPattern.allIndices.length">
+            Your index pattern can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
+          </span>
+        </span>
+      </matching-indices-list>
+    </div>
+    <div ng-switch-when="noMatches">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.allIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span class="euiTextColor euiTextColor--primary">
+          <span>
+            The index pattern you've entered doesn't match any indices. You can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
+          </span>
+        </span>
+      </matching-indices-list>
+    </div>
+    <div ng-switch-when="partialMatches">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.partialMatchingIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span class="euiTextColor euiTextColor--primary">
+          <span>
+            Your index pattern doesn't match any indices, but you have <strong>{{stepIndexPattern.partialMatchingIndices.length}} {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'indices' : 'index'}}</strong> which {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'look' : 'looks'}} similar.
+          </span>
+        </span>
+      </matching-indices-list>
+    </div>
+    <div ng-switch-when="exactMatches">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.matchingIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span class="euiTextColor euiTextColor--secondary">
+          <span aria-hidden="true">
+            <svg class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+              xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+              <defs>
+                <path id="check-a" d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
+                />
+              </defs>
+              <use href="#check-a" />
+            </svg>
+          </span>
 
-              <span>
-                <strong>Success!</strong> Your index pattern matches <strong>{{stepIndexPattern.matchingIndices.length}} {{stepIndexPattern.matchingIndices.length > 1 ? 'indices' : 'index'}}</strong>.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div>
-      </div>
+          <span>
+            <strong>Success!</strong> Your index pattern matches <strong>{{stepIndexPattern.matchingIndices.length}} {{stepIndexPattern.matchingIndices.length > 1 ? 'indices' : 'index'}}</strong>.
+          </span>
+        </span>
+      </matching-indices-list>
     </div>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.less b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.less
index fc1ba64b06723..dd37653fc6aeb 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.less
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.less
@@ -1,9 +1,3 @@
-.createIndexPatternInputContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-}
-
 .createIndexPatternInputField.ng-untouched {
-  border-color: #dedede !important;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
 }
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
index 1b1d4deb884eb..a227c28c4e560 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
@@ -2,172 +2,193 @@
   name="stepTimeField.form"
   role="form"
   ng-submit="stepTimeField.createIndexPattern()"
-  class="kuiPanel"
 >
-  <div class="kuiPanelHeader">
-    <div class="kuiPanelHeaderSection">
-      <h2 class="kuiPanelHeader__title">
-        Step 2 of 2: Configure settings
-      </h2>
-    </div>
-  </div>
+  <h2 class="euiTitle">
+    Step 2 of 2: Configure settings
+  </h2>
+
+  <div class="euiSpacer euiSpacer--m"></div>
+
+  <p class="euiTextColor euiTextColor--subdued">
+    You've defined <strong>{{stepTimeField.indexPatternName}}</strong> as your index pattern. Now you can specify some settings before we create it.
+  </p>
+
+  <div class="euiSpacer euiSpacer--m"></div>
+
+  <div class="timeFieldNameLabel">
+    <label
+      id="timeFilterFieldSelectLabel"
+      class="euiLabel"
+      for="timeFilterFieldSelect"
+    >
+      Time Filter field name
+    </label>
+
+    <a
+      ng-if="!stepTimeField.isFetchingTimeFieldOptions"
+      class="euiLink euiText euiText--extraSmall"
+      ng-click="stepTimeField.fetchTimeFieldOptions()"
+      kbn-accessible-click
+      aria-describedby="timeFilterFieldSelectLabel"
+    >
+      Refresh
+    </a>
 
-  <div class="kuiPanelBody">
-    <p class="kuiText kuiSubduedText kuiVerticalRhythm">
-      You've defined <strong>{{stepTimeField.indexPatternName}}</strong> as your index pattern. Now you can specify some settings before we create it.
+    <p
+      ng-if="stepTimeField.isFetchingTimeFieldOptions"
+      class="euiTextColor euiTextColor--subdued"
+      aria-label="Please wait while we fetch your time field options"
+      aria-describedby="timeFilterFieldSelectLabel"
+    >
+      <svg aria-hidden="true" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+      width="16" height="16" viewBox="0 0 16 16">
+        <g fill="none" fill-rule="evenodd">
+          <circle cx="5" cy="5" r="1" fill="#13252D" />
+          <circle cx="10" cy="5" r="1" fill="#13252D" />
+          <circle cx="7.5" cy="7.5" r="7" stroke="#13252D" />
+          <path stroke="#13252D" stroke-linecap="round" stroke-linejoin="bevel"
+          d="M3 8c1.167 2 2.667 3 4.5 3 1.833 0 3.333-1 4.5-3" />
+        </g>
+      </svg>
     </p>
+  </div>
 
-    <!-- Time field select -->
-    <div class="kuiVerticalRhythm">
-      <div class="kuiVerticalRhythmSmall timeFieldNameLabel">
-        <label
-          id="timeFilterFieldSelectLabel"
-          class="kuiLabel"
-          for="timeFilterFieldSelect"
-        >
-          Time Filter field name
-        </label>
-
-        <a
-          ng-if="!stepTimeField.isFetchingTimeFieldOptions"
-          class="kuiLink kuiSubText"
-          ng-click="stepTimeField.fetchTimeFieldOptions()"
-          kbn-accessible-click
-          aria-describedby="timeFilterFieldSelectLabel"
-        >
-          Refresh
-        </a>
-
-        <p
-          ng-if="stepTimeField.isFetchingTimeFieldOptions"
-          class="kuiText kuiSubduedText"
-          aria-label="Please wait while we fetch your time field options"
-          aria-describedby="timeFilterFieldSelectLabel"
-        >
-          <span
-            aria-hidden="true"
-            class="kuiIcon fa-spinner fa-spin"
-          ></span>
-        </p>
-      </div>
+  <div class="euiSpacer euiSpacer--m"></div>
 
-      <div class="kuiVerticalRhythmSmall kuiVerticalRhythm">
-        <select
-          ng-show="stepTimeField.canShowMainSelect()"
-          id="timeFilterFieldSelect"
-          aria-describedby="timeFilterFieldSelectHelpText"
-          class="kuiSelect kuiSelect--large"
-          data-test-subj="createIndexPatternTimeFieldSelect"
-          ng-disabled="stepTimeField.isTimeFieldSelectDisabled()"
-          ng-required="stepTimeField.hasTimeFieldOptions()"
-          ng-options="option as option.display disable when option.isDisabled for option in stepTimeField.timeFieldOptions"
-          ng-model="stepTimeField.selectedTimeFieldOption"
-        ></select>
-        <select
-          ng-show="stepTimeField.canShowLoadingSelect()"
-          id="timeFilterFieldSelect"
-          aria-describedby="timeFilterFieldSelectHelpText"
-          class="kuiSelect kuiSelect--large"
-          data-test-subj="createIndexPatternTimeFieldSelect"
-          disabled="disabled"
-        >
-          <option>Loading...</option>
-        </select>
-        <p
-          ng-if="stepTimeField.canShowNoTimeBasedFieldsMessage()"
-          class="kuiText kuiSubduedText"
-        >
-          The indices which match this index pattern don't contain any time fields.
-        </p>
-      </div>
+  <select
+    ng-show="stepTimeField.canShowMainSelect()"
+    id="timeFilterFieldSelect"
+    aria-describedby="timeFilterFieldSelectHelpText"
+    class="euiSelect euiSelect--large"
+    data-test-subj="createIndexPatternTimeFieldSelect"
+    ng-disabled="stepTimeField.isTimeFieldSelectDisabled()"
+    ng-required="stepTimeField.hasTimeFieldOptions()"
+    ng-options="option as option.display disable when option.isDisabled for option in stepTimeField.timeFieldOptions"
+    ng-model="stepTimeField.selectedTimeFieldOption"
+  ></select>
+  <select
+    ng-show="stepTimeField.canShowLoadingSelect()"
+    id="timeFilterFieldSelect"
+    aria-describedby="timeFilterFieldSelectHelpText"
+    class="euiSelect euiSelect--large"
+    data-test-subj="createIndexPatternTimeFieldSelect"
+    disabled="disabled"
+  >
+    <option>Loading...</option>
+  </select>
+  <p
+    ng-if="stepTimeField.canShowNoTimeBasedFieldsMessage()"
+    class="euiTextColor euiTextColor--subdued euiText euiText--small"
+  >
+    The indices which match this index pattern don't contain any time fields.
+  </p>
 
-      <p
-        ng-if="stepTimeField.canShowHelpText()"
-        id="timeFilterFieldSelectHelpText"
-        class="kuiText kuiSubduedText kuiVerticalRhythm"
-      >
-        The Time Filter will use this field to filter your data by time.
-        You can choose not to have a time field, but you will not be able to narrow down your data by a time range.
-      </p>
-    </div>
+  <div class="euiSpacer euiSpacer--s"></div>
 
-    <div class="kuiVerticalRhythm">
-      <button
-        class="kuiToggleButton"
-        data-id="toggleButton"
-        ng-click="stepTimeField.toggleAdvancedOptions()"
-      >
-        <span
-          class="kuiToggleButton__icon kuiIcon"
-          ng-class="{
-            'fa-caret-right': !stepTimeField.showAdvancedOptions,
-            'fa-caret-down': stepTimeField.showAdvancedOptions
-          }"
-          data-id="toggleButtonIcon"
-        >
-        </span>
-        <span ng-if="stepTimeField.showAdvancedOptions">Hide advanced options</span>
-        <span ng-if="!stepTimeField.showAdvancedOptions">Show advanced options</span>
-      </button>
-    </div>
+  <p
+    ng-if="stepTimeField.canShowHelpText()"
+    id="timeFilterFieldSelectHelpText"
+    class="euiTextColor euiTextColor--subdued"
+  >
+    The Time Filter will use this field to filter your data by time.
+    You can choose not to have a time field, but you will not be able to narrow down your data by a time range.
+  </p>
+
+  <div class="euiSpacer euiSpacer--m"></div>
+
+  <button
+    class="euiButtonEmpty"
+    data-id="toggleButton"
+    ng-click="stepTimeField.toggleAdvancedOptions()"
+  >
+    <svg ng-if="!stepTimeField.showAdvancedOptions" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+    xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+      <defs>
+        <path id="arrow_right-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+        />
+      </defs>
+      <use fill-rule="nonzero" transform="matrix(0 1 1 0 0 0)" href="#arrow_right-a"
+      />
+    </svg>
+    <svg ng-if="stepTimeField.showAdvancedOptions" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+    xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+      <defs>
+        <path id="arrow_down-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+        />
+      </defs>
+      <use fill-rule="nonzero" href="#arrow_down-a" />
+    </svg>
+    <span ng-if="stepTimeField.showAdvancedOptions">Hide advanced options</span>
+    <span ng-if="!stepTimeField.showAdvancedOptions">Show advanced options</span>
+  </button>
 
-    <!-- Index pattern id input -->
-    <div
-      class="kuiVerticalRhythm"
-      ng-if="stepTimeField.showAdvancedOptions"
+  <!-- Index pattern id input -->
+  <div class="euiSpacer euiSpacer--m"></div>
+  <div ng-if="stepTimeField.showAdvancedOptions">
+    <label
+      class="euiLabel"
+      for="indexPatternCreationId"
     >
-      <label
-        class="kuiLabel kuiVerticalRhythmSmall"
-        for="indexPatternCreationId"
-      >
-        Custom index pattern ID
-      </label>
-
-      <div class="kuiVerticalRhythm kuiVerticalRhythmSmall">
-        <input
-          class="kuiTextInput kuiTextInput--large"
-          id="indexPatternCreationId"
-          data-test-subj="createIndexPatternIdInput"
-          ng-model="stepTimeField.indexPatternId"
-          ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
-          validate-index-pattern
-          validate-index-pattern-allow-wildcard
-          name="id"
-          type="text"
-        >
-      </div>
+      Custom index pattern ID
+    </label>
 
-      <p
-        class="kuiText kuiSubduedText kuiVerticalRhythm"
-      >
-        Kibana will provide a unique identifier for each index pattern.
-        If you do not want to use this unique ID, enter a custom one.
-      </p>
-    </div>
+    <div class="euiSpacer euiSpacer--xs"></div>
+
+    <input
+      class="euiFieldText euiFieldText--large"
+      id="indexPatternCreationId"
+      data-test-subj="createIndexPatternIdInput"
+      ng-model="stepTimeField.indexPatternId"
+      ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
+      validate-index-pattern
+      validate-index-pattern-allow-wildcard
+      name="id"
+      type="text"
+    >
+
+    <div class="euiSpacer euiSpacer--xs"></div>
+
+    <p class="euiTextColor euiTextColor--subdued">
+      Kibana will provide a unique identifier for each index pattern.
+      If you do not want to use this unique ID, enter a custom one.
+    </p>
+  </div>
 
-    <!-- Actions -->
-    <div class="kuiBar kuiVerticalRhythm">
-      <div class="kuiBarSection">
-        <div class="kuiButtonGroup">
-          <button
-            class="kuiButton kuiButton--secondary kuiButton--iconText"
-            ng-click="stepTimeField.goToPreviousStep()"
-          >
-            <span class="kuiButton__inner">
-              <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-chevron-left"></span>
-              <span>Back</span>
-            </span>
-          </button>
-
-          <button
-            data-test-subj="createIndexPatternCreateButton"
-            ng-disabled="!stepTimeField.canCreateIndexPattern()"
-            class="kuiButton kuiButton--primary"
-            type="submit"
-          >
+  <div class="euiSpacer euiSpacer--m"></div>
+
+  <!-- Actions -->
+  <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--responsive">
+    <div class="euiFlexItem euiFlexItem--flexGrowZero"></div>
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      <div>
+        <button
+          class="euiButton euiButton--secondary kuiButton--iconText"
+          ng-click="stepTimeField.goToPreviousStep()"
+        >
+          <span class="euiButton__content">
+            <svg aria-hidden="true" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+              xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+              <defs>
+                <path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                />
+              </defs>
+              <use fill-rule="nonzero" transform="rotate(90 8 8)" href="#arrow_left-a"
+              />
+            </svg>
+            <span>Back</span>
+          </span>
+        </button>
+
+        <button
+          data-test-subj="createIndexPatternCreateButton"
+          ng-disabled="!stepTimeField.canCreateIndexPattern()"
+          class="euiButton euiButton--primary"
+          type="submit"
+        >
+          <span class="euiButton__content">
             Create index pattern
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>

From 47b245c26308fb3672879117dcaca455aba93348 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Fri, 22 Dec 2017 10:36:10 -0500
Subject: [PATCH 2/4] PR feedback

---
 .../create_index_pattern_wizard.html          |  18 +-
 .../step_index_pattern.html                   |  95 +++---
 .../step_time_field/step_time_field.html      | 290 ++++++++++--------
 3 files changed, 215 insertions(+), 188 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
index fb71d3b98d779..049f49bb6b879 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
@@ -6,13 +6,21 @@
       class="kuiViewContent"
     >
       <!-- Intro -->
-      <h1 class="euiTitle">
+      <h1 class="euiTitle euiTitle--medium">
         Create index pattern
       </h1>
-      <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive">
-        <p class="euiFlexItem euiFlexItem--flexGrowZero euiTextColor euiTextColor--subdued">
-          Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
-        </p>
+
+      <div class="euiSpacer euiSpacer--small"></div>
+
+      <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--alignItemsEnd euiFlexGroup--responsive">
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <div class="euiText">
+            <p class="euiTextColor euiTextColor--subdued">
+              Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
+            </p>
+          </div>
+        </div>
+
         <div class="euiFlexItem euiFlexItem--flexGrowZero">
           <label
             ng-if="controller.isSystemIndicesCheckBoxVisible()"
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
index 337771d2a39db..4a454e1c0c559 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
@@ -10,47 +10,48 @@ <h2 class="euiTitle">
     role="form"
     ng-submit="stepIndexPattern.goToNextStep()"
   >
-    <div class="euiFormRow">
-      <label
-        for="indexPatternNameField"
-        class="euiFormLabel"
-      >
-        Index pattern
-      </label>
-      <div class="euiFormControlLayout">
-        <!-- Index pattern input -->
-        <input
-          id="indexPatternNameField"
-          class="euiFieldText euiFieldText--fullWidth createIndexPatternInputField"
-          data-test-subj="createIndexPatternNameInput"
-          ng-model="stepIndexPattern.indexPatternName"
-          placeholder="index-name-*"
-          validate-index-pattern
-          validate-index-pattern-allow-wildcard
-          append-wildcard
-          name="name"
-          required
-          type="text"
-          aria-describedby="indexPatternNameFieldHelp1 indexPatternNameFieldHelp2"
-        >
-      </div>
-    </div>
-    <div class="euiSpacer euiSpacer--xs"></div>
-    <div class="euiFlexGroup">
-      <div class="euiFlexItem">
-        <p
-          id="indexPatternNameFieldHelp1"
-          class="euiTextColor euiTextColor--subdued"
-        >
-          You can use a <strong>*</strong> as a wildcard in your index pattern.
-        </p>
-        <div class="euiSpacer euiSpacer--xs"></div>
-        <p
-          id="indexPatternNameFieldHelp2"
-          class="euiTextColor euiTextColor--subdued"
-        >
-          You can't use empty spaces or the characters <strong>\ / ? " < > |</strong>.
-        </p>
+    <div class="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--alignItemsEnd euiFlexGroup--responsive">
+      <div class="euiFlexItem euiFlexItem--flexGrowZero">
+        <div class="euiFormRow">
+          <label
+            for="indexPatternNameField"
+            class="euiFormLabel"
+          >
+            Index pattern
+          </label>
+          <div class="euiFormControlLayout">
+            <!-- Index pattern input -->
+            <input
+              id="indexPatternNameField"
+              class="euiFieldText euiFieldText--fullWidth createIndexPatternInputField"
+              data-test-subj="createIndexPatternNameInput"
+              ng-model="stepIndexPattern.indexPatternName"
+              placeholder="index-name-*"
+              validate-index-pattern
+              validate-index-pattern-allow-wildcard
+              append-wildcard
+              name="name"
+              required
+              type="text"
+              aria-describedby="indexPatternNameFieldHelp1 indexPatternNameFieldHelp2"
+            >
+          </div>
+          <div class="euiFormHelpText euiFormRow__text">
+            <p
+              id="indexPatternNameFieldHelp1"
+              class="euiTextColor euiTextColor--subdued"
+            >
+              You can use a <strong>*</strong> as a wildcard in your index pattern.
+            </p>
+            <div class="euiSpacer euiSpacer--xs"></div>
+            <p
+              id="indexPatternNameFieldHelp2"
+              class="euiTextColor euiTextColor--subdued"
+            >
+              You can't use empty spaces or the characters <strong>\ / ? " < > |</strong>.
+            </p>
+          </div>
+        </div>
       </div>
       <div class="euiFlexItem euiFlexItem--flexGrowZero">
         <!-- Action -->
@@ -105,14 +106,12 @@ <h2 class="euiTitle">
         indices="stepIndexPattern.allIndices"
         pattern="stepIndexPattern.indexPatternName"
       >
-        <span class="euiTextColor euiTextColor--primary">
-          <span ng-if="!stepIndexPattern.allIndices.length">
-            You only have a single index. You can create an index pattern to match it.
-          </span>
+        <span ng-if="!stepIndexPattern.allIndices.length">
+          You only have a single index. You can create an index pattern to match it.
+        </span>
 
-          <span ng-if="stepIndexPattern.allIndices.length">
-            Your index pattern can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
-          </span>
+        <span ng-if="stepIndexPattern.allIndices.length">
+          Your index pattern can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
         </span>
       </matching-indices-list>
     </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
index a227c28c4e560..8de041d8cb1b4 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
@@ -15,89 +15,108 @@ <h2 class="euiTitle">
 
   <div class="euiSpacer euiSpacer--m"></div>
 
-  <div class="timeFieldNameLabel">
-    <label
-      id="timeFilterFieldSelectLabel"
-      class="euiLabel"
-      for="timeFilterFieldSelect"
-    >
-      Time Filter field name
-    </label>
+  <div class="euiFormRow">
+    <div class="euiFormLabel">
+      <div class="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween">
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <label
+            id="timeFilterFieldSelectLabel"
+            for="timeFilterFieldSelect"
+          >
+            Time Filter field name
+          </label>
+        </div>
+
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <a
+            ng-if="!stepTimeField.isFetchingTimeFieldOptions"
+            class="euiLink euiText euiText--extraSmall"
+            ng-click="stepTimeField.fetchTimeFieldOptions()"
+            kbn-accessible-click
+            aria-describedby="timeFilterFieldSelectLabel"
+          >
+            Refresh
+          </a>
+
+          <p
+            ng-if="stepTimeField.isFetchingTimeFieldOptions"
+            class="euiTextColor euiTextColor--subdued"
+            aria-label="Please wait while we fetch your time field options"
+            aria-describedby="timeFilterFieldSelectLabel"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium"
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+            >
+              <g fill="none" fill-rule="evenodd">
+                <circle cx="5" cy="5" r="1" fill="#13252D" />
+                <circle cx="10" cy="5" r="1" fill="#13252D" />
+                <circle cx="7.5" cy="7.5" r="7" stroke="#13252D" />
+                <path stroke="#13252D" stroke-linecap="round" stroke-linejoin="bevel"
+                d="M3 8c1.167 2 2.667 3 4.5 3 1.833 0 3.333-1 4.5-3" />
+              </g>
+            </svg>
+          </p>
+        </div>
+      </div>
+    </div>
 
-    <a
-      ng-if="!stepTimeField.isFetchingTimeFieldOptions"
-      class="euiLink euiText euiText--extraSmall"
-      ng-click="stepTimeField.fetchTimeFieldOptions()"
-      kbn-accessible-click
-      aria-describedby="timeFilterFieldSelectLabel"
+    <div class="euiFormControlLayout">
+      <select
+        ng-show="stepTimeField.canShowMainSelect()"
+        id="timeFilterFieldSelect"
+        aria-describedby="timeFilterFieldSelectHelpText1 timeFilterFieldSelectHelpText2"
+        class="euiSelect euiSelect--large"
+        data-test-subj="createIndexPatternTimeFieldSelect"
+        ng-disabled="stepTimeField.isTimeFieldSelectDisabled()"
+        ng-required="stepTimeField.hasTimeFieldOptions()"
+        ng-options="option as option.display disable when option.isDisabled for option in stepTimeField.timeFieldOptions"
+        ng-model="stepTimeField.selectedTimeFieldOption"
+      ></select>
+
+      <select
+        ng-show="stepTimeField.canShowLoadingSelect()"
+        id="timeFilterFieldSelect"
+        aria-describedby="timeFilterFieldSelectHelpText1 timeFilterFieldSelectHelpText2"
+        class="euiSelect euiSelect--large"
+        data-test-subj="createIndexPatternTimeFieldSelect"
+        disabled="disabled"
+      >
+        <option>Loading...</option>
+      </select>
+
+      <p
+        ng-if="stepTimeField.canShowNoTimeBasedFieldsMessage()"
+        class="euiTextColor euiTextColor--subdued euiText euiText--small"
+      >
+        The indices which match this index pattern don't contain any time fields.
+      </p>
+    </div>
+
+    <div
+      ng-if="stepTimeField.canShowHelpText()"
+      class="euiFormHelpText euiFormRow__text"
+      id="timeFilterFieldSelectHelpText1"
     >
-      Refresh
-    </a>
+      The Time Filter will use this field to filter your data by time.
+    </div>
 
-    <p
-      ng-if="stepTimeField.isFetchingTimeFieldOptions"
-      class="euiTextColor euiTextColor--subdued"
-      aria-label="Please wait while we fetch your time field options"
-      aria-describedby="timeFilterFieldSelectLabel"
+    <div
+      ng-if="stepTimeField.canShowHelpText()"
+      class="euiFormHelpText euiFormRow__text"
+      id="timeFilterFieldSelectHelpText2"
     >
-      <svg aria-hidden="true" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
-      width="16" height="16" viewBox="0 0 16 16">
-        <g fill="none" fill-rule="evenodd">
-          <circle cx="5" cy="5" r="1" fill="#13252D" />
-          <circle cx="10" cy="5" r="1" fill="#13252D" />
-          <circle cx="7.5" cy="7.5" r="7" stroke="#13252D" />
-          <path stroke="#13252D" stroke-linecap="round" stroke-linejoin="bevel"
-          d="M3 8c1.167 2 2.667 3 4.5 3 1.833 0 3.333-1 4.5-3" />
-        </g>
-      </svg>
-    </p>
+      You can choose not to have a time field, but you will not be able to narrow down your data by a time range.
+    </div>
   </div>
 
-  <div class="euiSpacer euiSpacer--m"></div>
-
-  <select
-    ng-show="stepTimeField.canShowMainSelect()"
-    id="timeFilterFieldSelect"
-    aria-describedby="timeFilterFieldSelectHelpText"
-    class="euiSelect euiSelect--large"
-    data-test-subj="createIndexPatternTimeFieldSelect"
-    ng-disabled="stepTimeField.isTimeFieldSelectDisabled()"
-    ng-required="stepTimeField.hasTimeFieldOptions()"
-    ng-options="option as option.display disable when option.isDisabled for option in stepTimeField.timeFieldOptions"
-    ng-model="stepTimeField.selectedTimeFieldOption"
-  ></select>
-  <select
-    ng-show="stepTimeField.canShowLoadingSelect()"
-    id="timeFilterFieldSelect"
-    aria-describedby="timeFilterFieldSelectHelpText"
-    class="euiSelect euiSelect--large"
-    data-test-subj="createIndexPatternTimeFieldSelect"
-    disabled="disabled"
-  >
-    <option>Loading...</option>
-  </select>
-  <p
-    ng-if="stepTimeField.canShowNoTimeBasedFieldsMessage()"
-    class="euiTextColor euiTextColor--subdued euiText euiText--small"
-  >
-    The indices which match this index pattern don't contain any time fields.
-  </p>
-
-  <div class="euiSpacer euiSpacer--s"></div>
-
-  <p
-    ng-if="stepTimeField.canShowHelpText()"
-    id="timeFilterFieldSelectHelpText"
-    class="euiTextColor euiTextColor--subdued"
-  >
-    The Time Filter will use this field to filter your data by time.
-    You can choose not to have a time field, but you will not be able to narrow down your data by a time range.
-  </p>
-
-  <div class="euiSpacer euiSpacer--m"></div>
-
   <button
     class="euiButtonEmpty"
+    type="button"
     data-id="toggleButton"
     ng-click="stepTimeField.toggleAdvancedOptions()"
   >
@@ -123,73 +142,74 @@ <h2 class="euiTitle">
   </button>
 
   <!-- Index pattern id input -->
-  <div class="euiSpacer euiSpacer--m"></div>
-  <div ng-if="stepTimeField.showAdvancedOptions">
-    <label
-      class="euiLabel"
-      for="indexPatternCreationId"
-    >
-      Custom index pattern ID
-    </label>
-
-    <div class="euiSpacer euiSpacer--xs"></div>
-
-    <input
-      class="euiFieldText euiFieldText--large"
-      id="indexPatternCreationId"
-      data-test-subj="createIndexPatternIdInput"
-      ng-model="stepTimeField.indexPatternId"
-      ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
-      validate-index-pattern
-      validate-index-pattern-allow-wildcard
-      name="id"
-      type="text"
-    >
-
-    <div class="euiSpacer euiSpacer--xs"></div>
-
-    <p class="euiTextColor euiTextColor--subdued">
-      Kibana will provide a unique identifier for each index pattern.
-      If you do not want to use this unique ID, enter a custom one.
-    </p>
+  <div class="euiSpacer euiSpacer--xs"></div>
+  <div
+    ng-if="stepTimeField.showAdvancedOptions"
+    class="euiFormRow"
+  >
+    <div class="euiFormLabel">
+      <label
+        class="euiLabel"
+        for="indexPatternCreationId"
+      >
+        Custom index pattern ID
+      </label>
+    </div>
+    <div class="euiFormControlLayout">
+      <input
+        class="euiFieldText euiFieldText--large"
+        id="indexPatternCreationId"
+        data-test-subj="createIndexPatternIdInput"
+        ng-model="stepTimeField.indexPatternId"
+        ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
+        validate-index-pattern
+        validate-index-pattern-allow-wildcard
+        name="id"
+        type="text"
+      >
+    </div>
+    <div class="euiFormHelpText euiFormRow__text">
+      <span class="euiTextColor euiTextColor--subdued">
+        Kibana will provide a unique identifier for each index pattern.
+        If you do not want to use this unique ID, enter a custom one.
+      </span>
+    </div>
   </div>
 
   <div class="euiSpacer euiSpacer--m"></div>
 
   <!-- Actions -->
-  <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--responsive">
-    <div class="euiFlexItem euiFlexItem--flexGrowZero"></div>
+  <div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd">
     <div class="euiFlexItem euiFlexItem--flexGrowZero">
-      <div>
-        <button
-          class="euiButton euiButton--secondary kuiButton--iconText"
-          ng-click="stepTimeField.goToPreviousStep()"
-        >
-          <span class="euiButton__content">
-            <svg aria-hidden="true" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
-              xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
-              <defs>
-                <path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
-                />
-              </defs>
-              <use fill-rule="nonzero" transform="rotate(90 8 8)" href="#arrow_left-a"
+      <button
+        class="euiButtonEmpty euiButtonEmpty--primary kuiButton--iconText"
+        ng-click="stepTimeField.goToPreviousStep()"
+      >
+        <span class="euiButtonEmpty__content">
+          <svg aria-hidden="true" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+            xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+            <defs>
+              <path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
               />
-            </svg>
-            <span>Back</span>
-          </span>
-        </button>
-
-        <button
-          data-test-subj="createIndexPatternCreateButton"
-          ng-disabled="!stepTimeField.canCreateIndexPattern()"
-          class="euiButton euiButton--primary"
-          type="submit"
-        >
-          <span class="euiButton__content">
-            Create index pattern
-          </span>
-        </button>
-      </div>
+            </defs>
+            <use fill-rule="nonzero" transform="rotate(90 8 8)" href="#arrow_left-a"
+            />
+          </svg>
+          <span>Back</span>
+        </span>
+      </button>
+    </div>
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      <button
+        data-test-subj="createIndexPatternCreateButton"
+        ng-disabled="!stepTimeField.canCreateIndexPattern()"
+        class="euiButton euiButton--primary"
+        type="submit"
+      >
+        <span class="euiButton__content">
+          Create index pattern
+        </span>
+      </button>
     </div>
   </div>
 </form>

From 3569183f0f2c15625b8d3df6b05145c5c314eed0 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Fri, 22 Dec 2017 14:30:42 -0500
Subject: [PATCH 3/4] PR feedback

---
 .../create_index_pattern_wizard.html          | 98 +++++++++++--------
 .../create_index_pattern_wizard.js            |  1 +
 .../create_index_pattern_wizard.less          |  4 +
 .../step_index_pattern.html                   | 14 +--
 .../step_time_field/step_time_field.html      | 31 ++----
 .../step_time_field/step_time_field.less      |  7 ++
 6 files changed, 81 insertions(+), 74 deletions(-)
 create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less

diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
index 049f49bb6b879..4d28f18558d44 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
@@ -22,23 +22,27 @@ <h1 class="euiTitle euiTitle--medium">
         </div>
 
         <div class="euiFlexItem euiFlexItem--flexGrowZero">
-          <label
+          <div
+            class="euiCheckbox"
             ng-if="controller.isSystemIndicesCheckBoxVisible()"
-            class="kuiCheckBoxLabel "
-            for="indexPatternCreationIncludeSystemIndices"
           >
             <input
               type="checkbox"
+              class="euiCheckbox__input"
               id="indexPatternCreationIncludeSystemIndices"
-              class="kuiCheckBox"
               ng-model="controller.doesIncludeSystemIndices"
               ng-change="controller.onIncludeSystemIndicesChange()"
             >
-
-            <span class="kuiCheckBoxLabel__text">
+            <div class="euiCheckbox__square">
+              <div class="euiCheckbox__check"></div>
+            </div>
+            <label
+              class="euiCheckbox__label"
+              for="indexPatternCreationIncludeSystemIndices"
+            >
               Include system indices
-            </span>
-          </label>
+            </label>
+          </div>
         </div>
       </div>
 
@@ -48,55 +52,67 @@ <h1 class="euiTitle euiTitle--medium">
         <!-- User has no data -->
         <div ng-if="!controller.hasIndices()">
           <div class="euiPageContentBody">
-            <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--alignItemsCenter euiFlexGroup--responsive" style="height:100%">
+            <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--responsive">
               <!-- Fetching state -->
               <div
                 ng-if="controller.isFetchingExistingIndices"
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexItem euiFlexItem--flexGrowZero createIndexPatternPrompt"
               >
                 <h2 class="euiTitle euiTextColor euiTextColor--subdued">
                   Checking for Elasticsearch data
                 </h2>
                 <div class="euiSpacer euiSpacer--s"></div>
-                <p class="euiTextColor euiTextColor--subdued">
-                  Reticulating splines...
-                </p>
+                <div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
+                  <div class="euiFlexItem euiFlexItem--flexGrowZero">
+                    <div
+                      class="euiLoadingSpinner euiLoadingSpinner--medium"
+                      aria-hidden="true"
+                    ></div>
+                  </div>
+                  <div class="euiFlexItem euiFlexItem--flexGrowZero">
+                    <p class="euiTextColor euiTextColor--subdued">
+                      Reticulating splines...
+                    </p>
+                  </div>
+                </div>
               </div>
 
               <!-- Empty state -->
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexItem euiFlexItem--flexGrowZero createIndexPatternPrompt"
                 ng-if="!controller.isFetchingExistingIndices"
               >
-                <h1 class="euiTitle euiTextColor euiTextColor--subdued">
-                  Couldn't find any Elasticsearch data
-                </h1>
-                <div class="euiSpacer euiSpacer--s"></div>
-                <p class="euiTextColor euiTextColor--subdued">
-                  <span>
-                    You'll need to index some data into Elasticsearch before you can create an index pattern.
-                  </span>
-                  <a
-                    class="kuiLink"
-                    aria-label="Learn how to index data into Elasticsearch"
-                    documentation-href="indexPatterns.loadingData"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Learn how.
-                  </a>
-                </p>
-                <div class="euiSpacer euiSpacer--s"></div>
-                <button
-                  class="euiButton euiButton--secondary"
-                  ng-click="controller.fetchExistingIndices()"
-                >
-                  <span class="euiButton__content">
+                <div>
+                  <h2 class="euiTitle euiTextColor euiTextColor--subdued">
+                    Couldn't find any Elasticsearch data
+                  </h2>
+                  <div class="euiSpacer euiSpacer--s"></div>
+                  <p class="euiTextColor euiTextColor--subdued">
                     <span>
-                      Check for new data
+                      You'll need to index some data into Elasticsearch before you can create an index pattern.
+                    </span>
+                    <a
+                      class="euiLink"
+                      aria-label="Learn how to index data into Elasticsearch"
+                      documentation-href="indexPatterns.loadingData"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Learn how.
+                    </a>
+                  </p>
+                  <div class="euiSpacer euiSpacer--s"></div>
+                  <button
+                    class="euiButtonEmpty euiButtonEmpty--primary"
+                    ng-click="controller.fetchExistingIndices()"
+                  >
+                    <span class="euiButton__content">
+                      <span>
+                        Check for new data
+                      </span>
                     </span>
-                  </span>
-                </button>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js
index 6875c473bc2a1..597e0822be592 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js
@@ -10,6 +10,7 @@ import { sendCreateIndexPatternRequest } from './send_create_index_pattern_reque
 import './step_index_pattern';
 import './step_time_field';
 import './matching_indices_list';
+import './create_index_pattern_wizard.less';
 
 uiRoutes
   .when('/management/kibana/index', {
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less
new file mode 100644
index 0000000000000..ce9d492978734
--- /dev/null
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less
@@ -0,0 +1,4 @@
+.createIndexPatternPrompt {
+  width: 100%;
+  max-width: 600px;
+}
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
index 4a454e1c0c559..6ba7053aff028 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
@@ -1,5 +1,5 @@
 <div>
-  <h2 class="euiTitle">
+  <h2 class="euiTitle euiTitle--small">
     Step 1 of 2: Define index pattern
   </h2>
 
@@ -121,10 +121,8 @@ <h2 class="euiTitle">
         indices="stepIndexPattern.allIndices"
         pattern="stepIndexPattern.indexPatternName"
       >
-        <span class="euiTextColor euiTextColor--primary">
-          <span>
-            The index pattern you've entered doesn't match any indices. You can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
-          </span>
+        <span>
+          The index pattern you've entered doesn't match any indices. You can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
         </span>
       </matching-indices-list>
     </div>
@@ -134,10 +132,8 @@ <h2 class="euiTitle">
         indices="stepIndexPattern.partialMatchingIndices"
         pattern="stepIndexPattern.indexPatternName"
       >
-        <span class="euiTextColor euiTextColor--primary">
-          <span>
-            Your index pattern doesn't match any indices, but you have <strong>{{stepIndexPattern.partialMatchingIndices.length}} {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'indices' : 'index'}}</strong> which {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'look' : 'looks'}} similar.
-          </span>
+        <span>
+          Your index pattern doesn't match any indices, but you have <strong>{{stepIndexPattern.partialMatchingIndices.length}} {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'indices' : 'index'}}</strong> which {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'look' : 'looks'}} similar.
         </span>
       </matching-indices-list>
     </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
index 8de041d8cb1b4..b62b2cf81466f 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
@@ -3,7 +3,7 @@
   role="form"
   ng-submit="stepTimeField.createIndexPattern()"
 >
-  <h2 class="euiTitle">
+  <h2 class="euiTitle euiTitle--small">
     Step 2 of 2: Configure settings
   </h2>
 
@@ -30,7 +30,7 @@ <h2 class="euiTitle">
         <div class="euiFlexItem euiFlexItem--flexGrowZero">
           <a
             ng-if="!stepTimeField.isFetchingTimeFieldOptions"
-            class="euiLink euiText euiText--extraSmall"
+            class="euiLink euiText euiText--extraSmall timeFieldRefreshButton"
             ng-click="stepTimeField.fetchTimeFieldOptions()"
             kbn-accessible-click
             aria-describedby="timeFilterFieldSelectLabel"
@@ -38,29 +38,12 @@ <h2 class="euiTitle">
             Refresh
           </a>
 
-          <p
+          <div
             ng-if="stepTimeField.isFetchingTimeFieldOptions"
-            class="euiTextColor euiTextColor--subdued"
+            class="euiLoadingSpinner euiLoadingSpinner--small"
             aria-label="Please wait while we fetch your time field options"
             aria-describedby="timeFilterFieldSelectLabel"
-          >
-            <svg
-              aria-hidden="true"
-              class="euiIcon euiIcon--medium"
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-            >
-              <g fill="none" fill-rule="evenodd">
-                <circle cx="5" cy="5" r="1" fill="#13252D" />
-                <circle cx="10" cy="5" r="1" fill="#13252D" />
-                <circle cx="7.5" cy="7.5" r="7" stroke="#13252D" />
-                <path stroke="#13252D" stroke-linecap="round" stroke-linejoin="bevel"
-                d="M3 8c1.167 2 2.667 3 4.5 3 1.833 0 3.333-1 4.5-3" />
-              </g>
-            </svg>
-          </p>
+          ></div>
         </div>
       </div>
     </div>
@@ -182,7 +165,7 @@ <h2 class="euiTitle">
   <div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd">
     <div class="euiFlexItem euiFlexItem--flexGrowZero">
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary kuiButton--iconText"
+        class="euiButtonEmpty euiButtonEmpty--primary"
         ng-click="stepTimeField.goToPreviousStep()"
       >
         <span class="euiButtonEmpty__content">
@@ -203,7 +186,7 @@ <h2 class="euiTitle">
       <button
         data-test-subj="createIndexPatternCreateButton"
         ng-disabled="!stepTimeField.canCreateIndexPattern()"
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--fill"
         type="submit"
       >
         <span class="euiButton__content">
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.less b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.less
index 3548c6d861ade..fce886eeb4715 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.less
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.less
@@ -7,3 +7,10 @@
   align-items: center;
   justify-content: space-between;
 }
+
+/**
+ * 1. Bring the line-height down or else this link expands its container when it becomes visible.
+ */
+ .timeFieldRefreshButton {
+  line-height: 1 !important; /* 1 */
+}

From ffec8b8ebde085e86ce3bcc23b19830401fb877f Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Tue, 2 Jan 2018 09:39:51 -0500
Subject: [PATCH 4/4] PR feedback

---
 .../create_index_pattern_wizard.html                          | 4 ++--
 .../step_index_pattern/step_index_pattern.html                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
index 4d28f18558d44..c2b9370704b29 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
@@ -58,7 +58,7 @@ <h1 class="euiTitle euiTitle--medium">
                 ng-if="controller.isFetchingExistingIndices"
                 class="euiFlexItem euiFlexItem--flexGrowZero createIndexPatternPrompt"
               >
-                <h2 class="euiTitle euiTextColor euiTextColor--subdued">
+                <h2 class="euiTitle euiTitle--small euiTextColor euiTextColor--subdued">
                   Checking for Elasticsearch data
                 </h2>
                 <div class="euiSpacer euiSpacer--s"></div>
@@ -83,7 +83,7 @@ <h2 class="euiTitle euiTextColor euiTextColor--subdued">
                 ng-if="!controller.isFetchingExistingIndices"
               >
                 <div>
-                  <h2 class="euiTitle euiTextColor euiTextColor--subdued">
+                  <h2 class="euiTitle euiTitle--small euiTextColor euiTextColor--subdued">
                     Couldn't find any Elasticsearch data
                   </h2>
                   <div class="euiSpacer euiSpacer--s"></div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
index 6ba7053aff028..4644b275242a2 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
@@ -57,7 +57,7 @@ <h2 class="euiTitle euiTitle--small">
         <!-- Action -->
         <button
           data-test-subj="createIndexPatternGoToStep2Button"
-          class="euiButton euiButton--primary euiButton--iconText"
+          class="euiButton euiButton--primary"
           ng-click="stepIndexPattern.goToNextStep()"
           ng-disabled="!stepIndexPattern.canGoToNextStep()"
         >