From 981c8c0932f085f14352fe8d268667a408a78ed2 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Wed, 4 Sep 2024 00:00:13 +0800
Subject: [PATCH] Align font size and style (#355)

* Update flyout header using small text

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Use small size for empty prompt body

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Update EuiTitle to EuiText

Signed-off-by: Lin Wang <wonglam@amazon.com>

---------

Signed-off-by: Lin Wang <wonglam@amazon.com>
(cherry picked from commit 0129b130966f23025bf1f9485807dda1c35af579)
---
 .../components/monitoring/model_deployment_table.tsx | 12 ++++++------
 .../components/preview_panel/connector_details.tsx   |  6 +++---
 public/components/preview_panel/index.tsx            |  6 +++---
 public/components/preview_panel/nodes_table.tsx      | 12 ++++++++----
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/public/components/monitoring/model_deployment_table.tsx b/public/components/monitoring/model_deployment_table.tsx
index 28841d61..408193ba 100644
--- a/public/components/monitoring/model_deployment_table.tsx
+++ b/public/components/monitoring/model_deployment_table.tsx
@@ -226,7 +226,7 @@ export const ModelDeploymentTable = ({
           <EuiEmptyPrompt
             style={{ maxWidth: 528 }}
             body={
-              <>
+              <EuiText size="s">
                 <EuiSpacer size="l" />
                 Deployed models will appear here. For more information, see{' '}
                 <EuiLink
@@ -239,7 +239,7 @@ export const ModelDeploymentTable = ({
                 </EuiLink>
                 .
                 <EuiSpacer size="xl" />
-              </>
+              </EuiText>
             }
             aria-label="no deployed models"
           />
@@ -256,11 +256,11 @@ export const ModelDeploymentTable = ({
               {loading ? (
                 <EuiEmptyPrompt
                   body={
-                    <>
+                    <EuiText size="s">
                       <EuiSpacer size="l" />
                       Loading deployed models...
                       <EuiSpacer size="xl" />
-                    </>
+                    </EuiText>
                   }
                   aria-label="loading models"
                 />
@@ -268,10 +268,10 @@ export const ModelDeploymentTable = ({
                 <EuiEmptyPrompt
                   title={<EuiSpacer size="s" />}
                   body={
-                    <>
+                    <EuiText size="s">
                       There are no results to your search. Reset the search criteria to view the
                       deployed models.
-                    </>
+                    </EuiText>
                   }
                   actions={
                     <>
diff --git a/public/components/preview_panel/connector_details.tsx b/public/components/preview_panel/connector_details.tsx
index 08c92afb..64a18a2b 100644
--- a/public/components/preview_panel/connector_details.tsx
+++ b/public/components/preview_panel/connector_details.tsx
@@ -7,11 +7,11 @@ import React from 'react';
 import {
   EuiDescriptionList,
   EuiDescriptionListTitle,
-  EuiTitle,
   EuiSpacer,
   EuiDescriptionListDescription,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiText,
 } from '@elastic/eui';
 import { CopyableText } from '../common';
 
@@ -20,9 +20,9 @@ export const ConnectorDetails = (props: { name?: string; id?: string; descriptio
   return (
     <>
       <EuiSpacer size="m" />
-      <EuiTitle size="s">
+      <EuiText size="s">
         <h3>Connector details</h3>
-      </EuiTitle>
+      </EuiText>
       <EuiSpacer size="m" />
       <EuiDescriptionList compressed>
         <EuiFlexGroup>
diff --git a/public/components/preview_panel/index.tsx b/public/components/preview_panel/index.tsx
index 6c27206a..f69ec289 100644
--- a/public/components/preview_panel/index.tsx
+++ b/public/components/preview_panel/index.tsx
@@ -8,7 +8,6 @@ import {
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
-  EuiTitle,
   EuiHealth,
   EuiDescriptionList,
   EuiDescriptionListTitle,
@@ -17,6 +16,7 @@ import {
   EuiTextColor,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiText,
 } from '@elastic/eui';
 import { APIProvider } from '../../apis/api_provider';
 import { useFetcher } from '../../hooks/use_fetcher';
@@ -114,9 +114,9 @@ export const PreviewPanel = ({ onClose, model, dataSourceId }: Props) => {
   return (
     <EuiFlyout onClose={onCloseFlyout}>
       <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
+        <EuiText size="s">
           <h2>{name}</h2>
-        </EuiTitle>
+        </EuiText>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <EuiDescriptionList compressed>
diff --git a/public/components/preview_panel/nodes_table.tsx b/public/components/preview_panel/nodes_table.tsx
index 6355d5dd..8dd4886f 100644
--- a/public/components/preview_panel/nodes_table.tsx
+++ b/public/components/preview_panel/nodes_table.tsx
@@ -16,7 +16,6 @@ import {
   EuiText,
   EuiDescriptionList,
   EuiDescriptionListTitle,
-  EuiTitle,
   EuiSpacer,
   EuiDescriptionListDescription,
 } from '@elastic/eui';
@@ -117,9 +116,9 @@ export function NodesTable(props: { nodes: INode[]; loading: boolean; nodesStatu
       <EuiSpacer size="l" />
       <EuiDescriptionList>
         <EuiDescriptionListTitle>
-          <EuiTitle size="s">
+          <EuiText size="s">
             <h3>Status by node</h3>
-          </EuiTitle>
+          </EuiText>
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription>{nodesStatus}</EuiDescriptionListDescription>
       </EuiDescriptionList>
@@ -132,7 +131,12 @@ export function NodesTable(props: { nodes: INode[]; loading: boolean; nodesStatu
         onChange={handleTableChange}
         loading={loading}
         noItemsMessage={
-          loading ? <EuiEmptyPrompt body={<>Loading...</>} aria-label="loading nodes" /> : undefined
+          loading ? (
+            <EuiEmptyPrompt
+              body={<EuiText size="s">Loading...</EuiText>}
+              aria-label="loading nodes"
+            />
+          ) : undefined
         }
       />
     </>