Ftr 142 create detector desc text below header

public/components/ContentPanel/ContentPanel.tsx

@@ -28,8 +28,8 @@ const renderSubTitleText = (subTitleText: string | JSX.Element): JSX.Element | n
   if (typeof subTitleText === 'string') {
     if (!subTitleText) return null;
     return (
-      <EuiText size="s">
-        <span style={{ color: 'grey', fontWeight: 200, fontSize: '15px' }}>{subTitleText}</span>
+      <EuiText size="s" color="subdued">
+        {subTitleText}
       </EuiText>
     );
   }

public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx

@@ -12,6 +12,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { createDetectorSteps } from '../../../utils/constants';
 import { EMPTY_DEFAULT_ALERT_CONDITION, MAX_ALERT_CONDITIONS } from '../utils/constants';
@@ -104,6 +105,10 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
           </h3>
         </EuiTitle>
 
+        <EuiText size="s" color="subdued">
+          Get notified when specific rule conditions are found by the detector.
+        </EuiText>
+
         <EuiSpacer size={'m'} />
 
         {triggers.map((alertCondition, index) => (

public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, EuiText } from '@elastic/eui';
 import FieldMappingsTable from '../components/RequiredFieldMapping';
 import { createDetectorSteps } from '../../../utils/constants';
 import { ContentPanel } from '../../../../../components/ContentPanel';
@@ -143,12 +143,19 @@ export default class ConfigureFieldMapping extends Component<
     return (
       <div>
         {!isEdit && (
-          <div>
+          <>
             <EuiTitle size={'l'}>
               <h3>{createDetectorSteps[DetectorCreationStep.CONFIGURE_FIELD_MAPPING].title}</h3>
             </EuiTitle>
+
+            <EuiText size="s" color="subdued">
+              To perform threat detection, known field names from your log data source are
+              automatically mapped to rule field names. Additional fields that may require manual
+              mapping will be shown below.
+            </EuiText>
+
             <EuiSpacer size={'m'} />
-          </div>
+          </>
         )}
 
         {ruleFields.length > 0 && (

public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx

@@ -9,6 +9,7 @@ import {
   EuiTitle,
   EuiHorizontalRule,
   CriteriaWithPagination,
+  EuiText,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { DetectionRulesTable } from './DetectionRulesTable';
@@ -63,9 +64,15 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
     <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px' }}>
       <EuiAccordion
         buttonContent={
-          <EuiTitle>
-            <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
-          </EuiTitle>
+          <>
+            <EuiTitle>
+              <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
+            </EuiTitle>
+            <EuiText size="s" color="subdued">
+              Detection rules are automatically added based on your chosen log types. Additionally,
+              you may add or remove detection rules for this detector.
+            </EuiText>
+          </>
         }
         buttonProps={{ style: { paddingLeft: '10px', paddingRight: '10px' } }}
         id={'detectorRulesAccordion'}

public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx

@@ -68,8 +68,11 @@ export default class DetectorType extends Component<DetectorTypeProps, DetectorT
       </EuiFlexItem>
     ));
     return (
-      <ContentPanel title={'Threat detector type'} titleSize={'m'}>
-        <EuiSpacer size={'m'} />
+      <ContentPanel
+        title={'Log types and rules'}
+        titleSize={'m'}
+        subTitleText="Choose the log types that correspond to your data source. Detection rules are automatically added based on your chosen log types."
+      >
         <EuiFormRow
           label={
             <div>

public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, EuiText } from '@elastic/eui';
 import { Detector, PeriodSchedule } from '../../../../../../models/interfaces';
 import DetectorBasicDetailsForm from '../components/DetectorDetails';
 import DetectorDataSource from '../components/DetectorDataSource';
@@ -169,6 +169,11 @@ export default class DefineDetector extends Component<DefineDetectorProps, Defin
           <h3>{`${isEdit ? 'Edit' : 'Define'} detector`}</h3>
         </EuiTitle>
 
+        <EuiText size="s" color="subdued">
+          Configure your detector to identify relevant security findings and potential threats from
+          your log data.
+        </EuiText>
+
         <EuiSpacer size={'m'} />
 
         <DetectorBasicDetailsForm

public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx

@@ -41,6 +41,9 @@ export class ReviewAndCreate extends React.Component<ReviewAndCreateProps, Revie
         <EuiTitle size={'l'}>
           <h3>Review and create</h3>
         </EuiTitle>
+
+        <EuiSpacer size={'m'} />
+
         <DetectorDetailsView
           {...this.props}
           detector={this.props.detector}