Purchases: Add site slug to SectionHeaders

[breezyskies]

This adds the site slug (primary domain) to the SectionHeaders for each site in /purchases, as suggested by @mikeshelton1503 in #170 (comment), to help make it easier to identify each site in the list.

Before	After

@mikeshelton1503 Note that in your original mockup, the SectionHeader label and slug were different colors, creating more hierarchy in the information presented here. I updated the color on the slug to add some contrast.

[mikeshelton1503]

Rather than set a large line-height here, presumably to control the vertical alignment, you can control the vertical alignment by adding align-items: baseline to .section-header.card(though you would need to qualify it with .purchases-site).

[breezyskies]

Updated.

[mikeshelton1503]

Looks good, I just noted a couple minor CSS things. Also:

On smaller screens when there is a longer site name and site url the site name wraps, which is fine, however the line-height is too large:

[mikeshelton1503]

Oh, one other note: It hadn't occurred to me until I saw it in action but should the site url be linked? My guts says no, however I can see users trying to click it. We could have it open the site in a new tab as to not pull users away from Purchases. I'm not sure though. @breezyskies what do you think?

[breezyskies]

On smaller screens when there is a longer site name and site url the site name wraps, which is fine, however the line-height is too large:

Fixed so the name fades out instead of wrapping.

It hadn't occurred to me until I saw it in action but should the site url be linked?

I don't think there's a lot of value in the linking other than the potential to fix a usability issue when users try to click. We do present slugs / domains in other areas of Calypso that do not click through, but this is a unique case since it is kind of on it's own in the design, and a different color. I could go either way on this one.

[mikeshelton1503]

👍 LGTM