1546734 - [Card] Adjust vertical spacing and text color

Status: VERIFIED FIXED

(Firefox :: New Tab Page, enhancement, P1)

Description

[Wolasi :wolasi]

Make the following changes for all cards

Requirements

• For 4-column card size, title font-size should be 15px
• Change excerpt text color to gray-90 (gray-10 for dark theme)
• Remove vertical spacing between title and excerpt
• Change text color of sponsored by label to gray-50 (gray-40 for dark theme)
• See spec for vertical spacing adjustments

Spec
https://www.figma.com/file/0xZkmT86rSXbGRB4eIvrn0ts/New-Tab-Spec-for-Fx-v68?node-id=442%3A1

Colors
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-New-Tab-Components?node-id=41%3A256

Comment 1

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/4939

Comment 2

[Gavin Suntop [:gvn] (they/them)]

Attachment: Screen Shot 2019-04-26 at 13.37.10-fullpage.png

Comment 3

[Wolasi :wolasi]

Hard to tell from the screenshot but…

• Was an adjustment made to the vertical spacing between the image and the title? Should be 12px per the spec
• Similarly the min vertical spacing between the excerpt and the "Sponsored by…" label

Also can we get a screenshot of layout with 3-colum card layout for review?

Comment 4

[Gavin Suntop [:gvn] (they/them)]

(In reply to Wolasi from comment #3)

Hard to tell from the screenshot but…

• Was an adjustment made to the vertical spacing between the image and the title? Should be 12px per the spec

Will make that tweak.

• Similarly the min vertical spacing between the excerpt and the "Sponsored by…" label

There is a 12px min margin there. Did you want something else?

Also can we get a screenshot of layout with 3-colum card layout for review?

Will add this!

Comment 5

[Gavin Suntop [:gvn] (they/them)]

Attachment: 1546734-dev-test-all.jpg

Comment 6

[Wolasi :wolasi]

• Source color for the largest story in the hero should be gray
• Remove spacing between title and excerpt for the largest hero story
• Vertical spacing between image and text below should 12px
• Vertical spacing between the excerpt and the Sponsor label should be 10px

Comment 7

[Gavin Suntop [:gvn] (they/them)]

Attachment: 1546734-dev-test-all-2.jpg

Comment 8

[Wolasi :wolasi]

Looking good! We might as well change the source and sponsor text for list items too.

Comment 9

[Gavin Suntop [:gvn] (they/them)]

Attachment: 1546734-dev-test-all-3.jpg

Tweaked list colors.

Comment 10

[Wolasi :wolasi]

Text excerpt color for hero main story should be gray-90 (gray-10 for dark theme)

Comment 11

[Gavin Suntop [:gvn] (they/them)]

Attachment: 1546734-dev-test-all-4.jpg

Comment 12

[Wolasi :wolasi]

LGTM

Comment 13

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/690025a0dcd5

Comment 14

[Marius Coman [:mcoman], Ecosystem QA]

I have verified this issue with the latest Firefox Nightly (68.0a1 Build ID - 20190509214305) installed, on Windows 10 x64, Arch Linux and Mac 10.14.4. Now, the cards are respecting the changes from comment 0.