1085451 - Implement new design for Loop's green call buttons

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect)

Description

[:shell escalante]

see bug 1079905 for the design decisions on color and making the button corners like the rest (just barely rounded).  We know at least 4 places this needs to be updated.  Darrin has 3 here https://bug1079905.bugzilla.mozilla.org/attachment.cgi?id=8501777 and there's at least 1-2 on the stand-alone of the same "start" and "answer" buttons.  see the bottom 2 options here for visualization
http://cl.ly/image/351M2k0o370o

Comment 1

[Maire Reavy [:mreavy]]

[Tracking Requested - why for this release]:
We're advised that we need to make this change for the Fx34 release.

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

From bug 1079905 comment 8,
> Ok, so going with replacing all green buttons in the Hello UI with Summit Teal vibrant (#5BC0A4) and 
> white foreground (text + icons). Also shifting the pill button in the contacts UI to a shorter, 
> rounded rect, in line with our other Hello buttons (see bug 1075203). Thanks everyone!

Darrin, what should the hover and hover:active colors be?

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

As well as the border-color.

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

While working on this, I noticed that all buttons in Loop get darker in :hover and :hover:active, but the call-details button actually gets brighter on :hover and is lacking a :hover:active color.

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

From shorlander over IRC:
<shorlander> jaws: hover = 47b396 hover:active = 3aa689

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch v1.1

With Call Details button now having border-radius:2px instead of the 30px.

Comment 8

[:Gijs (he/him)]

Comment on attachment 8508324 [details] [diff] [review]
Patch v1.1

Review of attachment 8508324 [details] [diff] [review]:
-----------------------------------------------------------------

r=me, make sure you deal with the foreground color (also for icons!) somewhere else.

::: browser/components/loop/content/shared/css/common.css
@@ +121,5 @@
>    .btn-accept:hover,
>    .btn-success:hover,
>    .btn-accept + .btn-chevron:hover {
> +    background-color: #47b396;
> +    border: 1px solid #47b396;

Nit: Here and below, just use border-color: #47b396.

Comment 9

[Jared Wein [:jaws] (please needinfo? me)]

https://hg.mozilla.org/integration/fx-team/rev/819ec23d4ad1

Comment 10

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/819ec23d4ad1

Comment 11

[u279076]

(In reply to Carsten Book [:Tomcat] from comment #10)
> https://hg.mozilla.org/mozilla-central/rev/819ec23d4ad1

Should this not be milestone=mozilla36? mozilla-central is Firefox 36 currently.

Comment 12

[Jared Wein [:jaws] (please needinfo? me)]

Yes, it should be Target Milestone=mozilla36. Thank you for catching this.

Comment 13

[Maire Reavy [:mreavy]]

Hi Pauly -- Can you verify this in tomorrow's Nightly?

Comment 14

[Lawrence Mandel [:lmandel] (use needinfo)]

This looks like some pretty simple style changes (mostly colour changes). Do you see any reason not to uplift to Beta and Aurora immediately?

Comment 15

[u279076]

(In reply to Maire Reavy [:mreavy] (Plz needinfo me) from comment #13)
> Hi Pauly -- Can you verify this in tomorrow's Nightly?

We've got more important bugs to test than visual design changes. This can uplift without QA testing in my opinion.

Comment 16

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Lawrence Mandel [:lmandel] from comment #14)
> This looks like some pretty simple style changes (mostly colour changes). Do
> you see any reason not to uplift to Beta and Aurora immediately?

This can uplift immediately.

Comment 17

[Lawrence Mandel [:lmandel] (use needinfo)]

Comment on attachment 8508324 [details] [diff] [review]
Patch v1.1

Approval Request Comment
[Feature/regressing bug #]: Loop changes for Firefox 34
[User impact if declined]: This is a style change for the call buttons.
[Describe test coverage new/current, TBPL]: Style change only. No automated tests. Will manually verify.
[Risks and why]: Low risk associated with style change. This is primarily a patch that changes colours.
[String/UUID change made/needed]: No.

Comment 18

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/427b896f5151
https://hg.mozilla.org/releases/mozilla-beta/rev/5aecfcba7559