1546733 - [Card] Place source above title and adjust vertical spacing

Status: VERIFIED FIXED

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

Description

[Wolasi :wolasi]

Make the following changes for all cards

Requirements

• Move source about title
• Vertical spacing between source and title should be 2px
• Change source text color to gray-50 (gray-40 for dark theme)

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

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

Attachment: 1546733-dev-test-all-round1.jpg

Comment 2

[Wolasi :wolasi]

Nice work, a couple of comments…

• spacing between source and title looks too big. Can we make it 2px?
• what's the bottom padding on the bordered card? Is there a bottom margin on the excerpt?
• move source above title for biggest story in hero unit

Comment 3

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

There's 12px padding all around, but also a 12px bottom margin on the excerpt. Do you want that removed or reduced?

Comment 4

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

Attachment: 1546733-dev-test-all-round2.jpg

Comment 5

[Wolasi :wolasi]

LGTM

Comment 6

[GitHub Bugzilla PR Linker]

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

Comment 7

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/d94d1e2c6f43

Comment 8

[Ciprian Muresan [:cmuresan], Ecosystem QA]

I have verified that the source has been moved above the title, the distance between the source and title is 2px, and the text color has been changed to gray-50 (gray-40 for dark theme) as in the figma link, on the latest Nightly 68.0a1 (Build ID 20190509033505) on Windows 10x64, Mac 10.14, and Arch Linux 4.14.3.

Comment 9

[Wolasi :wolasi]

Comment on attachment 9063564 [details]
1546733-dev-test-all-round2.jpg

LGTM