Apply gradient that spans the footprint behind the Source List, Conversation Pane, and Reply pane

[sssoleileraaa]

@creviera The gradient that spans the footprint behind the Source List, the Conversation Pane, and the Reply pane, is below. It may be a tad light, ping me when ya get it in.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1224 792" style="enable-background:new 0 0 1224 792;" xml:space="preserve">
<style type="text/css">
	.st0{fill:url(#SVGID_1_);}
</style>
<radialGradient id="SVGID_1_" cx="609.095" cy="326.8184" r="279.7393" gradientTransform="matrix(2.065 0 0 1.9595 -644.4514 -243.4455)" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#F2F8F4"/>
	<stop  offset="0.4802" style="stop-color:#F2F3FA"/>
	<stop  offset="1" style="stop-color:#F8FCFF"/>
</radialGradient>
<rect x="1.9" y="0.5" class="st0" width="1222.9" height="792.9"/>
</svg>

Originally posted by @ninavizz in #280 (comment)

[sssoleileraaa]

Zeplin link for "No Content": https://app.zeplin.io/project/5c807ea562f734bd2756b243/screen/5cfe9244f033df15f09e72ec

[sssoleileraaa]

@ninavizz Is this still the correct graient? #280 (comment). I can't find this gradient in the inventory list or in zeplin. Do you have a link?

[sssoleileraaa]

to help, i can show you what the gradient provided in your comment looks like (granted this is not applied behind the sourcelist yet, which will require a code refactor to do):

to make it easier to see that this is a radial gradient, i modified the colors (FOR DEMONSTRATION ONLY):

[ninavizz]

Yeeeeeahhh, no. As always, big affection & appreciation for your attention to detail! Lemme check...

[ninavizz]

Okee doke, now I remember why I created the gradient like that: because it has to span the full footprint beneath the Conversation Pane, and the Source List, and only the left 2/3 and the top 5/6th(ish) of that, are supposed to be regularly visible to users; with one leetle strip behind the Selected Source, visible. Just like we discussed when we strategized about this over lunch at Laurelhurst. The gradient needs to be like that so that the transition from the Conversation Pane into the Selected Source is smooth, while also giving the right chromatic "punch" in the Selected Source strip.

For a variety of reasons, I feel it's too much work to "incrementally" do the gradient. Which is why I've never liked this issue existing as a thing to tackle, before the typography, re-factoring of the Source List, or re-factoring of the Reply box. It's basically the last cherry-on-the-sundae touch in the UI, for us to worry about.

Happy to discuss in further detail, in Monday's meeting... but the rationale is too much to get into, in async typewritten communication.

[sssoleileraaa]

The following issues get us closer to the desired design:

• No borders #505
• update font weights to numbers and match zeplin #502
• Add EmptyConversationView #510

Once these are merged the client looks like... (click to expand)

Which looks a whole lot better than this... (click to expand)

I am splitting this up into a couple follow-up issues, and will close this once the above PRs are merged. The follow-up issues are:

• Add gradient to source list items #513
• Add transparency to SourceList and ConversationView #512
• Cover line widget on select #511

[eloquence]

Thank you, @creviera! Let's aim to merge #505, #502, and #510 in this sprint, but bump the master issue off the sprint for now. Thanks to your hard work, we're already significantly exceeding the UI commitments for the sprint, and I think it's fine to defer the final work required to match the spec a bit longer, so we can use the remainder of the time in this sprint to focus on getting closer to resolving #391.

[eloquence]

As noted above, was split into follow-up issues. Closing.