471 - add official link icon

[JuanCaicedo]

Note: This PR builds on #508 and is blocked until that merges. To make reviewing easier, I opened this PR against that one. After #508 merges, I'll change the base branch to master 👍

Motivation

• Fixes #421

Proposed changes

• Adds a clickable icon to next to the route name for routes that have official links

Screenshot

[hathix]

One UX question: does that link icon go to the same place as the blue link? My initial expectation as a user is that they both go to the same place. If they don't, you may want to change the icon to make it more obvious that it's a different link. Perhaps changing it to a circled (I) would make it clearer.

[hathix]

We merged #508 so you can rebase this :)

[exxonvaldez]

Looks pretty good, thanks for doing this! I found that using the SVG icons with text was pretty difficult also, and the relative position "trick" seems like the best way to go that I've found. I noticed that the breadcrumbs are just slightly out of alignment vertically, I think it's because the icon makes the first breadcrumb taller than the others. Not sure what the best fix is for this.

[youngj]

Agree with @hathix - with this UI, I would expect that clicking either the icon or the adjacent link will open a page in a new window. It would make more sense to me to have a text link that says something like "Official Site" next to the "open in new window" icon. This would probably be too much to display within the breadcrumb text itself, but could be floating on the right side of the white bar.

[JuanCaicedo]

I made a few changes here 😀

• Change the open in new window icon to Official Site
• Align the link to the right side of the nav bar

[hathix]

You got a lint error, by the way. See the test / test result

[hathix]

Anyway, I think your approach of using the "Official Site" on the right side was great. Much better from a UX perspective.