495550 - Update login page to match Clearleft designs

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect)

Description

[Chris Howse [:chowse]]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.10) Gecko/2009042315 Firefox/3.0.10
Build Identifier: 

The login page uses newer CSS, but still shows traces of the former site design.

Reproducible: Always

Comment 1

[Chris Howse [:chowse]]

Wireframes:
http://people.mozilla.com/~chowse/drop/my_account/v1/HiFid_Login.png
http://people.mozilla.com/~chowse/drop/my_account/v1/HiFid_Login_Alt.png

Comment 2

[Chris Howse [:chowse]]

Attachment: Patch for updated login page

Comment 3

[Chris Howse [:chowse]]

Attachment: Screenshot of updated login page

Comment 4

[Wil Clouser [:clouserw]]

I'm bumping this to 5.0.8 because QA has a lot to do already.  Let's get this reviewed and landed early next release.

Comment 5

[Ryan Doherty (:rdoherty)]

Comment on attachment 381172 [details] [diff] [review]
Patch for updated login page

Form looks really good UI-wise, but I think the code could be written better.

A lot of the classes have redundant naming conventions. .amo2009-form and .amo-label-large seem kinda weird to me as they are repeating the layout name and the html element they are meant for. Plus 'large' in a classname is not semantic.

I think we don't need to add the forms.css file anymore, pretty sure that is legacy (and probably where some of the classnames came from?).

The login form should probably just have a class 'login' added to it and everything in it styled with descendant selectors (.login input, .login label, etc)

Any general or site-wide styling could just be added to element selectors (form, input, label, etc).

ul.xoxo seems like a nonsensical classname, adding the class 'prose' to the container would fix the issue it is trying to avoid.

The .amo2009-login-help class could just be .login-help or #login-help

Also, I don't think there should be the text 'Add-ons for Firefox' at the top.

I think with these changes the code will rock :)

Comment 6

[Chris Howse [:chowse]]

Attachment: Updated patch

Cleaned up the CSS, removed the references to form.css, and made the Login Problems panel a little more visible.

Comment 7

[Ryan Doherty (:rdoherty)]

Comment on attachment 387066 [details] [diff] [review]
Updated patch

Looks nice!

Comment 8

[Chris Howse [:chowse]]

r48054

Comment 9

[Stephen Donner [:stephend] Not actively reading bugmail]

I can't log in to preview using IE 7; reopening.

Comment 10

[Jeff Balogh (:jbalogh)]

chowse: according to http://msdn.microsoft.com/en-us/library/ms535211%28VS.85%29.aspx, you need to add type=submit to the button for IE7.  Hooray!

Comment 11

[Chris Howse [:chowse]]

Attachment: Fix for IE7

Thanks for the pointer, Jeff.

Comment 12

[Chris Howse [:chowse]]

r48115

Comment 13

[raymond [:retornam] (inactive)]

verified fixed on https://preview.addons.mozilla.org/en-US/firefox/users/login in  Firefox, Chrome,Opera Safari and IE7