Redesign: Need design for field selects

[turt2live]

Need a design to determine exactly what they should look like.

For example on macOS they look completely wrong:

On windows they look like this:

[jryans]

Isn't this a duplicate of #8249? (The proposed fix in https://github.com/matrix-org/matrix-react-sdk/pull/2502 hasn't merged.)

[turt2live]

Nope, https://github.com/matrix-org/matrix-react-sdk/pull/2502 doesn't address how the fields are outright wrongly represented on macOS (see image).

[jryans]

Ah okay, I wasn't sure how far we wanted to go in terms of controlling style across UAs. (As mentioned before, there's no design spec for <select> currently...)

[turt2live]

Yea, I'll adopt this issue as the canonical "figure out selects" issue

[ara4n]

my recommendation for this would be to use a non-native select control, like LanguageDropdown already provides - as otherwise the native selects vary massively between platform and simply aren't reliably skinnable. Then, aesthetically, we just ape the Field look & feel.

[ara4n]

@turt2live points out that implementing all the accessibility stuff with a non-native select is a pain in the ass, and it turns out that we do have enough CSS these days to override the look & feel of the native select control on webkit & firefox:

https://jsfiddle.net/pxjkqru9/2 <-- n.b. v2

If someone (@jryans? @turt2live?) can apply it to the selects to make them non-fugly it'd be appreciated (or i may have time later today to do it, but would rather it wasn't blocked on me)

[jryans]

I'll take a look.

[jryans]

Fixed by https://github.com/matrix-org/matrix-react-sdk/pull/2540.