Skip to content

Commit

Permalink
[Security Solution] [Onboarding] design updates darkMode (#198124)
Browse files Browse the repository at this point in the history
## Summary
Issue #196253

Update Onboarding footer icons and step card paddings for dark mode.

### **Before → After:**

<img width="2631" alt="Untitled (7)"
src="https://github.com/user-attachments/assets/979c6894-227b-4ff5-8db6-b426264a3cca">
<img width="2672" alt="Untitled (6)"
src="https://github.com/user-attachments/assets/fa112b27-9e16-4dda-bbac-85a0e8a20882">
<img width="2478" alt="Untitled (5)"
src="https://github.com/user-attachments/assets/42f3a911-c1c3-4c13-b839-6cedd9af55fb">



### Checklist

Delete any items that are not applicable to this PR.

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
  • Loading branch information
agusruidiazgd authored Oct 31, 2024
1 parent 04ad896 commit 68c209f
Show file tree
Hide file tree
Showing 12 changed files with 156 additions and 78 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,16 @@
*/

import React, { useCallback, useMemo } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiLink,
EuiSpacer,
EuiText,
useEuiTheme,
COLOR_MODES_STANDARD,
} from '@elastic/eui';
import { SecurityPageName } from '@kbn/security-solution-navigation';
import { SecuritySolutionLinkButton } from '../../../../../common/components/links';
import { OnboardingCardId } from '../../../../constants';
Expand All @@ -21,6 +30,9 @@ export const AlertsCard: OnboardingCardComponent = ({
setExpandedCardId,
setComplete,
}) => {
const { colorMode } = useEuiTheme();
const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;

const isIntegrationsCardComplete = useMemo(
() => isCardComplete(OnboardingCardId.integrations),
[isCardComplete]
Expand All @@ -39,7 +51,11 @@ export const AlertsCard: OnboardingCardComponent = ({
alignItems="flexStart"
>
<EuiFlexItem grow={false}>
<EuiText data-test-subj="alertsCardDescription" size="s" color="subdued">
<EuiText
data-test-subj="alertsCardDescription"
size="s"
color={isDarkMode ? 'text' : 'subdued'}
>
{i18n.ALERTS_CARD_DESCRIPTION}
</EuiText>
{!isIntegrationsCardComplete && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,16 @@
*/

import React, { useCallback, useMemo } from 'react';
import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiText } from '@elastic/eui';
import {
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiLink,
EuiText,
useEuiTheme,
COLOR_MODES_STANDARD,
} from '@elastic/eui';
import { css } from '@emotion/css';
import { OnboardingCardId } from '../../../../constants';
import type { OnboardingCardComponent } from '../../../../types';
Expand All @@ -23,6 +32,8 @@ export const AssistantCard: OnboardingCardComponent<AssistantCardMetadata> = ({
checkCompleteMetadata,
checkComplete,
}) => {
const { euiTheme, colorMode } = useEuiTheme();
const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
const isIntegrationsCardComplete = useMemo(
() => isCardComplete(OnboardingCardId.integrations),
[isCardComplete]
Expand All @@ -37,11 +48,16 @@ export const AssistantCard: OnboardingCardComponent<AssistantCardMetadata> = ({
const canCreateConnectors = checkCompleteMetadata?.canCreateConnectors;

return (
<OnboardingCardContentPanel style={{ paddingTop: 0 }}>
<OnboardingCardContentPanel
style={{
paddingTop: 0,
...(isDarkMode && { backgroundColor: euiTheme.colors.lightestShade }),
}}
>
{canExecuteConnectors ? (
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<EuiText size="s" color="subdued">
<EuiText size="s" color={isDarkMode ? 'text' : 'subdued'}>
{i18n.ASSISTANT_CARD_DESCRIPTION}
</EuiText>
</EuiFlexItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@
*/

import { css } from '@emotion/css';
import { useEuiTheme, useEuiShadow } from '@elastic/eui';
import { useEuiTheme, useEuiShadow, COLOR_MODES_STANDARD } from '@elastic/eui';

export const useCardContentImagePanelStyles = () => {
const { euiTheme } = useEuiTheme();
const { euiTheme, colorMode } = useEuiTheme();
const shadowStyles = useEuiShadow('m');
const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
return css`
padding-top: 8px;
${isDarkMode ? `background-color: ${euiTheme.colors.lightestShade}` : ''};
.cardSpacer {
width: 8%;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,16 @@
*/

import React, { useCallback, useMemo } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiLink,
EuiSpacer,
EuiText,
useEuiTheme,
COLOR_MODES_STANDARD,
} from '@elastic/eui';
import { SecurityPageName } from '@kbn/security-solution-navigation';
import { OnboardingCardId } from '../../../../constants';
import type { OnboardingCardComponent } from '../../../../types';
Expand All @@ -21,6 +30,9 @@ export const DashboardsCard: OnboardingCardComponent = ({
setComplete,
setExpandedCardId,
}) => {
const { colorMode } = useEuiTheme();
const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;

const isIntegrationsCardComplete = useMemo(
() => isCardComplete(OnboardingCardId.integrations),
[isCardComplete]
Expand All @@ -42,7 +54,11 @@ export const DashboardsCard: OnboardingCardComponent = ({
alignItems="flexStart"
>
<EuiFlexItem grow={false}>
<EuiText data-test-subj="dashboardsDescription" size="s" color="subdued">
<EuiText
data-test-subj="dashboardsDescription"
size="s"
color={isDarkMode ? 'text' : 'subdued'}
>
{i18n.DASHBOARDS_CARD_DESCRIPTION}
</EuiText>
{!isIntegrationsCardComplete && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,16 @@
*/

import React, { useCallback, useMemo } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiLink,
EuiSpacer,
EuiText,
useEuiTheme,
COLOR_MODES_STANDARD,
} from '@elastic/eui';
import { SecurityPageName } from '@kbn/security-solution-navigation';
import { SecuritySolutionLinkButton } from '../../../../../common/components/links';
import { OnboardingCardId } from '../../../../constants';
Expand All @@ -17,6 +26,9 @@ import rulesImageSrc from './images/rules.png';
import * as i18n from './translations';

export const RulesCard: OnboardingCardComponent = ({ isCardComplete, setExpandedCardId }) => {
const { colorMode } = useEuiTheme();
const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;

const isIntegrationsCardComplete = useMemo(
() => isCardComplete(OnboardingCardId.integrations),
[isCardComplete]
Expand All @@ -35,7 +47,11 @@ export const RulesCard: OnboardingCardComponent = ({ isCardComplete, setExpanded
alignItems="flexStart"
>
<EuiFlexItem grow={false}>
<EuiText data-test-subj="rulesCardDescription" size="s" color="subdued">
<EuiText
data-test-subj="rulesCardDescription"
size="s"
color={isDarkMode ? 'text' : 'subdued'}
>
{i18n.RULES_CARD_DESCRIPTION}
</EuiText>
{!isIntegrationsCardComplete && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
export const TELEMETRY_FOOTER_LINK = `footer_link`;

export enum OnboardingFooterLinkItemId {
video = 'video',
documentation = 'documentation',
demo = 'demo',
forum = 'forum',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,78 +5,90 @@
* 2.0.
*/
import { i18n } from '@kbn/i18n';
import documentation from './images/documentation.png';
import forum from './images/forum.png';
import demo from './images/demo.png';
import labs from './images/labs.png';
import { COLOR_MODES_STANDARD, useEuiTheme } from '@elastic/eui';
import documentationImage from './images/documentation.png';
import darkDocumentationImage from './images/documentation_dark.png';
import forumImage from './images/forum.png';
import darkForumImge from './images/forum_dark.png';
import demoImage from './images/demo.png';
import darkDemoImage from './images/demo_dark.png';
import labsImage from './images/labs.png';
import darkLabsImage from './images/labs_dark.png';
import { OnboardingFooterLinkItemId } from './constants';

export const footerItems = [
{
icon: documentation,
id: OnboardingFooterLinkItemId.documentation,
title: i18n.translate('xpack.securitySolution.onboarding.footer.documentation.title', {
defaultMessage: 'Browse documentation',
}),
description: i18n.translate(
'xpack.securitySolution.onboarding.footer.documentation.description',
{
defaultMessage: 'In-depth guides on all Elastic features',
}
),
link: {
title: i18n.translate('xpack.securitySolution.onboarding.footer.documentation.link.title', {
defaultMessage: 'Start reading',
export const useFooterItems = () => {
const { colorMode } = useEuiTheme();
const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;

const footerItems = [
{
icon: isDarkMode ? darkDocumentationImage : documentationImage,
id: OnboardingFooterLinkItemId.documentation,
title: i18n.translate('xpack.securitySolution.onboarding.footer.documentation.title', {
defaultMessage: 'Browse documentation',
}),
href: 'https://docs.elastic.co/integrations/elastic-security-intro',
description: i18n.translate(
'xpack.securitySolution.onboarding.footer.documentation.description',
{
defaultMessage: 'In-depth guides on all Elastic features',
}
),
link: {
title: i18n.translate('xpack.securitySolution.onboarding.footer.documentation.link.title', {
defaultMessage: 'Start reading',
}),
href: 'https://docs.elastic.co/integrations/elastic-security-intro',
},
},
},
{
icon: forum,
id: OnboardingFooterLinkItemId.forum,
title: i18n.translate('xpack.securitySolution.onboarding.footer.forum.title', {
defaultMessage: 'Explore forum',
}),
description: i18n.translate('xpack.securitySolution.onboarding.footer.forum.description', {
defaultMessage: 'Exchange thoughts about Elastic',
}),
link: {
title: i18n.translate('xpack.securitySolution.onboarding.footer.forum.link.title', {
defaultMessage: 'Discuss Forum',
{
icon: isDarkMode ? darkForumImge : forumImage,
id: OnboardingFooterLinkItemId.forum,
title: i18n.translate('xpack.securitySolution.onboarding.footer.forum.title', {
defaultMessage: 'Explore forum',
}),
description: i18n.translate('xpack.securitySolution.onboarding.footer.forum.description', {
defaultMessage: 'Exchange thoughts about Elastic',
}),
href: 'https://discuss.elastic.co/c/security/83',
link: {
title: i18n.translate('xpack.securitySolution.onboarding.footer.forum.link.title', {
defaultMessage: 'Discuss Forum',
}),
href: 'https://discuss.elastic.co/c/security/83',
},
},
},
{
icon: demo,
id: OnboardingFooterLinkItemId.demo,
title: i18n.translate('xpack.securitySolution.onboarding.footer.demo.title', {
defaultMessage: 'View demo project',
}),
description: i18n.translate('xpack.securitySolution.onboarding.footer.demo.description', {
defaultMessage: 'Discover Elastic using sample data',
}),
link: {
title: i18n.translate('xpack.securitySolution.onboarding.footer.demo.link.title', {
defaultMessage: 'Explore demo',
{
icon: isDarkMode ? darkDemoImage : demoImage,
id: OnboardingFooterLinkItemId.demo,
title: i18n.translate('xpack.securitySolution.onboarding.footer.demo.title', {
defaultMessage: 'View demo project',
}),
description: i18n.translate('xpack.securitySolution.onboarding.footer.demo.description', {
defaultMessage: 'Discover Elastic using sample data',
}),
href: 'https://www.elastic.co/demo-gallery?solutions=security&features=null',
link: {
title: i18n.translate('xpack.securitySolution.onboarding.footer.demo.link.title', {
defaultMessage: 'Explore demo',
}),
href: 'https://www.elastic.co/demo-gallery?solutions=security&features=null',
},
},
},
{
icon: labs,
id: OnboardingFooterLinkItemId.labs,
title: i18n.translate('xpack.securitySolution.onboarding.footer.labs.title', {
defaultMessage: 'Elastic Security Labs',
}),
description: i18n.translate('xpack.securitySolution.onboarding.footer.labs.description', {
defaultMessage: 'Insights from security researchers',
}),
link: {
title: i18n.translate('xpack.securitySolution.onboarding.footer.labs.link.title', {
defaultMessage: 'Learn more',
{
icon: isDarkMode ? darkLabsImage : labsImage,
id: OnboardingFooterLinkItemId.labs,
title: i18n.translate('xpack.securitySolution.onboarding.footer.labs.title', {
defaultMessage: 'Elastic Security Labs',
}),
href: 'https://www.elastic.co/security-labs',
description: i18n.translate('xpack.securitySolution.onboarding.footer.labs.description', {
defaultMessage: 'Insights from security researchers',
}),
link: {
title: i18n.translate('xpack.securitySolution.onboarding.footer.labs.link.title', {
defaultMessage: 'Learn more',
}),
href: 'https://www.elastic.co/security-labs',
},
},
},
] as const;
] as const;

return footerItems;
};
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@
import React, { useCallback } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
import { useFooterStyles } from './onboarding_footer.styles';
import { footerItems } from './footer_items';
import { useFooterItems } from './footer_items';
import { trackOnboardingLinkClick } from '../../common/lib/telemetry';
import type { OnboardingFooterLinkItemId } from './constants';
import { TELEMETRY_FOOTER_LINK } from './constants';

export const OnboardingFooter = React.memo(() => {
const styles = useFooterStyles();
const footerItems = useFooterItems();
return (
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" className={styles}>
{footerItems.map(({ id, title, icon, description, link }) => (
Expand Down

0 comments on commit 68c209f

Please sign in to comment.