Fix: Graph Explorer link colors (#846)

* add fullstop * change blueMid colour * change link colour * use classNames to style components * change link colour on high contrast mode * revert to blueMid colour * add weak types workaround * use classNames to style components * remove style prop * add ts-ignore rule
microsoftgraph · Feb 15, 2021 · ededbe1 · ededbe1
1 parent 933e9bb
commit ededbe1
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 27 deletions.
diff --git a/src/app/views/app-sections/TermsOfUseMessage.tsx b/src/app/views/app-sections/TermsOfUseMessage.tsx
@@ -11,12 +11,12 @@ export function termsOfUseMessage(termsOfUse: any, actions: any, classes: any, l
       <FormattedMessage id='use the Microsoft Graph API' />
       <a onClick={(e) => telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.MICROSOFT_APIS_TERMS_OF_USE_LINK)}
         className={classes.links} href={'https://docs.microsoft.com/' + language +
-        '/legal/microsoft-apis/terms-of-use?context=graph/context'} target='_blank' rel='noopener noreferrer'>
+          '/legal/microsoft-apis/terms-of-use?context=graph/context'} target='_blank' rel='noopener noreferrer'>
         <FormattedMessage id='Terms of use' /></a>.
       <FormattedMessage id='View the' />
-      <a  onClick={(e) => telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.MICROSOFT_PRIVACY_STATEMENT_LINK)}
+      <a onClick={(e) => telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.MICROSOFT_PRIVACY_STATEMENT_LINK)}
         className={classes.links} href={'https://privacy.microsoft.com/' + language + '/privacystatement'}
         target='_blank' rel='noopener noreferrer'>
-        <FormattedMessage id='Microsoft Privacy Statement' /></a>
+        <FormattedMessage id='Microsoft Privacy Statement' /></a>.
     </MessageBar>);
 }
diff --git a/src/app/views/classnames.ts b/src/app/views/classnames.ts
@@ -1,6 +1,7 @@
 import { classNamesFunction, ITheme } from 'office-ui-fabric-react';
 
 interface IClassNames {
+  [prop: string]: unknown;
   theme?: ITheme;
   styles?: object;
 }

diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
@@ -1,6 +1,5 @@
-import { getTheme } from '@uifabric/styling/lib/styles/theme';
 import * as AdaptiveCardsAPI from 'adaptivecards';
-import { IconButton, Label, MessageBar, MessageBarType, Pivot, PivotItem } from 'office-ui-fabric-react';
+import { IconButton, Label, MessageBar, MessageBarType, Pivot, PivotItem, styled } from 'office-ui-fabric-react';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
@@ -10,6 +9,7 @@ import { componentNames, telemetry } from '../../../../telemetry';
 import { IAdaptiveCardProps } from '../../../../types/adaptivecard';
 import { getAdaptiveCard } from '../../../services/actions/adaptive-cards-action-creator';
 import { translateMessage } from '../../../utils/translate-messages';
+import { classNames } from '../../classnames';
 import { Monaco } from '../../common';
 import { genericCopy } from '../../common/copy';
 import { queryResponseStyles } from './../queryResponse.styles';
