Added space between the chat symbol and button text

This commit is contained in:
tomasvaron
2022-07-14 10:30:28 -04:00
parent 4fd153d676
commit 02d0353215
2 changed files with 12 additions and 16 deletions

View File

@@ -5,24 +5,19 @@
justify-content: right; justify-content: right;
padding: 10px; padding: 10px;
.hover {
.hover();
}
.chatButton { .chatButton {
justify-content: right; margin: 0 45px 15px 0;
margin: 0 9px;
border: 10px; border: 10px;
min-height: 44px; min-height: 44px;
&:focus {
outline: 0px;
}
>span { >span {
padding-right: 12px; font-size: 17px;
font-size: 20px;
font-family: @DataExplorerFont; font-family: @DataExplorerFont;
color: @DefaultFontColor; color: @AccentLow;
} }
} }
} }

View File

@@ -1,5 +1,5 @@
import { IIconProps } from '@fluentui/react'; import { IIconProps } from '@fluentui/react';
import { ActionButton } from '@fluentui/react/lib/Button'; import { PrimaryButton } from '@fluentui/react/lib/Button';
import { AuthType } from 'AuthType'; import { AuthType } from 'AuthType';
import { SupportPaneComponent } from 'Explorer/Controls/SupportPaneComponent/SupportPaneComponent'; import { SupportPaneComponent } from 'Explorer/Controls/SupportPaneComponent/SupportPaneComponent';
import Explorer from 'Explorer/Explorer'; import Explorer from 'Explorer/Explorer';
@@ -11,7 +11,7 @@ export interface ChatButtonProps {
container: Explorer; 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; const { container } = props;
if (userContext.authType === AuthType.AAD && userContext.features.enableChatbot) { if (userContext.authType === AuthType.AAD && userContext.features.enableChatbot) {
return ( return (
<ActionButton className={"chatButton"} primary={true} iconProps={chatIcon} onClick={() => { <PrimaryButton className={"chatButton"} iconProps={chatIcon} onClick={() => {
useSidePanel useSidePanel
.getState() .getState()
.openSidePanel( .openSidePanel(
@@ -34,8 +34,9 @@ export const ChatButtonAction: React.FunctionComponent<ChatButtonProps> = props
/> />
); );
}}> }}>
<span> Help </span> <span> Help? </span>
</ActionButton> </PrimaryButton>
); );
} }
return <div></div>
}; };