diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss index aef641603b1af..560fe452ea650 100644 --- a/src/plugins/kibana_overview/public/components/_overview.scss +++ b/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 { diff --git a/src/plugins/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap b/src/plugins/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap index 6b1e741ca7c97..c79ec6bbaac65 100644 --- a/src/plugins/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap +++ b/src/plugins/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap @@ -2,8 +2,8 @@ exports[`AddData render 1`] = `

= ({ addBasePath, features }) => ( -
+
-

+

= ({ addBasePath, features }) => ( - + = ({ addBasePath, features }) => ( - + {features.map((feature) => (

- - +

`; diff --git a/src/plugins/kibana_overview/public/components/manage_data/manage_data.tsx b/src/plugins/kibana_overview/public/components/manage_data/manage_data.tsx index bbbd6b2d72dae..908eaeae3d891 100644 --- a/src/plugins/kibana_overview/public/components/manage_data/manage_data.tsx +++ b/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 = ({ addBasePath, features }) => ( {features.length > 0 && (
-

+

= ({ addBasePath, features }) => ( - + {features.map((feature) => ( - + = ({ addBasePath, features }) => ( /> ))} - +

)} diff --git a/src/plugins/kibana_overview/public/components/news_feed/__snapshots__/news_feed.test.tsx.snap b/src/plugins/kibana_overview/public/components/news_feed/__snapshots__/news_feed.test.tsx.snap index 9c6153c6993a7..7337b962261c1 100644 --- a/src/plugins/kibana_overview/public/components/news_feed/__snapshots__/news_feed.test.tsx.snap +++ b/src/plugins/kibana_overview/public/components/news_feed/__snapshots__/news_feed.test.tsx.snap @@ -46,9 +46,9 @@ exports[`FeedItem render 1`] = ` >

@@ -83,9 +83,9 @@ exports[`FeedItem render 1`] = ` >

@@ -120,9 +120,9 @@ exports[`FeedItem render 1`] = ` >

diff --git a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap index 5fd9cc1acc0a7..eb664ef330d9c 100644 --- a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap +++ b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap @@ -69,7 +69,10 @@ exports[`Overview render 1`] = ` aria-hidden="true" margin="xl" /> - + @@ -138,145 +141,99 @@ exports[`Overview render 1`] = ` - + } + className="kbnOverviewSolution" + description="" icon={ } - image={ - - } + image="/plugins/kibanaOverview/assets/solutions_kibana_dark_2x.png" onClick={[Function]} - title={ - -

- Kibana -

- - } + title="Kibana" + titleElement="h3" + titleSize="xs" /> - Description of solution two - - } + className="kbnOverviewSolution" + description="Description of solution two" icon={ } - image={ - - } + image="/plugins/kibanaOverview/assets/solutions_solution_2_dark_2x.png" onClick={[Function]} - title={ - -

- Solution two -

- - } + title="Solution two" + titleElement="h3" + titleSize="xs" /> - Description of solution three - - } + className="kbnOverviewSolution" + description="Description of solution three" icon={ } - image={ - - } + image="/plugins/kibanaOverview/assets/solutions_solution_3_dark_2x.png" onClick={[Function]} - title={ - -

- Solution three -

- - } + title="Solution three" + titleElement="h3" + titleSize="xs" /> - Description of solution four - - } + className="kbnOverviewSolution" + description="Description of solution four" icon={ } - image={ - - } + image="/plugins/kibanaOverview/assets/solutions_solution_4_dark_2x.png" onClick={[Function]} - title={ - -

- Solution four -

- - } + title="Solution four" + titleElement="h3" + titleSize="xs" /> @@ -363,7 +320,10 @@ exports[`Overview without features 1`] = ` aria-hidden="true" margin="xl" /> - + @@ -432,145 +392,99 @@ exports[`Overview without features 1`] = ` - + } + className="kbnOverviewSolution" + description="" icon={ } - image={ - - } + image="/plugins/kibanaOverview/assets/solutions_kibana_dark_2x.png" onClick={[Function]} - title={ - -

- Kibana -

- - } + title="Kibana" + titleElement="h3" + titleSize="xs" /> - Description of solution two - - } + className="kbnOverviewSolution" + description="Description of solution two" icon={ } - image={ - - } + image="/plugins/kibanaOverview/assets/solutions_solution_2_dark_2x.png" onClick={[Function]} - title={ - -

- Solution two -

- - } + title="Solution two" + titleElement="h3" + titleSize="xs" /> - Description of solution three - - } + className="kbnOverviewSolution" + description="Description of solution three" icon={ } - image={ - - } + image="/plugins/kibanaOverview/assets/solutions_solution_3_dark_2x.png" onClick={[Function]} - title={ - -

- Solution three -

- - } + title="Solution three" + titleElement="h3" + titleSize="xs" /> - Description of solution four - - } + className="kbnOverviewSolution" + description="Description of solution four" icon={ } - image={ - - } + image="/plugins/kibanaOverview/assets/solutions_solution_4_dark_2x.png" onClick={[Function]} - title={ - -

- Solution four -

- - } + title="Solution four" + titleElement="h3" + titleSize="xs" /> @@ -657,7 +571,10 @@ exports[`Overview without solutions 1`] = ` aria-hidden="true" margin="xl" /> - + @@ -706,44 +623,22 @@ exports[`Overview without solutions 1`] = ` -
- -

- -

- - - - - - - - - - -
+ + + + + + + = ({ newsFetchResult, solutions, features }) =>