Closed Bug 1379558 Opened 4 years ago Closed 4 years ago

Button style in onboarding should follow photon button style

Categories

(Firefox :: New Tab Page, enhancement, P1)

enhancement

Tracking

()

VERIFIED FIXED
Firefox 56
Tracking Status
firefox56 --- verified

People

(Reporter: gasolin, Assigned: gasolin)

References

Details

(Whiteboard: [photon-onboarding])

Attachments

(2 files, 2 obsolete files)

UX(Verdi) said during ALL Hands.

After discussion, UX decide the onboarding button should follow the photon style (the button seen in about:config)
Assignee: nobody → gasolin
Status: NEW → ASSIGNED
Flags: qe-verify+
Priority: -- → P1
Target Milestone: --- → Firefox 56
Attached image ui demo (obsolete) —
Verdi, could you help confirm if the new button style is as you expect, thanks

The video is here
http://recordit.co/aedmcc7ySY
Attachment #8884746 - Flags: ui-review?(mverdi)
The default background color comes from `--in-content-primary-button-background`;
The hover background color comes from `--in-content-primary-button-background-hover`

http://searchfox.org/mozilla-central/source/toolkit/themes/shared/in-content/common.inc.css#36
Whiteboard: [photon-onboarding]
Attachment #8884751 - Attachment is obsolete: true
Attachment #8884751 - Flags: review?(rexboy)
Attachment #8884751 - Flags: review?(dtownsend)
Attachment #8884746 - Attachment is obsolete: true
Attachment #8884746 - Flags: ui-review?(mverdi)
Attached image ui demo
Here's the updated UI demo. On the real device, the cursor will change when hover onto the buttons.

(Though currently button in about:config does not change the cursor)
Attachment #8884775 - Flags: ui-review?(mverdi)
The video is here http://recordit.co/Qs2aSulwRb
Comment on attachment 8884743 [details]
Bug 1379558 - Button style in onboarding should follow photon button style;

https://reviewboard.mozilla.org/r/155624/#review160648

::: browser/extensions/onboarding/content/onboarding.css:268
(Diff revision 2)
>    line-height: 21px;
> -  background: #0d96ff;
> +  background: #0a84ff;
>    border: none;
> -  border-radius: 3px;
> +  border-radius: 0;
>    color: #fff;
>    box-shadow: 0 1px 0 rgba(0,0,0,0.23);

Should we remove the drop shadow too?
Attachment #8884743 - Flags: review?(rexboy) → review+
Comment on attachment 8884743 [details]
Bug 1379558 - Button style in onboarding should follow photon button style;

https://reviewboard.mozilla.org/r/155624/#review160852

::: browser/extensions/onboarding/content/onboarding.css:268
(Diff revision 2)
>    line-height: 21px;
> -  background: #0d96ff;
> +  background: #0a84ff;
>    border: none;
> -  border-radius: 3px;
> +  border-radius: 0;
>    color: #fff;
>    box-shadow: 0 1px 0 rgba(0,0,0,0.23);

Yeah looks like this should be removed
Attachment #8884743 - Flags: review?(dtownsend) → review+
the update PR addressed issue and also inherit the sync tour button style to align with other buttons
Keywords: checkin-needed
Attachment #8884775 - Flags: ui-review?(mverdi)
Pushed by cbook@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f97a2cb65289
Button style in onboarding should follow photon button style;r=mossop,rexboy
Keywords: checkin-needed
(In reply to Fred Lin [:gasolin] from comment #2)
> Created attachment 8884746 [details]
> ui demo
> 
> Verdi, could you help confirm if the new button style is as you expect,
> thanks
> 
> The video is here
> http://recordit.co/aedmcc7ySY

Yes this looks right. Remove the shadow and border radius. Update the button color and add the hover color. Thanks!
https://hg.mozilla.org/mozilla-central/rev/f97a2cb65289
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
QA Contact: jwilliams
The feature is implemented in latest Nightly 56.0a1 on Windows 10, 64-bit  

Build ID :   20170715030206
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
QA Whiteboard: [bugday-20170712]
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.