diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx index 9d026f12b4925..1dd0839e5b758 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle } from '@elastic/eui'; import React, { useMemo } from 'react'; import { useFooterStyles } from '../styles/footer.styles'; @@ -25,7 +25,9 @@ const FooterComponent = () => { {item.title} -

{item.title}

+ +

{item.title}

+

{item.description}

diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx index 295d6565a4cf1..7587f065a4de9 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx @@ -101,14 +101,14 @@ export const useSetUpSections = ({ euiTheme }: { euiTheme: EuiThemeComputed }) = id={currentSection.id} data-test-subj={`section-${currentSection.id}`} > - {currentSection.title} - +
-

{title}

+ +

{title}

+
{description} diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts index 8cd3026000dc4..c0ab2961e4f4b 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { useEuiShadow, useEuiTheme } from '@elastic/eui'; +import { useEuiShadow, useEuiTheme, useEuiFontSize } from '@elastic/eui'; import { css } from '@emotion/css'; import { useMemo } from 'react'; @@ -16,6 +16,7 @@ export const RIGHT_CONTENT_WIDTH = 513; export const useStepContentStyles = () => { const { euiTheme } = useEuiTheme(); const imageShadow = useEuiShadow('s'); + const descriptionHeader = useEuiFontSize('s'); const customStyles = useMemo( () => ({ @@ -45,6 +46,11 @@ export const useStepContentStyles = () => { '.step-paragraph': { marginTop: euiTheme.size.xl, }, + + '.euiTitle': { + fontSize: `${descriptionHeader.fontSize}`, + lineHeight: `${descriptionHeader.lineHeight}`, + }, }, }), rightPanelStyles: css({ @@ -77,6 +83,8 @@ export const useStepContentStyles = () => { euiTheme.size.s, euiTheme.size.xl, imageShadow, + descriptionHeader.fontSize, + descriptionHeader.lineHeight, ] ); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx index c4d5fa13ec6f6..848eece5b243a 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx @@ -52,7 +52,7 @@ const WelcomeHeaderComponent: React.FC<{ productTier?: ProductTier }> = ({ produ )} - {GET_STARTED_PAGE_SUBTITLE} +

{GET_STARTED_PAGE_SUBTITLE}

{GET_STARTED_PAGE_DESCRIPTION}