fix(wallet): Updated Fund Screens With Nav

[Douglashdaniel]

Description

Updates to the Fund Wallet and Deposit Funds screens to be similar to the Send/Swap screens:

• Added the new Side Nav
• Added the tab Header
• Updated the border-radius and added a drop-shadow
• Removed the Done buttons
• Now only shows the back button if selecting a Buy option, Account or Create account.
• Makes the Fund Wallet and Deposit Funds screens a private route.

Resolves brave/brave-browser#28490
Resolves brave/brave-browser#28402

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally:
  • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
  • npm run lint, npm run presubmit wiki, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

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, 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-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

Testing Fund Wallet

1. Create a new wallet and skip the Wallet Backup
2. Click on the Buy crypto button
3. It should route to the fund-wallet page
4. There should be a header with the BraveLogo | Buy
5. There should be the new Nav on the left side of the screen
6. You should not see a Done button
7. You should only see a back button for Selecting a Buy Option, Switching Accounts or Creating a new account

Before:

After:

Testing Deposit Funds

1. Create a new wallet and skip the Wallet Backup
2. Click on the Deposit button
3. It should route to the deposit-funds page
4. There should be a header with the BraveLogo | Deposit
5. There should be the new Nav on the left side of the screen
6. You should not see a Done button
7. You should only see a back button for Deposit view (QR code screen), Switching Accounts or Creating a new account

Before:

After:

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[josheleonard]

++

[brave-builds]

A Storybook has been deployed to preview UI for the latest push