}
function ChannelIntro({
- avatarSrc, name, heading, desc, time,
+ roomId, avatarSrc, name, heading, desc, time,
}) {
return (
<div className="channel-intro">
- <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(name)} size="large" />
+ <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
<div className="channel-intro__content">
<Text className="channel-intro__name" variant="h1">{heading}</Text>
<Text className="channel-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
};
ChannelIntro.propTypes = {
+ roomId: PropTypes.string.isRequired,
avatarSrc: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
return (
<ChannelIntro
key={mEvent ? mEvent.getId() : Math.random().toString(20).substr(2, 6)}
+ roomId={roomTimeline.roomId}
avatarSrc={avatarSrc}
name={roomTimeline.room.name}
heading={`Welcome to ${roomTimeline.room.name}`}
return (
<Header>
- <Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomName)} size="small" />
+ <Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomId)} size="small" />
<TitleWrapper>
<Text variant="h2">{roomName}</Text>
{ typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}