UX parity between prototypes and coded client

[sssoleileraaa]

Description

See Issue #259

• Added a StatusBar to the top of the client to continuously show when the last refresh was
• Added a branding/journalist account section on the left-hand side
• Resized each pane to be proportional to other panes with a max of 200px for the branding pane
• Removed margins
• Updated a few icons with ones provided by @ninavizz
• Added time of last_update for source to conversation title

Before

AFTER!!!

TODO

Each pane individually needs attention in follow-up PRs. There will be separate Issues mentioned in the UX Parity Epic #261 for each pane. A few details I just want to point out ahead of time are:

• When working on Auth Widget Styles/Interaction, move the refresh button from branding pane to status bar
• Discuss whether or not there will be ephemeral status messages that will termporarily replace the top status bar or if we want to add a bottom status bar for error messages, etc. @eloquence - was this discussed in the past?
• Replace temporary branding.png image with the real thing
• Talk to @ninavizz about placing the word "Send" underneath the airplane icon and what other interactive reply icons will look like, e.g. "Cancel" and "Delete"
• We probably want to remove header_logo.png

[sssoleileraaa]

This is a WIP-PR until I update tests

[heartsucker]

I know this is a WIP, but a couple of small things.

[ninavizz]

@creviera Did you see the quasi-prototype I put in the "Reply" Issue #268? That addresses all of ye concerns & more. I probably should make the nav buttons bigger; in the meantime, look for the tiiiny pink triangle nav buttons on the top/far-sides of each screen. 😺

[sssoleileraaa]

@creviera Did you see the quasi-prototype I put in the "Reply" Issue #268? That addresses all of ye concerns & more. I probably should make the nav buttons bigger; in the meantime, look for the tiiiny pink triangle nav buttons on the top/far-sides of each screen. smiley_cat

So I just finished clicking through the invisionapp and see that you can delete or cancel a message after sending. I was imagining "Cancel" button (potentially an "Attach" and maybe other buttons) next to the "Send" button. I'll explain my thinking in the client ticket: #268

Update

@ninavizz - just want to point out that the only reason the reply button is below is because it required less coding for this PR, which is focused on rearranging the main panes and not the specifics of each pane. I didn't mean for it to look like I was overriding your design. There will be followup PRs for each pane styling!

[ninavizz]

Journalists cannot currently send attachments to Sources... so, that's not functionality relevant to us (already vetted that one, months ago, heh). Other comments in with ticket. 😃

[ninavizz]

howdy do

[heartsucker]

Went through some basic workflows, and there's no regressions. This looks sooo pretty.

I have a few nits that can be ignored unless you really feel like changing them. I'm only pointing them out to help you understand some of the SD development practices we should carry over from SD core.

One legit (but also non-blocking) complaint about putting a TODO into the code / leaving dead in a comment.

Aaaand also a question. Why are we using PNGs and not SVGs for everything? My first impression is that SVGs would be better because of styling / scaling and such, and also I don't like binary data in git. But also you've been working closer with @ninavizz so there might be a reason for this I totally missed.

[sssoleileraaa]

The SVGs are comments in this inventory list (freedomofpress/securedrop-ux#17) and will need to be moved into the client. I moved the refresh SVG here and the PNGs will need to be replaced with their corresponding SVG in follow PRs that address the styling of each section of the client. I could pull them in now, but I think it's fine to add/replace them in the next PRs.

[sssoleileraaa]

@heartsucker or @redshiftzero - review comments resolved