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 <[email protected]> Co-authored-by: EvansA <[email protected]>
microsoftgraph · Aug 15, 2022 · da56163 · da56163
1 parent 1f7781c
commit da56163
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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: {