UI tweaks and fixes: dividers, checkbox-to-text spacing, multiplayer tab connection button

[Toxile]

This description covers my reasoning for these changes. I'll attempt to argue for why I think they're sensible, but feel free to challenge me on any point. To clarify, the following is my opinion, but I'll try to support it with evidence.

[1]

Commits labelled [1] deal with consistency. Previously, the Options popup contained three different types of dividers, and the multiplayer tab was structured as a real function instead of a single-expression, unlike the rest. I've standardised the dividers to use the styling provided by the skin by default, which was the behaviour previously used in the multiplayer tab. This is for several reasons:

• Dividers are meant to be subtle and used sparingly. Making them pure white and using one for every two or three checkboxes or dropdowns is a hard antipattern and is more distracting than helpful for users. Width 1.0 is enough, and they certainly need not have the maximum possible contrast from the background (white); in fact, the opposite is desirable.
• Adobe, for example, recommends defaulting to 1px light grey dividers on light themes, and using larger and more intense ones only when they are actually needed. The multiplayer tab's dividers were a good approximation of this, so I've adopted them everywhere.
• By the way, the dividers on GitHub that you can see in this very PR (below headers, for example) also reflect this paradigm. They're subtle, but clearly recognisable as dividers and they do a good job at contextualising content. You might imagine what it'd look like if it were pure black: rather awkward.
• In truth, this game simply has too many dividers to begin with. I believe that most of them could be safely replaced with white-space instead. Dividers are for headers primarily and sometimes for separating aggregate sections of an interface that doesn't use headers; white-space should be the primary choice for other situations.
• I also believe the dividers should impose a greater margin beneath themselves, but I haven't changed that for fear of breaking other parts of the interface. 1rem would probably be a good baseline to play around with.

The function structure change in MultiplayerTab.kt is just for internal consistency with the order tabs and should have no effect.

Visual comparison:

Old:

New:

[2]

Commits labelled [2] deal with checkboxes. They are clearly not spaced far enough away from the text. Checkbox-to-text spacing varies on Web, Desktop, and Mobile UIs, but it is almost never less than 0.5rem. I've set it to an approximation of that value to make checkboxes less cramped; this should also help with future consistency. Here's a visual comparison:

Old:

New:

[3]

The commit labelled [3] centres the "Check connection" button in the multiplayer tab. This change should be less controversial than the others, unless the button was off-centre for a reason that I'm not aware of.

Old:

New:

[yairm210]

This is an instant yes for everything except for the most obvious change, the background color.
The contrast is simply not enough between the background and the dropdowns,it stains my eyes to figure out where the boxes are

[yairm210]

I don't see you actually changed the background color, not sure what that's about

[Toxile]

Now that I think about it, I'm not sure either. Maybe screen brightness changing automatically between screenshots? Either way, thanks for approving 🙇