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/rooms/RoomHeader.tsx

@@ -113,15 +113,20 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
     const globalNotificationState = useGlobalNotificationState();
 
     return (
-        <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
-            <DecoratedRoomAvatar room={room} avatarSize={40} displayBadge={false} />
-            <Box
-                flex="1"
-                className="mx_RoomHeader_info"
-                onClick={() => {
-                    showOrHidePanel(RightPanelPhases.RoomSummary);
-                }}
-            >
+        <Flex
+            as="header"
+            align="center"
+            gap="var(--cpd-space-3x)"
+            className="mx_RoomHeader light-panel"
+            onClick={() => {
+                const rightPanel = RightPanelStore.instance;
+                rightPanel.isOpen
+                    ? rightPanel.togglePanel(null)
+                    : rightPanel.setCard({ phase: RightPanelPhases.RoomSummary });
+            }}
+        >
+            <DecoratedRoomAvatar room={room} size="40px" displayBadge={false} />
+            <Box flex="1" className="mx_RoomHeader_info">
                 <BodyText
                     as="div"
                     size="lg"