Osu-web: Add a clear distinction for filter headers

[TPGPL]

Currently the filter headers Variant and Show blend into other filter options and it's not obvious which one is not the option.

[arflyte]

Still working on it. Working on Search headers which will be related to it.

[arflyte]

New filters, based on new beatmap filter designs.

[lmnyx]

Would be useful if it could be collapsed, because it looks just massive for me

[peppy]

Agree that it is quite big. Actual page content will be only about 25% of the screen on certain aspect ratio devices, which feels pretty weird.

[arflyte]

Tried a different layout, slightly different than beatmap filters (might need to update that one too). Less tall and compact.

[Gabixel]

So I guess that the filter in the beatmap discussions page needs a similar re-design (although it's understandable that it's the header):

There's also this one in the friends page, but it's slightly different:

[gagahpangeran]

Tried a different layout, slightly different than beatmap filters (might need to update that one too). Less tall and compact.

I interested to implement this. Is this the final design?

[peppy]

I think that is a safe assumption

[notbakaneko]

@gagahpangeran are you working on this?

[gagahpangeran]

@notbakaneko still wip in my local, because I'm not sure If I should only change like the design (have a little hack) or modified the Sort component entirely (change the title position to top and the sort item at bottom). The last one will change all of Sort component in other page.