Restructuring paymentsTab.js

[luixxiul]

Closes #7750

Auditors:

• Removed 'pull-left', which is no longer used
• Removed styles.titleBar
• Created flexAlignCenter and flexAlignEnd as general properties
• Replaced margin and padding with position:relative to set space between elements
• Renamed advanceIcon to settingIcon
• Changed the FAQ icons color to that on about pages (cf: about:preferences#plugins)

Also:

• Added globalStyles.fontSize.settingItemSubtext to global.js
• Added commonTextColor to preferences.less
• Added globalStyles.color.commonTextColor to global.js
• Added autoSuggestSwitch__subtext

Test Plan:

1. Open about:preferences#payments
2. Enable the payment
3. Make sure the switches, their labels and the buttons are aligned horizontally
4. Disable the payment
5. Make sure the switches and the labels are aligned

• 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).

Test Plan:

[NejcZdovc]

This is how I see it

[luixxiul]

It seems the upper line is a bit away. Please try to set it on "r", "m", "s" of "Brave payments", and the two switches.

[luixxiul]

Mine is actually not a perfect one, though. This is the cropped image:

The height of the switches and the small characters, not the capital ones, should be the same, following the current status.

[NejcZdovc]

I don't see it the same way as you do

[luixxiul]

yeah I notice it as well, will fix soon.

[luixxiul]

OK I slightly modified the positions.

I'm not a fan of positioning with pixels (as it is often not compatible with other languages in terms of l10n), still it works in English on macOS, for now.

IMO aligning all elements at center with align-items: center would be easier and more friendly with the languages. If this is better, I would add fixes. @bradleyrichter would you tell me what you think?

[bsclifton]

@NejcZdovc now that your changes are merged, can you review this one?
@luixxiul can you add steps to the original post for a test plan?

Thanks 😄

[luixxiul]

ok I will squash the commits at first.

[luixxiul]

OK I added the test plan in the commit message and the 1st post.

[NejcZdovc]

Can you please move icons at the end for 1px up, other then that it looks good.

[luixxiul]

Done. I restructured a little bit more. This should be fine.

[NejcZdovc]

LGTM, great job