UI: Added the ability to change the font size

[G4mingJon4s]

Changed the following:

• Made the input fields in the StyleEditorModal one generic component
• Added an option to change the font size of the entire UI
• Added an option to change the tail font size

The default font size of the entire UI is different from the font size of the tail windows, because they are applied in a different way. MUI applies a scaling on the fontSize value the input sets. It has an internal font size of 16px and a fontSize value of 14 is scaled to the default rem value of 1rem. The tail window font size is applied through styles, so it is a direct pixel value. If this is something that bothers people, I can also add a scaling to the tail window font size to make it uniform with the general font size.

I also added display: inline-block to the span of each tail window line. This ensures the line height is correct for very small or very big font sizes. I couldn't find any styling implications from this, so nothing else should have changed. If I missed any issues that this creates, I'd be happy to fix them.

[d0sboots]

I was worried about the display: inline-block thing, but I see it only applies to string log output, and is skipped for rawPrint stuff. So that's fine.

Could you add some screenshots to the PR?

[G4mingJon4s]

Added Options:

Default font size of 16px (14 in the options due to conversions):

Setting the general font size to 10 (a displayed font size of about 11px):

Setting the general font size to 20 (a displayed font size of about 23px):

Default tail font size of 16px:

Setting the tail font size to 12px:

How the tail font size of 12px would look like without display: inline-block:

Setting the tail font size to 20px:

And setting the line height to 2 on top of that:

So, after playing around a bit, I realized that it's pretty hard to get the tail and general font size to match, if it is not the default. I will convert the general font size input to be in pixels shortly.

[G4mingJon4s]

Also, I set a minimum font size of 5, which is about 6px. During my testing I set font sizes like 2 or 3, which made the UI unusable. To stop the user from messing up their UI to the point where they can't even revert them to the default, I found that about 6px is just on the edge where that's possible. If you think this limitation should be moved or isn't needed, I can remove it.

[d0sboots]

So, after playing around a bit, I realized that it's pretty hard to get the tail and general font size to match, if it is not the default. I will convert the general font size input to be in pixels shortly.

Agreed, I think it not being in pixels will confuse everyone, so I think that's the only thing I'm holding this back for.

[G4mingJon4s]

• All font size inputs are now in pixels
• Removed setting the font size explicitly, since it is inherited from the typography component
• Fixed a small issue where separate print calls had a different line height than what was intended for the font size