Fix: Toolkit component text padding (#1461)

* polish toolkit message * justify text * refactor styles to styles file
microsoftgraph · Feb 17, 2022 · 965a636 · 965a636
1 parent 7c9645b
commit 965a636
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx b/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
@@ -3,6 +3,9 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import {
+  getTheme,
+  IStyle,
+  ITheme,
   Label,
   MessageBar,
   MessageBarType,
@@ -20,6 +23,9 @@ class GraphToolkit extends Component<any> {
     super(props);
   }
 
+  currentTheme: ITheme = getTheme();
+  textStyle = queryResponseStyles(this.currentTheme).toolkitText.root as IStyle
+
   public render() {
     const { sampleQuery } = this.props;
     const { toolkitUrl, exampleUrl } = lookupToolkitUrl(sampleQuery);
@@ -45,7 +51,7 @@ class GraphToolkit extends Component<any> {
     }
 
     return (
-      <Label className={classes.emptyStateLabel}>
+      <Label styles={{root: this.textStyle}}>
         <FormattedMessage id='We did not find a Graph toolkit for this query' />
         &nbsp;
         <a
@@ -58,6 +64,7 @@ class GraphToolkit extends Component<any> {
           <FormattedMessage id='Learn more about the Microsoft Graph Toolkit' />
           .
         </a>
+
       </Label>
     );
   }

diff --git a/src/app/views/query-response/queryResponse.styles.ts b/src/app/views/query-response/queryResponse.styles.ts
@@ -27,6 +27,18 @@ export const queryResponseStyles = (theme: ITheme) => {
     copyIcon: {
       float: 'right',
       zIndex: 1
+    },
+    toolkitText: {
+      root: {
+        padding: '20px',
+        width: '100%',
+        margin: 'auto',
+        display: 'inline-block',
+        position: 'relative',
+        top: '160px',
+        lineHeight: '1.5',
+        textAlign: 'justify'
+      }
     }
   };
 };