Make Tor Browser logout instructions more user friendly

[redshiftzero]

This is a UX suggestion by @ninavizz to improve the notification displayed to sources upon logout (click on image below to see her suggestion for this issue in greater detail (and a nice icon we can use)):

[ninavizz]

Hey folks! I'm not a developer, otherwise I'd do this myself... but to those who are and would like to code this, I offer the below (with a hearty "thank you!"). Thx, @redshiftzero

Note: It's important that the hue of the dialog bubble not appear red, as that's been established to cause anxiety and punitive feelings, with many users. So—just FYI. :)

#673466 Title: Important!
#55555 Text: "Thank you for exiting your session! Please select “New Identity” from the Onion button in the Tor browser, to clear all history of your SecureDrop usage from this device."

Icon: in the code, please include the CC credit:
“Fingerprint” icon is by Travis Avery from the Noun Project.

Icon's SVG code:
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="99" viewBox="0 0 135.3 98.8"><style>.a{fill:#673466;}</style><path d="M9.4 57.4c1.2-2.1 3.1-3.2 6.1-3.2 1.8 0 3.6 0.4 5.5 1.2l17.7 7.4c0.4 3.3 3.3 6 6.7 6h23.1c0.7 0 1.2-0.6 1.2-1.2 0-0.7-0.6-1.2-1.2-1.2H45.5c-2.4 0-4.4-1.9-4.4-4.3l0 0c0.1-2.3 2-4.3 4.4-4.3l0 0h11.9c3.5 0 12.3-2.8 17.1-4.4 4.1-1.4 8.1-2 11.9-1.8 2 0.1 3.8 0.4 5.2 0.9 3.1 1 9 4.4 12.7 6.6 1 0.6 1.9 1 2.5 1.4v8.3 17.6l-3.8-2.9c-4.1-3.1-9.2-4.5-14.4-4.2 -5.2 0.3-9 0.8-11.1 1.2l-11.8 2.5c-5.1 1-10.3 1-14.9-0.3 -1.5-0.4-2.9-0.9-3.9-1.4L10.5 60.9c-0.7-0.3-1-0.8-1.2-1.4C9.1 58.9 9.2 58.2 9.4 57.4z" class="a"/><path d="M111.8 56.3h3.4c1.3 0 2.4 1.1 2.4 2.4v30.8c0 1.3-1.1 2.4-2.4 2.4h-3.4c-1.3 0-2.4-1.1-2.4-2.4V58.8C109.4 57.4 110.4 56.4 111.8 56.3z" class="a"/><path d="M32.4 43.5c-0.8-4.5-1.2-9.2-1.2-13.9 0-0.4 0-0.7 0-1.1 0 0 0 0 0 0 0-4.1 1.3-7.8 3.4-10.8 0.4-0.6 1.1-0.9 1.8-0.9 0.5 0 0.9 0.1 1.2 0.4 0.6 0.4 0.9 1 0.9 1.8 0 0.5-0.1 0.9-0.4 1.2 -1.7 2.4-2.7 5.3-2.7 8.5 0 0 0 0 0-0.1 0 0.4 0 0.7 0 1.1 0 4.5 0.4 8.9 1.1 12.7 0 0.1 0 0.3 0 0.4 0 1.1-0.8 1.9-1.8 2.1 -0.1 0-0.3 0-0.4 0 0 0 0 0 0 0 -1.1 0-1.9-0.8-2.1-1.8L32.4 43.5zM41 15.6c0 0 0 0 0 0 -0.7 0-1.4-0.4-1.8-0.9 -0.2-0.3-0.4-0.8-0.4-1.2 0-0.7 0.4-1.4 0.9-1.7 3.2-2.1 7.1-3.3 11.2-3.3 4.1 0 7.8 1.2 11 3.2 0.6 0.4 1 1 1 1.8 0 0.4-0.1 0.8-0.4 1.2 -0.4 0.6-1.1 1-1.8 1 -0.4 0-0.9-0.1-1.1-0.3 -2.5-1.6-5.4-2.5-8.6-2.5 -3.2 0-6.2 1-8.7 2.6C41.9 15.4 41.5 15.6 41 15.6L41 15.6 41 15.6zM60.6 39.4c0.2-0.1 0.5-0.1 0.7-0.1 0.9 0 1.7 0.6 2.1 1.5 0.5 1.4 1.2 2.6 2.1 3.7 0.3 0.4 0.5 0.8 0.5 1.3 0 0.7-0.3 1.3-0.8 1.7 -0.4 0.3-0.8 0.5-1.3 0.5 -0.7 0-1.3-0.3-1.7-0.8 -1.2-1.5-2.1-3.1-2.8-5 -0.1-0.2-0.1-0.5-0.1-0.7 0-0.9 0.6-1.7 1.5-2L60.6 39.4zM66.4 28.6c0-3.2-1-6.2-2.8-8.5 -0.3-0.3-0.4-0.8-0.4-1.2 0-0.7 0.4-1.4 0.9-1.7 0.4-0.2 0.8-0.4 1.3-0.4 0.7 0 1.4 0.4 1.7 0.8 2.3 3.1 3.6 6.9 3.6 11 0 0.7-0.1 1.3-0.1 2 0 2.8 0.4 5.4 1.1 7.8 0.1 0.3 0.2 0.5 0.2 0.8 0 0.9-0.5 1.7-1.3 2 -0.3 0.1-0.5 0.2-0.8 0.2 -0.9 0-1.7-0.5-2-1.1 -1-3-1.5-6.1-1.5-9.4 0-0.7 0-1.5 0.1-2.1L66.4 28.6zM60.2 37.1c-0.1 0-0.1 0-0.2 0 0 0 0 0 0 0 -1.1 0-2-0.8-2.2-1.9 -0.2-1.9-0.3-4.1-0.3-6.6 -0.1-3.6-3.1-6.4-6.6-6.4 -3.6 0-6.5 2.8-6.6 6.4 0 0.7 0 1.3 0 2.1 0 0 0 0 0 0 0 1.2-0.9 2.1-2.1 2.1 0 0 0 0 0 0 -1.2 0-2.2-1-2.2-2.2 0-0.7 0-1.3 0-2.1 0.2-5.9 5-10.7 11-10.7 6 0 10.8 4.7 11 10.7 0 2.4 0.1 4.4 0.2 6.2 0 0.1 0 0.1 0 0.2 0 1.1-0.9 2.1-2 2.1V37.1zM53 28.6c0 9.6 1.2 15.1 4.3 19.7 0.2 0.3 0.4 0.7 0.4 1.2 0 0.8-0.4 1.4-1 1.8 -0.3 0.2-0.8 0.4-1.2 0.4 -0.8 0-1.4-0.4-1.8-1 -3.6-5.4-5-11.5-5-22.1 0-1.2 1-2.2 2.2-2.2s2.2 1 2.2 2.2V28.6zM44.7 37.1c0.3 4.1 1.4 8 2.9 11.4 0.1 0.3 0.2 0.6 0.2 0.9 0 0.9-0.5 1.6-1.3 2 -0.3 0.1-0.6 0.2-0.9 0.2 -0.9 0-1.6-0.5-1.9-1 -1.8-4-2.9-8.4-3.3-13.1 0 0 0-0.1 0-0.1 0-1.2 1-2.2 2.2-2.2 1.1 0 2 0.8 2.2 1.9L44.7 37.1z" class="a"/></svg>

[jack-mullen]

Hi! I'm interested in helping out with this project and it looks like these UI changes might be a good place to get started.

I've noticed there are a few Issues raised for the flash messages, so I'd be happy to do all these together since they rely on underlying styles for the flash messages being altered. Has anyone started work on these yet, or are you happy for me to have a look at this?

[psivesely]

Hi @jcmcreate! Afaik nobody has started on this issue yet. If you would like to, by all means jump in!

There is also a big list of UI changes suggested here that I'm thinking I may turn into a checklist w/ associated "sub"-issues next week (a bit disorganized as is, but great stuff nonetheless). If you do start working on something, please do make a comment on the relevant issue, so others don't also start working on it.

[jack-mullen]

@fowlslegs Thanks! I'm more than happy to work on this issue, and I'll comment in any others that I could work alongside on too.

Are there any branches where the UI changes are being worked on at present?

[psivesely]

@jcmcreate We tend to be pretty granular with PRs when possible because it makes review easier, and we end up getting more new code in faster when we do it one little piece at a time. So in order to make your PR granular, you'll want to branch off develop and generally implement just a single feature/fix. Though, if a number of features are related feel free to implement them in the same branch/PR (e.g., you could change all the flashed messages in a single PR, but don't also change some other UI element as well).

[jack-mullen]

@fowlslegs Makes sense :) I'll do as you suggest and add all the flashes in a single PR. Some of the underlying styles for all the flashes have been altered slightly, so it would make sense to do them all in one bulk.