Style update of translation and news banners

[fcoveram]

Problem

As noticed in a #904's comment by @zackkrida, the translation and News banners have styles that look clunky and broken on mobile. The yellow background of News banner makes the page feel cut by the translation one.

Description

Desktop	Mobile

The proposal above has the following changes:

• Background change of News banner, from brand yellow to Blue 1 (#3E58E1) from News redesign.
• New close action on the far-right area on both banners.
• Both banners have 16px 24px for paddings on both desktop and mobile.
• On desktop, texts are label regular.
• On mobile, the close action is center aligned and texts are caption regular.

Regarding banners behavior, I think both elements should show over the page instead of pushing downward the homepage main content. In that way, closing the banners do not move the page upwards.

[sarayourfriend]

Regarding banners behavior, I think both elements should show over the page instead of pushing downward the homepage main content. In that way, closing the banners do not move the page upwards.

How would this work on the search pages? The banners would cover the header...

[zackkrida]

@sarayourfriend my guess would be that he's only referring to the desktop homepage, but I still think it would be too much trouble to switch to that behavior, and only for modest gains in reducing layout shifting in one limited context (the desktop homepage).

[fcoveram]

Yes, I was referring only to the homepage.

For all internal pages, related or not to the searching experience, I remember a PR by @obulat where the translation banner does push the content downwards, not overlapping any content. That solution worked perfectly.

However, I think the News banner should be only in the homepage.

[sarayourfriend]

Okay, thanks for the clarification @panchovm!