[Security Solution] [Onboarding] design updates darkMode (#198124)

## 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
elastic · Oct 31, 2024 · 68c209f · 68c209f
1 parent 04ad896
commit 68c209f
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 78 deletions.
diff --git a/...curity_solution/public/onboarding/components/onboarding_body/cards/alerts/alerts_card.tsx b/...curity_solution/public/onboarding/components/onboarding_body/cards/alerts/alerts_card.tsx
@@ -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';
@@ -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]
@@ -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 && (

diff --git a/..._solution/public/onboarding/components/onboarding_body/cards/assistant/assistant_card.tsx b/..._solution/public/onboarding/components/onboarding_body/cards/assistant/assistant_card.tsx
@@ -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';
@@ -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]
@@ -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>

diff --git a/...lic/onboarding/components/onboarding_body/cards/common/card_content_image_panel.styles.ts b/...lic/onboarding/components/onboarding_body/cards/common/card_content_image_panel.styles.ts
@@ -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%;
     }

diff --git a/...olution/public/onboarding/components/onboarding_body/cards/dashboards/dashboards_card.tsx b/...olution/public/onboarding/components/onboarding_body/cards/dashboards/dashboards_card.tsx
@@ -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';
@@ -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]
@@ -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 && (

diff --git a/...security_solution/public/onboarding/components/onboarding_body/cards/rules/rules_card.tsx b/...security_solution/public/onboarding/components/onboarding_body/cards/rules/rules_card.tsx
@@ -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';
@@ -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]
@@ -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 && (

diff --git a/x-pack/plugins/security_solution/public/onboarding/components/onboarding_footer/constants.ts b/x-pack/plugins/security_solution/public/onboarding/components/onboarding_footer/constants.ts
@@ -8,7 +8,6 @@
 export const TELEMETRY_FOOTER_LINK = `footer_link`;
 
 export enum OnboardingFooterLinkItemId {
-  video = 'video',
   documentation = 'documentation',
   demo = 'demo',
   forum = 'forum',

diff --git a/.../plugins/security_solution/public/onboarding/components/onboarding_footer/footer_items.ts b/.../plugins/security_solution/public/onboarding/components/onboarding_footer/footer_items.ts
@@ -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;
+};
diff --git a/...ty_solution/public/onboarding/components/onboarding_footer/images/demo_dark.png b/...ty_solution/public/onboarding/components/onboarding_footer/images/demo_dark.png
diff --git a/...on/public/onboarding/components/onboarding_footer/images/documentation_dark.png b/...on/public/onboarding/components/onboarding_footer/images/documentation_dark.png
diff --git a/...y_solution/public/onboarding/components/onboarding_footer/images/forum_dark.png b/...y_solution/public/onboarding/components/onboarding_footer/images/forum_dark.png
diff --git a/...ty_solution/public/onboarding/components/onboarding_footer/images/labs_dark.png b/...ty_solution/public/onboarding/components/onboarding_footer/images/labs_dark.png
diff --git a/...ns/security_solution/public/onboarding/components/onboarding_footer/onboarding_footer.tsx b/...ns/security_solution/public/onboarding/components/onboarding_footer/onboarding_footer.tsx
@@ -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 }) => (