From 02d035321579878d9421496d7f1bd73bdf6fa824 Mon Sep 17 00:00:00 2001
From: tomasvaron <t-tomasvaron@microsoft.com>
Date: Thu, 14 Jul 2022 10:30:28 -0400
Subject: [PATCH] Added space between the chat symbol and button text

---
 less/chat.less                                  | 17 ++++++-----------
 .../Controls/ChatButton/ChatButtonComponent.tsx | 11 ++++++-----
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/less/chat.less b/less/chat.less
index aa6ff3f19..4b2748d3e 100644
--- a/less/chat.less
+++ b/less/chat.less
@@ -5,24 +5,19 @@
     justify-content: right;
     padding: 10px;
 
-    .hover {
-        .hover();
-    }
-
     .chatButton {
-        justify-content: right;
-        margin: 0 9px;
+        margin: 0 45px 15px 0;
         border: 10px;
         min-height: 44px;
 
-
-
+        &:focus {
+            outline: 0px;
+        }
 
         >span {
-            padding-right: 12px;
-            font-size: 20px;
+            font-size: 17px;
             font-family: @DataExplorerFont;
-            color: @DefaultFontColor;
+            color: @AccentLow;
         }
     }
 }
\ No newline at end of file
diff --git a/src/Explorer/Controls/ChatButton/ChatButtonComponent.tsx b/src/Explorer/Controls/ChatButton/ChatButtonComponent.tsx
index ec5708ce6..4025b4b27 100644
--- a/src/Explorer/Controls/ChatButton/ChatButtonComponent.tsx
+++ b/src/Explorer/Controls/ChatButton/ChatButtonComponent.tsx
@@ -1,5 +1,5 @@
 import { IIconProps } from '@fluentui/react';
-import { ActionButton } from '@fluentui/react/lib/Button';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
 import { AuthType } from 'AuthType';
 import { SupportPaneComponent } from 'Explorer/Controls/SupportPaneComponent/SupportPaneComponent';
 import Explorer from 'Explorer/Explorer';
@@ -11,7 +11,7 @@ export interface ChatButtonProps {
     container: Explorer;
 }
 
-const chatIcon: IIconProps = { iconName: 'ChatSolid' };
+const chatIcon: IIconProps = { iconName: 'ChatSolid', style: { marginRight: 10 } };
 
 
 
@@ -20,7 +20,7 @@ export const ChatButtonAction: React.FunctionComponent<ChatButtonProps> = props
     const { container } = props;
     if (userContext.authType === AuthType.AAD && userContext.features.enableChatbot) {
         return (
-            <ActionButton className={"chatButton"} primary={true} iconProps={chatIcon} onClick={() => {
+            <PrimaryButton className={"chatButton"} iconProps={chatIcon} onClick={() => {
                 useSidePanel
                     .getState()
                     .openSidePanel(
@@ -34,8 +34,9 @@ export const ChatButtonAction: React.FunctionComponent<ChatButtonProps> = props
                         />
                     );
             }}>
-                <span> Help </span>
-            </ActionButton>
+                <span> Help? </span>
+            </PrimaryButton>
         );
     }
+    return <div></div>
 };
\ No newline at end of file