diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss index 22a4b3c229218..77d401d5af43e 100644 --- a/src/plugins/home/public/application/components/_home.scss +++ b/src/plugins/home/public/application/components/_home.scss @@ -1,3 +1,28 @@ +// Local page vars +$homePageHeaderHeight: $euiSize * 8; +$homePageWidth: 1200px; + +.homPageHeader { + height: $homePageHeaderHeight; + margin: 0 auto; + max-width: $homePageWidth; + padding: $euiSizeXL $euiSize 0; +} + +.homPageContainer { + min-height: calc(100vh - #{$homePageHeaderHeight}); + background-color: $euiColorEmptyShade; + border-top: 1px solid $euiColorLightShade; +} + +.homPage { + display: flex; + max-width: $homePageWidth; + margin: 0 auto; + padding: 0 $euiSize $euiSizeXL; + background-color: transparent; +} + .homHome__synopsisItem { max-width: 50%; } diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss index bd2b9c56b4454..d7f384c9c514c 100644 --- a/src/plugins/home/public/application/components/_solutions_panel.scss +++ b/src/plugins/home/public/application/components/_solutions_panel.scss @@ -1,5 +1,5 @@ .homSolutionsPanel { - margin-top: -$euiSizeXL*2; + margin-top: -$euiSizeXL; .homeSolutionsPanel--restrictHalfWidth { max-width: 50%; @@ -24,32 +24,30 @@ } } + .homSolutionsPanel__header { + border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + color: $euiColorEmptyShade; + + img { + position: absolute; + width: auto; + } + } + .homSolutionsPanel__enterpriseSearch { .homSolutionsPanel__enterpriseSearchHeader { background-color: #017d73; - color: $euiColorEmptyShade; - - .homSolutionsPanel__enterpriseSearchTopLeftImage { - .euiImage__img { - position: absolute; - top: 0; - left: 0; - margin-top: $euiSizeS; - height: $euiSizeXL; - width: auto; - } + + .homSolutionsPanel__enterpriseSearchTopLeftImage img { + top: $euiSizeS; + left: 0; + height: $euiSizeXL; } - .homSolutionsPanel__enterpriseSearchBottomRightImage { - .euiImage__img { - position: absolute; - right: 0; - bottom: 0; - height: $euiSizeXL; - width: auto; - margin-bottom: $euiSizeS; - margin-right: $euiSizeS; - } + .homSolutionsPanel__enterpriseSearchBottomRightImage img { + right: $euiSizeS; + bottom: $euiSizeS; + height: $euiSizeXL; } } } @@ -57,18 +55,11 @@ .homSolutionsPanel__observability { .homSolutionsPanel__observabilityHeader { background-color: #c42373; - color: $euiColorEmptyShade; - - .homSolutionsPanel__observabilityTopRightImage { - .euiImage__img { - position: absolute; - top: 0; - right: 0; - height: $euiSizeXL; - width: auto; - margin-top: $euiSizeS; - margin-right: $euiSizeS; - } + + .homSolutionsPanel__observabilityTopRightImage img { + top: $euiSizeS; + right: $euiSizeS; + height: $euiSizeXL; } } } @@ -76,18 +67,11 @@ .homSolutionsPanel__securitySolution { .homSolutionsPanel__securitySolutionHeader { background-color: #343741; - color: $euiColorEmptyShade; - - .homSolutionsPanel__securitySolutionTopLeftImage { - .euiImage__img { - position: absolute; - top: 0; - left: 0; - height: $euiSizeXXL; - width: auto; - margin-top: $euiSize; - margin-left: $euiSize; - } + + .homSolutionsPanel__securitySolutionTopLeftImage img { + top: $euiSizeS; + left: $euiSizeS; + height: $euiSizeXXL; } } } @@ -95,26 +79,17 @@ .homSolutionsPanel__kibana { .homSolutionsPanel__kibanaHeader { background-color: #006bb4; - color: $euiColorEmptyShade; - - .homSolutionsPanel__kibanaTopLeftImage { - .euiImage__img { - position: absolute; - top: 0; - left: 0; - height: $euiSizeXXL * 4; - width: auto; - } + + .homSolutionsPanel__kibanaTopLeftImage img { + top: 0; + left: 0; + height: $euiSizeXXL * 4; } - .homSolutionsPanel__kibanaBottomRightImage { - .euiImage__img { - position: absolute; - right: 0; - bottom: 0; - height: $euiSizeXXL * 4; - width: auto; - } + .homSolutionsPanel__kibanaBottomRightImage img { + right: 0; + bottom: 0; + height: $euiSizeXXL * 4; } } } diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx index 6229ac49b427e..6c4a6d9a60bc5 100644 --- a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx +++ b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx @@ -18,7 +18,7 @@ */ import React, { FunctionComponent } from 'react'; -import { EuiButtonEmpty, EuiText } from '@elastic/eui'; +import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { HOME_APP_BASE_PATH } from '../../../../common/constants'; import { getServices } from '../../kibana_services'; @@ -32,20 +32,26 @@ export const ChangeHomeRoute: FunctionComponent = ({ defaultRoute }) => { const changeDefaultRoute = () => uiSettings.set('defaultRoute', defaultRoute); return ( - -

