Change user ID colour to secondary (#34129)

* Change user ID colour to secondary

in user menu

Caught by design whilst reviewing user status

* snapshot

* screenshots

* Snapshot

apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap

@@ -7,19 +7,19 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
     class="mx_SpacePanel collapsed"
   >
     <div
-      class="_wrapper_1yyfq_8 mx_UserMenu"
+      class="_wrapper_owhbm_8 mx_UserMenu"
     >
       <button
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="User menu"
-        class="_triggerButton_1yyfq_111"
+        class="_triggerButton_owhbm_115"
         data-state="closed"
         id="radix-react-use-id-1"
         type="button"
       >
         <div
-          class="_avatarWrapper_1yyfq_61"
+          class="_avatarWrapper_owhbm_65"
         >
           <span
             aria-label="@test:test"

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

@@ -39,6 +39,10 @@
             text-align: center;
         }
 
+        .userId {
+            color: var(--cpd-color-text-secondary);
+        }
+
         .createAccount {
             margin-top: var(--cpd-space-1x);
             margin-bottom: var(--cpd-space-2x);

packages/shared-components/src/menus/UserMenu/UserMenu.tsx

@@ -176,7 +176,7 @@ export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element
                         {displayName}
                     </Text>
                     {userStatus && <StatusButton status={userStatus} clearStatus={vm.clearStatus} />}
-                    <Text data-testid="userId" size="md" as="span" type="body">
+                    <Text data-testid="userId" size="md" as="span" type="body" className={styles.userId}>
                         {userId}
                     </Text>
                     {manageAccountHref && (

packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap

@@ -294,7 +294,7 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
           Sally Sanderson
         </span>
         <span
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 UserMenu-module_userId"
           data-testid="userId"
         >
           @person-name:homeserver.com
@@ -626,7 +626,7 @@ exports[`UserMenu > renders an open menu 1`] = `
           Sally Sanderson with a longer name
         </span>
         <span
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 UserMenu-module_userId"
           data-testid="userId"
         >
           @person-name:homeserver.com