Habitat: Provide more visual distinction between public and private keys

[christophermaier]

Currently, private and public keys are only visually distinguished by a subtle slash through the "eye" icon. It would be nice to provide more visual distinction (e.g., putting private keys behind a "show private keys" button, put them under a big "🚧 WARNING 🚧" banner, etc.)

---

To-do

• [x] Add 'private' tag/label to private key row
• [x] Align both upload buttons to the ride side of the tables
• [x] Remove the eye icon from the public key rows
• [x] Remove the <hr> between the private and public sections
• [x] Set the spacing between the private and public sections 60px

Mockup

https://chef.invisionapp.com/share/TSEGSW52H#/250295491_origin_Keys_Download

[ryankeairns]

@christophermaier How does this feel? I've tweaked a few things to provide more visual clarity:

• added a 'private' tag
• removed the eye icon on the public keys so that the eye with line has more prominence
• moved the upload buttons to the right, making it easier to scan the keys and to make the table headers/titles more obvious

https://chef.invisionapp.com/share/TSEGSW52H#/250295491_origin_Keys_Download

[christophermaier]

@ryankeairns Big improvement!

[ryankeairns]

@cnunciato this is a smaller one that I wanted to bring to your attention.