Use ViewContent and Title components in Visualize wizard.

elastic · Feb 6, 2017 · 734c85b · 734c85b
1 parent 99525ac
commit 734c85b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/src/core_plugins/kibana/public/visualize/styles/main.less b/src/core_plugins/kibana/public/visualize/styles/main.less
@@ -46,7 +46,6 @@
 
 @media (min-width: @screen-lg) {
   .wizard {
-    padding: 0;
     display: flex;
   }
 

diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -12,31 +12,34 @@
 
 <div class="kuiViewContent kuiViewContent--constrainedWidth">
   <!-- Header -->
-  <div class="kuiViewContentItem kuiSubHeader">
-    <h1 class="kuiTitle">
+  <div class="kuiViewContentItem">
+    <h1 class="kuiTitle kuiVerticalRhythm">
       Select visualization type
     </h1>
-  </div>
 
-  <div class="wizard">
-    <div class="wizard-column">
-      <div class="wizard-row">
-        <a
-          class="wizard-type"
-          ng-repeat="type in visTypes.inTitleOrder"
-          ng-href="{{ visTypeUrl(type) }}"
-        >
-          <div class="wizard-type-heading">
-            <span
-              aria-hidden="true"
-              class="wizard-type-heading-icon fa fa-fw"
-              ng-class="type.icon"
-            ></span>
-            <h4 data-test-subj="visualizeWizardChartTypeTitle" class="wizard-type-heading-text">{{type.title}}</h4>
-          </div>
-          <p class="wizard-type-description">{{type.description}}</p>
-        </a>
-      </div>
+    <div class="kuiVerticalRhythm">
+      <a
+        class="wizard-type"
+        ng-repeat="type in visTypes.inTitleOrder"
+        ng-href="{{ visTypeUrl(type) }}"
+      >
+        <div class="wizard-type-heading">
+          <span
+            aria-hidden="true"
+            class="wizard-type-heading-icon fa fa-fw"
+            ng-class="type.icon"
+          ></span>
+
+          <h4
+            data-test-subj="visualizeWizardChartTypeTitle"
+            class="wizard-type-heading-text"
+          >
+            {{type.title}}
+          </h4>
+        </div>
+
+        <p class="wizard-type-description">{{type.description}}</p>
+      </a>
     </div>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_2.html b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
@@ -11,23 +11,30 @@
 </kbn-top-nav>
 
 <div class="kuiViewContent kuiViewContent--constrainedWidth">
-  <div class="wizard">
+  <div class="wizard kuiViewContentItem">
     <div class="wizard-column wizard-column--small">
-      <h3 class="wizard-sub-title">From a New Search, Select Index</h3>
+      <h1 class="kuiTitle kuiVerticalRhythm">
+        From a New Search, Select Index
+      </h1>
+
       <paginated-selectable-list
         per-page="20"
         list="indexPattern.list"
         user-make-url="makeUrl"
-        class="wizard-row"
+        class="wizard-row kuiVerticalRhythm"
       ></paginated-selectable-list>
     </div>
+
     <div class="wizard-column wizard-column--large">
-      <h3 class="wizard-sub-title">Or, From a Saved Search</h3>
+      <h2 class="kuiTitle kuiVerticalRhythm">
+        Or, From a Saved Search
+      </h2>
+
       <!-- Saved searches -->
       <saved-object-finder
         title="Saved Searches"
         type="searches"
-        class="wizard-row"
+        class="wizard-row kuiVerticalRhythm"
         make-url="step2WithSearchUrl"
       ></saved-object-finder>
     </div>