JPC: add instructions link

[johnHackworth]

Fixes #9307

This PR adds a link that mirrors the modal window button action to the example screenshots of the jetpack install / activation instructions

How to test

0. You need a self-hosted site without an installed jetpack (or a not active one)
1. Go to http://calypso.localhost:3000/jetpack/connect and enter the url of your site
2. You should get a modal window with some instructions on how to get your jetpack on
3. Click on any of the images. They should take you to the first step of the process in your wp-admin

ping @rickybanister @keoshi @jeffgolenski

[matticbot]

Test live: https://calypso.live/?branch=add/jpc-instructions-link

[keoshi]

Works beautifully on my end!

[rickybanister]

Can we add a hover state to the cards?

It could be nice to use the hover style we used to use on Reader cards for this.

@keoshi do you have another idea for a card hover style based on your new 'add new site' designs?

[keoshi]

@rickybanister hm, what are trying to solve by having a card hover state? Shouldn't the button still be the primary action on this view? Speaking of which, we should probably add more margin-top to it, so it has more whitespace around and better visibility?

[johnHackworth]

@rickybanister @keoshi I added the reader cards hover shadow:

[keoshi]

I see a different styling, but looks good to me!

[rickybanister]

@keoshi are you still concerned with styling the hover state? My thought was we might as well make the entire page an anchor since there is only one way forward from here. I don't care if users click the primary button or the images as long as they are able to do what they want to do.

We're also talking about trying other approaches than manual install, so let's just see how this goes for now? We can track clicks on the images as well.

[keoshi]

Not really, once I tried the interface it worked for me, so I think it makes sense. :)

One caveat though is that the hover is for the entire card, which doesn't behave as a big link, but rather the graphics inside each one. Either way, I like to have a focused area as the user explores the page that emphasizes one step at a time.

[rickybanister]

Ah, you're totally right. We can adjust that. @johnHackworth I'll handle moving the hover to the image—it should only wrap the browser. I forgot that we had other links in our descriptive text.

[johnHackworth]

ping @rickybanister ! did you manage to free some time to work on this?

[rickybanister]

@johnHackworth I'm going to have @keoshi take a look now, sorry for the massive delay.

[keoshi]

Updated the styles to reflect the hover state only on the browser portion:

Would appreciate if you could give this a quick review when you have time, @johnHackworth.

[rickybanister]

I think this is definitely a better solution, sorry for suggesting the previous boondoggle.

The darker blue/gray border might be a little heavy however. What if we used more of the diffuse shadow that you (@keoshi) used in your recent Add New WordPress landing page?

[keoshi]

@rickybanister tried it with a subtler yet larger box-shadow and it really didn't work or/and wasn't visible enough. I can try refining it further though.

Edit: I think it's worth clarifying it — on the Add New WordPress page we have white on very light blue, which lets the drop shadow pop out, but here we have many different elements that render that shadow invisible unless it's almost jarring.

[rickybanister]

Sounds good @keoshi, this is much better than what we have so let's get it merged.