From da561634ea072a8d96e6e264f0aebb1fb7665a2a Mon Sep 17 00:00:00 2001
From: Maryann Gitonga <34104277+MaryannGitonga@users.noreply.github.com>
Date: Mon, 15 Aug 2022 10:17:42 +0300
Subject: [PATCH] Fix: Text-alignment on the text in query response tabs
 (#2025)

* Left align text on query response tabs

* Remove emptyStateLabel class name

Co-authored-by: MG <t-mgitonga@microsoft.com>
Co-authored-by: EvansA <evansonoka05.j@gmail.com>
---
 .../views/query-response/adaptive-cards/AdaptiveCard.tsx | 9 ++++++---
 .../views/query-response/graph-toolkit/GraphToolkit.tsx  | 2 +-
 src/app/views/query-response/queryResponse.styles.ts     | 5 ++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
index 2552f1ce8f..da846d465d 100644
--- a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
+++ b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
@@ -1,5 +1,6 @@
 import * as AdaptiveCardsAPI from 'adaptivecards';
-import { Label, Link, MessageBar, MessageBarType, Pivot, PivotItem, styled } from '@fluentui/react';
+import { getTheme, IStyle, ITheme, Label, Link,
+  MessageBar, MessageBarType, Pivot, PivotItem, styled } from '@fluentui/react';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
@@ -25,6 +26,9 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
     this.adaptiveCard = new AdaptiveCardsAPI.AdaptiveCard();
   }
 
+  currentTheme: ITheme = getTheme();
+  textStyle = queryResponseStyles(this.currentTheme).queryResponseText.root as IStyle
+
   public componentDidMount() {
     const { body, sampleQuery, hostConfig } = this.props;
     this.props.actions!.getAdaptiveCard(body, sampleQuery);
@@ -80,11 +84,10 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
     if (body && !pending) {
       if (!data || (queryStatus && !queryStatus.ok)) {
         return (
-          <Label className={classes.emptyStateLabel}>
+          <Label styles={{root: this.textStyle}}>
             <FormattedMessage id='The Adaptive Card for this response is not available' />
             &nbsp;
             <Link
-              className={classes.link}
               href={'https://adaptivecards.io/designer/'}
               tabIndex={0}
               target='_blank'
diff --git a/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx b/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
index 04cd0ec719..3e55b5ebc9 100644
--- a/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
+++ b/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
@@ -24,7 +24,7 @@ class GraphToolkit extends Component<any> {
   }
 
   currentTheme: ITheme = getTheme();
-  textStyle = queryResponseStyles(this.currentTheme).toolkitText.root as IStyle
+  textStyle = queryResponseStyles(this.currentTheme).queryResponseText.root as IStyle
 
   public render() {
     const { sampleQuery } = this.props;
diff --git a/src/app/views/query-response/queryResponse.styles.ts b/src/app/views/query-response/queryResponse.styles.ts
index 8db827691e..6be8f4f0d1 100644
--- a/src/app/views/query-response/queryResponse.styles.ts
+++ b/src/app/views/query-response/queryResponse.styles.ts
@@ -28,11 +28,10 @@ export const queryResponseStyles = (theme: ITheme) => {
       float: 'right',
       zIndex: 1
     },
-    toolkitText: {
+    queryResponseText: {
       root: {
         display: 'inline-block',
-        marginTop: '13%',
-        marginLeft: '16%'
+        marginLeft: '2%'
       }
     },
     modalStyles: {