Update epm illustration (#64975)

* update EPM header illustration

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_card.tsx

@@ -46,7 +46,7 @@ export function PackageCard({
       layout="horizontal"
       title={title || ''}
       description={description}
-      icon={<PackageIcon icons={icons} packageName={name} version={version} size="l" />}
+      icon={<PackageIcon icons={icons} packageName={name} version={version} size="xl" />}
       href={url}
     />
   );

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/home/header.tsx

@@ -3,15 +3,18 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
 import React, { memo } from 'react';
+import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useLinks } from '../../hooks';
+import { useCore } from '../../../../hooks';
 
 export const HeroCopy = memo(() => {
   return (
-    <EuiFlexGroup direction="column" gutterSize="m" justifyContent="center">
+    <EuiFlexGroup direction="column" gutterSize="s" justifyContent="center">
       <EuiFlexItem grow={false}>
         <EuiText>
           <h1>
@@ -38,16 +41,20 @@ export const HeroCopy = memo(() => {
 
 export const HeroImage = memo(() => {
   const { toAssets } = useLinks();
-  const ImageWrapper = styled.div`
-    margin-bottom: -62px;
+  const { uiSettings } = useCore();
+  const IS_DARK_THEME = uiSettings.get('theme:darkMode');
+
+  const Illustration = styled(EuiImage).attrs(props => ({
+    alt: i18n.translate('xpack.ingestManager.epm.illustrationAltText', {
+      defaultMessage: 'Illustration of an Elastic integration',
+    }),
+    url: IS_DARK_THEME
+      ? toAssets('illustration_integrations_darkmode.svg')
+      : toAssets('illustration_integrations_lightmode.svg'),
+  }))`
+    margin-bottom: -60px;
+    width: 80%;
   `;
 
-  return (
-    <ImageWrapper>
-      <EuiImage
-        alt="Illustration of computer"
-        url={toAssets('illustration_kibana_getting_started@2x.png')}
-      />
-    </ImageWrapper>
-  );
+  return <Illustration />;
 });