[Core UI] Kibana Overview Page Style Fixes, Part 4

src/plugins/home/public/application/components/_add_data.scss

@@ -17,17 +17,7 @@
  * 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;
+// Accounting for no `flush="both"` prop on EuiButtonEmpty
+.homDataAdd__actionButton {
+  margin-right: 0;
 }

src/plugins/home/public/application/components/_home.scss

@@ -17,40 +17,16 @@
  * under the License.
  */
 
-// Local page variables
-$homePageWidth: 1200px;
-
 .homWrapper {
   background-color: $euiColorEmptyShade;
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - #{$euiHeaderHeightCompensation});
 }
 
-.homHeader {
-  background-color: $euiPageBackgroundColor;
-  border-bottom: $euiBorderWidthThin solid $euiColorLightShade;
-
-  .homHeader__inner {
-    margin: 0 auto;
-    max-width: $homePageWidth;
-    padding: $euiSizeXL $euiSize;
-
-    .homHeader--hasSolutions & {
-      padding-bottom: $euiSizeXL + $euiSizeL;
-    }
-  }
-
-  // Accounting for no `flush="both"` prop on EuiButtonEmpty
-  .homHeader__actionItem .euiButtonEmpty__content {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
 .homContent {
   margin: 0 auto;
-  max-width: $homePageWidth;
+  max-width: 1200px;
   padding: $euiSizeXL $euiSize;
   width: 100%;
 }
@@ -64,16 +40,3 @@ $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;
-  }
-}

src/plugins/home/public/application/components/_index.scss

@@ -7,7 +7,6 @@
 
 @import 'home';
 @import 'add_data';
-@import 'manage_data';
 @import 'sample_data_set_cards';
 @import 'solutions_section';
 @import 'synopsis';

src/plugins/home/public/application/components/_solutions_section.scss

@@ -50,20 +50,20 @@
     @include euiSlightShadowHover;
     transform: translateY(-2px);
 
-    .euiTitle {
+    .homSolutionPanel__title {
       text-decoration: underline;
     }
   }
+}
 
-  &,
-  .euiPanel {
-    display: flex;
-    flex-direction: column;
-  }
+.homSolutionPanel,
+.homSolutionPanel__inner {
+  display: flex;
+  flex-direction: column;
+}
 
