Home less to sass (2) (#22160)

packages/kbn-ui-framework/src/components/button/button_group/_button_group.scss

@@ -42,3 +42,10 @@
     text-align: center;
   }
 }
+
+// KuiButtonGroup doesn't pass down className, so can't create custom classname
+// So this little gem was being applied in Home/components/tutorial
+.eui-textCenter > .kuiButtonGroup,
+.text-center > .kuiButtonGroup {
+  display: inline-block;
+}

src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss

@@ -104,7 +104,7 @@
   color: $euiColorDarkShade;
   transition: color $euiAnimSpeedFast $euiAnimSlightResistance;
   flex: 1 1 auto;
-  @include truncate;
+  @include euiTextTruncate;
 
   // flexbox fix for IE10
   // http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements

src/core_plugins/kibana/public/home/_home.scss

@@ -0,0 +1,13 @@
+home-app {
+  background-color: $euiColorLightestShade;
+}
+
+.homPage {
+  min-height: 100vh;
+  max-width: 1200px;
+  margin: auto;
+}
+
+.homSampleDataSetCard {
+  flex-grow: 0; // IE FIX
+}

src/core_plugins/kibana/public/home/_index.scss

@@ -0,0 +1,2 @@
+@import './home';
+@import './components/index';

src/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap

