[Look&Feel] Consistency and density improvements

public/components/CodeModal/CodeModal.tsx

@@ -17,6 +17,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiCodeBlock,
+  EuiText,
 } from '@elastic/eui';
 
 interface CodeModalProps {
@@ -33,7 +34,9 @@ export const CodeModal = (props: CodeModalProps) => {
         <EuiModalHeader>
           <EuiModalHeaderTitle>
             <div>
-              <p>{props.title}</p>
+              <EuiText size="s">
+                <h2>{props.title}</h2>
+              </EuiText>
               {props.subtitle ? (
                 <p className="modelSubtitle">{props.subtitle}</p>
               ) : (

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx

@@ -39,10 +39,16 @@ export const ConfirmUnlinkDetectorModal = (
         maxWidth={450}
       >
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{'Remove association?'}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>
+                {'Remove association?'}
+              </h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
-          <EuiText>
+          <EuiText size="s">
             Removing association unlinks {props.detector.name} detector from the
             visualization but does not delete it. The detector association can
             be restored.

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx

@@ -20,7 +20,7 @@ export const EmptyAssociatedDetectorMessage = (props: EmptyDetectorProps) => (
     data-test-subj="emptyAssociatedDetectorFlyoutMessage"
     style={{ maxWidth: '45em' }}
     body={
-      <EuiText>
+      <EuiText size="s">
         <p>
           {props.isFilterApplied
             ? FILTER_TEXT

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli
         class="euiText euiText--medium"
       >
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         >
           <p>
             There are no detectors matching your search
@@ -56,7 +56,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli
         class="euiText euiText--medium"
       >
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         >
           <p>
             There are no anomaly detectors associated with test-title visualization.

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx

@@ -15,6 +15,7 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiCallOut,
+  EuiText,
 } from '@elastic/eui';
 import { get, isEmpty } from 'lodash';
 import '../styles.scss';
@@ -85,7 +86,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
       const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
       const refs = indexPattern.references as References[];
       const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
-      setDataSourceId(foundDataSourceId);
+      setDataSourceId(foundDataSourceId); 
     } catch (error) {
       console.error("Error fetching index pattern:", error);
     }
@@ -270,7 +271,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
       getDetectorList(
         getAllDetectorsQueryParamsWithDataSourceId(dataSourceId)
       )
-    );
+    );  
   };
 
   const handleUnlinkDetectorAction = (detector: DetectorListItem) => {
@@ -334,11 +335,11 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
         onClose={closeFlyout}
       >
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle>
+          <EuiText size="s">
             <h2 id="associated-detectors__title">
               Associated anomaly detectors
             </h2>
-          </EuiTitle>
+          </EuiText>
         </EuiFlyoutHeader>
         {associationLimitReached ? (
           <EuiCallOut

public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx

@@ -141,7 +141,7 @@ function AddAnomalyDetector({
       const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
       const refs = indexPattern.references as References[];
       const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
-      setDataSourceId(foundDataSourceId);
+      setDataSourceId(foundDataSourceId); 
     } catch (error) {
       console.error("Error fetching index pattern:", error);
     }
@@ -167,7 +167,7 @@ function AddAnomalyDetector({
     }
     fetchData();
     createEmbeddable();
-  }, [dataSourceId]);
+  }, [dataSourceId]); 
 
   const [isShowVis, setIsShowVis] = useState(false);
   const [accordionsOpen, setAccordionsOpen] = useState({ modelFeatures: true });
@@ -465,7 +465,7 @@ function AddAnomalyDetector({
 
   const getEverythingSuccessfulButton = (detectorId, shingleSize) => {
     return (
-      <EuiText>
+      <EuiText size="s">
         <p>
           Attempting to initialize the detector with historical data. This
           initializing process takes approximately 1 minute if you have data in
@@ -586,9 +586,9 @@ function AddAnomalyDetector({
         {(formikProps) => (
           <>
             <EuiFlyoutHeader hasBorder>
-              <EuiTitle>
+              <EuiText size="s">
                 <h2 id="add-anomaly-detector__title">Add anomaly detector</h2>
-              </EuiTitle>
+              </EuiText>
             </EuiFlyoutHeader>
             <EuiFlyoutBody>
               {associationLimitReached ? (
@@ -669,7 +669,7 @@ function AddAnomalyDetector({
                         isOpen={accordionsOpen.detectorDetails}
                         onToggle={() => onAccordionToggle('detectorDetails')}
                         subTitle={
-                          <EuiText size="m">
+                          <EuiText size="s">
                             <p>
                               Detector interval: {intervalValue} minute(s);
                               Window delay: {delayValue} minute(s)

public/pages/ConfigureModel/containers/ConfigureModel.tsx

@@ -17,7 +17,6 @@ import {
   EuiFlexGroup,
   EuiPage,
   EuiSmallButton,
-  EuiTitle,
   EuiSmallButtonEmpty,
   EuiSpacer,
   EuiText,
@@ -298,19 +297,19 @@ export function ConfigureModel(props: ConfigureModelProps) {
             <EuiPageBody>
               <EuiPageHeader>
                 <EuiPageHeaderSection>
-                  <EuiTitle
-                    size="l"
+                  <EuiText
+                    size="s"
                     data-test-subj="configureOrEditModelConfigurationTitle"
                   >
                     <h1>
                       {props.isEdit
                         ? 'Edit model configuration'
                         : 'Configure model'}{' '}
                     </h1>
-                  </EuiTitle>
+                  </EuiText>
                   <Fragment>
                     <EuiSpacer size="s" />
-                    <EuiText>
+                    <EuiText size="s">
                       Set the index fields that you want to find anomalies for
                       by defining the model features. You can also set other
                       model parameters such as category field and shingle size

public/pages/ConfigureModel/containers/SampleAnomalies.tsx

@@ -205,7 +205,7 @@ export function SampleAnomalies(props: SampleAnomaliesProps) {
       >
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiText>
+            <EuiText size="s">
               {firstPreview
                 ? 'You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.'
                 : 'Use the sample data as a reference to fine tune settings. To see the latest preview with your adjustments, click "Refresh preview". Once you are done with your edits, save your changes and run the detector to see real time anomalies for the new data set.'}{' '}
@@ -231,7 +231,6 @@ export function SampleAnomalies(props: SampleAnomaliesProps) {
                   getSampleAnomalies();
                 }
               }}
-              fill={!firstPreview}
               isLoading={isLoading}
             >
               {firstPreview ? 'Preview anomalies' : 'Refresh preview'}

public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap

@@ -14,18 +14,20 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
       <div
         class="euiPageHeaderSection"
       >
-        <h1
-          class="euiTitle euiTitle--large"
+        <div
+          class="euiText euiText--small"
           data-test-subj="configureOrEditModelConfigurationTitle"
         >
-          Configure model
-
-        </h1>
+          <h1>
+            Configure model
+
+          </h1>
+        </div>
         <div
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         >
           Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output.
 
@@ -910,7 +912,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                     class="euiFlexItem"
                   >
                     <div
-                      class="euiText euiText--medium"
+                      class="euiText euiText--small"
                     >
                       You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.
 
@@ -995,18 +997,20 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
       <div
         class="euiPageHeaderSection"
       >
-        <h1
-          class="euiTitle euiTitle--large"
+        <div
+          class="euiText euiText--small"
           data-test-subj="configureOrEditModelConfigurationTitle"
         >
-          Edit model configuration
-
-        </h1>
+          <h1>
+            Edit model configuration
+
+          </h1>
+        </div>
         <div
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         >
           Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output.
 

public/pages/Dashboard/Components/AnomaliesLiveChart.tsx

@@ -237,9 +237,9 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
           </h3>
         </EuiTitle>
       }
-      subTitle={`Live anomaly results across detectors for the last 30 minutes.
-                'The results refresh every 1 minute.
-                'For each detector, if an anomaly occurrence is detected at the end of the detector interval,
+      subTitle={`Live anomaly results across detectors for the last 30 minutes. 
+                'The results refresh every 1 minute. 
+                'For each detector, if an anomaly occurrence is detected at the end of the detector interval, 
                 'you will see a bar representing its anomaly grade.`}
       actions={[fullScreenButton()]}
       contentPanelClassName={isFullScreen ? 'full-screen' : undefined}
@@ -255,6 +255,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
         </EuiFlexGroup>
       ) : !hasLatestAnomalyResult ? (
         <EuiText
+          size="s"
           style={{
             color: '#666666',
             paddingTop: '12px',

public/pages/Dashboard/Components/EmptyDashboard/EmptyDashboard.tsx

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-import { EuiEmptyPrompt, EuiLink, EuiIcon } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLink, EuiIcon, EuiText } from '@elastic/eui';
 import React, { Component, Fragment } from 'react';
 import { CreateDetectorButtons } from '../../../../components/CreateDetectorButtons/CreateDetectorButtons';
 import { BASE_DOCS_LINK } from '../../../../utils/constants';
@@ -22,17 +22,19 @@ export class EmptyDashboard extends Component<{}, {}> {
         title={<h2>You have no detectors</h2>}
         body={
           <Fragment>
-            <p>Create detector first to detect anomalies in your data.</p>
-            <p>
-              Dashboard will generate insights on the anomalies across all of
-              your detectors.
-            </p>
-            <p>
-              Read about{' '}
-              <EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
-                Get started with Anomaly detection
-              </EuiLink>{' '}
-            </p>
+            <EuiText size="s">
+              <p>Create detector first to detect anomalies in your data.</p>
+              <p>
+                Dashboard will generate insights on the anomalies across all of
+                your detectors.
+              </p>
+              <p>
+                Read about{' '}
+                <EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
+                  Get started with Anomaly detection
+                </EuiLink>{' '}
+              </p>
+            </EuiText>
           </Fragment>
         }
         actions={<CreateDetectorButtons />}