NTP Widget Settings design updates

[ryanml]

Resolves brave/brave-browser#10318

Note: The removal of "Show" text has been moved to a separate issue/PR brave/brave-browser#10591

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed.
• Add appropriate QA labels (QA/Yes or QA/No) to include the closed issue in milestone
• Public documentation has been updated as necessary. For instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-compatibility-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

Test Plan:

Additional specifications defined in issue for style updates. Functional testing plan with new "Add Card tab"

1. Build Brave with a clean profile
2. Navigate to brave://newTab
3. Hover over the "Add Card" widget, ensure the ellipsis menu is not available.
4. Remove the Binance and Rewards widget from the stack
5. Hover over the "Add Card" widget, ensure the menu is available, hide the card.
6. Under More Cards in the NTP settings, add back either widget.
7. Ensure the "Add Card" widget appears back, at the very top.

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on.
• All relevant documentation has been updated.

[emerick]

LGTM

[ryanml]

@petemill this one has been rebased

[petemill]

The "Add Card" button, when it's on its own looks too tall. That's underlined by the fact that the hover seems to only introduce a shadow covering the part of it which doesn't seem too tall:

It would be great to at least do a follow-up where we add style transitions. Some of the affects are a bit jarring. Specifically for this PR:

• "Add Card" shadow on hover getting a transition

but related:

• Settings popup getting some kind of bounce transition
• Settings popup growing / shrinking in height when changing tabs (or getting a fixed / percentage-of-viewport height)
• Widget order should transition / animate when changing

I also think we need a follow-up to address the context menu in that when opening it then mouseout-ing the widget, the menu disappears but re-appears when mouseenter-ing the widget subsequently.

These follow-ups could at least be added to the NTP board for when things calm down a bit on the feature front.

[ryanml]

Height reduced when the AddCard tab is left alone

[petemill]

Great feature. Thanks for addressing feedback. Found a couple more issues but I don't think they're related as they seem the same on nightly. If not could you add follow-ups?

1. Is it intentional that both the Add Card and the foreground Card have shadows on hover, but background Cards do not?

i.e. Rewards in this case:

2. Seems like the issue where you can't go from the Card's ... button to the actual context menu is back - I thought we fixed that?

[ryanml]

Failures unrelated

[rebron]

@ryanml Milestone for this is 1.13.x right?

[karenkliu]

1. Is it intentional that both the Add Card and the foreground Card have shadows on hover, but background Cards do not?

It's supposed to be no shadows on hover for Add Card or background cards, but it looks kind of weird with the ghost styling so lets get rid of shadow on hover for all of them.

[ryanml]

Sounds good @karenkliu