- - + + + +

+ +

+
+ + + -

- +
+ ); }; diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index 7a40dced19c7e..764ea55c35f7b 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -26,13 +26,9 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButtonEmpty, - EuiPage, EuiTitle, EuiFlexGroup, EuiFlexItem, - EuiPageBody, - EuiPageHeader, - EuiPageHeaderSection, EuiScreenReaderOnly, EuiSpacer, EuiHorizontalRule, @@ -150,28 +146,29 @@ export class Home extends Component { const stackManagement = this.findDirectoryById('stack-management'); return ( - - - -

- -

-
- - - - + +
+ + +

- +

- - - - +
+ + +

+ +

+
+
+
+ + {i18n.translate('home.pageHeader.addDataButtonLabel', { @@ -211,110 +208,111 @@ export class Home extends Component { - - - - - - - -
- - - - -
- - - -

- {i18n.translate('home.addData.sectionTitle', { - defaultMessage: 'Add your data', - })} -

-
-
- - - - - -
- - - - - - - {this.renderDirectory(fileDataVisualizer)} - - + +
+
+
+
+ + + + + +
+ + + +

+ {i18n.translate('home.addData.sectionTitle', { + defaultMessage: 'Add your data', })} - url="#/tutorial_directory" - wrapInPanel +

+
+
+ + + - - {this.renderDirectory(ingestManager, { - isBeta: true, - betaLabel: 'Experimental', - })} -
- - -
- - {security || monitoring || snapshotRestore || indexLifecycleManagement ? ( - - - -
- -

- {i18n.translate('home.manageData.sectionTitle', { - defaultMessage: 'Manage your data', + + + + + + + + + + {this.renderDirectory(fileDataVisualizer)} + + + + {this.renderDirectory(ingestManager, { + isBeta: true, + betaLabel: 'Experimental', })} -

-
- - - - - {this.renderDirectory(security)} - {this.renderDirectory(monitoring)} - {this.renderDirectory(snapshotRestore)} - {this.renderDirectory(indexLifecycleManagement)} - -
-
- ) : null} - - {canChangeHomeRoute && ( - - - - - )} -
- - + + + +
+ + {security || monitoring || snapshotRestore || indexLifecycleManagement ? ( + + + + +
+ +

+ {i18n.translate('home.manageData.sectionTitle', { + defaultMessage: 'Manage your data', + })} +

+
+ + + + + {this.renderDirectory(security)} + {this.renderDirectory(monitoring)} + {this.renderDirectory(snapshotRestore)} + {this.renderDirectory(indexLifecycleManagement)} + +
+
+ ) : null} + + {canChangeHomeRoute && ( + + + + + )} + + + +
); } diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx index 9904af5bf0c56..a458e6d5c20f4 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx @@ -242,7 +242,10 @@ export const SolutionsPanel: FunctionComponent = ({ onClick={createAppNavigationHandler('/app/app_search')} // TODO: double check this url once enterprise search plugin is merged > - + = ({ onClick={createAppNavigationHandler(observability.path)} > - + = ({ onClick={createAppNavigationHandler(securitySolution.path)} > - + = ({ onClick={createAppNavigationHandler('/app/dashboards')} > - +