[Integrations UI] Add updated integrations subtitle (#102738)

* Add updated integrations subtitle * Fix header image declarations * Use theme hook for dark mode setting
elastic · Jun 21, 2021 · 773647e · 773647e
1 parent d82d1eb
commit 773647e
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 73 deletions.
diff --git a/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx b/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx
@@ -5,13 +5,19 @@
  * 2.0.
  */
 import React, { memo } from 'react';
-import { EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiSpacer, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { i18n } from '@kbn/i18n';
+
+import styled, { useTheme } from 'styled-components';
+
+import type { EuiTheme } from 'src/plugins/kibana_react/common';
+
 import { useLink } from '../../../hooks';
 import type { Section } from '../sections';
 
-import { HeroImage } from '../sections/epm/screens/home/header';
+import { useLinks } from '../hooks';
 
 import { WithHeaderLayout } from './';
 
@@ -20,18 +26,60 @@ interface Props {
   children?: React.ReactNode;
 }
 
+const Illustration = styled(EuiImage)`
+  margin-bottom: -68px;
+  width: 80%;
+`;
+
+const HeroImage = memo(() => {
+  const { toAssets } = useLinks();
+  const theme = useTheme() as EuiTheme;
+  const IS_DARK_THEME = theme.darkMode;
+
+  return (
+    <Illustration
+      alt={i18n.translate('xpack.fleet.epm.illustrationAltText', {
+        defaultMessage: 'Illustration of an integration',
+      })}
+      url={
+        IS_DARK_THEME
+          ? toAssets('illustration_integrations_darkmode.svg')
+          : toAssets('illustration_integrations_lightmode.svg')
+      }
+    />
+  );
+});
+
 export const DefaultLayout: React.FunctionComponent<Props> = memo(({ section, children }) => {
   const { getHref } = useLink();
 
   return (
     <WithHeaderLayout
       rightColumn={<HeroImage />}
       leftColumn={
-        <EuiText>
-          <h1>
-            <FormattedMessage id="xpack.fleet.integrationsAppTitle" defaultMessage="Integrations" />{' '}
-          </h1>
-        </EuiText>
+        <EuiFlexGroup direction="column" gutterSize="none" justifyContent="center">
+          <EuiText>
+            <h1>
+              <FormattedMessage
+                id="xpack.fleet.integrationsAppTitle"
+                defaultMessage="Integrations"
+              />
+            </h1>
+          </EuiText>
+
+          <EuiSpacer size="s" />
+
+          <EuiFlexItem grow={false}>
+            <EuiText size="m" color="subdued">
+              <p>
+                <FormattedMessage
+                  id="xpack.fleet.epm.pageSubtitle"
+                  defaultMessage="Collect data from popular apps and services."
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       }
       tabs={[
         {

diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/header.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/header.tsx
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -9064,7 +9064,6 @@
     "xpack.fleet.epm.categoryLabel": "カテゴリー",
     "xpack.fleet.epm.detailsTitle": "詳細",
     "xpack.fleet.epm.featuresLabel": "機能",
-    "xpack.fleet.epm.illustrationAltText": "統合の例",
     "xpack.fleet.epm.licenseLabel": "ライセンス",
     "xpack.fleet.epm.loadingIntegrationErrorTitle": "統合詳細の読み込みエラー",
     "xpack.fleet.epm.packageDetails.integrationList.agentCount": "エージェント",
@@ -9079,7 +9078,6 @@
     "xpack.fleet.epm.packageDetailsNav.packagePoliciesLinkText": "ポリシー",
     "xpack.fleet.epm.packageDetailsNav.settingsLinkText": "設定",
     "xpack.fleet.epm.pageSubtitle": "一般的なアプリやサービスの統合を参照する",
-    "xpack.fleet.epm.pageTitle": "統合",
     "xpack.fleet.epm.releaseBadge.betaDescription": "この統合は本番環境用ではありません。",
     "xpack.fleet.epm.releaseBadge.betaLabel": "ベータ",
     "xpack.fleet.epm.releaseBadge.experimentalDescription": "この統合は、急に変更されたり、将来のリリースで削除されたりする可能性があります。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -9150,7 +9150,6 @@
     "xpack.fleet.epm.categoryLabel": "类别",
     "xpack.fleet.epm.detailsTitle": "详情",
     "xpack.fleet.epm.featuresLabel": "功能",
-    "xpack.fleet.epm.illustrationAltText": "集成的图示",
     "xpack.fleet.epm.licenseLabel": "许可证",
     "xpack.fleet.epm.loadingIntegrationErrorTitle": "加载集成详情时出错",
     "xpack.fleet.epm.packageDetails.integrationList.agentCount": "代理",
@@ -9165,7 +9164,6 @@
     "xpack.fleet.epm.packageDetailsNav.packagePoliciesLinkText": "策略",
     "xpack.fleet.epm.packageDetailsNav.settingsLinkText": "设置",
     "xpack.fleet.epm.pageSubtitle": "浏览集成以了解热门应用和服务。",
-    "xpack.fleet.epm.pageTitle": "集成",
     "xpack.fleet.epm.releaseBadge.betaDescription": "在生产环境中不推荐使用此集成。",
     "xpack.fleet.epm.releaseBadge.betaLabel": "公测版",
     "xpack.fleet.epm.releaseBadge.experimentalDescription": "此集成可能有重大更改或将在未来版本中移除。",