Change avatar to use Compound implementation (#11448)

* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests

src/components/views/location/Marker.tsx

@@ -78,8 +78,7 @@ const Marker = React.forwardRef<HTMLDivElement, Props>(({ id, roomMember, useMem
                     {roomMember ? (
                         <MemberAvatar
                             member={roomMember}
-                            width={36}
-                            height={36}
+                            size="36px"
                             viewUserOnClick={false}
                             // no mxid on hover when marker has tooltip
                             hideTitle={!!tooltip}

src/components/views/location/ShareType.tsx

@@ -31,8 +31,8 @@ const UserAvatar: React.FC = () => {
     const userId = matrixClient.getSafeUserId();
     const displayName = OwnProfileStore.instance.displayName ?? undefined;
     // 40 - 2px border
-    const avatarSize = 36;
-    const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize) ?? undefined;
+    const avatarSize = "36px";
+    const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(parseInt(avatarSize, 10)) ?? undefined;
 
     return (
         <div className={`mx_ShareType_option-icon ${LocationShareType.Own}`}>
@@ -40,9 +40,7 @@ const UserAvatar: React.FC = () => {
                 idName={userId}
                 name={displayName}
                 url={avatarUrl}
-                width={avatarSize}
-                height={avatarSize}
-                resizeMethod="crop"
+                size={avatarSize}
                 className="mx_UserMenu_userAvatar_BaseAvatar"
             />
         </div>