-  .euiPanel {
-    overflow: hidden;
-  }
+.homSolutionPanel__inner {
+  overflow: hidden;
 }
 
 .homSolutionPanel__header {

src/plugins/home/public/application/components/add_data/add_data.tsx

@@ -44,12 +44,20 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => (
       </EuiFlexItem>
 
       <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"
-          />
-        </EuiButtonEmpty>
+        <div>
+          <EuiButtonEmpty
+            className="homDataAdd__actionButton"
+            flush="left"
+            href="#/tutorial_directory/sampleData"
+            iconType="visTable"
+            size="xs"
+          >
+            <FormattedMessage
+              id="home.addData.sampleDataButtonLabel"
+              defaultMessage="Try our sample data"
+            />
+          </EuiButtonEmpty>
+        </div>
       </EuiFlexItem>
     </EuiFlexGroup>
 

src/plugins/home/public/application/components/home.js

@@ -20,9 +20,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { OverviewFooter, OverviewHeader } from '../../../../../../src/plugins/kibana_react/public';
+import { PageFooter, PageHeader } from '../../../../../../src/plugins/kibana_react/public';
 import { HOME_APP_BASE_PATH } from '../../../common/constants';
 import { FeatureCatalogueCategory } from '../../services';
 import { getServices } from '../kibana_services';
@@ -128,26 +128,13 @@ export class Home extends Component {
     }
 
     return (
-      <main aria-labelledby="homHeader__title" className="homWrapper" data-test-subj="homeApp">
-        <header
-          className={`homHeader ${
-            solutions.length ? 'homHeader--hasSolutions' : 'homHeader--noSolutions'
-          }`}
-        >
-          <div className="homHeader__inner">
-            <OverviewHeader
-              title={
-                <EuiTitle size="m">
-                  <h1 id="homHeader__title">
-                    <FormattedMessage id="home.header.title" defaultMessage="Home" />
-                  </h1>
-                </EuiTitle>
-              }
-              showDevToolsLink
-              showManagementLink
-            />
-          </div>
-        </header>
+      <main aria-labelledby="pageHeader__title" className="homWrapper" data-test-subj="homeApp">
+        <PageHeader
+          overlap={solutions.length}
+          showDevToolsLink
+          showManagementLink
+          title={<FormattedMessage id="home.header.title" defaultMessage="Home" />}
+        />
 
         <div className="homContent">
           {solutions.length ? (
@@ -176,7 +163,7 @@ export class Home extends Component {
 
           <EuiHorizontalRule margin="xl" aria-hidden="true" />
 
-          <OverviewFooter path={HOME_APP_BASE_PATH} />
+          <PageFooter path={HOME_APP_BASE_PATH} />
         </div>
       </main>
     );

src/plugins/home/public/application/components/solutions_section/solution_panel.tsx

@@ -67,7 +67,7 @@ export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [] }) =
       href={addBasePath(solution.path)}
       onClick={createAppNavigationHandler(solution.path)}
     >
-      <EuiPanel paddingSize="none">
+      <EuiPanel className="homSolutionPanel__inner" paddingSize="none">
         <EuiFlexGroup gutterSize="none">
           <EuiFlexItem grow={1} className={`homSolutionPanel__header`}>
             <SolutionTitle

src/plugins/home/public/application/components/solutions_section/solution_title.tsx

@@ -45,7 +45,7 @@ export const SolutionTitle: FC<Props> = ({ title, subtitle, iconType }) => (
         className="homSolutionPanel__icon"
       />
 
-      <EuiTitle className="eui-textInheritColor" size="s">
+      <EuiTitle className="homSolutionPanel__title eui-textInheritColor" size="s">
         <h3>{title}</h3>
       </EuiTitle>
 

src/plugins/home/public/application/components/synopsis.js

@@ -38,7 +38,7 @@ export function Synopsis({
   if (iconUrl) {
     optionalImg = <img alt="" className="synopsisIcon" src={iconUrl} />;
   } else if (iconType) {
-    optionalImg = <EuiIcon size="l" title="" type={iconType} />;
+    optionalImg = <EuiIcon color="text" size="l" title="" type={iconType} />;
   }
 
   const classes = classNames('homSynopsis__card', {

src/plugins/kibana_overview/public/components/_overview.scss

@@ -17,56 +17,28 @@
  * under the License.
  */
 
-// Local page variables
-$kbnOverviewPageWidth: 1200px;
-
 .kbnOverviewWrapper {
   background-color: $euiColorEmptyShade;
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - #{$euiHeaderHeightCompensation});
 }
 
-.kbnOverviewHeader {
-  background-color: $euiPageBackgroundColor;
-  border-bottom: $euiBorderWidthThin solid $euiColorLightShade;
-}
-
-.kbnOverviewHeader__inner {
-  margin: 0 auto;
-  max-width: $kbnOverviewPageWidth;
-  padding: $euiSizeXL $euiSize;
-}
-
-// Accounting for no `flush="both"` prop on EuiButtonEmpty
-.kbnOverviewHeader__actionItem .euiButtonEmpty__content {
-  padding-left: 0;
-  padding-right: 0;
-}
-
 .kbnOverviewContent {
   margin: 0 auto;
-  max-width: $kbnOverviewPageWidth;
+  max-width: 1200px;
   padding: $euiSizeXL $euiSize;
   width: 100%;
 
   // Ensure card heights are stretched equally when wrapped with this element
   .kbnRedirectCrossAppLinks {
+    align-items: flex-start;
     display: flex;
     flex: 1;
     flex-direction: column;
   }
 }
 
-// Prevent children from rendering as flex items
-.kbnOverviewGettingStarted__content {
-  display: block;
-}
-
-.kbnOverviewGettingStarted__apps .euiIcon__fillSecondary {
-  fill: $euiColorDarkestShade;
-}
-
 .kbnOverviewApps__item {
   .kbnOverviewApps__group--primary & {
     @include euiBreakpoint('m', 'l', 'xl') {
@@ -136,22 +108,9 @@ $kbnOverviewPageWidth: 1200px;
   }
 }
 
-.kbnOverviewDataAdd__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;
-  }
-}
-
-.kbnOverviewDataAdd__content,
-.kbnOverviewDataManage__content {
-  & .euiIcon__fillSecondary {
-    fill: $euiColorDarkestShade;
-  }
+// Accounting for no `flush="both"` prop on EuiButtonEmpty
+.kbnOverviewDataAdd__actionButton {
+  margin-right: 0;
 }
 
 .kbnOverviewDataManage__item:not(:only-child) {