Adds new Monthly Banner Variant to tipping process

[ryanml]

Fixes: brave/brave-browser#5996

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-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:

Defined in issue

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.

[NejcZdovc]

1. spacing at the bottom is soo small

2. can we remove scrollbar that is now visible
   

3. clicking on contribution date in the banner shouldn't trigger button click

4. when you click on select 0 BAT is always selected and not your actual amount
   

5. send a tip is not working

[56385:775:0918/075850.531083:ERROR:CONSOLE(0)] "Error handling response: TypeError: Error in invocation of braveRewards.tipSite(integer tabID, string publisherKey, boolean monthly): No matching signature.
    at chrome-extension://jidkidbbcafjabdphckchenhfomhnfma/out/brave_rewards_panel.bundle.js:1656:37", source: chrome-extension://jidkidbbcafjabdphckchenhfomhnfma/brave_rewards_panel.html (0)

[ryanml]

@NejcZdovc

1. Bottom padding increased
   

2. I could not reproduce a scrollbar, but I tried to tighten up padding a little. Truth is this is another element added in the panel and unless we increase the max height of the extension window this will happen, cc: @petemill for thoughts, I think we are fine for this PR though

3. I could not reproduce this, can you confirm that you have the latest hash of brave-ui installed for this PR?

4. This problem is currently present on release build and all other channels, I will file an issue and fix separately.

5. This issue has been fixed

changes made

[NejcZdovc]

we need to polish tip banner as spacing is off a little bit, but this PR looks good