Convert font sizes to relative units

[jkup]

Did you search for similar issues before submitting this one?
Yes.

Describe the issue you encountered:
This should just be the parent issue, as we move font sizes from pixesl to rems and ems we should track each component or each less file separately.

Expected behavior:
In order for us to easily allow users to scale the UI up and down we should use relative sizing units instead of pixels. I'm quite partial to this CSS-Tricks post where you use:

Pixels - at the document level
Rems - at the component level
Ems - at the sub-component level

This would essentially be:

html { font-size: 14px; }

.MyComponent { font-size: 1.5rem; }

.MyComponent h2 { font-size: 2em; }

The idea here is that components scale with the document and items scale with their parent component.

• Platform (Win7, 8, 10? macOS? Linux distro?):
  All.

• Brave Version (revision SHA):
  Master.

• Any related issues:

#2469
#5683
#5143
#1757

[NejcZdovc]

@jkup do you need any help with this one?

[jkup]

@NejcZdovc definitely! I think the best thing to do would be to find small components that would be easy to convert and tackle them one at a time. It would also work nicely with our conversion to Aphrodite for styles (see https://github.com/brave/browser-laptop/blob/448604f08aa1f6d01708a4fd76aad1a807c6602b/app/renderer/components/tabIcon.js as an example).

If you're up for it we can find a component that would make for a good start!

[NejcZdovc]

@jkup sure let's do this 😃