From 7f8ddaf827eb78bb0e1f6b77c10cc0c09039fcc1 Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Thu, 3 Sep 2020 12:19:37 -0400
Subject: [PATCH 1/7] clean up header styles; match obs header better

---
 .../public/application/components/home.js     |  8 ++-
 .../public/components/overview/overview.tsx   | 33 ++---------
 .../public/components/page_header.tsx         | 59 ++++++++++++-------
 3 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
index 8b6b83f097fd6..d0bb7c1049ccc 100644
--- a/src/plugins/home/public/application/components/home.js
+++ b/src/plugins/home/public/application/components/home.js
@@ -155,7 +155,7 @@ export class Home extends Component {
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup className="homHeader__actions">
                   <EuiFlexItem className="homHeader__actionItem">
-                    <EuiButtonEmpty href="#/tutorial_directory" iconType="indexOpen">
+                    <EuiButtonEmpty flush="right" href="#/tutorial_directory" iconType="indexOpen">
                       {i18n.translate('home.pageHeader.addDataButtonLabel', {
                         defaultMessage: 'Add data',
                       })}
@@ -165,8 +165,9 @@ export class Home extends Component {
                   {stackManagement ? (
                     <EuiFlexItem className="homHeader__actionItem">
                       <EuiButtonEmpty
-                        onClick={createAppNavigationHandler(stackManagement.path)}
+                        flush="right"
                         iconType="gear"
+                        onClick={createAppNavigationHandler(stackManagement.path)}
                       >
                         {i18n.translate('home.pageHeader.stackManagementButtonLabel', {
                           defaultMessage: 'Manage',
@@ -178,8 +179,9 @@ export class Home extends Component {
                   {devTools ? (
                     <EuiFlexItem className="homHeader__actionItem">
                       <EuiButtonEmpty
-                        onClick={createAppNavigationHandler(devTools.path)}
+                        flush="right"
                         iconType="wrench"
+                        onClick={createAppNavigationHandler(devTools.path)}
                       >
                         {i18n.translate('home.pageHeader.devToolsButtonLabel', {
                           defaultMessage: 'Dev tools',
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index e4997b0e6b6f5..69428e0a6d269 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { FC, useState, useEffect } from 'react';
 import { Observable } from 'rxjs';
 import {
@@ -296,35 +297,9 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
   };
 
   return (
-    <main className="kibanaOverviewWrapper" aria-labelledby="kibanaOverviewHeader__title">
-      <header className="kibanaOverviewHeader">
-        <div className="kibanaOverviewHeader__inner">
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiIcon type="logoKibana" size="xxl" />
-            </EuiFlexItem>
-            <EuiFlexGroup gutterSize="none" direction="column" justifyContent="spaceBetween">
-              <EuiFlexItem>
-                <EuiText>Visualize & analyze</EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <PageHeader
-                  title={
-                    <EuiTitle size="l">
-                      <h1 id="kibanaOverviewHeader__title">
-                        <FormattedMessage
-                          id="kibanaOverview.pageHeader.title"
-                          defaultMessage="Kibana"
-                        />
-                      </h1>
-                    </EuiTitle>
-                  }
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexGroup>
-        </div>
-      </header>
+    <main aria-labelledby="kibanaOverviewHeader__title" className="kibanaOverviewWrapper">
+      <PageHeader />
+
       <div className="kibanaOverviewContent">
         <EuiSpacer size="l" />
 
diff --git a/src/plugins/kibana_overview/public/components/page_header.tsx b/src/plugins/kibana_overview/public/components/page_header.tsx
index ebdee62729578..d0fc8773b3ecb 100644
--- a/src/plugins/kibana_overview/public/components/page_header.tsx
+++ b/src/plugins/kibana_overview/public/components/page_header.tsx
@@ -17,38 +17,55 @@
  * under the License.
  */
 
-import React, { FC } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
+import React from 'react';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 
-interface Props {
-  title: JSX.Element;
-}
-
-export const PageHeader: FC<Props> = ({ title }) => {
+export const PageHeader = () => {
   const devTools = { path: '/app/dev_tools#/console' };
   const stackManagement = { path: '/app/management' };
 
   return (
-    <div className="homPageHeaderContainer">
-      <header className="homPageHeader">
-        <EuiFlexGroup gutterSize="none">
-          <EuiFlexItem className="homPageHeader__titleWrapper">{title}</EuiFlexItem>
+    <header className="kibanaOverviewHeader">
+      <div className="kibanaOverviewHeader__inner">
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFlexGroup gutterSize="m" responsive={false}>
+              <EuiFlexItem grow={false}>
+                <EuiIcon type="logoKibana" size="xxl" />
+              </EuiFlexItem>
+
+              <EuiFlexItem>
+                <EuiTitle size="m">
+                  <h1 id="kibanaOverviewHeader__title">
+                    <FormattedMessage
+                      id="kibanaOverview.pageHeader.title"
+                      defaultMessage="Kibana"
+                    />
+                  </h1>
+                </EuiTitle>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup className="homPageHeader__menu" alignItems="flexEnd">
-              <EuiFlexItem className="homPageHeader__menuItem">
-                <EuiButtonEmpty href="#/tutorial_directory" iconType="plusInCircle">
+            <EuiFlexGroup className="kibanaOverviewHeader__actions">
+              <EuiFlexItem className="kibanaOverviewHeader__actionItem">
+                <EuiButtonEmpty flush="right" href="#/tutorial_directory" iconType="plusInCircle">
                   {i18n.translate('home.pageHeader.addDataButtonLabel', {
                     defaultMessage: 'Add data',
                   })}
                 </EuiButtonEmpty>
               </EuiFlexItem>
+
               {stackManagement ? (
-                <EuiFlexItem className="homPageHeader__menuItem">
+                <EuiFlexItem className="kibanaOverviewHeader__actionItem">
                   <EuiButtonEmpty
-                    onClick={createAppNavigationHandler(stackManagement.path)}
+                    flush="right"
                     iconType="gear"
+                    onClick={createAppNavigationHandler(stackManagement.path)}
                   >
                     {i18n.translate('home.pageHeader.stackManagementButtonLabel', {
                       defaultMessage: 'Manage',
@@ -56,11 +73,13 @@ export const PageHeader: FC<Props> = ({ title }) => {
                   </EuiButtonEmpty>
                 </EuiFlexItem>
               ) : null}
+
               {devTools ? (
-                <EuiFlexItem className="homPageHeader__menuItem">
+                <EuiFlexItem className="kibanaOverviewHeader__actionItem">
                   <EuiButtonEmpty
-                    onClick={createAppNavigationHandler(devTools.path)}
+                    flush="right"
                     iconType="wrench"
+                    onClick={createAppNavigationHandler(devTools.path)}
                   >
                     {i18n.translate('home.pageHeader.devToolsButtonLabel', {
                       defaultMessage: 'Dev tools',
@@ -71,7 +90,7 @@ export const PageHeader: FC<Props> = ({ title }) => {
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </header>
-    </div>
+      </div>
+    </header>
   );
 };

From 47171900402bc2f5d6ed5d6f0615f8752de01110 Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Thu, 3 Sep 2020 12:29:52 -0400
Subject: [PATCH 2/7] clean up footer styles

---
 .../home/public/application/components/home.js    |  1 +
 .../public/components/_overview.scss              | 11 +----------
 .../public/components/overview/overview.tsx       | 15 +++++----------
 3 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
index d0bb7c1049ccc..5898ce4a6944e 100644
--- a/src/plugins/home/public/application/components/home.js
+++ b/src/plugins/home/public/application/components/home.js
@@ -221,6 +221,7 @@ export class Home extends Component {
               <EuiFlexItem grow={false}>
                 {advancedSettings && (
                   <EuiButtonEmpty
+                    flush="left"
                     iconType="home"
                     onClick={createAppNavigationHandler(
                       '/app/management/kibana/settings#defaultRoute'
diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss
index e694eb8e2397b..0fc45136b4254 100644
--- a/src/plugins/kibana_overview/public/components/_overview.scss
+++ b/src/plugins/kibana_overview/public/components/_overview.scss
@@ -44,6 +44,7 @@ $pageWidth: 1200px;
   }
 }
 
+//not working? same with home? check importance
 .kibanaOverviewHeader__actionItem {
   @include euiBreakpoint('xs', 's') {
     margin-bottom: 0 !important;
@@ -57,13 +58,3 @@ $pageWidth: 1200px;
   padding: $euiSizeXL $euiSize;
   width: 100%;
 }
-
-.kibanaOverviewData--expanded {
-  flex-direction: column;
-
-  &,
-  & > * {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-  }
-}
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index 69428e0a6d269..5d3bb8a971007 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -301,21 +301,15 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
       <PageHeader />
 
       <div className="kibanaOverviewContent">
-        <EuiSpacer size="l" />
-
         {isNewKibanaInstance ? renderGettingStarted() : renderNormal()}
 
-        <footer>
-          <EuiHorizontalRule margin="xl" aria-hidden="true" />
+        <EuiHorizontalRule margin="xl" aria-hidden="true" />
 
-          <EuiFlexGroup
-            className="kibanaOverviewPageFooter"
-            alignItems="center"
-            gutterSize="s"
-            justifyContent="spaceBetween"
-          >
+        <footer className="kibanaOverviewFooter">
+          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
+                flush="left"
                 iconType="home"
                 onClick={createAppNavigationHandler('/app/management/kibana/settings#defaultRoute')}
                 size="xs"
@@ -326,6 +320,7 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
                 />
               </EuiButtonEmpty>
             </EuiFlexItem>
+
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
                 data-test-subj="allPlugins"

From 847ebfb0698637b35786f350006645886aed474b Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Thu, 3 Sep 2020 13:51:00 -0400
Subject: [PATCH 3/7] clean up getting started styles

---
 .../public/application/components/home.js     |  6 +-
 .../public/components/_overview.scss          | 22 ++++--
 .../public/components/overview/overview.tsx   | 70 +++++++++++--------
 .../public/components/page_header.tsx         | 29 ++++----
 4 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
index 5898ce4a6944e..f802e4880d1bc 100644
--- a/src/plugins/home/public/application/components/home.js
+++ b/src/plugins/home/public/application/components/home.js
@@ -147,7 +147,7 @@ export class Home extends Component {
               <EuiFlexItem>
                 <EuiTitle size="m">
                   <h1 id="homHeader__title">
-                    <FormattedMessage id="home.pageHeader.title" defaultMessage="Home" />
+                    <FormattedMessage id="home.header.title" defaultMessage="Home" />
                   </h1>
                 </EuiTitle>
               </EuiFlexItem>
@@ -229,7 +229,7 @@ export class Home extends Component {
                     size="xs"
                   >
                     <FormattedMessage
-                      id="home.changeHomeRouteLink"
+                      id="home.footer.changeHomeRouteLink"
                       defaultMessage="Display a different page on log in"
                     />
                   </EuiButtonEmpty>
@@ -245,7 +245,7 @@ export class Home extends Component {
                   iconType="apps"
                 >
                   <FormattedMessage
-                    id="home.appDirectory.appDirectoryButtonLabel"
+                    id="home.footer.appDirectoryButtonLabel"
                     defaultMessage="View app directory"
                   />
                 </EuiButtonEmpty>
diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss
index 0fc45136b4254..11428031c9760 100644
--- a/src/plugins/kibana_overview/public/components/_overview.scss
+++ b/src/plugins/kibana_overview/public/components/_overview.scss
@@ -20,41 +20,49 @@
 // Local page variables
 $pageWidth: 1200px;
 
-.kibanaOverviewWrapper {
+.kbnOverviewWrapper {
   background-color: $euiColorEmptyShade;
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - #{$euiHeaderHeightCompensation});
 }
 
-.kibanaOverviewHeader {
+.kbnOverviewHeader {
   background-color: $euiPageBackgroundColor;
   border-bottom: $euiBorderWidthThin solid $euiColorLightShade;
 }
 
-.kibanaOverviewHeader__inner {
+.kbnOverviewHeader__inner {
   margin: 0 auto;
   max-width: $pageWidth;
   padding: $euiSizeXL $euiSize;
 }
 
-#kibanaOverviewHeader__title {
+#kbnOverviewHeader__title {
   @include euiBreakpoint('xs', 's') {
     text-align: center;
   }
 }
 
-//not working? same with home? check importance
-.kibanaOverviewHeader__actionItem {
+// MICHAEL NOTE: not working? same with home? check importance
+.kbnOverviewHeader__actionItem {
   @include euiBreakpoint('xs', 's') {
     margin-bottom: 0 !important;
     margin-top: 0 !important;
   }
 }
 
-.kibanaOverviewContent {
+.kbnOverviewContent {
   margin: 0 auto;
   max-width: $pageWidth;
   padding: $euiSizeXL $euiSize;
   width: 100%;
 }
+
+.kbnOverviewGettingStarted__content {
+  display: block;
+}
+
+.kbnOverviewGettingStarted__apps .euiIcon__fillSecondary {
+  fill: $euiColorDarkestShade;
+}
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index 5d3bb8a971007..c293e4b4ee811 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -55,7 +55,7 @@ const apps = {
     description: i18n.translate('home.kibana.featureCatalogueDescription2', {
       defaultMessage: 'Search and find insights.',
     }),
-    icon: 'discoverApp',
+    icon: 'search',
     path: '/app/discover',
   },
   canvas: {
@@ -79,7 +79,7 @@ const apps = {
     description: i18n.translate('home.kibana.featureCatalogueDescription5', {
       defaultMessage: 'Model, predict, and detect.',
     }),
-    icon: 'machineLearningApp',
+    icon: 'compute',
     path: '/app/ml',
   },
   graph: {
@@ -143,13 +143,16 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
       : '/plugins/home/assets/kibana_montage_light_2x.png';
 
     return (
-      <section aria-labelledby="homOverview__gettingStartedTitle">
-        <EuiFlexGroup>
-          <EuiFlexItem>
+      <section
+        aria-labelledby="kbnOverviewGettingStarted__title"
+        className="kbnOverviewGettingStarted"
+      >
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem className="kbnOverviewGettingStarted__content">
             <EuiTitle size="s">
-              <h2 id="homOverview__gettingStartedTitle">
+              <h2 id="kbnOverviewGettingStarted__title">
                 <FormattedMessage
-                  id="kibanaOverview.gettingStartedTitle"
+                  id="kibana.overview.gettingStarted.title"
                   defaultMessage="Getting started with Kibana"
                 />
               </h2>
@@ -160,42 +163,50 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
             <EuiText>
               <p>
                 <FormattedMessage
-                  id="kibanaOverview.gettingStartedDescription"
                   defaultMessage="Kibana gives you the freedom to select the way you give shape to your data. With its interactive visualizations, start with one question and see where it leads you."
+                  id="kibana.overview.gettingStarted.description"
                 />
               </p>
             </EuiText>
 
-            <EuiSpacer size="m" />
+            <EuiSpacer size="xl" />
 
-            <EuiFlexGrid gutterSize="s" columns={2}>
-              {Object.values(apps).map(({ title, description, icon }) => (
+            <EuiFlexGrid className="kbnOverviewGettingStarted__apps" columns={2}>
+              {Object.values(apps).map(({ description, icon, title }) => (
                 <EuiFlexItem key={title}>
                   <EuiCard
-                    layout="horizontal"
-                    titleSize="xs"
-                    titleElement="h3"
-                    icon={<EuiIcon type={icon} size="m" />}
+                    description={description}
                     display="plain"
+                    icon={<EuiIcon size="l" type={icon} />}
+                    layout="horizontal"
+                    paddingSize="none"
                     title={title}
-                    description={description}
+                    titleElement="h3"
+                    titleSize="xs"
                   />
                 </EuiFlexItem>
               ))}
             </EuiFlexGrid>
+
+            <EuiSpacer size="xl" />
+
             <EuiButton
               fill
-              iconType="plusInCircle"
+              iconType="indexOpen"
               onClick={createAppNavigationHandler('app/management/kibana/indexPatterns')}
             >
               <FormattedMessage
-                id="kibanaOverview.gettingStarted.addDataButtonLabel"
                 defaultMessage="Begin by adding data"
+                id="kibana.overview.gettingStarted.addDataButtonLabel"
               />
             </EuiButton>
           </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiImage url={addBasePath(gettingStartedGraphicURL)} alt="" />
+
+          <EuiFlexItem className="kbnOverviewGettingStarted__graphic">
+            <EuiImage
+              alt="Kibana visualizations illustration"
+              url={addBasePath(gettingStartedGraphicURL)}
+            />
           </EuiFlexItem>
         </EuiFlexGroup>
       </section>
@@ -247,7 +258,7 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
             <EuiTitle>
               <h2 id="kibanaOveview__appsSectionTitle">
                 <FormattedMessage
-                  id="kibanaOverview.appsSection.title"
+                  id="kibana.overview.apps.title"
                   defaultMessage="Explore these apps"
                 />
               </h2>
@@ -265,10 +276,7 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
             <section aria-labelledby="kibanaOverview__kibanaNewsSectionTitle">
               <EuiTitle size="s">
                 <h2 className="kibanaOverview__kibanaNewsSectionTitle">
-                  <FormattedMessage
-                    id="kibanaOverview.kibanaNews.title"
-                    defaultMessage="Kibana news"
-                  />
+                  <FormattedMessage id="kibana.overview.news.title" defaultMessage="Kibana news" />
                 </h2>
               </EuiTitle>
               {newsFetchResult
@@ -284,7 +292,7 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
               <EuiTitle size="s">
                 <h2 className="kibanaOverview__doMoreSectionTitle">
                   <FormattedMessage
-                    id="kibanaOverview.doMoreTitle"
+                    id="kibana.overview.more.title"
                     defaultMessage="Do more with Elastic"
                   />
                 </h2>
@@ -297,15 +305,15 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
   };
 
   return (
-    <main aria-labelledby="kibanaOverviewHeader__title" className="kibanaOverviewWrapper">
+    <main aria-labelledby="kbnOverviewHeader__title" className="kbnOverviewWrapper">
       <PageHeader />
 
-      <div className="kibanaOverviewContent">
+      <div className="kbnOverviewContent">
         {isNewKibanaInstance ? renderGettingStarted() : renderNormal()}
 
         <EuiHorizontalRule margin="xl" aria-hidden="true" />
 
-        <footer className="kibanaOverviewFooter">
+        <footer className="kbnOverviewFooter">
           <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
@@ -315,7 +323,7 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
                 size="xs"
               >
                 <FormattedMessage
-                  id="home.changeHomeRouteLink"
+                  id="kibana.overview.changeHomeRouteLink"
                   defaultMessage="Display a different page on log in"
                 />
               </EuiButtonEmpty>
@@ -330,7 +338,7 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
                 iconType="apps"
               >
                 <FormattedMessage
-                  id="home.appDirectory.appDirectoryButtonLabel"
+                  id="kibana.overview.appDirectoryButtonLabel"
                   defaultMessage="View app directory"
                 />
               </EuiButtonEmpty>
diff --git a/src/plugins/kibana_overview/public/components/page_header.tsx b/src/plugins/kibana_overview/public/components/page_header.tsx
index d0fc8773b3ecb..acea85ba3d0a9 100644
--- a/src/plugins/kibana_overview/public/components/page_header.tsx
+++ b/src/plugins/kibana_overview/public/components/page_header.tsx
@@ -28,22 +28,19 @@ export const PageHeader = () => {
   const stackManagement = { path: '/app/management' };
 
   return (
-    <header className="kibanaOverviewHeader">
-      <div className="kibanaOverviewHeader__inner">
+    <header className="kbnOverviewHeader">
+      <div className="kbnOverviewHeader__inner">
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="m" responsive={false}>
               <EuiFlexItem grow={false}>
-                <EuiIcon type="logoKibana" size="xxl" />
+                <EuiIcon size="xxl" type="logoKibana" />
               </EuiFlexItem>
 
               <EuiFlexItem>
                 <EuiTitle size="m">
-                  <h1 id="kibanaOverviewHeader__title">
-                    <FormattedMessage
-                      id="kibanaOverview.pageHeader.title"
-                      defaultMessage="Kibana"
-                    />
+                  <h1 id="kbnOverviewHeader__title">
+                    <FormattedMessage id="kibana.overview.header.title" defaultMessage="Kibana" />
                   </h1>
                 </EuiTitle>
               </EuiFlexItem>
@@ -51,23 +48,23 @@ export const PageHeader = () => {
           </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup className="kibanaOverviewHeader__actions">
-              <EuiFlexItem className="kibanaOverviewHeader__actionItem">
-                <EuiButtonEmpty flush="right" href="#/tutorial_directory" iconType="plusInCircle">
-                  {i18n.translate('home.pageHeader.addDataButtonLabel', {
+            <EuiFlexGroup className="kbnOverviewHeader__actions">
+              <EuiFlexItem className="kbnOverviewHeader__actionItem">
+                <EuiButtonEmpty flush="right" href="#/tutorial_directory" iconType="indexOpen">
+                  {i18n.translate('kibana.overview.addDataButtonLabel', {
                     defaultMessage: 'Add data',
                   })}
                 </EuiButtonEmpty>
               </EuiFlexItem>
 
               {stackManagement ? (
-                <EuiFlexItem className="kibanaOverviewHeader__actionItem">
+                <EuiFlexItem className="kbnOverviewHeader__actionItem">
                   <EuiButtonEmpty
                     flush="right"
                     iconType="gear"
                     onClick={createAppNavigationHandler(stackManagement.path)}
                   >
-                    {i18n.translate('home.pageHeader.stackManagementButtonLabel', {
+                    {i18n.translate('kibana.overview.stackManagementButtonLabel', {
                       defaultMessage: 'Manage',
                     })}
                   </EuiButtonEmpty>
@@ -75,13 +72,13 @@ export const PageHeader = () => {
               ) : null}
 
               {devTools ? (
-                <EuiFlexItem className="kibanaOverviewHeader__actionItem">
+                <EuiFlexItem className="kbnOverviewHeader__actionItem">
                   <EuiButtonEmpty
                     flush="right"
                     iconType="wrench"
                     onClick={createAppNavigationHandler(devTools.path)}
                   >
-                    {i18n.translate('home.pageHeader.devToolsButtonLabel', {
+                    {i18n.translate('kibana.overview.devToolsButtonLabel', {
                       defaultMessage: 'Dev tools',
                     })}
                   </EuiButtonEmpty>

From d39fc3595205d3e4739705839c289e501a7d181b Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Thu, 3 Sep 2020 15:18:48 -0400
Subject: [PATCH 4/7] apply app card max width (& correct hp card calc)

---
 .../components/_solutions_section.scss        |  8 +-
 .../solutions_section/solutions_section.tsx   | 14 ++-
 .../public/components/_overview.scss          | 17 ++++
 .../public/components/overview/overview.tsx   | 96 ++++++++++++-------
 4 files changed, 90 insertions(+), 45 deletions(-)

diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss
index be693707e06b4..e80f817308b3e 100644
--- a/src/plugins/home/public/application/components/_solutions_section.scss
+++ b/src/plugins/home/public/application/components/_solutions_section.scss
@@ -30,10 +30,12 @@
 }
 
 .homSolutions__group {
-  max-width: 50%;
+  @include euiBreakpoint('l') {
+    max-width: calc(75% - #{$euiSizeM * 2});
+  }
 
-  @include euiBreakpoint('xs', 's') {
-    max-width: none;
+  @include euiBreakpoint('xl') {
+    max-width: calc(50% - #{$euiSizeM * 2});
   }
 }
 
diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
index 1a78a6c71030a..7d77788d48ece 100644
--- a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
@@ -49,14 +49,12 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions }) => {
     <>
       <section aria-labelledby="homSolutions__title" className="homSolutions">
         <EuiScreenReaderOnly>
-          <EuiTitle size="s">
-            <h2 id="homSolutions__title">
-              <FormattedMessage
-                id="home.solutionsSection.sectionTitle"
-                defaultMessage="Pick your solution"
-              />
-            </h2>
-          </EuiTitle>
+          <h2 id="homSolutions__title">
+            <FormattedMessage
+              id="home.solutionsSection.sectionTitle"
+              defaultMessage="Pick your solution"
+            />
+          </h2>
         </EuiScreenReaderOnly>
 
         <EuiFlexGroup className="homSolutions__content" justifyContent="spaceAround">
diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss
index 11428031c9760..e7c8d6e4220a7 100644
--- a/src/plugins/kibana_overview/public/components/_overview.scss
+++ b/src/plugins/kibana_overview/public/components/_overview.scss
@@ -66,3 +66,20 @@ $pageWidth: 1200px;
 .kbnOverviewGettingStarted__apps .euiIcon__fillSecondary {
   fill: $euiColorDarkestShade;
 }
+
+.kbnOverviewApps__item {
+  .kbnOverviewApps__group--primary & {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      max-width: calc(50% - #{$euiSizeM * 2});
+    }
+  }
+
+  .kbnOverviewApps__group--secondary & {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      max-width: calc(25% - #{$euiSizeM * 2});
+    }
+  }
+}
+
+// .kbnOverviewNews__content article {
+// }
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index c293e4b4ee811..e633c26bfd5c8 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -214,34 +214,47 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
   };
 
   const renderFeedItem = ({ title, description, link, publishOn }) => (
-    <div key={title}>
-      <EuiTitle size="xs">
-        <EuiLink href={link}>{title}</EuiLink>
-      </EuiTitle>
-      <EuiText size="xs" color="subdued">
-        <p>{publishOn.format('MMM DD, YYYY')}</p>
-      </EuiText>
+    <article key={title}>
+      <header>
+        <EuiTitle size="xs">
+          <h3>
+            <a href={link} target="_blank">
+              {title}
+            </a>
+          </h3>
+        </EuiTitle>
+
+        <EuiText size="xs" color="subdued">
+          <p>
+            <time dateTime={publishOn.format('YYYY-MM-DD')}>
+              {publishOn.format('MMM DD, YYYY')}
+            </time>
+          </p>
+        </EuiText>
+      </header>
+
       <EuiText size="xs">
         <p>{description}</p>
       </EuiText>
-    </div>
+    </article>
   );
 
   const renderAppCard = (appId: string) => {
     const app = apps[appId];
+
     return (
-      <EuiFlexItem key={appId}>
+      <EuiFlexItem className="kbnOverviewApps__item" key={appId}>
         <EuiCard
-          title={app.title}
-          titleSize="s"
           description={app.description}
+          href={addBasePath(app.path)}
           image={addBasePath(
             `/plugins/home/assets/kibana_${appId}_${IS_DARK_THEME ? 'dark' : 'light'}_2x.png`
           )}
           // isDisabled={!Boolean(directory)} TODO: should apps be hidden or disabled?
-          href={addBasePath(app.path)}
           onClick={createAppNavigationHandler(app.path)}
+          title={app.title}
           titleElement="h3"
+          titleSize="s"
         />
       </EuiFlexItem>
     );
@@ -253,44 +266,59 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
 
     return (
       <>
-        <section aria-labelledby="kibanaOveview__appsSectionTitle">
+        <section aria-labelledby="kbnOverviewApps__title" className="kbnOverviewApps">
           <EuiScreenReaderOnly>
-            <EuiTitle>
-              <h2 id="kibanaOveview__appsSectionTitle">
-                <FormattedMessage
-                  id="kibana.overview.apps.title"
-                  defaultMessage="Explore these apps"
-                />
-              </h2>
-            </EuiTitle>
+            <h2 id="kbnOverviewApps__title">
+              <FormattedMessage
+                id="kibana.overview.apps.title"
+                defaultMessage="Explore these apps"
+              />
+            </h2>
           </EuiScreenReaderOnly>
-          <EuiFlexGroup>{mainApps.map(renderAppCard)}</EuiFlexGroup>
+
+          <EuiFlexGroup
+            className="kbnOverviewApps__group kbnOverviewApps__group--primary"
+            justifyContent="center"
+          >
+            {mainApps.map(renderAppCard)}
+          </EuiFlexGroup>
+
           <EuiSpacer size="l" />
-          <EuiFlexGroup>{otherApps.map(renderAppCard)}</EuiFlexGroup>
+
+          <EuiFlexGroup
+            className="kbnOverviewApps__group kbnOverviewApps__group--secondary"
+            justifyContent="center"
+          >
+            {otherApps.map(renderAppCard)}
+          </EuiFlexGroup>
         </section>
 
-        <EuiHorizontalRule margin="xl" aria-hidden="true" />
+        <EuiHorizontalRule aria-hidden="true" margin="xl" />
 
         <EuiFlexGroup>
           <EuiFlexItem grow={1}>
-            <section aria-labelledby="kibanaOverview__kibanaNewsSectionTitle">
+            <section aria-labelledby="kbnOverviewNews__title" className="kbnOverviewNews">
               <EuiTitle size="s">
-                <h2 className="kibanaOverview__kibanaNewsSectionTitle">
+                <h2 id="kbnOverviewNews__title">
                   <FormattedMessage id="kibana.overview.news.title" defaultMessage="Kibana news" />
                 </h2>
               </EuiTitle>
-              {newsFetchResult
-                ? newsFetchResult.feedItems
-                    .slice(0, 3)
-                    .map(renderFeedItem)
-                    .reduce(addSpacersBetweenElementsReducer, [])
-                : null}
+
+              <div className="kbnOverviewNews__content">
+                {newsFetchResult
+                  ? newsFetchResult.feedItems
+                      .slice(0, 3)
+                      .map(renderFeedItem)
+                      .reduce(addSpacersBetweenElementsReducer, [])
+                  : null}
+              </div>
             </section>
           </EuiFlexItem>
+
           <EuiFlexItem grow={3}>
-            <section aria-labelledby="kibanaOverview__doMoreSectionTitle">
+            <section aria-labelledby="kbnOverviewMore__title" className="kbnOverviewMore">
               <EuiTitle size="s">
-                <h2 className="kibanaOverview__doMoreSectionTitle">
+                <h2 id="kbnOverviewMore__title">
                   <FormattedMessage
                     id="kibana.overview.more.title"
                     defaultMessage="Do more with Elastic"

From a1f99794041e606a82b3683f2a92c4357e58fcd8 Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Thu, 3 Sep 2020 15:54:34 -0400
Subject: [PATCH 5/7] clean up news styles

---
 .../public/components/_overview.scss          | 14 ++++++--
 .../public/components/overview/overview.tsx   | 32 ++++++-------------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss
index e7c8d6e4220a7..0c73cec49ce6f 100644
--- a/src/plugins/kibana_overview/public/components/_overview.scss
+++ b/src/plugins/kibana_overview/public/components/_overview.scss
@@ -81,5 +81,15 @@ $pageWidth: 1200px;
   }
 }
 
-// .kbnOverviewNews__content article {
-// }
+.kbnOverviewNews__content article {
+  & + article {
+    margin-top: $euiSizeL;
+  }
+
+  &,
+  header {
+    & > * + * {
+      margin-top: $euiSizeXS;
+    }
+  }
+}
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index e633c26bfd5c8..4d948229af85d 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -96,19 +96,6 @@ interface Props {
   newsfeed$: Observable<FetchResult | null | void>;
 }
 
-const addSpacersBetweenElementsReducer = (
-  acc: JSX.Element[],
-  element: JSX.Element,
-  index: number,
-  elements: JSX.Element[]
-) => {
-  acc.push(element);
-  if (index < elements.length - 1) {
-    acc.push(<EuiSpacer key={`homeSolutionsPanel__UseCaseSpacer${index}`} size="m" />);
-  }
-  return acc;
-};
-
 export const Overview: FC<Props> = ({ newsfeed$ }) => {
   const [isNewKibanaInstance, setNewKibanaInstance] = useState(false);
   const [newsFetchResult, setNewsFetchResult] = useState<FetchResult | null | void>(null);
@@ -216,18 +203,18 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
   const renderFeedItem = ({ title, description, link, publishOn }) => (
     <article key={title}>
       <header>
-        <EuiTitle size="xs">
+        <EuiTitle size="xxs">
           <h3>
-            <a href={link} target="_blank">
+            <EuiLink href={link} target="_blank">
               {title}
-            </a>
+            </EuiLink>
           </h3>
         </EuiTitle>
 
         <EuiText size="xs" color="subdued">
           <p>
             <time dateTime={publishOn.format('YYYY-MM-DD')}>
-              {publishOn.format('MMM DD, YYYY')}
+              {publishOn.format('DD MMMM YYYY')}
             </time>
           </p>
         </EuiText>
@@ -304,13 +291,10 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
                 </h2>
               </EuiTitle>
 
+              <EuiSpacer size="m" />
+
               <div className="kbnOverviewNews__content">
-                {newsFetchResult
-                  ? newsFetchResult.feedItems
-                      .slice(0, 3)
-                      .map(renderFeedItem)
-                      .reduce(addSpacersBetweenElementsReducer, [])
-                  : null}
+                {newsFetchResult ? newsFetchResult.feedItems.slice(0, 3).map(renderFeedItem) : null}
               </div>
             </section>
           </EuiFlexItem>
@@ -325,6 +309,8 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
                   />
                 </h2>
               </EuiTitle>
+
+              <EuiSpacer size="m" />
             </section>
           </EuiFlexItem>
         </EuiFlexGroup>

From d2ddaa48ff9164e0c7370359c330a8e77263a662 Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Thu, 3 Sep 2020 16:47:46 -0400
Subject: [PATCH 6/7] tweak responsive styles for small viewports

---
 .../application/components/_add_data.scss     | 11 +++++++
 .../public/application/components/_home.scss  | 28 ++++++++++-------
 .../components/add_data/add_data.tsx          | 11 ++-----
 .../public/application/components/home.js     | 14 ++++-----
 .../public/components/_overview.scss          | 30 +++++++++++--------
 .../public/components/overview/overview.tsx   |  2 --
 .../public/components/page_header.tsx         | 12 ++++----
 7 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/src/plugins/home/public/application/components/_add_data.scss b/src/plugins/home/public/application/components/_add_data.scss
index e588edfe35240..655c4742bcf5a 100644
--- a/src/plugins/home/public/application/components/_add_data.scss
+++ b/src/plugins/home/public/application/components/_add_data.scss
@@ -17,6 +17,17 @@
  * under the License.
  */
 
+.homDataAdd__actions {
+  // Prevent children from rendering as flex items
+  display: block;
+
+  // Accounting for no `flush="both"` prop on EuiButtonEmpty
+  .euiButtonEmpty__content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
 .homDataAdd__content .euiIcon__fillSecondary {
   fill: $euiColorDarkestShade;
 }
diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss
index d9b7602971e8d..0cbb08c43d11c 100644
--- a/src/plugins/home/public/application/components/_home.scss
+++ b/src/plugins/home/public/application/components/_home.scss
@@ -42,17 +42,10 @@ $homePageWidth: 1200px;
   }
 }
 
-#homHeader__title {
-  @include euiBreakpoint('xs', 's') {
-    text-align: center;
-  }
-}
-
-.homHeader__actionItem {
-  @include euiBreakpoint('xs', 's') {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-  }
+// Accounting for no `flush="both"` prop on EuiButtonEmpty
+.homHeader__actionItem .euiButtonEmpty__content {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .homContent {
@@ -71,3 +64,16 @@ $homePageWidth: 1200px;
     margin-top: 0 !important;
   }
 }
+
+.homFooter {
+  // Prevent children from rendering as flex items
+  .euiFlexItem {
+    display: block;
+  }
+
+  // Accounting for no `flush="both"` prop on EuiButtonEmpty
+  .euiButtonEmpty__content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/src/plugins/home/public/application/components/add_data/add_data.tsx b/src/plugins/home/public/application/components/add_data/add_data.tsx
index 82f0020b1b389..7b6156e5d8510 100644
--- a/src/plugins/home/public/application/components/add_data/add_data.tsx
+++ b/src/plugins/home/public/application/components/add_data/add_data.tsx
@@ -34,7 +34,7 @@ interface Props {
 
 export const AddData: FC<Props> = ({ addBasePath, features }) => (
   <section className="homDataAdd" aria-labelledby="homDataAdd__title">
-    <EuiFlexGroup alignItems="center" responsive={false}>
+    <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={1}>
         <EuiTitle size="s">
           <h2 id="homDataAdd__title">
@@ -43,13 +43,8 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => (
         </EuiTitle>
       </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButtonEmpty
-          iconType="visTable"
-          href="#/tutorial_directory/sampleData"
-          size="xs"
-          flush="right"
-        >
+      <EuiFlexItem className="homDataAdd__actions" grow={false}>
+        <EuiButtonEmpty iconType="visTable" href="#/tutorial_directory/sampleData" size="xs">
           <FormattedMessage
             id="home.addData.sampleDataButtonLabel"
             defaultMessage="Try our sample data"
diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
index f802e4880d1bc..7a8b32a363d04 100644
--- a/src/plugins/home/public/application/components/home.js
+++ b/src/plugins/home/public/application/components/home.js
@@ -153,9 +153,9 @@ export class Home extends Component {
               </EuiFlexItem>
 
               <EuiFlexItem grow={false}>
-                <EuiFlexGroup className="homHeader__actions">
-                  <EuiFlexItem className="homHeader__actionItem">
-                    <EuiButtonEmpty flush="right" href="#/tutorial_directory" iconType="indexOpen">
+                <EuiFlexGroup className="homHeader__actions" responsive={false} wrap>
+                  <EuiFlexItem className="homHeader__actionItem" grow={false}>
+                    <EuiButtonEmpty href="#/tutorial_directory" iconType="indexOpen">
                       {i18n.translate('home.pageHeader.addDataButtonLabel', {
                         defaultMessage: 'Add data',
                       })}
@@ -163,9 +163,8 @@ export class Home extends Component {
                   </EuiFlexItem>
 
                   {stackManagement ? (
-                    <EuiFlexItem className="homHeader__actionItem">
+                    <EuiFlexItem className="homHeader__actionItem" grow={false}>
                       <EuiButtonEmpty
-                        flush="right"
                         iconType="gear"
                         onClick={createAppNavigationHandler(stackManagement.path)}
                       >
@@ -177,9 +176,8 @@ export class Home extends Component {
                   ) : null}
 
                   {devTools ? (
-                    <EuiFlexItem className="homHeader__actionItem">
+                    <EuiFlexItem className="homHeader__actionItem" grow={false}>
                       <EuiButtonEmpty
-                        flush="right"
                         iconType="wrench"
                         onClick={createAppNavigationHandler(devTools.path)}
                       >
@@ -221,7 +219,6 @@ export class Home extends Component {
               <EuiFlexItem grow={false}>
                 {advancedSettings && (
                   <EuiButtonEmpty
-                    flush="left"
                     iconType="home"
                     onClick={createAppNavigationHandler(
                       '/app/management/kibana/settings#defaultRoute'
@@ -241,7 +238,6 @@ export class Home extends Component {
                   data-test-subj="allPlugins"
                   href="#/feature_directory"
                   size="xs"
-                  flush="right"
                   iconType="apps"
                 >
                   <FormattedMessage
diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss
index 0c73cec49ce6f..aef641603b1af 100644
--- a/src/plugins/kibana_overview/public/components/_overview.scss
+++ b/src/plugins/kibana_overview/public/components/_overview.scss
@@ -38,18 +38,10 @@ $pageWidth: 1200px;
   padding: $euiSizeXL $euiSize;
 }
 
-#kbnOverviewHeader__title {
-  @include euiBreakpoint('xs', 's') {
-    text-align: center;
-  }
-}
-
-// MICHAEL NOTE: not working? same with home? check importance
-.kbnOverviewHeader__actionItem {
-  @include euiBreakpoint('xs', 's') {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-  }
+// Accounting for no `flush="both"` prop on EuiButtonEmpty
+.kbnOverviewHeader__actionItem .euiButtonEmpty__content {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .kbnOverviewContent {
@@ -59,6 +51,7 @@ $pageWidth: 1200px;
   width: 100%;
 }
 
+// Prevent children from rendering as flex items
 .kbnOverviewGettingStarted__content {
   display: block;
 }
@@ -93,3 +86,16 @@ $pageWidth: 1200px;
     }
   }
 }
+
+.kbnOverviewFooter {
+  // Prevent children from rendering as flex items
+  .euiFlexItem {
+    display: block;
+  }
+
+  // Accounting for no `flush="both"` prop on EuiButtonEmpty
+  .euiButtonEmpty__content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index 4d948229af85d..eb6e2631f02d2 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -331,7 +331,6 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
           <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
-                flush="left"
                 iconType="home"
                 onClick={createAppNavigationHandler('/app/management/kibana/settings#defaultRoute')}
                 size="xs"
@@ -348,7 +347,6 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
                 data-test-subj="allPlugins"
                 href="#/feature_directory"
                 size="xs"
-                flush="right"
                 iconType="apps"
               >
                 <FormattedMessage
diff --git a/src/plugins/kibana_overview/public/components/page_header.tsx b/src/plugins/kibana_overview/public/components/page_header.tsx
index acea85ba3d0a9..7d968e3a965ad 100644
--- a/src/plugins/kibana_overview/public/components/page_header.tsx
+++ b/src/plugins/kibana_overview/public/components/page_header.tsx
@@ -48,9 +48,9 @@ export const PageHeader = () => {
           </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup className="kbnOverviewHeader__actions">
-              <EuiFlexItem className="kbnOverviewHeader__actionItem">
-                <EuiButtonEmpty flush="right" href="#/tutorial_directory" iconType="indexOpen">
+            <EuiFlexGroup className="kbnOverviewHeader__actions" responsive={false} wrap>
+              <EuiFlexItem className="kbnOverviewHeader__actionItem" grow={false}>
+                <EuiButtonEmpty href="#/tutorial_directory" iconType="indexOpen">
                   {i18n.translate('kibana.overview.addDataButtonLabel', {
                     defaultMessage: 'Add data',
                   })}
@@ -58,9 +58,8 @@ export const PageHeader = () => {
               </EuiFlexItem>
 
               {stackManagement ? (
-                <EuiFlexItem className="kbnOverviewHeader__actionItem">
+                <EuiFlexItem className="kbnOverviewHeader__actionItem" grow={false}>
                   <EuiButtonEmpty
-                    flush="right"
                     iconType="gear"
                     onClick={createAppNavigationHandler(stackManagement.path)}
                   >
@@ -72,9 +71,8 @@ export const PageHeader = () => {
               ) : null}
 
               {devTools ? (
-                <EuiFlexItem className="kbnOverviewHeader__actionItem">
+                <EuiFlexItem className="kbnOverviewHeader__actionItem" grow={false}>
                   <EuiButtonEmpty
-                    flush="right"
                     iconType="wrench"
                     onClick={createAppNavigationHandler(devTools.path)}
                   >

From 89b2608a889609a2bc1f2a41b599fee3c8458a34 Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Thu, 3 Sep 2020 17:10:19 -0400
Subject: [PATCH 7/7] cleanup

---
 .../public/components/overview/overview.tsx   | 38 +++++++++----------
 .../public/components/page_header.tsx         |  8 ++--
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index eb6e2631f02d2..7814c30b010a8 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -20,23 +20,23 @@
 import React, { FC, useState, useEffect } from 'react';
 import { Observable } from 'rxjs';
 import {
-  EuiTitle,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiCard,
+  EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiImage,
-  EuiText,
-  EuiFlexGrid,
-  EuiCard,
-  EuiButton,
-  EuiIcon,
-  EuiSpacer,
   EuiHorizontalRule,
-  EuiScreenReaderOnly,
-  EuiButtonEmpty,
+  EuiIcon,
+  EuiImage,
   EuiLink,
+  EuiScreenReaderOnly,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { createAppNavigationHandler } from '../../app_navigation_handler';
 import { getServices } from '../../kibana_services';
 import { PageHeader } from '../page_header';
@@ -44,7 +44,7 @@ import { PageHeader } from '../page_header';
 const apps = {
   dashboard: {
     title: 'Dashboard',
-    description: i18n.translate('home.kibana.featureCatalogueDescription1', {
+    description: i18n.translate('kibana.overview.apps.featureCatalogueDescription1', {
       defaultMessage: 'Analyze data in dashboards.',
     }),
     icon: 'dashboardApp',
@@ -52,7 +52,7 @@ const apps = {
   },
   discover: {
     title: 'Discover',
-    description: i18n.translate('home.kibana.featureCatalogueDescription2', {
+    description: i18n.translate('kibana.overview.apps.featureCatalogueDescription2', {
       defaultMessage: 'Search and find insights.',
     }),
     icon: 'search',
@@ -60,7 +60,7 @@ const apps = {
   },
   canvas: {
     title: 'Canvas',
-    description: i18n.translate('home.kibana.featureCatalogueDescription3', {
+    description: i18n.translate('kibana.overview.apps.featureCatalogueDescription3', {
       defaultMessage: 'Design pixel-perfect reports.',
     }),
     icon: 'canvasApp',
@@ -68,7 +68,7 @@ const apps = {
   },
   maps: {
     title: 'Maps',
-    description: i18n.translate('home.kibana.featureCatalogueDescription4', {
+    description: i18n.translate('kibana.overview.apps.featureCatalogueDescription4', {
       defaultMessage: 'Plot geographic data.',
     }),
     icon: 'gisApp',
@@ -76,7 +76,7 @@ const apps = {
   },
   ml: {
     title: 'Machine Learning',
-    description: i18n.translate('home.kibana.featureCatalogueDescription5', {
+    description: i18n.translate('kibana.overview.apps.featureCatalogueDescription5', {
       defaultMessage: 'Model, predict, and detect.',
     }),
     icon: 'compute',
@@ -84,7 +84,7 @@ const apps = {
   },
   graph: {
     title: 'Graph',
-    description: i18n.translate('home.kibana.featureCatalogueDescription6', {
+    description: i18n.translate('kibana.overview.apps.featureCatalogueDescription6', {
       defaultMessage: 'Reveal patterns and relationships.',
     }),
     icon: 'graphApp',
@@ -336,7 +336,7 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
                 size="xs"
               >
                 <FormattedMessage
-                  id="kibana.overview.changeHomeRouteLink"
+                  id="kibana.overview.footer.changeHomeRouteLink"
                   defaultMessage="Display a different page on log in"
                 />
               </EuiButtonEmpty>
@@ -350,7 +350,7 @@ export const Overview: FC<Props> = ({ newsfeed$ }) => {
                 iconType="apps"
               >
                 <FormattedMessage
-                  id="kibana.overview.appDirectoryButtonLabel"
+                  id="kibana.overview.footer.appDirectoryButtonLabel"
                   defaultMessage="View app directory"
                 />
               </EuiButtonEmpty>
diff --git a/src/plugins/kibana_overview/public/components/page_header.tsx b/src/plugins/kibana_overview/public/components/page_header.tsx
index 7d968e3a965ad..3282f463cb0ee 100644
--- a/src/plugins/kibana_overview/public/components/page_header.tsx
+++ b/src/plugins/kibana_overview/public/components/page_header.tsx
@@ -40,7 +40,7 @@ export const PageHeader = () => {
               <EuiFlexItem>
                 <EuiTitle size="m">
                   <h1 id="kbnOverviewHeader__title">
-                    <FormattedMessage id="kibana.overview.header.title" defaultMessage="Kibana" />
+                    <FormattedMessage defaultMessage="Kibana" id="kibana.overview.header.title" />
                   </h1>
                 </EuiTitle>
               </EuiFlexItem>
@@ -51,7 +51,7 @@ export const PageHeader = () => {
             <EuiFlexGroup className="kbnOverviewHeader__actions" responsive={false} wrap>
               <EuiFlexItem className="kbnOverviewHeader__actionItem" grow={false}>
                 <EuiButtonEmpty href="#/tutorial_directory" iconType="indexOpen">
-                  {i18n.translate('kibana.overview.addDataButtonLabel', {
+                  {i18n.translate('kibana.overview.header.addDataButtonLabel', {
                     defaultMessage: 'Add data',
                   })}
                 </EuiButtonEmpty>
@@ -63,7 +63,7 @@ export const PageHeader = () => {
                     iconType="gear"
                     onClick={createAppNavigationHandler(stackManagement.path)}
                   >
-                    {i18n.translate('kibana.overview.stackManagementButtonLabel', {
+                    {i18n.translate('kibana.overview.header.stackManagementButtonLabel', {
                       defaultMessage: 'Manage',
                     })}
                   </EuiButtonEmpty>
@@ -76,7 +76,7 @@ export const PageHeader = () => {
                     iconType="wrench"
                     onClick={createAppNavigationHandler(devTools.path)}
                   >
-                    {i18n.translate('kibana.overview.devToolsButtonLabel', {
+                    {i18n.translate('kibana.overview.header.devToolsButtonLabel', {
                       defaultMessage: 'Dev tools',
                     })}
                   </EuiButtonEmpty>