Stats: update look of dashboard widget

[jeherve]

Changes proposed in this Pull Request:

Fixes #10553

This update updates the look of the Stats dashboard widget to be cleaner and Jetpack-branded.

Testing instructions:

• You'll need a site with some traffic, or you will need to fake some traffic to get some data in the stats widget.
• Open your dashboard and check the Stats widget.

Proposed changelog entry for your changes:

• Stats: improve the design of the Stats dashboard widget.

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: January 10, 2019.
Scheduled code freeze: January 3, 2019

Generated by 🚫 dangerJS against 9db0e9b

[jeherve]

Noting that this will need a bit of design magic as well. I could not find a pretty way to have the "configure" link be properly aligned while also aligning the new logo.

[keoshi]

I can take care of this tomorrow, Jeremy!

[keoshi]

@jeherve either of these should work, though I prefer the first one.

#js-toggle-stats_dashboard_widget_control {
    position: absolute;
    top: 8px;
    right: 36px;
}

#js-toggle-stats_dashboard_widget_control {
    float: right;
    margin-top: -18px;
}

P.S.: we really should get rid of styles that target ID and favor classes instead.

[jeherve]

@keoshi Thank you. I took care of this in 1796f51 (I also switched to a class there).

[keoshi]

@jeherve Thank you!

[keoshi]

Looks great to me! 🚢

[joanrho]

Hey @jeherve, can you please provide more clear testing instructions in your PR description?
I’m unclear as to how I can check out this branch on a site with more traffic (e.g., NOT my jetpack sandbox, which I know how to test and it yields a possibly broken use case: https://cloudup.com/c3NtyW60K7n — is this the correct view for Jetpack users with low traffic to see?)

Also, I noticed that your solution placed the “View all stats” button in the wrong place with respect to my “After” design mockup in #10553. Would you be able move that button to below the “Top Posts” and “Top Searches” sections as in my mockup?

[jeherve]

I’m unclear as to how I can check out this branch on a site with more traffic (e.g., NOT my jetpack sandbox, which I know how to test and it yields a possibly broken use case: cloudup.com/c3NtyW60K7n — is this the correct view for Jetpack users with low traffic to see?)

My patch includes some SCSS changes, so you would need to run yarn build to create the matching new CSS. That should help.

To fill in the widget with some traffic, I would recommend that you log out of your admin account on your sandbox (or visit your sandbox in an incognito window), visit several pages of your site while being logged out, and wait a few minutes. You should see the Stats widget get filled in with some data.

I noticed that your solution placed the “View all stats” button in the wrong place with respect to my “After” design mockup in #10553. Would you be able move that button to below the “Top Posts” and “Top Searches” sections as in my mockup?

Good point, my bad. I fixed that in 247e504

Here is how the stats widget looks like now:

[brbrr]

Looks good, tests well 🐑