@@ -58,21 +58,17 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
   }
 
   public render() {
-    const currentTheme = getTheme();
-    const labelStyles = queryResponseStyles(currentTheme).emptyStateLabel;
-    const link = queryResponseStyles(currentTheme).link;
-    const cardStyles: any = queryResponseStyles(currentTheme).card;
-    const copyIcon: any = queryResponseStyles(currentTheme).copyIcon;
     const { data, pending } = this.props.card;
     const { body, queryStatus } = this.props;
+    const classes = classNames(this.props);
 
     if (!body) {
       return <div />;
     }
 
     if (body && pending) {
       return (
-        <Label style={labelStyles}>
+        <Label className={classes.emptyStateLabel}>
           <FormattedMessage id='Fetching Adaptive Card' />
           ...
         </Label>
@@ -82,11 +78,11 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
     if (body && !pending) {
       if (!data || (queryStatus && !queryStatus.ok)) {
         return (
-          <Label style={labelStyles}>
+          <Label className={classes.emptyStateLabel}>
             <FormattedMessage id='The Adaptive Card for this response is not available' />
             &nbsp;
             <a
-              style={link}
+              className={classes.link}
               href={'https://adaptivecards.io/designer/'}
               tabIndex={0}
               target='_blank'
@@ -108,7 +104,7 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
             key='card'
             ariaLabel={translateMessage('card')}
             headerText={'Card'}
-            style={cardStyles}
+            className={classes.cardStyles}
           >
             <div
               ref={(n) => {
@@ -133,11 +129,12 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
                 target='_blank'
                 rel='noopener noreferrer'
                 tabIndex={0}
+                className={classes.link}
               >
                 <FormattedMessage id='Adaptive Cards Templating SDK' />
               </a>
             </MessageBar>
-            <IconButton style={copyIcon}
+            <IconButton className={classes.copyIcon}
               iconProps={{
                 iconName: 'copy',
               }}
@@ -175,9 +172,9 @@ function mapDispatchToProps(dispatch: Dispatch): object {
     ),
   };
 }
-
 // @ts-ignore
-const trackedComponent = telemetry.trackReactComponent(AdaptiveCard, componentNames.ADAPTIVE_CARDS_TAB);
+const styledAdaptiveCard = styled(AdaptiveCard, queryResponseStyles as any);
+const trackedComponent = telemetry.trackReactComponent(styledAdaptiveCard, componentNames.ADAPTIVE_CARDS_TAB);
 // @ts-ignore
 const IntlAdaptiveCard = injectIntl(trackedComponent);
 export default connect(mapStateToProps, mapDispatchToProps)(IntlAdaptiveCard);
diff --git a/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx b/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
@@ -3,14 +3,15 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import {
-  getTheme,
   Label,
   MessageBar,
   MessageBarType,
+  styled,
 } from 'office-ui-fabric-react';
 import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
-import { queryResponseStyles } from '../queryResponse.styles';
 import { componentNames, telemetry } from '../../../../telemetry';
+import { classNames } from '../../classnames';
+import { queryResponseStyles } from '../queryResponse.styles';
 
 class GraphToolkit extends Component<any> {
   constructor(props: any) {
@@ -20,14 +21,16 @@ class GraphToolkit extends Component<any> {
   public render() {
     const { sampleQuery } = this.props;
     const { toolkitUrl, exampleUrl } = lookupToolkitUrl(sampleQuery);
+    const classes = classNames(this.props);
 
     if (toolkitUrl && exampleUrl) {
       return (
         <>
           <MessageBar messageBarType={MessageBarType.info}>
             <FormattedMessage id='Open this example in' />
             <a onClick={(e) => telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.GRAPH_TOOLKIT_PLAYGROUND_LINK)}
-              tabIndex={0} href={exampleUrl} target='_blank' rel='noopener noreferrer'>
+              tabIndex={0} href={exampleUrl} target='_blank' rel='noopener noreferrer'
+              className={classes.link}>
               <FormattedMessage id='graph toolkit playground' />
             </a>
             .
@@ -38,11 +41,11 @@ class GraphToolkit extends Component<any> {
     }
 
     return (
-      <Label style={queryResponseStyles(getTheme()).emptyStateLabel}>
+      <Label className={classes.emptyStateLabel}>
         <FormattedMessage id='We did not find a Graph toolkit for this query' />
         &nbsp;
         <a
-          style={queryResponseStyles(getTheme()).link}
+          className={classes.link}
           tabIndex={0}
           href='https://aka.ms/mgt'
           rel='noopener noreferrer'
@@ -61,5 +64,5 @@ function mapStateToProps(state: any) {
     sampleQuery: state.sampleQuery,
   };
 }
-
-export default connect(mapStateToProps, null)(GraphToolkit);
+const styledGraphToolkit = styled(GraphToolkit, queryResponseStyles as any);
+export default connect(mapStateToProps, null)(styledGraphToolkit);
diff --git a/src/app/views/query-response/queryResponse.styles.ts b/src/app/views/query-response/queryResponse.styles.ts
@@ -18,7 +18,7 @@ export const queryResponseStyles = (theme: ITheme) => {
       alignItems: 'center',
     },
     link: {
-      color: theme.palette.blue,
+      color: theme.palette.blueMid,
     },
     card: {
       minHeight: '500px',

diff --git a/src/themes/dark.ts b/src/themes/dark.ts
@@ -23,6 +23,6 @@ export const dark = {
     neutralDark: '#fefefe',
     black: '#ffffff',
     white: '#070707',
-    blueMid: '#09b1dd',
+    blueMid: '#266ea6',
   },
 };
diff --git a/src/themes/high-contrast.ts b/src/themes/high-contrast.ts
@@ -22,6 +22,6 @@ export const highContrast = {
     neutralDark: '#f4f4f4',
     black: '#f8f8f8',
     white: '#000000',
-    blueMid: '#09b1dd',
+    blueMid: '#266ea6',
   }
 };