Header entry icon update (#2)

header entry icon update Signed-off-by: Hailong Cui <ihailong@amazon.com>
opensearch-project · Nov 20, 2023 · a50f637 · a50f637
1 parent 3d7a470
commit a50f637
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 41 deletions.
diff --git a/public/assets/chat.svg b/public/assets/chat.svg
diff --git a/public/chat_header_button.tsx b/public/chat_header_button.tsx
@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useEffectOnce } from 'react-use';
 import { ApplicationStart } from '../../../src/core/public';
-import chatIcon from './assets/chat.svg';
 import { ChatFlyout } from './chat_flyout';
 import { ChatContext, IChatContext } from './contexts/chat_context';
 import { SetContext } from './contexts/set_context';
@@ -84,7 +83,7 @@ export const HeaderChatButton: React.FC<HeaderChatButtonProps> = (props) => {
         })}
         onClick={() => setFlyoutVisible(!flyoutVisible)}
       >
-        <EuiIcon type={chatIcon} size="l" />
+        <EuiIcon type="chatRight" size="m" />
       </EuiHeaderSectionItemButton>
       <ChatContext.Provider value={chatContextValue}>
         <ChatStateProvider>

diff --git a/public/index.scss b/public/index.scss
@@ -4,19 +4,7 @@
  */
 
 .llm-chat-header-icon-wrapper {
-  &:hover::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 4px;
-    bottom: 4px;
-    left: 4px;
-    right: 4px;
-    border-radius: 9px;
-    border: 2px solid #005eb8;
-    z-index: -1;
-  }
-  &:focus::after {
+  &::after {
     content: '';
     display: block;
     position: absolute;
@@ -25,23 +13,12 @@
     left: 4px;
     right: 4px;
     border-radius: 9px;
-    border: 2px solid #00a3e0;
-    background-color: #b9d9eb;
     z-index: -1;
   }
 }
 .llm-chat-header-icon-wrapper-selected {
   &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 4px;
-    bottom: 4px;
-    left: 4px;
-    right: 4px;
-    border-radius: 9px;
-    background-color: #005eb8;
-    z-index: -1;
+    background-color: $ouiColorPrimary;
   }
 }
 

diff --git a/public/tabs/chat/chat_page_greetings.tsx b/public/tabs/chat/chat_page_greetings.tsx
@@ -12,7 +12,6 @@ import {
   EuiText,
 } from '@elastic/eui';
 import React from 'react';
-import chatIcon from '../../assets/chat.svg';
 import { GreetingCard } from '../../components/greeting_card';
 
 interface ChatPageGreetingsProps {
@@ -40,7 +39,7 @@ export const ChatPageGreetings: React.FC<ChatPageGreetingsProps> = (props) => {
       <EuiSpacer size="xxl" />
       <EuiFlexGroup alignItems="center" justifyContent="center">
         <EuiFlexItem grow={false}>
-          <EuiIcon type={chatIcon} size="l" />
+          <EuiIcon type="chatRight" size="l" />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiText className="llm-chat-greeting-header" color="subdued">