[Idea] User menu modernization

[eveneme]

We use really nice icons, and it would be great to highlight them somehow, make the spacing larger to make clicking on mobile devices more pleasant and intuitive. My suggestion is below.

Before:

After:

The circle around the icon could be slightly smaller; it's just a suggestion.

[eveneme]

Example V2:

[dtdesign]

I have increase the size of the icons and the text a bit to make them stand out more. The click area is already the entire item, not just the text, it uses a ::before on the link to achieve that.

I tried out the circle around it but we neither have a proper color for that nor did it convince me in the end. First of all, this requires extra paddings to make it work, reducing the available horizontal space for the text. Second it reduces the contrast, especially in the dark theme, because you now have a light icon on a still-dark-but-lighter-dark background. We must keep a minimum contrast of 4.5:1 for all icons and text to comply with WCAG ARIA 2.0 AA.