Align font size and style (#355)

* Update flyout header using small text Signed-off-by: Lin Wang <[email protected]> * Use small size for empty prompt body Signed-off-by: Lin Wang <[email protected]> * Update EuiTitle to EuiText Signed-off-by: Lin Wang <[email protected]> --------- Signed-off-by: Lin Wang <[email protected]>
opensearch-project · Sep 3, 2024 · 0129b13 · 0129b13
1 parent 63326ee
commit 0129b13
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git 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,22 +256,22 @@ export const ModelDeploymentTable = ({
               {loading ? (
                 <EuiEmptyPrompt
                   body={
-                    <>
+                    <EuiText size="s">
                       <EuiSpacer size="l" />
                       Loading deployed models...
                       <EuiSpacer size="xl" />
-                    </>
+                    </EuiText>
                   }
                   aria-label="loading models"
                 />
               ) : (
                 <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
@@ -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
@@ -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
@@ -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
         }
       />
     </>