Change Background Settings for New Tabs Page

[imptrx]

Feature: brave/brave-browser#4523
Sister PR to brave/brave-ui#485 which was merged and reverted.
Sister PR to brave/brave-ui#491 (brave-ui)

close brave/brave-browser#4523

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
  • Windows
  • macOS
  • Linux
• Verified that these changes pass automated tests (npm test brave_unit_tests && npm test brave_browser_tests && npm run test-security) on
  • Windows
  • macOS
  • Linux
• 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-Protection-Mode
  • 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:

• Ensure settings menu pop up properly (toggle)
• Ensure the background toggles from the menu
• Clicking outside the settings menu should close it

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.

[imptrx]

Note: dark mode implementation will be removed from the scope of this PR as there is some additional discussion to be done around that for our web-ui pages

[cezaraugusto]

++ nice work!

[petemill]

Some issues that may be good to solve before this hits release:

• The new button is not accessible without a mouse or touch. I assume because we're rendering an <a element without an href attribute. It's not tabbable like that. At least I couldn't find a way to open the settings menu with the keyboard.

• The toggle represents a user preference, but it is being saved to localStorage. Should we want this to be part of Brave Sync (to another device), then it would be more possible if this is a regular chromium preference object. localStorage also prevents surfacing this preference on the Settings page. If we do want any of these options in the future, then we will find it difficult to migrate from localStorage to Preferences, so I would suggest starting with it as a Preference object from the beginning of the feature, otherwise we would have to 'forget' user's settings when we migrate, which would be a bit hostile.