Favicon and color fixes for Shields v2

[nullhook]

Resolves brave/brave-browser#22214
Resolves brave/brave-browser#22161
Resolves brave/brave-browser#22217
Resolves brave/brave-browser#22284
Resolves brave/brave-browser#22283

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, npm run lint, 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:

[brave-builds]

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

[simonhong]

Curious only needs explicit favicon update?

[nullhook]

yes, internally i'm sending favicon url as site_block_info_.favicon_url - on an active tab it will send the right url but sometimes resources take time to load and favicon hasn't been downloaded to the disk so OnFavIconUpdate() the favicon_url will update by cache busting.

However, when opening the panel while it's cached on a new webcontents (tab) it doesn't trigger an update, so dataHandler.updateFavicon() here helps do that. A non-cached panel can easily get the updated url from site_block_info_

[brave-builds]

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

[brave-builds]

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

[stephendonner]

Verified PASSED using

Brave	1.39.68 Chromium: 101.0.4951.34 (Official Build) nightly (x86_64)
Revision	8f93af5d759634c5256b65997dedd138ed60992f-refs/branch-heads/4951@{#710}
OS	macOS Version 12.4 (Build 21F5048e)

Checked:

• Local site favicon is replaced by Brave favicon when clicked Learn more link  brave-browser#22214 - confirmed favicon is correctly updated between unique tabs (@MadhaviSeelam 's issue)
• Shields' blocked count gets clipped when 4 or more digits brave-browser#22161 - verified blocked counts 1,000+ (light and dark modes)
• Global defaults inconsistent appearance when Shields are down brave-browser#22217 - confirmed correct default and hovered-state color
• The incorrect site favicon is shown in the shield panel when switching between the two sites brave-browser#22284 - confirmed favicon is correctly updated between unique tabs (@GeetaSarvadnya 's issue)
• update shields down design  brave-browser#22283 - verified removal of "You're viewing this site without Brave's privacy protections." text and widened Report site button