@@ -52,11 +52,11 @@ exports[`apmUiEnabled 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="APM automatically collects in-depth performance metrics and errors from inside your applications."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial/apm"
@@ -68,7 +68,7 @@ exports[`apmUiEnabled 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="apmApp"
           />
@@ -84,11 +84,11 @@ exports[`apmUiEnabled 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/logging"
@@ -100,7 +100,7 @@ exports[`apmUiEnabled 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="loggingApp"
           />
@@ -116,11 +116,11 @@ exports[`apmUiEnabled 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Collect metrics from the operating system and services running on your servers."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/metrics"
@@ -132,7 +132,7 @@ exports[`apmUiEnabled 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="monitoringApp"
           />
@@ -148,11 +148,11 @@ exports[`apmUiEnabled 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Centralize security events for interactive investigation in ready-to-go visualizations."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/security"
@@ -164,7 +164,7 @@ exports[`apmUiEnabled 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="securityApp"
           />
@@ -190,7 +190,7 @@ exports[`apmUiEnabled 1`] = `
     wrap={false}
   >
     <EuiFlexItem
-      className="addDataFooterItem"
+      className="homAddData__footerItem"
       component="div"
       grow={true}
     >
@@ -221,7 +221,7 @@ exports[`apmUiEnabled 1`] = `
       </EuiText>
     </EuiFlexItem>
     <EuiFlexItem
-      className="addDataFooterItem"
+      className="homAddData__footerItem"
       component="div"
       grow={true}
     >
@@ -307,11 +307,11 @@ exports[`isNewKibanaInstance 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/logging"
@@ -323,7 +323,7 @@ exports[`isNewKibanaInstance 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="loggingApp"
           />
@@ -339,11 +339,11 @@ exports[`isNewKibanaInstance 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Collect metrics from the operating system and services running on your servers."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/metrics"
@@ -355,7 +355,7 @@ exports[`isNewKibanaInstance 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="monitoringApp"
           />
@@ -371,11 +371,11 @@ exports[`isNewKibanaInstance 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Centralize security events for interactive investigation in ready-to-go visualizations."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/security"
@@ -387,7 +387,7 @@ exports[`isNewKibanaInstance 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="securityApp"
           />
@@ -413,7 +413,7 @@ exports[`isNewKibanaInstance 1`] = `
     wrap={false}
   >
     <EuiFlexItem
-      className="addDataFooterItem addDataFooterItem_highlight"
+      className="homAddData__footerItem homAddData__footerItem--highlight"
       component="div"
       grow={true}
     >
@@ -444,7 +444,7 @@ exports[`isNewKibanaInstance 1`] = `
       </EuiText>
     </EuiFlexItem>
     <EuiFlexItem
-      className="addDataFooterItem addDataFooterItem_highlight"
+      className="homAddData__footerItem homAddData__footerItem--highlight"
       component="div"
       grow={true}
     >
@@ -530,11 +530,11 @@ exports[`render 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/logging"
@@ -546,7 +546,7 @@ exports[`render 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="loggingApp"
           />
@@ -562,11 +562,11 @@ exports[`render 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Collect metrics from the operating system and services running on your servers."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/metrics"
@@ -578,7 +578,7 @@ exports[`render 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="monitoringApp"
           />
@@ -594,11 +594,11 @@ exports[`render 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Centralize security events for interactive investigation in ready-to-go visualizations."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/security"
@@ -610,7 +610,7 @@ exports[`render 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="securityApp"
           />
@@ -636,7 +636,7 @@ exports[`render 1`] = `
     wrap={false}
   >
     <EuiFlexItem
-      className="addDataFooterItem"
+      className="homAddData__footerItem"
       component="div"
       grow={true}
     >
@@ -667,7 +667,7 @@ exports[`render 1`] = `
       </EuiText>
     </EuiFlexItem>
     <EuiFlexItem
-      className="addDataFooterItem"
+      className="homAddData__footerItem"
       component="div"
       grow={true}
     >

src/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`home directories should not render directory entry when showOnHomePage is false 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -120,7 +120,7 @@ exports[`home directories should not render directory entry when showOnHomePage
 
 exports[`home directories should render ADMIN directory entry in "Manage" panel 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -257,7 +257,7 @@ exports[`home directories should render ADMIN directory entry in "Manage" panel
 
 exports[`home directories should render DATA directory entry in "Explore Data" panel 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -394,7 +394,7 @@ exports[`home directories should render DATA directory entry in "Explore Data" p
 
 exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -512,7 +512,7 @@ exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
 
 exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when there are index patterns 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -630,7 +630,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when t
 
 exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when there are no index patterns 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -748,7 +748,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when th
 
 exports[`home should not contain RecentlyAccessed panel when there is no recentlyAccessed history 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -866,7 +866,7 @@ exports[`home should not contain RecentlyAccessed panel when there is no recentl
 
 exports[`home should render home component 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -1000,7 +1000,7 @@ exports[`home should render home component 1`] = `
 
 exports[`home welcome should show the normal home page if loading fails 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -1118,7 +1118,7 @@ exports[`home welcome should show the normal home page if loading fails 1`] = `
 
 exports[`home welcome should show the normal home page if welcome screen is disabled locally 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -1243,7 +1243,7 @@ exports[`home welcome should show the welcome screen if enabled, and there are n
 
 exports[`home welcome stores skip welcome setting if skipped 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody

src/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap

@@ -31,7 +31,7 @@ exports[`render 1`] = `
     wrap={true}
   >
     <EuiFlexItem
-      className="recentlyAccessedFlexItem"
+      className="homRecentlyAccessed__flexItem"
       component="div"
       grow={false}
     >
@@ -48,7 +48,7 @@ exports[`render 1`] = `
           key="0"
         >
           <EuiFlexItem
-            className="recentlyAccessedItem"
+            className="homRecentlyAccessed__item"
             component="div"
             grow={false}
             style={
@@ -58,11 +58,12 @@ exports[`render 1`] = `
             }
           >
             <EuiToolTip
+              anchorClassName="homRecentlyAccessed__anchor"
               content="label0"
               position="bottom"
             >
               <EuiLink
-                className="recentlyAccessedLongLink"
+                className="homRecentlyAccessed__longLink"
                 color="primary"
                 href="link0"
                 type="button"
@@ -76,7 +77,7 @@ exports[`render 1`] = `
           key="1"
         >
           <EuiFlexItem
-            className="recentlyAccessedSeparator"
+            className="homRecentlyAccessed__separator"
             component="div"
             grow={false}
           >
@@ -91,7 +92,7 @@ exports[`render 1`] = `
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem
-            className="recentlyAccessedItem"
+            className="homRecentlyAccessed__item"
             component="div"
             grow={false}
             style={
@@ -101,11 +102,12 @@ exports[`render 1`] = `
             }
           >
             <EuiToolTip
+              anchorClassName="homRecentlyAccessed__anchor"
               content="label1"
               position="bottom"
             >
               <EuiLink
-                className="recentlyAccessedLongLink"
+                className="homRecentlyAccessed__longLink"
                 color="primary"
                 href="link1"
                 type="button"

src/core_plugins/kibana/public/home/components/_add_data.scss

@@ -0,0 +1,20 @@
+.homAddData__card {
+  width: 250px;
+  min-width: 200px;
+  border: none;
+  box-shadow: none;
+}
+
+.homAddData__icon {
+  width: $euiSizeXL * 2;
+  height: $euiSizeXL * 2;
+}
+
+.homAddData__footerItem--highlight {
+  background-color: tintOrShade($euiColorPrimary, 90%, 70%);
+  padding: $euiSize;
+}
+
+.homAddData__footerItem {
+  text-align: center;
+}

src/core_plugins/kibana/public/home/components/_index.scss

@@ -0,0 +1,14 @@
+// Prefix all styles with "hom" to avoid conflicts.
+// Examples
+//   homChart
+//   homChart__legend
+//   homChart__legend--small
+//   homChart__legend-isLoading
+
+@import 'add_data';
+@import 'recently_accessed';
+@import 'synopsis';
+@import 'welcome';
+
+@import 'tutorial/tutorial';
+@import 'tutorial/radio_button_group';

src/core_plugins/kibana/public/home/components/_recently_accessed.scss

@@ -0,0 +1,29 @@
+@include euiBreakpoint('xs', 's') {
+  .homRecentlyAccessed__separator {
+    display: none;
+  }
+}
+
+.homRecentlyAccessed__item {
+  overflow: hidden;
+  max-width: 300px;
+}
+
+.homRecentlyAccessed__anchor {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.homRecentlyAccessed__longLink {
+  @include euiTextTruncate;
+  line-height: normal;
+}
+
+.homRecentlyAccessed__flexItem {
+  max-width: 1000px;
+}
+
+.homRecentlyAccessed__dropdownLink,
+.homRecentlyAccessed__dropdownLabel {
+  white-space: nowrap;
+}

src/core_plugins/kibana/public/home/components/_synopsis.scss

@@ -0,0 +1,27 @@
+// SASSTODO: Move out of being specifically in home
+// ML uses these classes as well
+.synopsis {
+  display: flex;
+  flex-grow: 1;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+
+    .synopsisTitle {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+.synopsisTitle {
+  font-size: $euiSize;
+  font-weight: normal;
+  color: $euiColorPrimary;
+}
+
+.synopsisIcon {
+  padding-top: $euiSizeS;
+}

src/core_plugins/kibana/public/home/components/_welcome.scss

@@ -0,0 +1,68 @@
+
+.homWelcome {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $euiZLevel9 + 1000;
+  background: inherit;
+  background-image: linear-gradient(0deg, $euiColorLightestShade 0%, $euiColorEmptyShade 100%);
+  opacity: 0;
+  overflow: auto;
+  animation: homWelcome_FadeIn $euiAnimSpeedExtraSlow $euiAnimSlightResistance 0s forwards;
+}
+
+.homWelcome::before {
+  // SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
+  // content: url(../assets/bg_top_branded.svg);
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.homWelcome::after {
+  // SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
+  // content: url(../assets/bg_bottom_branded.svg);
+  position: fixed;
+  bottom: -2px; // Hides an odd space at the bottom of the svg
+  left: 0;
+  z-index: 1;
+}
+
+.homWelcome__header {
+  position: relative;
+  padding: $euiSizeXL;
+  z-index: 10;
+}
+
+.homWelcome__logo {
+  margin-bottom: $euiSizeXL;
+  @include kibanaCircleLogo;
+  @include euiBottomShadowMedium;
+}
+
+.homWelcome__footerAction {
+  margin-right: $euiSizeS;
+}
+
+.homWelcome__content {
+  position: relative;
+  margin: auto;
+  max-width: 512px;
+  padding-left: $euiSizeXL;
+  padding-right: $euiSizeXL;
+  z-index: 10;
+}
+
+@keyframes homWelcome_FadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(200px), scale(0.75);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0), scale(1);
+  }
+}

src/core_plugins/kibana/public/home/components/add_data.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './add_data.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -42,13 +41,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
     const getApmCard = () =>  (
       <EuiFlexItem>
         <EuiCard
-          className="addDataCard"
+          className="homAddData__card"
-          icon={<EuiIcon className="addDataIcon" type="apmApp" />}
+          icon={<EuiIcon className="homAddData__icon" type="apmApp" />}
           title="APM"
           description="APM automatically collects in-depth performance metrics and errors from inside your applications."
           footer={
             <EuiButton
-              className="addDataButton"
+              className="homAddData__button"
               href="#/home/tutorial/apm"
             >
               Add APM
@@ -65,13 +64,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
 
         <EuiFlexItem>
           <EuiCard
-            className="addDataCard"
+            className="homAddData__card"
-            icon={<EuiIcon  className="addDataIcon" type="loggingApp" />}
+            icon={<EuiIcon  className="homAddData__icon" type="loggingApp" />}
             title="Logging"
             description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
             footer={
               <EuiButton
-                className="addDataButton"
+                className="homAddData__button"
                 href="#/home/tutorial_directory/logging"
               >
                 Add log data
@@ -82,13 +81,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
 
         <EuiFlexItem>
           <EuiCard
-            className="addDataCard"
+            className="homAddData__card"
-            icon={<EuiIcon className="addDataIcon" type="monitoringApp" />}
+            icon={<EuiIcon className="homAddData__icon" type="monitoringApp" />}
             title="Metrics"
             description="Collect metrics from the operating system and services running on your servers."
             footer={
               <EuiButton
-                className="addDataButton"
+                className="homAddData__button"
                 href="#/home/tutorial_directory/metrics"
               >
                 Add metric data
@@ -99,13 +98,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
 
         <EuiFlexItem>
           <EuiCard
-            className="addDataCard"
+            className="homAddData__card"
-            icon={<EuiIcon className="addDataIcon" type="securityApp" />}
+            icon={<EuiIcon className="homAddData__icon" type="securityApp" />}
             title="Security Analytics"
             description="Centralize security events for interactive investigation in ready-to-go visualizations."
             footer={
               <EuiButton
-                className="addDataButton"
+                className="homAddData__button"
                 href="#/home/tutorial_directory/security"
               >
                 Add security events
@@ -117,7 +116,7 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
     );
   };
 
-  const footerItemClasses = classNames('addDataFooterItem', { 'addDataFooterItem_highlight': isNewKibanaInstance });
+  const footerItemClasses = classNames('homAddData__footerItem', { 'homAddData__footerItem--highlight': isNewKibanaInstance });
 
   return (
     <EuiPanel paddingSize="l">

src/core_plugins/kibana/public/home/components/add_data.less

@@ -1,25 +0,0 @@
-.addDataCard {
-  width: 250px;
-  min-width: 200px;
-  border: none;
-  box-shadow: none;
-}
-
-.addDataIcon {
-  width: 64px;
-  height: 64px;
-}
-
-.addDataButton {
-  line-height: normal;
-}
-
-.addDataFooterItem_highlight {
-  background-color: #e6f2f6;
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
-.addDataFooterItem {
-  text-align: center;
-}

src/core_plugins/kibana/public/home/components/feature_directory.js

@@ -76,7 +76,6 @@ export class FeatureDirectory extends React.Component {
   renderTabs = () => {
     return this.tabs.map((tab, index) => (
       <EuiTab
-        className="homeDirectoryTab"
         onClick={() => this.onSelectedTabChanged(tab.id)}
         isSelected={tab.id === this.state.selectedTabId}
         key={index}
@@ -114,7 +113,7 @@ export class FeatureDirectory extends React.Component {
 
   render() {
     return (
-      <EuiPage className="home">
+      <EuiPage className="homPage">
         <EuiPageBody>
           <EuiTitle size="l">
             <h1>

src/core_plugins/kibana/public/home/components/home.js

@@ -141,7 +141,7 @@ export class Home extends Component {
     }
 
     return (
-      <EuiPage className="home">
+      <EuiPage className="homPage">
         <EuiPageBody>
           {recentlyAccessedPanel}
 

src/core_plugins/kibana/public/home/components/recently_accessed.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './recently_accessed.less';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
@@ -74,7 +73,7 @@ export class RecentlyAccessed extends Component {
             data-test-subj={`moreRecentlyAccessedItem${this.props.recentlyAccessed[i].id}`}
           >
             <EuiLink
-              className="recentlyAccessedDropwdownLink"
+              className="homRecentlyAccessed__dropdownLink"
               href={this.props.recentlyAccessed[i].link}
             >
               {this.props.recentlyAccessed[i].label}
@@ -90,7 +89,7 @@ export class RecentlyAccessed extends Component {
         data-test-subj="openMoreRecentlyAccessedPopover"
       >
         <EuiTextColor
-          className="recentlyAccessedDropdownLabel"
+          className="homRecentlyAccessed__dropdownLabel"
           color="subdued"
         >
           {`${dropdownLinks.length} more`}
@@ -127,7 +126,7 @@ export class RecentlyAccessed extends Component {
     let separator;
     if (includeSeparator) {
       separator = (
-        <EuiFlexItem grow={false} className="recentlyAccessedSeparator">
+        <EuiFlexItem grow={false} className="homRecentlyAccessed__separator">
           <EuiText>
             <EuiIcon
               type="dot"
@@ -147,16 +146,17 @@ export class RecentlyAccessed extends Component {
       <React.Fragment key={recentlyAccessedItem.id}>
         {separator}
         <EuiFlexItem
-          className="recentlyAccessedItem"
+          className="homRecentlyAccessed__item"
           style={style}
           grow={false}
         >
           <EuiToolTip
+            anchorClassName="homRecentlyAccessed__anchor"
             position="bottom"
             content={recentlyAccessedItem.label}
           >
             <EuiLink
-              className="recentlyAccessedLongLink"
+              className="homRecentlyAccessed__longLink"
               href={recentlyAccessedItem.link}
             >
               {recentlyAccessedItem.label}
@@ -205,7 +205,7 @@ export class RecentlyAccessed extends Component {
         <EuiSpacer size="s"/>
 
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" wrap>
-          <EuiFlexItem grow={false} className="recentlyAccessedFlexItem">
+          <EuiFlexItem grow={false} className="homRecentlyAccessed__flexItem">
             <EuiFlexGroup>
               {this.renderRecentlyAccessed()}
             </EuiFlexGroup>

src/core_plugins/kibana/public/home/components/recently_accessed.less

@@ -1,35 +0,0 @@
-@media only screen and (max-width: 768px) {
-  .recentlyAccessedSeparator {
-    display: none;
-  }
-}
-
-.recentlyAccessedItem {
-  overflow: hidden;
-  max-width: 300px;
-
-  .euiToolTipAnchor {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.recentlyAccessedLongLink {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: normal;
-}
-
-.recentlyAccessedFlexItem {
-  max-width: 1000px;
-}
-
-.recentlyAccessedDropwdownLink {
-  white-space: nowrap;
-  height: 18px;
-}
-
-.recentlyAccessedDropdownLabel {
-  white-space: nowrap;
-}

src/core_plugins/kibana/public/home/components/sample_data_set_card.js

@@ -145,7 +145,7 @@ export class SampleDataSetCard extends React.Component {
   render() {
     return (
       <EuiCard
-        className="sampleDataSetCard"
+        className="homSampleDataSetCard"
         image={this.props.previewUrl}
         title={this.props.name}
         description={this.props.description}

src/core_plugins/kibana/public/home/components/synopsis.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './synopsis.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {

src/core_plugins/kibana/public/home/components/synopsis.less

@@ -1,36 +0,0 @@
-@import (reference) "~ui/styles/variables.less";
-
-.synopsis {
-  display: flex;
-  flex-grow: 1;
-  cursor: pointer;
-}
-
-.synopsis:hover {
-  text-decoration: none;
-  .synopsisTitle {
-    text-decoration: underline;
-  }
-}
-
-.synopsis:focus {
-  text-decoration: none;
-
-  .synopsisPanel {
-    border: solid 1px @globalColorBlue;
-  }
-
-  .synopsisBody {
-    text-decoration: none;
-  }
-}
-
-.synopsisTitle {
-  font-size: 16px;
-  font-weight: normal;
-  color: @globalColorBlue;
-}
-
-.synopsisIcon {
-  padding-top: 8px;
-}

src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`should render content with markdown 1`] = `
 <Markdown
-  className="euiText euiTextColor--subdued tutorialContent"
+  className="euiText"
   markdown="I am *some* [content](https://en.wikipedia.org/wiki/Content) with \`markdown\`"
   openLinksInNewTab={true}
   whiteListedRules={

src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap

@@ -36,6 +36,7 @@ exports[`props exportedFieldsUrl 1`] = `
         >
           <h2>
             Great tutorial
+              
           </h2>
         </EuiTitle>
       </EuiFlexItem>
@@ -113,6 +114,7 @@ exports[`props iconType 1`] = `
         >
           <h2>
             Great tutorial
+              
           </h2>
         </EuiTitle>
       </EuiFlexItem>
@@ -164,19 +166,14 @@ exports[`props isBeta 1`] = `
         >
           <h2>
             Great tutorial
+              
+            <EuiBetaBadge
+              label="Beta"
+              tooltipPosition="top"
+            />
           </h2>
         </EuiTitle>
       </EuiFlexItem>
-      <EuiFlexItem
-        component="div"
-        grow={false}
-      >
-        <EuiBetaBadge
-          className="tutorialIntroBadge"
-          label="BETA"
-          tooltipPosition="top"
-        />
-      </EuiFlexItem>
     </EuiFlexGroup>
     <Content
       text="this is a great tutorial about..."
@@ -225,6 +222,7 @@ exports[`props previewUrl 1`] = `
         >
           <h2>
             Great tutorial
+              
           </h2>
         </EuiTitle>
       </EuiFlexItem>
@@ -285,6 +283,7 @@ exports[`render 1`] = `
         >
           <h2>
             Great tutorial
+              
           </h2>
         </EuiTitle>
       </EuiFlexItem>

src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`isCloudEnabled is false should not render instruction toggle when ON_PREM_ELASTIC_CLOUD instructions are not provided 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -38,7 +38,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
         size="l"
       />
       <div
-        className="text-center"
+        className="eui-textCenter"
       />
       <EuiSpacer
         size="l"
@@ -78,7 +78,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
 
 exports[`isCloudEnabled is false should render ON_PREM instructions with instruction toggle 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -115,7 +115,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
         size="l"
       />
       <div
-        className="text-center"
+        className="eui-textCenter"
       >
         <RadioButtonGroup
           buttons={
@@ -173,7 +173,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
 
 exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -210,7 +210,7 @@ exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`
         size="l"
       />
       <div
-        className="text-center"
+        className="eui-textCenter"
       />
       <EuiSpacer
         size="l"

src/core_plugins/kibana/public/home/components/tutorial/_radio_button_group.scss

@@ -0,0 +1,10 @@
+
+// remove space between buttons
+.homRadioButtonGroup__button {
+  margin-left: 0px !important;
+
+  // give primary button same border as secondary button so they are even heights when placed side-by-side
+  &.kuiButton--primary {
+    border: solid 1px $euiColorPrimary;
+  }
+}

src/core_plugins/kibana/public/home/components/tutorial/_tutorial.scss

@@ -0,0 +1,4 @@
+.homTutorial__notFoundPanel {
+  background: $euiColorEmptyShade;
+  padding: $euiSizeL;
+}

src/core_plugins/kibana/public/home/components/tutorial/content.js

@@ -26,7 +26,7 @@ const whiteListedRules = ['backticks', 'emphasis', 'link', 'list'];
 export function Content({ text }) {
   return (
     <Markdown
-      className="euiText euiTextColor--subdued tutorialContent"
+      className="euiText"
       markdown={text}
       openLinksInNewTab={true}
       whiteListedRules={whiteListedRules}

src/core_plugins/kibana/public/home/components/tutorial/instruction.js

@@ -81,7 +81,7 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT
   }
 
   return (
-    <div className="instruction">
+    <div>
 
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
         <EuiFlexItem grow={false}>

src/core_plugins/kibana/public/home/components/tutorial/introduction.js

@@ -73,9 +73,7 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
   let betaBadge;
   if (isBeta) {
     betaBadge = (
-      <EuiFlexItem grow={false}>
+      <EuiBetaBadge label="Beta" />
-        <EuiBetaBadge className="tutorialIntroBadge" label="BETA" />
-      </EuiFlexItem>
     );
   }
   return (
@@ -90,11 +88,11 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
           <EuiFlexItem grow={false}>
             <EuiTitle size="l">
               <h2>
-                {title}
+                {title} &nbsp;
+                {betaBadge}
               </h2>
             </EuiTitle>
           </EuiFlexItem>
-          {betaBadge}
         </EuiFlexGroup>
 
         <Content text={description} />

src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './radio_button_group.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -59,7 +58,7 @@ export class RadioButtonGroup extends React.Component {
       }
       return (
         <KuiButton
-          className="kuiRadioButton"
+          className="homRadioButtonGroup__button"
           buttonType={buttonType}
           onClick={handleOnClick}
           key={index}
@@ -74,7 +73,6 @@ export class RadioButtonGroup extends React.Component {
   render = () => {
     return (
       <KuiButtonGroup
-        className="radioButtonGroup"
         isUnited
       >
         {this.renderButtons()}

src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.less

@@ -1,10 +0,0 @@
-
-// remove space between buttons
-.kuiRadioButton {
-  margin-left: 0px !important;
-}
-
-// give primary button same border as secondary button so they are even heights when placed side-by-side
-.kuiRadioButton.kuiButton--primary {
-  border: solid 1px #0079a5;
-}

src/core_plugins/kibana/public/home/components/tutorial/tutorial.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './tutorial.less';
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -281,7 +280,7 @@ export class Tutorial extends React.Component {
     let content;
     if (this.state.notFound) {
       content = (
-        <div className="homePanel">
+        <div className="homTutorial__notFoundPanel">
           <EuiText>
             <p>
               Unable to find tutorial {this.props.tutorialId}
@@ -315,7 +314,7 @@ export class Tutorial extends React.Component {
           />
 
           <EuiSpacer />
-          <div className="text-center">
+          <div className="eui-textCenter">
             {this.renderInstructionSetsToggle()}
           </div>
 
@@ -329,7 +328,7 @@ export class Tutorial extends React.Component {
       );
     }
     return (
-      <EuiPage className="home">
+      <EuiPage className="homPage">
         <EuiPageBody>
 
           <div>

src/core_plugins/kibana/public/home/components/tutorial/tutorial.less

@@ -1,8 +0,0 @@
-.text-center > .kuiButtonGroup {
-  display: inline-block !important;
-}
-
-.homePanel {
-  background: white;
-  padding: 24px;
-}

src/core_plugins/kibana/public/home/components/tutorial_directory.js

@@ -149,7 +149,6 @@ export class TutorialDirectory extends React.Component {
   renderTabs = () => {
     return this.tabs.map((tab, index) => (
       <EuiTab
-        className="homeDirectoryTab"
         onClick={() => this.onSelectedTabChanged(tab.id)}
         isSelected={tab.id === this.state.selectedTabId}
         key={index}
@@ -214,7 +213,7 @@ export class TutorialDirectory extends React.Component {
 
   render() {
     return (
-      <EuiPage className="home">
+      <EuiPage className="homPage">
         <EuiPageBody>
 
           <a className="kuiLink" href="#/home">Home</a>

src/core_plugins/kibana/public/home/components/welcome.js

@@ -41,7 +41,7 @@ import {
  * Shows a full-screen welcome page that gives helpful quick links to beginners.
  */
 export class Welcome extends React.Component {
-  hideOnEsc = (e) => {
+  hideOnEsc = e => {
     if (e.key === 'Escape') {
       this.props.onSkip();
     }
@@ -59,21 +59,23 @@ export class Welcome extends React.Component {
     const { urlBasePath, onSkip } = this.props;
 
     return (
-      <div className="home-welcome">
+      <div className="homWelcome">
-        <header className="home-welcome-header">
+        <header className="homWelcome__header">
-          <div className="home-welcome-content eui-textCenter">
+          <div className="homWelcome__content eui-textCenter">
             <EuiSpacer size="xxl" />
-            <span className="home-welcome-logo">
+            <span className="homWelcome__logo">
               <EuiIcon type="logoKibana" size="xxl" />
             </span>
-            <EuiTitle size="l" className="home-welcome-title">
+            <EuiTitle size="l" className="homWelcome__title">
               <h1>Welcome to Kibana</h1>
             </EuiTitle>
-            <EuiText size="s" className="welcome-subtitle">Your window into the Elastic Stack</EuiText>
+            <EuiText size="s" color="subdued" className="homWelcome__subtitle">
+              <p>Your window into the Elastic Stack</p>
+            </EuiText>
             <EuiSpacer size="xl" />
           </div>
         </header>
-        <div className="home-welcome-content home-welcome-body">
+        <div className="homWelcome__content homWelcome-body">
           <EuiFlexGroup gutterSize="l">
             <EuiFlexItem>
               <EuiCard
@@ -82,24 +84,24 @@ export class Welcome extends React.Component {
                 title="Let's get started"
                 description="We noticed that you don't have any data in your cluster.
                   You can try our sample data and dashboards or jump in with your own data."
-                footer={(
+                footer={
                   <footer>
                     <EuiButton
                       fill
-                      className="home-welcome-footer-action"
+                      className="homWelcome__footerAction"
                       href="#/home/tutorial_directory/sampleData"
                     >
                       Try our sample data
                     </EuiButton>
                     <EuiButtonEmpty
-                      className="home-welcome-footer-action"
+                      className="homWelcome__footerAction"
                       onClick={onSkip}
                       data-test-subj="skipWelcomeScreen"
                     >
                       Explore on my own
                     </EuiButtonEmpty>
                   </footer>
-                )}
+                }
               />
             </EuiFlexItem>
           </EuiFlexGroup>

src/core_plugins/kibana/public/home/home.less

@@ -1,108 +1,7 @@
-@import (reference) "~ui/styles/variables.less";
+.homWelcome::before {
-
-home-app {
-  background-color: @globalColorLightestGray;
-}
-
-.home {
-  min-height: 100vh;
-  max-width: 1200px;
-  margin: auto;
-}
-
-.homeDirectory {
-  background: @white;
-  margin: 0;
-  border-left: 1px solid @globalColorLightGray;
-  border-right: 1px solid @globalColorLightGray;
-  border-bottom: 1px solid @globalColorLightGray;
-  padding: 16px;
-}
-
-.homeDirectoryTab {
-  background-color: @globalColorLightestGray;
-}
-
-.sampleDataSetCard {
-  flex-grow: 0;
-}
-
-.home-welcome {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 100000;
-  background: inherit;
-  // When sassified, should pull in EUI colors: $euiColorLightestShade, $euiColorEmptyShade
-  background-image: linear-gradient(0deg, @globalColorLightestGray 0%, white 100%);
-  color: inherit;
-  opacity: 0;
-  overflow: auto;
-  animation: homeFadeIn 0.5s ease-in 0s forwards;
-}
-
-.home-welcome::before {
   content: url(../assets/bg_top_branded.svg);
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
 }
 
-.home-welcome::after {
+.homWelcome::after {
   content: url(../assets/bg_bottom_branded.svg);
-  position: fixed;
-  bottom: -2px; // Hides an odd space at the bottom of the svg
-  left: 0;
-  z-index: 1;
-}
-
-.home-welcome-header {
-  position: relative;
-  padding: 32px;
-  z-index: 10;
-}
-
-.home-welcome-logo {
-  display: inline-block;
-  margin-bottom: 24px;
-  background-color: white;
-  border-radius: 100%;
-  padding: 16px;
-  box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.75);
-}
-
-.home-welcome-title {
-  color: inherit;
-  font-weight: 400;
-}
-
-.home-welcome-footer-action {
-  margin-right: 8px;
-}
-
-.welcome-subtitle {
-  opacity: 0.75;
-}
-
-.home-welcome-content {
-  position: relative;
-  margin: auto;
-  max-width: 512px;
-  padding-left: 32px;
-  padding-right: 32px;
-  z-index: 10;
-}
-
-@keyframes homeFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(200px), scale(0.75);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0), scale(1);
-  }
 }

src/core_plugins/kibana/public/index.scss

@@ -1,7 +1,10 @@
 @import '../../../../src/ui/public/styles/styling_constants';
 
 // Discover styles
-@import 'discover/index';
+@import './discover/index';
+
+// Home styles
+@import './home/index';
 
 // Dashboard styles
 // MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS

src/ui/public/styles/_styling_constants.scss

@@ -6,8 +6,16 @@
 @import '../../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
 
 // EUI TODO: Add this
-@mixin truncate($style: ellipsis) {
+@mixin kibanaCircleLogo() {
-  white-space: nowrap;
+  display: inline-block;
-  text-overflow: $style;
+  @include size($euiSizeXXL * 2);
-  overflow: hidden;
+  line-height: $euiSizeXXL * 2;
+  text-align: center;
+  background-color: $euiColorEmptyShade;
+  border-radius: 100%;
+  padding: $euiSize;
+
+  .euiIcon {
+    vertical-align: baseline;
+  }
 }