Integrate @vector-im/compound-web (#11354)

* Create useRoomName hook

Mark RoomName component as deprecated

* Pass out-of-band data to relevant RoomHeader component

* Mark LegacyRoomHeader as deprecated

* Fix incorrect search&replace in _RoomHeader.pcss

* lintfix

* Mark room as optional in room topic hook

* Fix i18n

* Discard use of useCallback

* Change export of useRoomName

* fix ts issue

* lints

* Add room topic to room header

* lintfix

* lintfix & clamp to one line

* Revert optimisations to DecoratedRoomAvatar

* Add test for opening the room summary

* Make transition honour prefer-reduced-motion

* Integrate @vector-im/compound-web

* Use compound type styles

* Use latest version of @vector-im/compound-web

* Change component name

* Fallback when room is undefined

* fix snapshot

src/components/views/rooms/RoomHeader.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import { Body as BodyText } from "@vector-im/compound-web";
 
 import type { Room } from "matrix-js-sdk/src/models/room";
 import { IOOBData } from "../../../stores/ThreepidInviteStore";
@@ -45,10 +46,22 @@ export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: I
                 <RoomAvatar oobData={oobData} width={40} height={40} />
             )}
             <div className="mx_RoomHeader_info">
-                <div dir="auto" title={roomName} role="heading" aria-level={1} className="mx_RoomHeader_name">
+                <BodyText
+                    as="div"
+                    size="lg"
+                    weight="semibold"
+                    dir="auto"
+                    title={roomName}
+                    role="heading"
+                    aria-level={1}
+                >
                     {roomName}
-                </div>
-                {roomTopic && <div className="mx_RoomHeader_topic">{roomTopic.text}</div>}
+                </BodyText>
+                {roomTopic && (
+                    <BodyText as="div" size="sm" className="mx_RoomHeader_topic">
+                        {roomTopic.text}
+                    </BodyText>
+                )}
             </div>
         </header>
     );