[Building Blocks] Update headers BB visual design

RESOLVED FIXED

Status

Firefox OS
Gaia
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: Casey Yee, Assigned: Casey Yee)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: ux-tracking, visual design, jian)

Attachments

(3 attachments, 1 obsolete attachment)

(Assignee)

Description

5 years ago
Update headers to new 1.3 visual design.
(Assignee)

Updated

5 years ago
Whiteboard: ux-tracking
(Assignee)

Comment 1

5 years ago
Flagging VD to post design to bug.
Flags: needinfo?(pabratowski)

Updated

5 years ago
Whiteboard: ux-tracking → ux-tracking, visual design, jian
Created attachment 820480 [details]
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.
Flags: needinfo?(pabratowski)
Created attachment 822485 [details]
FFOS_1.3_VsD_Refresh_Headers_2.pdf

Updating the design spec with slightly different colors in the white settings screens.
Attachment #820480 - Attachment is obsolete: true
(Assignee)

Comment 4

5 years ago
Created attachment 826107 [details] [review]
Patch for Gaia/master
Attachment #826107 - Flags: review?(kaze)

Comment 5

5 years ago
Adding David S. to CC: to track this with Kaze.
(Assignee)

Comment 6

5 years ago
Created attachment 826124 [details]
Headers after patch
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.
(Assignee)

Comment 8

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

Flagging visual design for comment.
Flags: needinfo?(pla)
(Assignee)

Updated

5 years ago
Attachment #826107 - Flags: review?(pivanov)
Attachment #826107 - Flags: review?(kaze) → review-
see my comments on github
Comment on attachment 826107 [details] [review]
Patch for Gaia/master

Looks good now :)
Attachment #826107 - Flags: review?(pivanov) → review+
Comment on attachment 826107 [details] [review]
Patch for Gaia/master

Looks good now :)
Attachment #826107 - Flags: review- → review+
(Assignee)

Comment 12

5 years ago
Yay!  Thanks Pavel :D
Just to know since it's not obvious from the comments, does the r+ patch have a darker text? Thanks!
(Assignee)

Comment 14

5 years ago
Julien, Peter La is looking into the contrast of the text and will report back.
(Assignee)

Updated

5 years ago
Attachment #826107 - Flags: review?(arnau)
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

5 years ago
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
Flags: needinfo?(pla)
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 :)
(Assignee)

Comment 18

5 years ago
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 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.
Attachment #826107 - Flags: review?(arnau) → review+
(Assignee)

Updated

5 years ago
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED

Updated

5 years ago
Depends on: 941919
(Assignee)

Updated

5 years ago
Blocks: 943822
(Assignee)

Updated

5 years ago
No longer blocks: 943822

Updated

5 years ago
Assignee: nobody → kyee
You need to log in before you can comment on or make changes to this bug.