EUI css reset fixes (#15685)

* EUI css reset fixes
* Fix linting errors.

src/core_plugins/console/public/src/directives/help.html

@@ -1,40 +1,38 @@
-<h2 class="kuiLocalDropdownTitle">Help</h2>
+<h2 class="euiTitle">Help</h2>
 
-<tabset>
-  <tab heading="Request format">
-    <div class="list-group-item list-group-item--noBorder">
+<div class="euiSpacer euiSpacer--m"></div>
+
+<div class="euiPanel euiPanel--paddingLarge">
+  <div class="euiFlexGroup euiFlexGroup--gutterExtraLarge">
+    <div class="euiFlexItem">
+      <h2 class="euiTitle">Request format</h2>
+      <div class="euiSpacer euiSpacer--l"></div>
       You can type one or more requests in the white editor. Console understands requests in a compact format:
       <sense-help-example></sense-help-example>
     </div>
-  </tab>
-  <tab heading="Keyboard tips">
-    <div class="list-group-item list-group-item--noBorder">
-      <dl class="dl-horizontal">
-        <dt></dt>
-        <dd><strong>General editing</strong></dd>
-        <dt>Ctrl/Cmd + I</dt>
-        <dd>Auto indent current request</dd>
-        <dt>Ctrl + Space</dt>
-        <dd>Open Auto complete (even if not typing)</dd>
-        <dt>Ctrl/Cmd + Enter</dt>
-        <dd>Submit request</dd>
-        <dt>Ctrl/Cmd + Up/Down</dt>
-        <dd>Jump to the previous/next request start or end.</dd>
-        <dt>Ctrl/Cmd + Alt + L</dt>
-        <dd>Collapse/expand current scope.</dd>
-        <dt>Ctrl/Cmd + Option + 0</dt>
-        <dd>Collapse all scopes but the current one. Expand by adding a shift.</dd>
-      </dl>
-      <dl class="dl-horizontal">
-        <dt></dt>
-        <dd><strong>When auto-complete is visible</strong></dd>
-        <dt>Down arrow</dt>
-        <dd>Switch focus to auto-complete menu. Use arrows to further select a term</dd>
-        <dt>Enter/Tab</dt>
-        <dd>Select the currently selected or the top most term in auto-complete menu</dd>
-        <dt>Esc</dt>
-        <dd>Close auto-complete menu</dd>
+    <div class="euiFlexItem">
+      <h2 class="euiTitle">Keyboard commands</h2>
+      <div class="euiSpacer euiSpacer--l"></div>
+      <dl class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed">
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + I</dt>
+        <dd class="euiDescriptionList__description">Auto indent current request</dd>
+        <dt class="euiDescriptionList__title">Ctrl + Space</dt>
+        <dd class="euiDescriptionList__description">Open Auto complete (even if not typing)</dd>
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + Enter</dt>
+        <dd class="euiDescriptionList__description">Submit request</dd>
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + Up/Down</dt>
+        <dd class="euiDescriptionList__description">Jump to the previous/next request start or end.</dd>
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + Alt + L</dt>
+        <dd class="euiDescriptionList__description">Collapse/expand current scope.</dd>
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + Option + 0</dt>
+        <dd class="euiDescriptionList__description">Collapse all scopes but the current one. Expand by adding a shift.</dd>
+        <dt class="euiDescriptionList__title">Down arrow</dt>
+        <dd class="euiDescriptionList__description">Switch focus to auto-complete menu. Use arrows to further select a term</dd>
+        <dt class="euiDescriptionList__title">Enter/Tab</dt>
+        <dd class="euiDescriptionList__description">Select the currently selected or the top most term in auto-complete menu</dd>
+        <dt class="euiDescriptionList__title">Esc</dt>
+        <dd class="euiDescriptionList__description">Close auto-complete menu</dd>
       </dl>
     </div>
-  </tab>
-</tabset>
+  </div>
+</div>

src/core_plugins/console/public/src/directives/welcome.html

@@ -1,33 +1,37 @@
-<h2 class="kuiLocalDropdownTitle">Welcome to Console</h2>
-
-<p><strong>Quick intro to the UI</strong></p>
-
-<p>The Console UI is split into two panes: an editor pane (left) and a response pane (right).
-  Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
-  the response pane on the right side.
-</p>
-
-<p>Console understands requests in a compact format, similar to cURL:
-<sense-help-example></sense-help-example>
-
-<p>While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab.
-  These suggestions are made based on the request structure <i>as well as</i> your indices and types.
-</p>
-
-<p><strong>A few quick tips, while I have your attention</strong></p>
-<ul>
-  <li>Submit requests to ES using the green triangle button.</li>
-  <li>Use the wrench menu for other useful things.</li>
-  <li>You can paste requests in cURL format and they will be translated to the Console syntax.</li>
-  <li>You can resize the editor and output panes by dragging the separator between them.</li>
-  <li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li>
-</ul>
-
-<button
-  type="button"
-  class="kuiButton kuiButton--primary"
-  data-test-subj="help-close-button"
-  ng-click="kbnTopNav.close()"
->
-  Get to work
-</button>
+<div class="euiText">
+
+  <h2>Welcome to Console</h2>
+
+  <p><strong>Quick intro to the UI</strong></p>
+
+  <p>The Console UI is split into two panes: an editor pane (left) and a response pane (right).
+    Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
+    the response pane on the right side.
+  </p>
+
+  <p>Console understands requests in a compact format, similar to cURL:
+  <sense-help-example></sense-help-example>
+
+  <p>While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab.
+    These suggestions are made based on the request structure <i>as well as</i> your indices and types.
+  </p>
+
+  <p><strong>A few quick tips, while I have your attention</strong></p>
+  <ul>
+    <li>Submit requests to ES using the green triangle button.</li>
+    <li>Use the wrench menu for other useful things.</li>
+    <li>You can paste requests in cURL format and they will be translated to the Console syntax.</li>
+    <li>You can resize the editor and output panes by dragging the separator between them.</li>
+    <li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li>
+  </ul>
+
+  <button
+    type="button"
+    class="kuiButton kuiButton--primary"
+    data-test-subj="help-close-button"
+    ng-click="kbnTopNav.close()"
+  >
+    Get to work
+  </button>
+
+</div>

src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html

@@ -175,6 +175,7 @@
           class="kuiButton kuiButton--primary kuiButton--fullWidth">
           Add Range
         </div>
+        <div class="euiSpacer euiSpacer--s"></div>
         <div class="text text-center text-info">Note: colors can be changed in the legend</div>
       </div>
     </div>

src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html

@@ -170,6 +170,7 @@
         >
           Add Range
         </button>
+        <div class="euiSpacer euiSpacer--s"></div>
         <div class="text text-center text-info">Note: colors can be changed in the legend</div>
       </div>
     </div>

src/core_plugins/kibana/public/dashboard/styles/index.less

@@ -117,7 +117,7 @@
 .start-screen {
   margin: 20px auto;
   max-width: 800px;
-  background: tint(@globalColorBlue, 90%);
+  background: #FFF;
   padding: 40px;
   border-radius: 4px;
 }

src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html

@@ -9,13 +9,13 @@
       ></bread-crumbs>
 
       <!-- Tabs. -->
-      <div data-transclude-slot="bottomRow" class="kuiLocalTabs" role="tablist">
+      <div data-transclude-slot="bottomRow" class="euiTabs" role="tablist">
         <a
           role="tab"
           aria-selected="{{kbnDevToolsApp.currentPath === item.url}}"
           ng-repeat="item in kbnDevToolsApp.devTools"
-          class="kuiLocalTab"
-          ng-class="{'kuiLocalTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
+          class="euiTab"
+          ng-class="{'euiTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
           kbn-href="{{::item.url}}"
         >
           {{::item.display}}

src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html

@@ -1,6 +1,6 @@
 <div class="discover-field-details">
   <div class="kuiVerticalRhythmSmall">
-    <p class="kuiSubduedText" ng-show="!field.details.error">
+    <p class="euiText euiText--extraSmall euiTextColor--subdued" ng-show="!field.details.error">
       Top 5 values in
       <span ng-if="!field.details.error">
         <a
@@ -20,7 +20,7 @@
 
     <div class="clearfix"></div>
 
-    <div ng-if="field.details.error" class="discover-field-details-error">{{field.details.error}}</div>
+    <div ng-if="field.details.error" class="euiText euiText--extraSmall euiTextColor--subdued">{{field.details.error}}</div>
 
     <div ng-if="!field.details.error">
       <div ng-repeat="bucket in ::field.details.buckets" class="discover-field-details-item">

src/core_plugins/kibana/public/discover/index.html

@@ -65,7 +65,10 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
           <!-- loading -->
           <div ng-show="resultState === 'loading'">
             <div class="discover-overlay">
-              <h2>Searching</h2>
+              <div class="euiTitle">
+                <h2>Searching</h2>
+              </div>
+              <div class="euiSpacer euiSpacer--m"></div>
               <div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
             </div>
           </div>

src/core_plugins/kibana/public/discover/partials/no_results.html

@@ -1,5 +1,6 @@
-<div>
-  <div class="col-md-10 col-md-offset-1" data-test-subj="discoverNoResults">
+<div class="euiPage">
+
+  <div class="euiText" data-test-subj="discoverNoResults">
 
     <h1>No results found <i aria-hidden="true" class="fa fa-meh-o"></i></h1>
 
@@ -63,21 +64,46 @@ <h3>
         The search bar at the top uses Elasticsearch's support for Lucene <a class="kuiLink" documentation-href="query.luceneQuerySyntax" target="_blank" rel="noopener noreferrer">Query String syntax</a>. Let's say we're searching web server logs that have been parsed into a few fields.
       </p>
 
-      <h4>Examples:</h4>
-      Find requests that contain the number 200, in any field:
-      <pre>200</pre>
-
-      Or we can search in a specific field. Find 200 in the status field:
-      <pre>status:200</pre>
-
-      Find all status codes between 400-499:
-      <pre>status:[400 TO 499]</pre>
-
-      Find status codes 400-499 with the extension php:
-      <pre>status:[400 TO 499] AND extension:PHP</pre>
-
-      Or HTML
-      <pre>status:[400 TO 499] AND (extension:php OR extension:html)</pre>
+      <h4>Examples</h4>
+
+      <p>Find requests that contain the number 200, in any field:</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">200</pre>
+        </code>
+      </div>
+      <div class="euiSpacer euiSpacer--l"></div>
+
+      <p>Or we can search in a specific field. Find 200 in the status field:</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">status:200</pre>
+        </code>
+      </div>
+      <div class="euiSpacer euiSpacer--l"></div>
+
+      <p>Find all status codes between 400-499:</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">status:[400 TO 499]</pre>
+        </code>
+      </div>
+      <div class="euiSpacer euiSpacer--l"></div>
+
+      <p>Find status codes 400-499 with the extension php:</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">status:[400 TO 499] AND extension:PHP</pre>
+        </code>
+      </div>
+      <div class="euiSpacer euiSpacer--l"></div>
+
+      <p>Or HTML</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">status:[400 TO 499] AND (extension:php OR extension:html)</pre>
+        </code>
+      </div>
     </div>
 
   </div>

src/core_plugins/kibana/public/discover/styles/main.less

@@ -78,6 +78,7 @@
     bottom: 0;
     right: 0;
     z-index: 20;
+    padding-top: 10px;
 
     opacity: 0.75;
     text-align: center;
@@ -209,10 +210,6 @@
     white-space: nowrap;
   }
 
-  .discover-field-details-error {
-    margin-top: 5px;
-  }
-
   .discover-field-details-item {
     margin-top: 5px;
   }
@@ -222,6 +219,7 @@
   }
 
   .discover-field-details-item-title {
+    line-height: 1.5;
     display: flex;
     align-items: center;
     justify-content: space-between;