button style inconsistency on about:preferences (button normalization)

[luixxiul]

Describe the issue you encountered: the button style on about:preferences#sync is different with that on the other tabs of about:preferences such as about:preferences#payments

The button on the left looks thinner and the font-size looks smaller than the button on the right.

See:

browser-laptop/less/button.less

Line 160 in 548e11b

.paymentsContainer button:not(.close),

Also the styles of buttons on browser's UI such as bookmark hanger dialog is different with them.

See:

browser-laptop/less/window.less

Line 9 in 734cefc

--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;

You would see the different font-family is specified to each of them.

We are on the way of normalizing the buttons by converting buttton component with browserButton component. We would have to investigate which font-size, font-family, and line-height (the properties which can/must be specified with font property) should be applied as to browserButton inside browserButton.js.

• Brave Version (revision SHA): 0.15.314

• Extra QA steps:
  1.
  2.
  3.

• Any related issues:

[luixxiul]

Another thing we have to decide: should we revert font-size and padding of the buttons on about:preferences#sync same as it has been, by creating preferenceItem and apply these to it?

That would make the size of the buttons on about:preferences#sync same as the other buttons on other preference tabs.

@cezaraugusto I noticed that font-weight: 500 has not been specified to browserButton_primaryColor. I'm going to add it to make the font-weight like this:

The reason why "Done" button on bookmark hanger looks bold is due to font-family chosen there; the font-family specified for the button is itself bolder than the font-family for the buttons on preferences, so the effect is not intentional but coincidental.

If we normalize the font-family, the done button could look thinner, based on the font-family we would choose.

[cezaraugusto]

cc @bradleyrichter

[bradleyrichter]

we need to get them all referencing the same style definition so we can easily refine it collectively. I want to flatten them out a bit and reduce the shadows.

So in this case, sync is "out of sync". : )

[luixxiul]

After When #10951 is merged and <Button> is replaced with <BrowserButton>, let's try to set the font-family to <BrowserButton> and see if it will make the buttons look consistent on about pages and browser level dialog.

browser-laptop/less/window.less

Line 9 in 734cefc

--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;

[luixxiul]

The cause of the difference is that, while on about pages -webkit-font-smoothing: antialiased is set with common.less, on the commonForm it is not. With the commit above I reset the value and that should make the buttons look consistent.