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/messages/CallEvent.tsx

@@ -62,8 +62,7 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
                         member={mxEvent.sender}
                         fallbackUserId={mxEvent.getSender()}
                         viewUserOnClick
-                        width={24}
-                        height={24}
+                        size="24px"
                     />
                     <div className="mx_CallEvent_columns">
                         <div className="mx_CallEvent_details">
@@ -76,7 +75,7 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
                                 active={false}
                                 participantCount={participatingMembers.length}
                             />
-                            <FacePile members={facePileMembers} faceSize={24} overflow={facePileOverflow} />
+                            <FacePile members={facePileMembers} size="24px" overflow={facePileOverflow} />
                         </div>
                         {call && <GroupCallDuration groupCall={call.groupCall} />}
                         <AccessibleTooltipButton

src/components/views/messages/LegacyCallEvent.tsx

@@ -290,7 +290,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
                 <div className={className}>
                     {silenceIcon}
                     <div className="mx_LegacyCallEvent_info">
-                        <MemberAvatar member={event.sender} width={32} height={32} />
+                        <MemberAvatar member={event.sender} size="32px" />
                         <div className="mx_LegacyCallEvent_info_basic">
                             <div className="mx_LegacyCallEvent_sender">{sender}</div>
                             <div className="mx_LegacyCallEvent_type">

src/components/views/messages/RoomAvatarEvent.tsx

@@ -82,7 +82,7 @@ export default class RoomAvatarEvent extends React.Component<IProps> {
                                 className="mx_RoomAvatarEvent_avatar"
                                 onClick={this.onAvatarClick}
                             >
-                                <RoomAvatar width={14} height={14} oobData={oobData} />
+                                <RoomAvatar size="14px" oobData={oobData} />
                             </AccessibleButton>
                         ),
                     },