Add BrowserButton component

[cezaraugusto]

• 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).
• Ran git rebase -i to squash commits (if needed).

Auditors: @luixxiul, @NejcZdovc
Close: #8568

Note: This PR removed "whiteButton" for new buttons since at the point we want to allow dark-UI/theming, it will not necessarily be white.

Test Plan:

• No breaking tests should be found regarding buttons
• Buttons visible in below images should do their expected actions
• Buttons visible in below images should not have UI regressions
• about:styles should have primaryColor, secondaryColor (previous whiteButton) and wideButton aesthetically ok.

Buttons refactored

• All buttons inside Sync tab

Buttons changed as side effect

We had a global selector that changed every button that had Button className. I replaced that with normalizeButton so standard HTML5 buttons weren't affected. For reference:

[luixxiul]

nice to see the modifed BEM style :-)

[luixxiul]

Nice work. As a reminder, would you please apply the change to about:styles? Thanks!

[cezaraugusto]

sure, thanks for checking ;)

[cezaraugusto]

btw @luixxiul I added #8568 as an issue to track this PR since it doesn't refactor all components and removed #7168 reference (added you there as assignee as well) so we can keep tracking until every button uses BrowserButton. Then <Button> component can be removed.

There are too many files using (now legacy) Button that the likeliness of regression was too high, so I decided to keep it gradual.

[luixxiul]

FYI: reset Sync will be replaced with the primaryButton after #8044 is merged.

[luixxiul]

@cezaraugusto I left some comments.

[cezaraugusto]

thanks, updated

[bbondy]

Since comments were addressed, merging.

[luixxiul]

As I removed .paymentsContainer the margin between the buttons on "Back up your Brave wallet" dialog have regressed. The specification here seems to be no longer applied: https://github.com/brave/browser-laptop/blob/master/less/button.less#L180

Since on the other dialogs the margin exists, I believe something is inconsistent between them. I'll tackle that.

[srirambv]

@luixxiul is that expected behaviour for the backup wallet modal?

[luixxiul]

No, and it was fixed already