Brave Actions sized at 18px and highlighted correctly

[petemill]

Updates brave-extension dep - here's what's in that update: brave/brave-extension@038a43a...70550a1

Fix brave/brave-browser#2295
Fix brave/brave-browser#2807

• Increases size of icons
• Custom drawing for buttons' highlight background so that right side is inset, including a right margin within the button itself. The badge can therefore be drawn within this area if it gets too wide.
• Anchors the badge 12px from right side of highlight / 14px from right side of entire control.
• Re-centering of icon within custom highlight inset and not within the button rectangle that contains the right inset.

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) on
  • Windows
  • macOS
  • Linux
• 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

Test Plan:

See brave/brave-browser#2295

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

[srirambv]

@petemill @rossmoody could the badge not overlap on shields icon but instead make at the edge? The badge on BAT logo doesn't overlap(at least with single digit) instead is just at the border radius. Could the shields also a similar implementation?

[cezaraugusto]

did a build with brave/brave-extension#89 checked out and confirmed it's working. lgtm

[rossmoody]

@srirambv an overlap is pretty standard for notification elements on icons. the shape of the rewards icon just makes it very difficult without appearing completely off balance

[rossmoody]

@petemill looks good to me. one note, and i'm unsure if it should be tackled in this pr, but we are removing the disabled icon variant (the light grey one). the icons for Rewards and Shields can only ever appear On or Off and the dropdown panel will provide more context to the user.

[petemill]

@srirambv the rewards badge does overlap, but the icon is a triangle so it doesn't look like it does. Please see the mockup at brave/brave-browser#2295 for the coordinates we're aiming for

[bsclifton]

Changes look great! 😄 Test in both light and dark mode. Compared several sites with what's on Beta at the moment. Even though it's only a little larger it looks amazing. Really nice job on this one 😄 (code changes look good too!)

[bsclifton]

Manually ran tests (after noticing check above failed). Everything looks good 👍