[Desktop] Redesign 'Customize Dashboard' setting on the new tab page to support more options

[rebron]

Description

Update the design for New Tab page settings to allow for more customization of the page: to show/hide more widgets, to manage individual widget settings, for managing user uploaded wallpaper or choosing background colors.

Test plan

Should match design

Design

Clicking on customize now opens an expanded dashboard customization panel:

The customization panel now has sections that contains toggles for each widget.

Switching between sections

Hover on another section:

When the user clicks on a different section in the panel, the highlight slides to the selected section:

Dark theme

Dark theme is supported:

Assets

Figma link for CSS, sizing, etc.: https://www.figma.com/file/ZVez2eu0i1OFReiP2jEfgm/Customize-Dashboard-panel?node-id=0%3A1 <-- export the icons from here too

[karenkliu]

Designs and assets added!

[rebron]

cc: @cezaraugusto

[LaurenWags]

Verified passed with

Brave | 1.11.85 Chromium: 83.0.4103.116 (Official Build) dev (64-bit)
-- | --
Revision | 8f0c18b4dca9b6699eb629be0f51810c24fb6428-refs/branch-heads/4103@{#716}
OS | macOS Version 10.14.6 (Build 18G3020)

• Generally confirmed design matches above, however followups are logged with [Desktop] design updates to customize dialog follow up to #9455 #10318 and [Desktop] Customized Dashboard settings tool tip is shown outside the modal popup #10299
• Generally confirmed that the new design allows for items to be enabled/disabled from NTP and changes to on/off status are reflected on brave://settings/newTab
• Generally confirmed that adjusting on/off status for various NTP items using brave://settings/newTab was reflected on NTP and on the new Customize Dashboard popup
• Generally confirmed that if changes to NTP settings were made on 1.10.x, when upgrading to 1.11.x they are still reflected on NTP, on brave://settings/newTab and on the updated Customize Dashboard popup
• Encountered already logged issue [Desktop] Enabling Brave Rewards widget via settings page doesn't enable it in NTP #10067 (comment) while testing

Dark Theme Images

Light Theme Images

---

Verified passed with

Brave	1.11.87 Chromium: 83.0.4103.116 (Official Build) dev (64-bit)
Revision	8f0c18b4dca9b6699eb629be0f51810c24fb6428-refs/branch-heads/4103@{#716}
OS	Linux

• Generally confirmed design matches above, however followups are logged with [Desktop] design updates to customize dialog follow up to #9455 #10318 and [Desktop] Customized Dashboard settings tool tip is shown outside the modal popup #10299
• Generally confirmed that the new design allows for items to be enabled/disabled from NTP and changes to on/off status are reflected on brave://settings/newTab
• Generally confirmed that adjusting on/off status for various NTP items using brave://settings/newTab was reflected on NTP and on the new Customize Dashboard popup
• Generally confirmed that if changes to NTP settings were made on 1.10.x, when upgrading to 1.11.x they are still reflected on NTP, on brave://settings/newTab and on the updated Customize Dashboard popup
• Encountered already logged issue [Desktop] Enabling Brave Rewards widget via settings page doesn't enable it in NTP #10067 (comment) while testing

Dark Theme Images

Light Theme Images

---

Verification passed on

Brave | 1.11.90 Chromium: 83.0.4103.116 (Official Build) dev (64-bit)
-- | --
Revision | 8f0c18b4dca9b6699eb629be0f51810c24fb6428-refs/branch-heads/4103@{#716}
OS | Windows 10 OS Version 1903 (Build 18362.900)

• Generally confirmed design matches above, however followups are logged with [Desktop] design updates to customize dialog follow up to #9455 #10318 and [Desktop] Customized Dashboard settings tool tip is shown outside the modal popup #10299
• Generally confirmed that the new design allows for items to be enabled/disabled from NTP and changes to on/off status are reflected on brave://settings/newTab
• Generally confirmed that adjusting on/off status for various NTP items using brave://settings/newTab was reflected on NTP and on the new Customize Dashboard popup
• Generally confirmed that if changes to NTP settings were made on 1.10.x, when upgrading to 1.11.x they are still reflected on NTP, on brave://settings/newTab and on the updated Customize Dashboard popup
• Encountered already logged issue [Desktop] Enabling Brave Rewards widget via settings page doesn't enable it in NTP #10067 (comment) while testing

Dark Theme Images

     

Light Theme Images