Page MenuHomePhabricator

Match lightbox height / width ratios, font sizes, to mockup
Closed, ResolvedPublic

Description

Mockup from May

UX would like the ratios of the lightbox for /authorize, and the font sizes, to more closely match the mockup (attached).

May, since there isn't a hight in pixles, can you give a good ratio for us to use?


Version: master
Severity: normal

Attached:

Specs_Aug29.png (848×1 px, 139 KB)

Details

Reference
bz56014

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 2:24 AM
bzimport set Reference to bz56014.

So the exact dimensions of May's mockup was 420x296 px, so that's about a 16:11 ratio. Let's do 420x296 exactly for now?

Font sizes in the mockup were 18 pt for the Name and "%App Name" sections, and 14 pt for the grants. The privacy policy was 12 pt.

We set the grants to 1em, and the heading to 1.3em, which is pretty much the exact proportions requested. So the only adjustment is the privacy policy and button text to be .85em instead of 1.

Change 91671 had a related patch set uploaded by Aaron Schulz:
Font size, width, and padding tweaks to authorize form

https://gerrit.wikimedia.org/r/91671

Created attachment 13567
Screenshot with Aaron's patch

After Aaron's patch, the looks pretty much match.

Attached:

Screenshot_from_2013-10-24_13:58:16.png (868×1 px, 108 KB)

Change 91671 merged by jenkins-bot:
Font size, width, and padding tweaks to authorize form

https://gerrit.wikimedia.org/r/91671

May requested that we:

  • Cut the space between "Hello World would like to.." and "Interact with pages.." into half.
  • Indent the "Hi MGalloway…" to align with "Interact with pages..," not with the bullet point
  • box color: #FFF with #CCC 1px outline
  • allow button color: #00AF8B
  • Text colors: #333
  • Privacy policy text 12pt

Change 93918 had a related patch set uploaded by CSteipp:
More UX changes

https://gerrit.wikimedia.org/r/93918