[SecuritySolution] Onboarding page centralize duplicated styles (#202229)

## Summary

There is no visual change, just a refactor to remove duplicate code from
cards to centralized places.

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/alerts_card.tsx

@@ -6,22 +6,14 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiSpacer,
-  EuiText,
-  useEuiTheme,
-  COLOR_MODES_STANDARD,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSpacer } from '@elastic/eui';
 import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { SecuritySolutionLinkButton } from '../../../../../common/components/links';
 import { OnboardingCardId } from '../../../../constants';
 import type { OnboardingCardComponent } from '../../../../types';
 import { OnboardingCardContentImagePanel } from '../common/card_content_image_panel';
 import { CardCallOut } from '../common/card_callout';
+import { CardSubduedText } from '../common/card_subdued_text';
 import alertsImageSrc from './images/alerts.png';
 import * as i18n from './translations';
 
@@ -30,9 +22,6 @@ export const AlertsCard: OnboardingCardComponent = ({
   setExpandedCardId,
   setComplete,
 }) => {
-  const { colorMode } = useEuiTheme();
-  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
-
   const isIntegrationsCardComplete = useMemo(
     () => isCardComplete(OnboardingCardId.integrations),
     [isCardComplete]
@@ -51,13 +40,9 @@ export const AlertsCard: OnboardingCardComponent = ({
         alignItems="flexStart"
       >
         <EuiFlexItem grow={false}>
-          <EuiText
-            data-test-subj="alertsCardDescription"
-            size="s"
-            color={isDarkMode ? 'text' : 'subdued'}
-          >
+          <CardSubduedText data-test-subj="alertsCardDescription" size="s">
             {i18n.ALERTS_CARD_DESCRIPTION}
-          </EuiText>
+          </CardSubduedText>
           {!isIntegrationsCardComplete && (
             <>
               <EuiSpacer size="m" />

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/assistant_card.tsx

@@ -6,15 +6,7 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiText,
-  useEuiTheme,
-  COLOR_MODES_STANDARD,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { OnboardingCardId } from '../../../../constants';
 import type { OnboardingCardComponent } from '../../../../types';
@@ -22,6 +14,7 @@ import * as i18n from './translations';
 import { OnboardingCardContentPanel } from '../common/card_content_panel';
 import { ConnectorCards } from '../common/connectors/connector_cards';
 import { CardCallOut } from '../common/card_callout';
+import { CardSubduedText } from '../common/card_subdued_text';
 import type { AssistantCardMetadata } from './types';
 import { MissingPrivilegesCallOut } from '../common/connectors/missing_privileges';
 
@@ -31,8 +24,6 @@ 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]
@@ -47,18 +38,11 @@ export const AssistantCard: OnboardingCardComponent<AssistantCardMetadata> = ({
   const canCreateConnectors = checkCompleteMetadata?.canCreateConnectors;
 
   return (
-    <OnboardingCardContentPanel
-      style={{
-        paddingTop: 0,
-        ...(isDarkMode && { backgroundColor: euiTheme.colors.lightestShade }),
-      }}
-    >
+    <OnboardingCardContentPanel>
       {canExecuteConnectors ? (
         <EuiFlexGroup direction="column">
           <EuiFlexItem grow={false}>
-            <EuiText size="s" color={isDarkMode ? 'text' : 'subdued'}>
-              {i18n.ASSISTANT_CARD_DESCRIPTION}
-            </EuiText>
+            <CardSubduedText size="s">{i18n.ASSISTANT_CARD_DESCRIPTION}</CardSubduedText>
           </EuiFlexItem>
           <EuiFlexItem>
             {isIntegrationsCardComplete ? (

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_image_panel.styles.ts

@@ -6,15 +6,12 @@
  */
 
 import { css } from '@emotion/css';
-import { useEuiTheme, useEuiShadow, COLOR_MODES_STANDARD } from '@elastic/eui';
+import { useEuiTheme, useEuiShadow } from '@elastic/eui';
 
 export const useCardContentImagePanelStyles = () => {
-  const { euiTheme, colorMode } = useEuiTheme();
+  const { euiTheme } = 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%;
     }

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_panel.styles.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { css } from '@emotion/css';
+import { COLOR_MODES_STANDARD, useEuiTheme } from '@elastic/eui';
+import { useDarkPanelStyles } from '../../onboarding_card_panel.styles';
+
+export const NESTED_PANEL_CLASS_NAME = 'onboardingCardContentPanelNested';
+
+export const useCardContentPanelStyles = () => {
+  const { euiTheme, colorMode } = useEuiTheme();
+  const darkPanelStyles = useDarkPanelStyles(colorMode === COLOR_MODES_STANDARD.dark);
+
+  return css`
+    padding-top: 0;
+    ${darkPanelStyles}
+
+    .${NESTED_PANEL_CLASS_NAME} {
+      padding-top: ${euiTheme.size.s};
+      ${darkPanelStyles}
+    }
+  `;
+};

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_panel.tsx

@@ -5,24 +5,19 @@
  * 2.0.
  */
 import React, { type PropsWithChildren } from 'react';
-import { COLOR_MODES_STANDARD, EuiPanel, useEuiTheme, type EuiPanelProps } from '@elastic/eui';
-import { css } from '@emotion/react';
+import { EuiPanel, type EuiPanelProps } from '@elastic/eui';
+import classnames from 'classnames';
+import { useCardContentPanelStyles, NESTED_PANEL_CLASS_NAME } from './card_content_panel.styles';
 
 export const OnboardingCardContentPanel = React.memo<PropsWithChildren<EuiPanelProps>>(
-  ({ children, ...panelProps }) => {
-    const { euiTheme, colorMode } = useEuiTheme();
-    const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
+  ({ children, className, ...panelProps }) => {
+    const styles = useCardContentPanelStyles();
+    const panelClassName = classnames(styles);
+    const nestedClassName = classnames(NESTED_PANEL_CLASS_NAME, className);
+
     return (
-      <EuiPanel
-        paddingSize="m"
-        hasShadow={false}
-        hasBorder={false}
-        css={css`
-          background-color: ${isDarkMode ? euiTheme.colors.lightestShade : ''};
-          padding-top: 0;
-        `}
-      >
-        <EuiPanel {...panelProps} hasShadow={false} paddingSize="l">
+      <EuiPanel paddingSize="m" hasShadow={false} hasBorder={false} className={panelClassName}>
+        <EuiPanel {...panelProps} hasShadow={false} paddingSize="l" className={nestedClassName}>
           {children}
         </EuiPanel>
       </EuiPanel>

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_subdued_text.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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, { type PropsWithChildren } from 'react';
+import { EuiText, useEuiTheme, COLOR_MODES_STANDARD, type EuiTextProps } from '@elastic/eui';
+
+export type CardSubduedTextProps = PropsWithChildren<EuiTextProps>;
+export const CardSubduedText = React.memo<CardSubduedTextProps>(({ children, ...props }) => {
+  const { colorMode } = useEuiTheme();
+  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
+  return (
+    <EuiText {...props} color={isDarkMode ? 'text' : 'subdued'}>
+      {children}
+    </EuiText>
+  );
+});
+CardSubduedText.displayName = 'CardSubduedText';

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/dashboards_card.tsx

@@ -6,22 +6,14 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiSpacer,
-  EuiText,
-  useEuiTheme,
-  COLOR_MODES_STANDARD,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSpacer } from '@elastic/eui';
 import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { OnboardingCardId } from '../../../../constants';
 import type { OnboardingCardComponent } from '../../../../types';
 import { OnboardingCardContentImagePanel } from '../common/card_content_image_panel';
 import { CardCallOut } from '../common/card_callout';
 import { CardLinkButton } from '../common/card_link_button';
+import { CardSubduedText } from '../common/card_subdued_text';
 import dashboardsImageSrc from './images/dashboards.png';
 import * as i18n from './translations';
 
@@ -30,9 +22,6 @@ export const DashboardsCard: OnboardingCardComponent = ({
   setComplete,
   setExpandedCardId,
 }) => {
-  const { colorMode } = useEuiTheme();
-  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
-
   const isIntegrationsCardComplete = useMemo(
     () => isCardComplete(OnboardingCardId.integrations),
     [isCardComplete]
@@ -54,13 +43,9 @@ export const DashboardsCard: OnboardingCardComponent = ({
         alignItems="flexStart"
       >
         <EuiFlexItem grow={false}>
-          <EuiText
-            data-test-subj="dashboardsDescription"
-            size="s"
-            color={isDarkMode ? 'text' : 'subdued'}
-          >
+          <CardSubduedText data-test-subj="dashboardsDescription" size="s">
             {i18n.DASHBOARDS_CARD_DESCRIPTION}
-          </EuiText>
+          </CardSubduedText>
           {!isIntegrationsCardComplete && (
             <>
               <EuiSpacer size="m" />

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/rules_card.tsx

@@ -6,29 +6,18 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiSpacer,
-  EuiText,
-  useEuiTheme,
-  COLOR_MODES_STANDARD,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSpacer } from '@elastic/eui';
 import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { SecuritySolutionLinkButton } from '../../../../../common/components/links';
 import { OnboardingCardId } from '../../../../constants';
 import type { OnboardingCardComponent } from '../../../../types';
 import { OnboardingCardContentImagePanel } from '../common/card_content_image_panel';
 import { CardCallOut } from '../common/card_callout';
+import { CardSubduedText } from '../common/card_subdued_text';
 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]
@@ -47,13 +36,9 @@ export const RulesCard: OnboardingCardComponent = ({ isCardComplete, setExpanded
         alignItems="flexStart"
       >
         <EuiFlexItem grow={false}>
-          <EuiText
-            data-test-subj="rulesCardDescription"
-            size="s"
-            color={isDarkMode ? 'text' : 'subdued'}
-          >
+          <CardSubduedText data-test-subj="rulesCardDescription" size="s">
             {i18n.RULES_CARD_DESCRIPTION}
-          </EuiText>
+          </CardSubduedText>
           {!isIntegrationsCardComplete && (
             <>
               <EuiSpacer size="m" />

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts

@@ -14,6 +14,7 @@ export const useCardPanelStyles = () => {
   const { euiTheme, colorMode } = useEuiTheme();
   const successBackgroundColor = useEuiBackgroundColor('success');
   const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
+  const darkModeStyles = useDarkPanelStyles(isDarkMode);
 
   return css`
     .onboardingCardHeader {
@@ -57,11 +58,15 @@ export const useCardPanelStyles = () => {
         background-color: ${successBackgroundColor};
       }
     }
-    ${isDarkMode
-      ? `
-          background-color: ${euiTheme.colors.lightestShade};
-          border: 1px solid ${euiTheme.colors.mediumShade};
-        `
-      : ''}
+    ${darkModeStyles}
   `;
 };
+
+export const useDarkPanelStyles = (isDarkMode: boolean) => {
+  const { euiTheme } = useEuiTheme();
+  const darkPanelStyles = css`
+    background-color: ${euiTheme.colors.lightestShade};
+    border-color: ${euiTheme.colors.mediumShade};
+  `;
+  return isDarkMode ? darkPanelStyles : '';
+};