[Desktop] design updates to customize dialog follow up to #9455

[rebron]

Description

Design follow-up to #9455.

• Remove Show from the section title - moved to [Desktop] Remove "Show" from NTP Settings tab labels #10591
• Remove blue focus border when selection is selected
• Remove alt text Customize dashboard
• Add scrim in the background (see design)
• Widget title, description and button text should all be Poppins
• Use + icon for Add; button
• Remove bottom margin for all sections, not just More cards
• Add missing widget stack icon
• Only show message when 5/5 of cards are used.
• Use right opacity for card titles (see design)

Design/Expected Result

Reproduces how often:

n/a

Brave version (brave://version info)

Address fixes for Brave 1.11.x

Version/Channel Information:

• Can you reproduce this issue with the current release? No
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the dev channel? Yes
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? n/a
• Does the issue resolve itself when disabling Brave Rewards? n/a
• Is the issue reproducible on the latest version of Chrome? n/a

Miscellaneous Information:

Thanks @karenkliu

[rebron]

@ryanml 1.13.x milestone right?
@karenkliu When you get a chance, can you see if this all looks good to you? Can test in beta with 1.13.14 or higher or any Nightly build?

[karenkliu]

@rebron @ryanml We're still missing a couple design fixes from the first round:

[ryanml]

@rebron yes 1.13 - I'll make the fixes @karenkliu mentioned here then uplift them

[LaurenWags]

Verified passed with

Brave	1.13.79 Chromium: 85.0.4183.69 (Official Build) dev (64-bit)
Revision	4554ea1a1171bd8d06951a4b7d9336afe6c59967-refs/branch-heads/4183@{#1426}
OS	macOS Version 10.14.6 (Build 18G3020)

Per https://bravesoftware.slack.com/archives/CQUHQ0PM3/p1598038077005900?thread_ts=1598037921.005400&cid=CQUHQ0PM3, design changes have already been reviewed by @karenkliu

Spot checked some design elements that were listed in brave/brave-core#6351 (comment) such as

• confirmed that once the Customize modal is visible, that there's an overlay over the NTP that looks a bit darker to emphasis the Customize modal.
• confirmed that clicking anywhere on the NTP page dismisses the Customize modal without issues
• confirmed focus order uses Brave color (not blue)

Generally confirmed functionality of customize dashboard works

• able to toggle items off/on via Customize Dashboard
• confirmed these selections were reflected on brave://settings/newTab
• confirmed able to toggle items from brave://settings/newTab and have the status reflected on Customize Dashboard
• confirmed selections were retained on browser restart

Encountered #11374

---

Verification passed on

Brave | 1.13.79 Chromium: 85.0.4183.69 (Official Build) dev (64-bit)
-- | --
Revision | 4554ea1a1171bd8d06951a4b7d9336afe6c59967-refs/branch-heads/4183@{#1426}
OS | Windows 10 OS Version 1903 (Build 18362.1016)

• Verified the design updates from [Desktop] design updates to customize dialog follow up to #9455 #10318 (comment)
• ensured that the focus border is using the correct colour when clicking via mouse or tabbing through the options using a keyboard. Example:
  
• ensured that clicking anywhere on the NTP page dismisses the Customize modal without issues
• ensured that the bottom margin was removed from the Customize dashboard/modal
• ensured that shadows were being removed as per "Join Rewards" is being displayed in the rewards panel when restarting Brave #6015 (comment).
• ensured that there's a space between the widget cards under More Cards:
  
• ensured able to toggle items off/on via Customize Dashboard
• ensured the dashboard selections were reflected on brave://settings/newTab
• ensured able to toggle items from brave://settings/newTab and have the status reflected on Customize Dashboard
• ensured the dashboard selections were retained on browser restart
• Encountered unnecessary scroll bar on sections of Customize Dashboard popup #11374, Remove Dashboard Settings tool tip for each stats #6084 and [Desktop] Customized Dashboard settings tool tip is shown outside the modal popup #10299

---

Verification passed on

Brave	1.13.82 Chromium: 85.0.4183.83 (Official Build) (64-bit)
Revision	94abc2237ae0c9a4cb5f035431c8adfb94324633-refs/branch-heads/4183@{#1658}
OS	Ubuntu 18.04 LTS

• Verified the design updates from [Desktop] design updates to customize dialog follow up to #9455 #10318 (comment)

• ensured that the focus border is using the correct color when clicking via mouse or tabbing through the options using a keyboard. Example:
  

• ensured that clicking anywhere on the NTP page dismisses the Customize modal without issues

• ensured that the bottom margin was removed from the Customize dashboard/modal

• ensured that shadows were being removed as per "Join Rewards" is being displayed in the rewards panel when restarting Brave #6015 (comment).

• ensured that there's a space between the widget cards under More Cards:
  

• ensured able to toggle items off/on via Customize Dashboard

• ensured the dashboard selections were reflected on brave://settings/newTab

• ensured able to toggle items from brave://settings/newTab and have the status reflected on Customize Dashboard

• ensured the dashboard selections were retained on browser restart

• Encountered unnecessary scroll bar on sections of Customize Dashboard popup #11374, Remove Dashboard Settings tool tip for each stats #6084 and [Desktop] Customized Dashboard settings tool tip is shown outside the modal popup #10299