NTP Settings Design follow up

[ryanml]

Related issue: #10318

Feedback should be implemented as described here: #10318 (comment) and here: brave/brave-core#6015 (comment)

[srirambv]

Verification passed on

Brave	1.13.80 Chromium: 85.0.4183.69 (Official Build) dev (64-bit)
Revision	94abc2237ae0c9a4cb5f035431c8adfb94324633-refs/branch-heads/4183@{#1658}
OS	Linux

• Verified focus ring is using the correct colour when clicked or focused by the keyboard tab

Light	Dark

• Logged follow up issue [Desktop][CW] Focus ring uses two colours when theme is set to dark  #11439 for dark theme issue

• Verified opening dashboard settings creates an overlay wrapper which has rgba(33, 37, 41, 0.32)
  

• Verified clicking outside the dashboard closes the dashboard setting

With overlay (Light)	Without overlay (Light)

With overlay (Dark)	Without Overlay (Dark)

• Verified description is using Poppins font but set at 13px (known issue) instead of 17px as per spec
• Verified bottom margin is also removed

Light	Dark

• Verified content area is of width 360px(known issues) instead of 390px as per sepc

Light	Dark

• Verified Card stack has the rgba values as per spec. Only verified for 3 as Brave Together is not available on release channel only available on nightly. Nightly check can be found in NTP Settings Design Fixes brave-core#6351 (comment)

Add card	Background card 2	Background card 1

[srirambv]

Verification passed on

Brave	1.13.80 Chromium: 85.0.4183.83 (Official Build) (64-bit)
Revision	94abc2237ae0c9a4cb5f035431c8adfb94324633-refs/branch-heads/4183@{#1658}
OS	Windows 10 OS Version 1809 (Build 17763.1397)

• Verified focus ring is using the correct colour when clicked or focused by the keyboard tab

Light	Dark

• Encountered [Desktop][CW] Focus ring uses two colours when theme is set to dark  #11439 for dark theme issue
• Verified opening dashboard settings creates an overlay wrapper which has rgba(33, 37, 41, 0.32)

• Verified clicking outside the dashboard closes the dashboard setting

With overlay (Light)	Without overlay (Light)

With overlay (Dark)	Without Overlay (Dark)

• Verified description is using Poppins font but set at 13px (known issue) instead of 17px as per spec
• Verified bottom margin is also removed

Light	Dark

• Verified content area is of width 360px(known issues) instead of 390px as per sepc

Light	Dark

• Verified Card stack has the rgba values as per spec. Only verified for 3 as Brave Together is not available on release channel only available on nightly. Nightly check can be found in NTP Settings Design Fixes brave-core#6351 (comment)

Add card	Background card 2	Background card 1

[srirambv]

Verification passed on

Brave	1.13.80 Chromium: 85.0.4183.83 (Official Build) (64-bit)
Revision	94abc2237ae0c9a4cb5f035431c8adfb94324633-refs/branch-heads/4183@{#1658}
OS	Windows 10 OS Version 1809 (Build 17763.1397)

• Verified focus ring is using the correct colour when clicked or focused by the keyboard tab

Light	Dark

• Encountered [Desktop][CW] Focus ring uses two colours when theme is set to dark  #11439 for dark theme issue
• Verified opening dashboard settings creates an overlay wrapper which has rgba(33, 37, 41, 0.32)

• Verified clicking outside the dashboard closes the dashboard setting

With overlay (Light)	Without overlay (Light)

With overlay (Dark)	Without Overlay (Dark)

• Verified description is using Poppins font but set at 13px (known issue) instead of 17px as per spec
• Verified bottom margin is also removed

Light	Dark

• Verified content area is of width 360px(known issues) instead of 390px as per sepc

Light	Dark

• Verified Card stack has the rgba values as per spec. Only verified for 3 as Brave Together is not available on release channel only available on nightly. Nightly check can be found in NTP Settings Design Fixes brave-core#6351 (comment)

Add card	Background card 2	Background card 1

[srirambv]

Follow up issue #11441