diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alert_details.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alert_details.png deleted file mode 100644 index 83900d2ca86b..000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alert_details.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts.png deleted file mode 100644 index 6eaf13bfc7b5..000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts_icon.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts_icon.png index e1013a6eae7f..c87971906e9c 100644 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts_icon.png and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts_icon.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts_icon_dark.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts_icon_dark.png new file mode 100644 index 000000000000..34ff5c434c44 Binary files /dev/null and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts_icon_dark.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/index.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/index.ts index dda6e97b8260..2cc2e7ecd45f 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/index.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/index.ts @@ -9,12 +9,12 @@ import React from 'react'; import type { OnboardingCardConfig } from '../../../../types'; import { OnboardingCardId } from '../../../../constants'; import { ALERTS_CARD_TITLE } from './translations'; -import alertsIcon from './images/alerts_icon.png'; +import { getCardIcon } from '../common/card_icon'; export const alertsCardConfig: OnboardingCardConfig = { id: OnboardingCardId.alerts, title: ALERTS_CARD_TITLE, - icon: alertsIcon, + icon: () => getCardIcon(OnboardingCardId.alerts), Component: React.lazy( () => import( diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/images/assistant_icon_dark.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/images/assistant_icon_dark.png new file mode 100644 index 000000000000..68343e78d8c6 Binary files /dev/null and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/images/assistant_icon_dark.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_icon.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_icon.tsx new file mode 100644 index 000000000000..c60ca58404cc --- /dev/null +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_icon.tsx @@ -0,0 +1,66 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import React from 'react'; +import { useDarkMode } from '@kbn/kibana-react-plugin/public'; +import { OnboardingCardId } from '../../../../constants'; +import rulesIcon from '../rules/images/rules_icon.png'; +import rulesDarkIcon from '../rules/images/rules_icon_dark.png'; +import integrationsIcon from '../integrations/images/integrations_icon.png'; +import integrationsDarkIcon from '../integrations/images/integrations_icon_dark.png'; +import dashboardsIcon from '../dashboards/images/dashboards_icon.png'; +import dashboardsDarkIcon from '../dashboards/images/dashboards_icon_dark.png'; +import alertsIcon from '../alerts/images/alerts_icon.png'; +import alertsDarkIcon from '../alerts/images/alerts_icon_dark.png'; +import startMigrationIcon from '../siem_migrations/start_migration/images/start_migration_icon.png'; +import startMigrationDarkIcon from '../siem_migrations/start_migration/images/start_migration_icon_dark.png'; + +interface CardIcons { + [key: string]: { + light: string; + dark: string; + }; +} + +const cardIcons: CardIcons = { + [OnboardingCardId.rules]: { + light: rulesIcon, + dark: rulesDarkIcon, + }, + [OnboardingCardId.integrations]: { + light: integrationsIcon, + dark: integrationsDarkIcon, + }, + [OnboardingCardId.dashboards]: { + light: dashboardsIcon, + dark: dashboardsDarkIcon, + }, + [OnboardingCardId.alerts]: { + light: alertsIcon, + dark: alertsDarkIcon, + }, + [OnboardingCardId.siemMigrationsStart]: { + light: startMigrationIcon, + dark: startMigrationDarkIcon, + }, +}; + +interface CardIconProps { + cardId: OnboardingCardId; +} + +export const CardIcon = React.memo(({ cardId }) => { + const isDarkMode = useDarkMode(); + const icon = cardIcons[cardId]?.[isDarkMode ? 'dark' : 'light'] || ''; + + if (!icon) return null; + + return {`${cardId}-card-icon`}; +}); + +CardIcon.displayName = 'CardIcon'; + +export const getCardIcon = (cardId: OnboardingCardId) => ; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards.png deleted file mode 100644 index 0d6b551e0966..000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards_icon.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards_icon.png index ddc024696e22..7c0031276400 100644 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards_icon.png and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards_icon.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards_icon_dark.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards_icon_dark.png new file mode 100644 index 000000000000..96baf08f85f4 Binary files /dev/null and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards_icon_dark.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/index.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/index.ts index 0492c00c512b..c276e9a4a51b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/index.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/index.ts @@ -9,12 +9,12 @@ import React from 'react'; import type { OnboardingCardConfig } from '../../../../types'; import { OnboardingCardId } from '../../../../constants'; import { DASHBOARDS_CARD_TITLE } from './translations'; -import dashboardsIcon from './images/dashboards_icon.png'; +import { getCardIcon } from '../common/card_icon'; export const dashboardsCardConfig: OnboardingCardConfig = { id: OnboardingCardId.dashboards, title: DASHBOARDS_CARD_TITLE, - icon: dashboardsIcon, + icon: () => getCardIcon(OnboardingCardId.dashboards), Component: React.lazy( () => import( diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/images/integrations_icon.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/images/integrations_icon.png index 438e220084c4..94bc3c0f6155 100644 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/images/integrations_icon.png and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/images/integrations_icon.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/images/integrations_icon_dark.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/images/integrations_icon_dark.png new file mode 100644 index 000000000000..915c1b93ed29 Binary files /dev/null and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/images/integrations_icon_dark.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/index.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/index.ts index 3568376c192c..997207ba9006 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/index.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/index.ts @@ -10,15 +10,15 @@ import { i18n } from '@kbn/i18n'; import type { OnboardingCardConfig } from '../../../../types'; import { checkIntegrationsCardComplete } from './integrations_check_complete'; import { OnboardingCardId } from '../../../../constants'; -import integrationsIcon from './images/integrations_icon.png'; import type { IntegrationCardMetadata } from './types'; +import { getCardIcon } from '../common/card_icon'; export const integrationsCardConfig: OnboardingCardConfig = { id: OnboardingCardId.integrations, title: i18n.translate('xpack.securitySolution.onboarding.integrationsCard.title', { defaultMessage: 'Add data with integrations', }), - icon: integrationsIcon, + icon: () => getCardIcon(OnboardingCardId.integrations), Component: React.lazy( () => import( diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules.png deleted file mode 100644 index 5d88e8c95d43..000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules_icon.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules_icon.png index b2b4848e0be1..89f8732bbd56 100644 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules_icon.png and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules_icon.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules_icon_dark.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules_icon_dark.png new file mode 100644 index 000000000000..2c70f9dd62f8 Binary files /dev/null and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules_icon_dark.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/index.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/index.ts index 6bd8e0cbcb7a..93e050bf2885 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/index.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/index.ts @@ -9,13 +9,13 @@ import React from 'react'; import type { OnboardingCardConfig } from '../../../../types'; import { OnboardingCardId } from '../../../../constants'; import { RULES_CARD_TITLE } from './translations'; -import rulesIcon from './images/rules_icon.png'; import { checkRulesComplete } from './rules_check_complete'; +import { getCardIcon } from '../common/card_icon'; export const rulesCardConfig: OnboardingCardConfig = { id: OnboardingCardId.rules, title: RULES_CARD_TITLE, - icon: rulesIcon, + icon: () => getCardIcon(OnboardingCardId.rules), Component: React.lazy( () => import( diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/images/card_header_icon.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/images/card_header_icon.png deleted file mode 100644 index b2b4848e0be1..000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/images/card_header_icon.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/images/start_migration_icon.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/images/start_migration_icon.png new file mode 100644 index 000000000000..89f8732bbd56 Binary files /dev/null and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/images/start_migration_icon.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/images/start_migration_icon_dark.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/images/start_migration_icon_dark.png new file mode 100644 index 000000000000..2c70f9dd62f8 Binary files /dev/null and b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/images/start_migration_icon_dark.png differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/index.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/index.ts index 7847e81b0f98..a79db1651a19 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/index.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/index.ts @@ -9,14 +9,14 @@ import React from 'react'; import type { OnboardingCardConfig } from '../../../../../types'; import { OnboardingCardId } from '../../../../../constants'; import { START_MIGRATION_CARD_TITLE } from './translations'; -import cardIcon from './images/card_header_icon.png'; import type { StartMigrationCardMetadata } from './types'; import { checkStartMigrationCardComplete } from './start_migration_check_complete'; +import { getCardIcon } from '../../common/card_icon'; export const startMigrationCardConfig: OnboardingCardConfig = { id: OnboardingCardId.siemMigrationsStart, title: START_MIGRATION_CARD_TITLE, - icon: cardIcon, + icon: () => getCardIcon(OnboardingCardId.siemMigrationsStart), licenseTypeRequired: 'enterprise', Component: React.lazy( () => diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts index e613f0b2d766..428940855549 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts @@ -12,7 +12,7 @@ export const HEIGHT_ANIMATION_DURATION = 250; export const useCardPanelStyles = () => { const { euiTheme, colorMode } = useEuiTheme(); - const successBackgroundColor = euiTheme.colors.backgroundLightSuccess; + const successBackgroundColor = euiTheme.colors.backgroundBaseSuccess; const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark; const darkModeStyles = useDarkPanelStyles(isDarkMode); @@ -24,14 +24,18 @@ export const useCardPanelStyles = () => { .onboardingCardIcon { padding: ${euiTheme.size.m}; border-radius: 50%; - background-color: ${euiTheme.colors.backgroundBaseSubdued}; + background-color: ${isDarkMode + ? euiTheme.colors.lightShade + : euiTheme.colors.backgroundBaseSubdued}; + display: flex; + align-items: center; } .onboardingCardHeaderTitle { font-weight: ${euiTheme.font.weight.semiBold}; } .onboardingCardHeaderCompleteBadge { - background-color: ${successBackgroundColor}; - color: ${euiTheme.colors.textSuccess}; + background-color: ${isDarkMode ? euiTheme.colors.success : successBackgroundColor}; + color: ${isDarkMode ? euiTheme.colors.emptyShade : euiTheme.colors.textSuccess}; } .onboardingCardContentWrapper { display: grid;