fix home page issue

Signed-off-by: yubonluo <[email protected]>
opensearch-project · Sep 18, 2024 · 65a4ded · 65a4ded
1 parent b826df8
commit 65a4ded
Showing 1 changed file with 6 additions and 13 deletions.
diff --git a/src/plugins/workspace/public/components/home_get_start_card/use_case_card_title.tsx b/src/plugins/workspace/public/components/home_get_start_card/use_case_card_title.tsx
@@ -3,19 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import './setup_get_start_card.scss';
 import {
   EuiText,
   EuiTitle,
   EuiPanel,
-  EuiAvatar,
   EuiPopover,
   EuiFlexItem,
   EuiFlexGroup,
-  EuiFieldSearch,
   EuiContextMenu,
   EuiButtonIcon,
   EuiSmallButton,
   EuiPopoverTitle,
+  EuiCompressedFieldSearch,
 } from '@elastic/eui';
 import React, { useMemo, useState } from 'react';
 import { i18n } from '@osd/i18n';
@@ -111,23 +111,16 @@ export const UseCaseCardTitle = ({ filterWorkspaces, useCase, core }: UseCaseCar
 
     return {
       name: (
-        <EuiText className="eui-textTruncate" size="s">
+        <EuiText className="eui-textTruncate" size="s" color="default">
           {workspaceName}
         </EuiText>
       ),
       key: workspace.id,
-      icon: (
-        <EuiAvatar
-          size="s"
-          type="space"
-          name={workspaceName}
-          color={workspace.color}
-          initialsLength={2}
-        />
-      ),
+      icon: useCase.icon || 'logoOpenSearch',
       onClick: () => {
         window.location.assign(useCaseUrl);
       },
+      className: 'homeGettingStartedWorkspaceCardsIcon',
     };
   };
   const panels = [
@@ -158,7 +151,7 @@ export const UseCaseCardTitle = ({ filterWorkspaces, useCase, core }: UseCaseCar
             })}
           </EuiPopoverTitle>
           <EuiPanel hasBorder={false} color="transparent" paddingSize="s">
-            <EuiFieldSearch
+            <EuiCompressedFieldSearch
               placeholder={i18n.translate('workspace.getStartCard.popover.search.placeholder', {
                 defaultMessage: 'Search workspace name',
               })}