[APM] Settings: Update layout and update/add descriptions

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx

@@ -13,6 +13,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
@@ -42,15 +43,21 @@ export function AgentConfigurations() {
       <EuiTitle size="l">
         <h1>
           {i18n.translate('xpack.apm.agentConfig.titleText', {
-            defaultMessage: 'Agent remote configuration',
+            defaultMessage: 'Agent central configuration',
           })}
         </h1>
       </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiText color="subdued">
+        {i18n.translate('xpack.apm.settings.agentConfig.descriptionText', {
+          defaultMessage: `This allows you to fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
+        })}
+      </EuiText>
       <EuiSpacer size="l" />
       <EuiPanel>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiTitle>
+            <EuiTitle size="s">
               <h2>
                 {i18n.translate(
                   'xpack.apm.agentConfig.configurationsPanelTitle',

x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.tsx

@@ -178,8 +178,8 @@ export function ApmIndices() {
           })}
         </h1>
       </EuiTitle>
-      <EuiSpacer size="l" />
-      <EuiText>
+      <EuiSpacer size="s" />
+      <EuiText color="subdued">
         {i18n.translate('xpack.apm.settings.apmIndices.description', {
           defaultMessage: `The APM UI uses index patterns to query your APM indices. If you've customized the index names that APM Server writes events to, you may need to update these patterns for the APM UI to work. Settings here take precedence over those set in kibana.yml.`,
         })}

x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx

@@ -9,9 +9,9 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
-  EuiSpacer,
   EuiTitle,
   EuiText,
+  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
@@ -82,14 +82,14 @@ export function CustomLinkOverview() {
         />
       )}
       <EuiPanel>
-        <EuiFlexGroup alignItems="center">
+        <EuiFlexGroup gutterSize="none" alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup alignItems="center">
+            <EuiFlexGroup alignItems="center" gutterSize="none">
               <EuiFlexItem grow={false}>
-                <EuiTitle>
+                <EuiTitle size="s">
                   <EuiFlexGroup
                     alignItems="center"
-                    gutterSize="s"
+                    gutterSize="none"
                     responsive={false}
                   >
                     <EuiFlexItem grow={false}>
@@ -117,11 +117,11 @@ export function CustomLinkOverview() {
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
-        <EuiSpacer size="l" />
-        <EuiText>
+        <EuiSpacer size="xs" />
+        <EuiText color="subdued" size="s">
           {i18n.translate('xpack.apm.settings.customizeUI.customLink.info', {
             defaultMessage:
-              'These links will be shown in the Actions context menu for transactions.',
+              'These links will be shown in the Actions context menu in selected areas of the app, e.g. by the transactions detail.',
           })}
         </EuiText>
         {hasValidLicense ? (

x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiTitle, EuiSpacer } from '@elastic/eui';
+import { EuiTitle, EuiSpacer, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { CustomLinkOverview } from './CustomLink';
 
@@ -15,11 +15,17 @@ export function CustomizeUI() {
     <>
       <EuiTitle size="l">
         <h1>
-          {i18n.translate('xpack.apm.settings.customizeApp', {
+          {i18n.translate('xpack.apm.settings.customizeApp.title', {
             defaultMessage: 'Customize app',
           })}
         </h1>
       </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiText color="subdued">
+        {i18n.translate('xpack.apm.settings.customizeApp.description', {
+          defaultMessage: `The following settings are available for you to extend the app experience.`,
+        })}
+      </EuiText>
       <EuiSpacer size="l" />
       <CustomLinkOverview />
     </>

x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx

@@ -73,8 +73,8 @@ export function AnomalyDetection() {
           })}
         </h1>
       </EuiTitle>
-      <EuiSpacer size="l" />
-      <EuiText>
+      <EuiSpacer size="s" />
+      <EuiText color="subdued">
         {i18n.translate('xpack.apm.settings.anomalyDetection.descriptionText', {
           defaultMessage: `Machine Learning's anomaly detection integration enables application health status indicators for services in each configured environment by identifying anomalies in latency.`,
         })}

x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx

@@ -69,7 +69,7 @@ export function JobsList({ data, status, onAddEnvironments }: Props) {
     <EuiPanel>
       <EuiFlexGroup>
         <EuiFlexItem>
-          <EuiTitle>
+          <EuiTitle size="s">
             <h2>
               {i18n.translate(
                 'xpack.apm.settings.anomalyDetection.jobList.environments',
@@ -91,8 +91,7 @@ export function JobsList({ data, status, onAddEnvironments }: Props) {
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer size="l" />
-      <EuiText>
+      <EuiText size="s" color="subdued">
         <FormattedMessage
           id="xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText"
           defaultMessage="To add anomaly detection to a new environment, create a machine learning job. Existing machine learning jobs can be managed in {mlJobsLink}."