Fix colour of avatar and colour matching with username (#11470)

* Use consistent colouring of username with avatar

* Upgrade Compound to fix Firefox issue

* Use the approapriate color shade for usernames

* Use the approapriate color shade for usernames

* Upgrade Compound

* Fix tests

test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap

@@ -17,7 +17,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
     >
       <span
         aria-label="Profile picture"
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
@@ -26,7 +26,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
       >
         <img
           alt=""
-          class="_image_i91o9_45"
+          class="_image_2lhia_45"
           crossorigin="anonymous"
           data-type="round"
           height="42px"
@@ -111,7 +111,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
       class="mx_PeopleRoomSettingsTab_knock"
     >
       <span
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"