[MGNLUI-1546] Refine the visual design of the login screen Created: 04/Jun/13  Updated: 12/Jun/13  Resolved: 11/Jun/13

Status: Closed
Project: Magnolia UI
Component/s: design
Affects Version/s: 5.0
Fix Version/s: 5.0

Type: Bug Priority: Critical
Reporter: Andreas Weder Assignee: Federico Grilli
Resolution: Fixed Votes: 0
Labels: design
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Fixed login screen.png     PNG File Points to fix.png     PNG File Safari - non-centered button text.png    
Issue Links:
relation
is related to MGNLUI-1524 Remove "forgot your password?" link Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Sprint: RC 1

 Description   

The login screen now looks ready and works fine. I've nevertheless would like to fix a couple of glitches before the release still. This are minor to very minor, I would agree without anyone telling me, but since this is the welcome screen, I'd nevertheless would like to address them to ensure all those designers don't start nitpicking right away

Here are the things I'd like to fix:

  1. Our buttons are now 23px high. Please adjust the Login button accordingly. (I set: height: 23px; padding: 3px)
  2. Don't horizontally center the labels. Instead, left-align them and make sure the right padding is 20px. The style guides say 24px, but I'd like the labels to line up with the Magnolia logo above.
  3. Make sure the input fields and the login button are right-aligned. They're currently off by one pixel due to the light gray border of the fields. I simply increased their width by 1px to fake that.
  4. Please make sure that the bottom border is 20px high (same as right border). I know the style guides say more, but the login button only looks properly placed (now that there's no more text in the box), if left and bottom spacing are equal.
  5. Marketing has asked us to remove all "Yes, we're open" claims. Though covered by MGNLUI-1534, why don't you do this right away.

Since point 4 causes the login box to shrink, please make sure that the error box moves up by the same amount.

Finally, as the result of the claim being removed, we might have to make the logo move down a bit. Please contact me so that we can figure out if that is needed.



 Comments   
Comment by Andreas Weder [ 11/Jun/13 ]

Looking good so far. I nevertheless re-open this for two reasons:

  • on Safari, the "LOGIN" text is not vertically centered inside the button (see screen shot; Firefox is ok)
  • please also implement the (new) hover and click state for the "LOGIN" button, so it provides proper visual feedback when clicked.

For the latter, you may want to contact Samuli, since he implemented the button states in our Vaadin theme.

Comment by Andreas Weder [ 11/Jun/13 ]

Sorry to bother you again. Here are two things I noted in the latest implementation:

  • there's no click state. If I click, the button should light up featuring a white background and dark green text (the same dark green used as a background color for the button).
  • instead, on Firefox (not on Safari, as far as I can tell), when clicking the button, the whole form (including the text input fields) slightly shifts downward and/or sideways
    • please remove this effect.
    • please do not shift downward or sideways the text in the button, if that was the intention. We did that before, but replaced that state with the new click state featuring a white background only
Comment by Federico Grilli [ 11/Jun/13 ]

This should be the good one

Comment by Andreas Weder [ 12/Jun/13 ]

Looking good now. Thanks.

Generated at Mon Feb 12 08:47:41 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.