Refactor and redesign user menu

[Half-Shot]

Based on https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=11583-3362&t=DwFpi7Zlq9uJr1SQ-0

Before	After

The major new change out of this is that the Sign out button has been removed as per designs, leaving the remaining place to sign out under the Settings -> Profile or Settings > Sessions > Current session page.

Checklist

• I have read through review guidelines and CONTRIBUTING.md.
• Tests written for new code (and old code if feasible).
• New or updated public/exported symbols have accurate TSDoc documentation.
• Linter and other CI checks pass.
• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

[dbkr]

I think you mean the user menu? Quick settings is down the bottom.

[florianduros]

CI is not happy, is it ready to be reviewed?

[Half-Shot]

I think you mean the user menu? Quick settings is down the bottom.

Yeah, I think the design is wrong. I'll ask for it to be changed.

CI is not happy, is it ready to be reviewed?

No, I got overager by getting the design done and then failing to check if anything else was happy. Apologies, I'll go clean up.

[americanrefugee]

I've updated the component to be named User Menu

[dbkr]

Home icon is now outline and image is not shown for guests, should be ready for another look.

[florianduros]

This is great, thanks!

[daniellekirkwood]

Something doesn't feel quite right here... @americanrefugee & @Half-Shot can you please review? Attached are 2 screenshots, one from Desktop and one from Web. The newer version of the menu seems much much larger and as a result very cramped. There's also a bug with overlapping top bar on electron...

Are we aligned that these are the correct buttons in the quick action menu? Do you know if we have tracking on the existing buttons?

Can we unmerge/resolve before release please? 🙏

[americanrefugee]

@daniellekirkwood

The newer version of the menu seems much much larger and as a result very cramped.

• The header content is indeed larger,
  • The the big avatar is new
  • The display name is also bigger, but in the example it does look too big... @dbkr @florianduros what text size is being used?
• The menu now reflects official Compound styles
  • The menu item sizes, styles, and spacing are all exactly what we're using in the Room info right panel. The buttons used in the legacy version are not proper Compound buttons. Which is why they seem smaller, but with more space all around
  • Regarding buttons,
    • Andreas and I are agreed on removing "Remove this device" (which used to be "Sign out")
    • I personally felt like "Notifications" wasn't worth putting here since it's (likely) used very seldom. But I can add it back
    • I don't know if we have any tracking data
• Everything feeling overall "tighter",
  • We need to conserve vertical space because in the future the user menu will have a lot more things (e.g. status, multi-account, manage account button)
• Everything feeling overall bigger
  • The menu width should actually grow (up to a certain max) to accommodate long display names, but otherwise it should be about the same size as the legacy menu by default

[americanrefugee]

Everything looks good except for the Guest version of the menu:

Also the playwright test shows it as having an avatar

btw @t3chguy that Create an account button looks wrong :/

[daniellekirkwood]

Thanks for the response @americanrefugee -- it would appear there are bugs in the implementation then that need resolution... it currently feels far too big (esp. considering the number of options is reduced).

I will 'hold space' for this being change aversion but currently I'm not happy for this to be released :/

[americanrefugee]

currently I'm not happy for this to be released :/

Are you not happy with the overall design, the implementation, or both?

[dbkr]

• The display name is also bigger, but in the example it does look too big... @dbkr @florianduros what text size is being used?

This is a heading of size md, weight semibold

[americanrefugee]

Let's make the following changes:

• Avatar size = 64x64
• Display name = font/body/lg/semibold

[dbkr]

Opened #33444 to make these changes - updated screenshots should give an idea.

[americanrefugee]

Opened #33444 to make these changes - updated screenshots should give an idea.

I requested a change on the new issue. Making sure @daniellekirkwood sees it too :)