1063633 - Treeherder's "login with persona" button too large and not consistent with current design guidelines

Status: RESOLVED FIXED

(Tree Management :: Treeherder, defect, P3)

Description

[William Lachance (:wlach)]

Treeherder currently has a large "login with persona" button:

https://treeherder.mozilla.org/ui/#/jobs

According to the Persona user interface guidelines, we should be able to use a smaller login / sign up button, which would save us a bit of horizontal space:

https://developer.mozilla.org/en-US/Persona/User_interface_guidelines#Sign_up.2FSign_in_link

This bug should be pretty simple to fix by just changing the button image. :) Ryan, do you have (or could you make) an appropriately sized png that we could use here?

Comment 1

[Ryan Feeley [:rfeeley]]

It's best to look as native to your site as possible. I recommend using an existing (Bootstrap 3) button style like this:
<a class="btn btn-view-nav">Log in / Register</a>
I don't even think you need to head icon.

Comment 2

[William Lachance (:wlach)]

Cool! I guess in that case we can make this a good first bug. Procedure:

1. Check out treeherder-ui and get it running: https://github.com/mozilla/treeherder-ui/blob/master/README.md
2. Modify webapp/app/partials/persona_buttons.html per Ryan's instructions above

Comment 3

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

We'd want the same styling for the logout button, yes?

Comment 4

[William Lachance (:wlach)]

(In reply to Wes Kocher (:KWierso) from comment #3)
> We'd want the same styling for the logout button, yes?

Yup.

Comment 5

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Attachment: Pull request 154

Comment 6

[William Lachance (:wlach)]

Comment on attachment 8485242 [details] [review]
Pull request 154

Looks fine to me.

Comment 7

[William Lachance (:wlach)]

https://github.com/mozilla/treeherder-ui/pull/154

Comment 8

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Hrm, this doesn't actually seem to have done anything... Now that treeherder-dev has been updated with this code, it's still using the big, blue buttons...

Comment 9

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Reloading the page while bypassing the cache (Ctrl/Cmd-Shift-R) showed the old Persona button. Deleting my cache completely and reloading the page showed the new button style.

Re-resolving.

Comment 10

[Ed Morley [:emorley]]

https://github.com/mozilla/treeherder-ui/commit/eecbf5fa9d281c86d1b671376fc965498ffca4e6

Comment 11

[Treeherder GitHub Bugbot]

Commits pushed to master at https://github.com/mozilla/treeherder

https://github.com/mozilla/treeherder/commit/0469b5216b9ed62bf830f01703180f25ec925585
Bug 1063633 - Change Persona login button styling

https://github.com/mozilla/treeherder/commit/b0bce58f388564789041fb5629dbb7f30ef66d02
Merge pull request #154 from KWierso/1063633

Bug 1063633 - Change Persona login/logout button styling.