Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Graph Explorer link colors #846

Merged
merged 10 commits into from
Feb 15, 2021
Merged

Fix: Graph Explorer link colors #846

merged 10 commits into from
Feb 15, 2021

Conversation

ElinorW
Copy link
Collaborator

@ElinorW ElinorW commented Feb 12, 2021

Overview

Fixes some link colours on GE to meet the colour-contrast ratio in dark mode.
Fixes #707

Demo

image

Testing Instructions

  • Open GE on your browser.
  • Navigate to the 'More actions' icon and select 'Change theme'.
  • Change theme to dark mode and close dialog box.
  • Open dev tools and hold "Ctrl+Shift+C" to inspect elements.
  • Hover above a link and observe contrast checkmark.

@@ -133,6 +133,7 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
target='_blank'
rel='noopener noreferrer'
tabIndex={0}
style={queryResponseStyles(getTheme()).link}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use the classnames instead

@jobala
Copy link
Contributor

jobala commented Feb 12, 2021

@ElinorW does this solve color contrast issue when using the high contrast theme?

@@ -18,7 +18,7 @@ export const queryResponseStyles = (theme: ITheme) => {
alignItems: 'center',
},
link: {
color: theme.palette.blue,
color: theme.palette.themeDarkAlt,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noticed here that themeDarkAlt is applied, while the blueMid value was changed in the theme files. Does this still work?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, so I think I missed that I had changed the blueMid. Actually, I shall use the blueMid instead of the themeDarkAlt colour

@ElinorW
Copy link
Collaborator Author

ElinorW commented Feb 12, 2021

@ElinorW does this solve color contrast issue when using the high contrast theme?

@jobala Yeah it does for the links in the message bars.
I've had to change for those links present under the 'Toolkit Component' tab and 'Adaptive Cards' tab

@@ -15,4 +15,5 @@ export interface IAdaptiveCardProps {
getAdaptiveCard: Function;
};
queryStatus?: any;
styles?: object;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should not be necessary since messages/theme/style are passed down automatically

@ElinorW ElinorW merged commit ededbe1 into dev Feb 15, 2021
@ElinorW ElinorW deleted the fix/graph-link-colours branch February 15, 2021 10:12
ElinorW added a commit that referenced this pull request Feb 16, 2021
* Fix: support different content types (#814)

* Feature: Add Adaptive cards  JSON Schema code (#828)

* Feature: samples testing (#833)

* Feature: Adds 'Report an Issue' menu option (#834)

* Feature: clickable links on message bar (#835)

* fix: intermittent create page error (#837)

* Fix: Add 'Maximize sidebar' aria-label (#842)

* Task: upgrade technologies (#844)

* Fix: expand maxWidth allow more humanName chars (#764)

* Fix: autocomplete options not displaying (#847)

* fix: adaptive cards destroy (#848)

* Fix: Graph Explorer link colors (#846)

* Fix: Adaptive cards instrumentation (#849)

* Fix: adjust column width (#850)

* Task: prevent storing access token (#851)

Co-authored-by: jobala <japhethobalak@gmail.com>
Co-authored-by: Charles Wahome <thewahome.cw@gmail.com>
Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com>
Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>
Co-authored-by: Azure Static Web Apps <opensource@microsoft.com>
Co-authored-by: Millicent Achieng <achieng.milli@gmail.com>
Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com>
Co-authored-by: Ezrqn Kemboi <ezrqnkemboi@gmail.com>
Co-authored-by: Vincent Biret <vibiret@microsoft.com>
Co-authored-by: Joseph Ngugi <jngugi88@gmail.com>
Co-authored-by: Maggie Kimani <maggiekim42@gmail.com>
ElinorW added a commit that referenced this pull request Feb 22, 2021
* Fix: support different content types (#814)

* Feature: Add Adaptive cards  JSON Schema code (#828)

* Feature: samples testing (#833)

* Feature: Adds 'Report an Issue' menu option (#834)

* Feature: clickable links on message bar (#835)

* fix: intermittent create page error (#837)

* HB of localized GE.jsons (#830)

* Fix: Add 'Maximize sidebar' aria-label (#842)

* Task: upgrade technologies (#844)

* Fix: expand maxWidth allow more humanName chars (#764)

* Fix: autocomplete options not displaying (#847)

* fix: adaptive cards destroy (#848)

* Fix: Graph Explorer link colors (#846)

* Fix: Adaptive cards instrumentation (#849)

* Fix: adjust column width (#850)

* Task: prevent storing access token (#851)

* HB of localized GE.jsons (#854)

* chore(release): 4.3.0 (#857)

* Fix: rename component name (#859)

* chore(release): 4.4.0

Co-authored-by: jobala <japhethobalak@gmail.com>
Co-authored-by: Charles Wahome <thewahome.cw@gmail.com>
Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com>
Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>
Co-authored-by: Azure Static Web Apps <opensource@microsoft.com>
Co-authored-by: Millicent Achieng <achieng.milli@gmail.com>
Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com>
Co-authored-by: Ezrqn Kemboi <ezrqnkemboi@gmail.com>
Co-authored-by: Vincent Biret <vibiret@microsoft.com>
Co-authored-by: Joseph Ngugi <jngugi88@gmail.com>
Co-authored-by: Maggie Kimani <maggiekim42@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Graph links do not meet the color-contrast ratio in dark theme
3 participants