[Enterprise Search] Fix various icons in dark mode (#76430) (#76461)

* Update Home catalogue icons to use new 28.0 EUI app icons

* Fix App Search engine icons in dark mode

- Convert to React SVG element in order to be able to inherit correct fill in dark mode
- Fix vertical centering (taking advantage of SVG centering for us)
- Move icons directly to the engines overview component instead of having to reach upwards to a shared assets folder for them

* [Cleanup] Move Setup Guide images

- to be nested within their own component views that use them, instead of having to grab them upwards from a shared assets folder

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/assets/engine_icon.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * 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 from 'react';
+
+export const EngineIcon: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 18"
+    width="18"
+    height="18"
+    className="euiIcon engineIcon"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.776 1.389a7.66 7.66 0 00-.725-.04v.001H9a7.65 7.65 0 00-.051 15.301v-.001H9a7.65 7.65 0 00.776-15.261zm-1.52 1.254a6.401 6.401 0 00.02 12.716l2.333-3.791a.875.875 0 00-.354-1.242l-3.07-1.534a2.125 2.125 0 01-.859-3.015l1.93-3.134zm1.489 12.714l1.929-3.134a2.125 2.125 0 00-.86-3.015l-3.07-1.534a.875.875 0 01-.353-1.242L9.724 2.64a6.401 6.401 0 01.02 12.717z"
+    />
+  </svg>
+);

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/assets/meta_engine_icon.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * 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 from 'react';
+
+export const MetaEngineIcon: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 18"
+    width="18"
+    height="18"
+    className="euiIcon engineIcon"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 9a5.002 5.002 0 005 5 5 5 0 10-5-5zm5.506 1.653L8.37 12.697a3.751 3.751 0 01-.003-7.394L7.402 7.04a1.625 1.625 0 00.519 2.142l1.465.976a.375.375 0 01.12.495zm1.092.607l-.777 1.4a3.751 3.751 0 00-.04-7.329L8.494 7.647a.375.375 0 00.12.495l1.465.976c.705.47.93 1.402.52 2.142z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.5 1.375A5.125 5.125 0 001.375 6.5v5A5.125 5.125 0 006.5 16.625h5a5.125 5.125 0 005.125-5.125v-5A5.125 5.125 0 0011.5 1.375h-5zM2.625 6.5A3.875 3.875 0 016.5 2.625h5A3.875 3.875 0 0115.375 6.5v5a3.875 3.875 0 01-3.875 3.875h-5A3.875 3.875 0 012.625 11.5v-5z"
+    />
+  </svg>
+);

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.scss

@@ -15,6 +15,8 @@
 .engineIcon {
   display: inline-block;
   width: $euiSize;
-  height: $euiSize;
+  // Use line-height of EuiTitle - SVG will vertically center accordingly
+  height: map-get(map-get($euiTitles, 's'), 'line-height');
+  vertical-align: top;
   margin-right: $euiSizeXS;
 }

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx

@@ -20,8 +20,8 @@ import { FlashMessages } from '../../../shared/flash_messages';
 import { LicenseContext, ILicenseContext, hasPlatinumLicense } from '../../../shared/licensing';
 import { KibanaContext, IKibanaContext } from '../../../index';
 
-import EnginesIcon from '../../assets/engine.svg';
-import MetaEnginesIcon from '../../assets/meta_engine.svg';
+import { EngineIcon } from './assets/engine_icon';
+import { MetaEngineIcon } from './assets/meta_engine_icon';
 
 import { EngineOverviewHeader, LoadingState, EmptyState } from './components';
 import { EngineTable } from './engine_table';
@@ -93,7 +93,7 @@ export const EngineOverview: React.FC = () => {
         <EuiPageContentHeader>
           <EuiTitle size="s">
             <h2>
-              <img src={EnginesIcon} alt="" className="engineIcon" />
+              <EngineIcon />
               <FormattedMessage
                 id="xpack.enterpriseSearch.appSearch.enginesOverview.engines"
                 defaultMessage="Engines"
@@ -118,7 +118,7 @@ export const EngineOverview: React.FC = () => {
             <EuiPageContentHeader>
               <EuiTitle size="s">
                 <h2>
-                  <img src={MetaEnginesIcon} alt="" className="engineIcon" />
+                  <MetaEngineIcon />
                   <FormattedMessage
                     id="xpack.enterpriseSearch.appSearch.enginesOverview.metaEngines"
                     defaultMessage="Meta Engines"

x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx

@@ -13,7 +13,7 @@ import { APP_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { SendAppSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
-import GettingStarted from '../../assets/getting_started.png';
+import GettingStarted from './assets/getting_started.png';
 
 export const SetupGuide: React.FC = () => (
   <SetupGuideLayout

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/setup_guide/setup_guide.tsx

@@ -13,7 +13,7 @@ import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide';
 import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { SendWorkplaceSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
-import GettingStarted from '../../assets/getting_started.png';
+import GettingStarted from './assets/getting_started.png';
 
 const GETTING_STARTED_LINK_URL =
   'https://www.elastic.co/guide/en/workplace-search/current/workplace-search-getting-started.html';

x-pack/plugins/enterprise_search/public/plugin.ts

@@ -27,8 +27,6 @@ import {
   WORKPLACE_SEARCH_PLUGIN,
 } from '../common/constants';
 import { ExternalUrl, IExternalUrl } from './applications/shared/enterprise_search_url';
-import AppSearchLogo from './applications/app_search/assets/logo.svg';
-import WorkplaceSearchLogo from './applications/workplace_search/assets/logo.svg';
 
 export interface ClientConfigType {
   host?: string;
@@ -117,7 +115,7 @@ export class EnterpriseSearchPlugin implements Plugin {
       plugins.home.featureCatalogue.register({
         id: APP_SEARCH_PLUGIN.ID,
         title: APP_SEARCH_PLUGIN.NAME,
-        icon: AppSearchLogo,
+        icon: 'appSearchApp',
         description: APP_SEARCH_PLUGIN.DESCRIPTION,
         path: APP_SEARCH_PLUGIN.URL,
         category: FeatureCatalogueCategory.DATA,
@@ -127,7 +125,7 @@ export class EnterpriseSearchPlugin implements Plugin {
       plugins.home.featureCatalogue.register({
         id: WORKPLACE_SEARCH_PLUGIN.ID,
         title: WORKPLACE_SEARCH_PLUGIN.NAME,
-        icon: WorkplaceSearchLogo,
+        icon: 'workplaceSearchApp',
         description: WORKPLACE_SEARCH_PLUGIN.DESCRIPTION,
         path: WORKPLACE_SEARCH_PLUGIN.URL,
         category: FeatureCatalogueCategory.DATA,