Tweak new user menu design (#33444)

* Tweak new user menu design

* Update screenshots

* More screenshots

* Add story with no avatar

* add story to test

* Expand the menu so it actually shows what it's supposed to show

* Use the open parameter

which is the param to open the menu

* snapshot

* Add test for normal open menu version

* Move menu to the right of the avatar

and make it appear on top of the display name

* Fix user menu layout

* screenshots

* snapshot

* screenshots

* more screenshots

* Shift toasts to the left slightly

So they completely cover the display name of the user menu when
it's expanded. Also down slightly so they're level with the user menu.

* Tweak toast border radius & position

to match & sit on top of the user menu

* Close toasts in cider tests

* Only close the toast if it's actually there

* Fix some toasts to be dismissed & update screenshots

more to come though

* Make closeKeyStorageToast actually optional

* Fix some more toasts & races

* Screenshots again again (again)

* More screenshots

* Convert to rejectToast

* Fix toast rejectors to not wait and update screenshots

* Apparently 1ms is not long enough

packages/shared-components/src/menus/UserMenu/UserMenu.module.css

@@ -5,6 +5,13 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+.wrapper {
+    display: flex;
+    align-items: center;
+    margin-top: var(--cpd-space-3x);
+    margin-bottom: var(--cpd-space-4x);
+}
+
 .container {
     /* As per design, seperator should span whole width. */
     div[role="separator"] {
@@ -50,6 +57,7 @@
 .triggerButton {
     border: none;
     background: none;
+    padding: 0;
     display: flex;
     color: var(--cpd-color-body-primary);
     cursor: pointer;
@@ -63,7 +71,7 @@
         overflow: hidden;
         text-wrap: nowrap;
     }
-    margin-top: var(--cpd-space-3x);
-    margin-bottom: var(--cpd-space-4x);
     margin-left: var(--cpd-space-3x);
+    margin-right: var(--cpd-space-2x);
+    padding-inline-start: var(--cpd-space-1-5x);
 }