Jetpack Security: Protect/Scan/Monitor could each use 'badges'

[v18]

From @rickybanister: The Protect, Scan, and Monitor blocks at /settings/security look pretty monotonous and somewhat confusing (what's the difference between these three things?).

It would be nice if we created three badges that differentiate the three security features at a glance.

Perhaps the badges are dimmed until the feature has been enabled, then it would be fully lit up.

I'm thinking something like this, but with shield/lock/security-camera type imagery:

Here's what it looks like now on desktop:

And smaller screens:

Ideas from @drw158: Here's what I have so far for Protect and Monitor. Still working on Scan and the colors.

I think making the monitor more like a square helps making it easier to use.

Mockup from @rickybanister:

Note from @kellychoffman:

At first glance the scan looks like an error. Maybe another icon there? Removing the red color might help too. Also did a quick sketch for another option:

[designsimply]

Tested and the Settings > Security > Protect/Scan/Monitor badges appear to be in place:

^{Seen at https://wpcalypso.wordpress.com/settings/security/wildly.disambiguously.com using Firefox 45.0.1 on Mac OS X 10.11.13}

Closing because the main issue is resolved but also pinging @drw158 for the nitpick about the Jetpack Scan badge looking like an error—@drw158 would you like a new issue to be opened for that?

[davewhitley]

@designsimply not unless we get another report about it