925929 - [Building Blocks] Update headers BB visual design

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia, defect)

Description

[Casey Yee]

Update headers to new 1.3 visual design.

Comment 1

[Casey Yee]

Flagging VD to post design to bug.

Comment 2

[Przemek Abratowski [:przemek] UX]

Attachment: FFOS_1.3_VsD_Refresh_Headers.pdf

Adding visual design spec for headers.
Please use this as a guide for the 1.3 headers only.

Comment 3

[Przemek Abratowski [:przemek] UX]

Attachment: FFOS_1.3_VsD_Refresh_Headers_2.pdf

Updating the design spec with slightly different colors in the white settings screens.

Comment 4

[Casey Yee]

Attachment: Patch for Gaia/master

Comment 5

[Stephany Wilkes]

Adding David S. to CC: to track this with Kaze.

Comment 6

[Casey Yee]

Attachment: Headers after patch

Comment 7

[Julien Wajsberg [:julienw] (PTO -> Aug 14)]

Hi,

Have you checked the contrast between text and background for the settings subtitles ? It seems to me that the contrast is not high enough and will give a11y problems. Actually, even for me, it's more difficult to read than the other headers.

Comment 8

[Casey Yee]

I'd agree.   We could easily make it slightly darker.

Flagging visual design for comment.

Comment 9

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

see my comments on github

Comment 10

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Comment on attachment 826107 [details] [review]
Patch for Gaia/master

Looks good now :)

Comment 11

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Comment on attachment 826107 [details] [review]
Patch for Gaia/master

Looks good now :)

Comment 12

[Casey Yee]

Yay!  Thanks Pavel :D

Comment 13

[Julien Wajsberg [:julienw] (PTO -> Aug 14)]

Just to know since it's not obvious from the comments, does the r+ patch have a darker text? Thanks!

Comment 14

[Casey Yee]

Julien, Peter La is looking into the contrast of the text and will report back.

Comment 15

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Casey, 
About your comments in GH:
-I think you should review with VD the dark theme, when this patch lands music app will at least need a 
lighter back button. I have not seen any subheader there, but I suggest VD defines a color for it.

-Please check my comment regarding class="skin-organic drawer". I don't think you need it.

And I've also noticed you should include in this PR assets for @1.5x and @2x.

Comment 16

[Peter La]

Hi Julien,

Thanks for the comments.

We've bumped up the contrast slightly with a foreground colour of #4D4D4D on background colour #E7E7E7.  This should be more legible, and is very close to the requirements for enhanced contrast at 6.8:1

http://www.w3.org/TR/WCAG20/#visual-audio-contrast7

Comment 17

[Julien Wajsberg [:julienw] (PTO -> Aug 14)]

Yep, should be better, thanks.

Its still easy to change later if the a11y team finds it's still not contrasted enough, but it's at least enough for me :)

Comment 18

[Casey Yee]

Have made changes to the commit:
- Added 1.5x and 2.0x assets (Comment 15)
- Removed skin-organic drawer (Comment 15)
- Changed up colors (Comment 16)
- Addressed additional comments in PR.

Comment 19

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Comment on attachment 826107 [details] [review]
Patch for Gaia/master

Looks great, thanks Casey, you can merge as soon as you replace 4.9rem for 5rem due to the missing border-bottom.