[client styling] Apply "Reply" pane styling

[ninavizz]

Epic: UX Parity between prototypes & coded client (#261)

This Story: Apply reply pane styling
Much of what's shown in the clickable wireframes below, has yet to be reviewed by the team. That said, implement however much you'd like, for this first PR—with minimum acceptance reqs being the AwesomeAirplane™ button replacing the barfy button for "Send".

Reference materials:

• Quasi-prototype
• screens in Zeplin project

---

Notes:

• Icon for Error screen (currently a bell) may change
• Team has yet to review this latest flow; if Jen's really into this, let's surprise Erik! Otherwise, implement however much you wish, for now. :)

For AwesomeAirplane™ button

Normal: #9814C8
Hover: #E90ED6
Focus: TBD
Active: #F6EDF3, with 28x28 #9814C8 LDS Ring animation sitting atop
Note: Because Active is very important to usability and Focus is very important to accessibility, both states do need to be built-in. Have yet to do Focus, which will need another SVG file.

<?xml version="1.0" encoding="UTF-8"?> <svg width="56px" height="39px" viewBox="0 0 56 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch --> <title>AeroPlane</title> <desc>Created with Sketch.</desc> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="VD_ComposeBox" transform="translate(-707.000000, -109.000000)" fill="#9814C8"> <polygon id="AeroPlane" transform="translate(736.473347, 129.347086) rotate(-8.000000) translate(-736.473347, -129.347086) " points="708.205702 120.847093 719.410273 130.430186 743.788351 122.783606 723.799509 134.318549 720.095201 145.921376 729.046224 138.120065 737.160532 145.692965 764.740991 112.772796"></polygon> </g> </g> </svg>

[sssoleileraaa]

A user might want to disregard what they just wrote by clicking a button rather than select-all-delete. I was thinking that if there are going to be more buttons to interact with the ReplyBox then it might make sense to have a button panel at the bottom instead of one button embedded in the "Reply" textbox.

[ninavizz]

I'd prefer to keep it clean/elegant, on the buttons front... and not design in anticipation of all the "what ifs?" on the user's part. The patterns I'm working with are very standard, and have mostly all been validated in testing.

I also don't want to confuse users with unusual patterns; that sort of thing is necessary and works well in defense/aerospace industry contexts, but not so much in consumer industry contexts (the latter being much closer to our target users). Make sense?

[ninavizz]

...actually, there are 2 other ways to handle the interaction stuff w/ Reply pane; wanting to sketch these out tomorrow (Weds) for review in our 9am UX meeting. FYI/w00t!

[sssoleileraaa]

This has been split up into 4 issues, so I'm going to close.

• ReplyBox should contain source name #348
• Reply button inside text box in offline mode #349
• Reply pending state #350
• ReplyBox styling/polishing #351