[Core UI] Kibana Overview Page Style Fixes

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

@@ -85,6 +85,72 @@ $pageWidth: 1200px;
       margin-top: $euiSizeXS;
     }
   }
+
+  h3 {
+    font-weight: inherit;
+  }
+}
+
+.kbnOverviewMore__item {
+  @include euiBreakpoint('m', 'l', 'xl') {
+    max-width: calc(33.333333333333333% - #{$euiSizeM * 2});
+  }
+}
+
+.kbnOverviewSolution__icon {
+  background-color: $euiColorEmptyShade !important;
+  box-shadow: none !important;
+  height: $euiSizeL * 2;
+  padding: $euiSizeM;
+  width: $euiSizeL * 2;
+}
+
+.kbnOverviewSupplements--noNews .kbnOverviewMore {
+  h2 {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      text-align: center;
+    }
+  }
+
+  .kbnOverviewMore__content {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      justify-content: center;
+    }
+  }
+}
+
+.kbnOverviewData--expanded {
+  flex-direction: column;
+
+  &,
+  & > * {
+    margin-bottom: 0 !important;
+    margin-top: 0 !important;
+  }
+}
+
+.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;
+  }
+}
+
+.kbnOverviewDataManage__item:not(:only-child) {
+  @include euiBreakpoint('m', 'l', 'xl') {
+    flex: 0 0 calc(50% - #{$euiSizeM * 2});
+  }
 }
 
 .kbnOverviewFooter {

src/plugins/kibana_overview/public/components/add_data/add_data.tsx

@@ -33,11 +33,11 @@ interface Props {
 }
 
 export const AddData: FC<Props> = ({ addBasePath, features }) => (
-  <section className="homDataAdd" aria-labelledby="homDataAdd__title">
+  <section className="kbnOverviewDataAdd" aria-labelledby="kbnOverviewDataAdd__title">
     <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={1}>
         <EuiTitle size="s">
-          <h2 id="homDataAdd__title">
+          <h2 id="kbnOverviewDataAdd__title">
             <FormattedMessage
               id="kibana_overview.addData.sectionTitle"
               defaultMessage="Ingest your data"
@@ -46,7 +46,7 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => (
         </EuiTitle>
       </EuiFlexItem>
 
-      <EuiFlexItem className="homDataAdd__actions" grow={false}>
+      <EuiFlexItem className="kbnOverviewDataAdd__actions" grow={false}>
         <EuiButtonEmpty iconType="visTable" href="#/tutorial_directory/sampleData" size="xs">
           <FormattedMessage
             id="kibana_overview.addData.sampleDataButtonLabel"
@@ -58,7 +58,7 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => (
 
     <EuiSpacer size="m" />
 
-    <EuiFlexGroup className="homDataAdd__content">
+    <EuiFlexGroup className="kbnOverviewDataAdd__content">
       {features.map((feature) => (
         <EuiFlexItem key={feature.id}>
           <Synopsis

src/plugins/kibana_overview/public/components/manage_data/manage_data.tsx

@@ -19,7 +19,7 @@
 
 import React, { FC } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGrid, EuiHorizontalRule, EuiSpacer, EuiTitle, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 // @ts-expect-error untyped service
 import { FeatureCatalogueEntry } from '../../services';
@@ -38,12 +38,12 @@ export const ManageData: FC<Props> = ({ addBasePath, features }) => (
 
     {features.length > 0 && (
       <section
-        className="homDataManage"
-        aria-labelledby="homDataManage__title"
-        data-test-subj="homDataManage"
+        className="kbnOverviewDataManage"
+        aria-labelledby="kbnOverviewDataManage__title"
+        data-test-subj="kbnOverviewDataManage"
       >
         <EuiTitle size="s">
-          <h2 id="homDataManage__title">
+          <h2 id="kbnOverviewDataManage__title">
             <FormattedMessage
               id="kibana_overview.manageData.sectionTitle"
               defaultMessage="Manage your data"
@@ -53,9 +53,9 @@ export const ManageData: FC<Props> = ({ addBasePath, features }) => (
 
         <EuiSpacer size="m" />
 
-        <EuiFlexGrid className="homDataManage__content" columns={2}>
+        <EuiFlexGroup className="kbnOverviewDataManage__content" wrap>
           {features.map((feature) => (
-            <EuiFlexItem key={feature.id}>
+            <EuiFlexItem className="kbnOverviewDataManage__item" key={feature.id}>
               <Synopsis
                 id={feature.id}
                 onClick={createAppNavigationHandler(feature.path)}
@@ -67,7 +67,7 @@ export const ManageData: FC<Props> = ({ addBasePath, features }) => (
               />
             </EuiFlexItem>
           ))}
-        </EuiFlexGrid>
+        </EuiFlexGroup>
       </section>
     )}
   </>