Use avatar component for rooms

This commit is contained in:
Robert Long 2022-01-21 16:41:00 -08:00
parent f7cb015390
commit f8b4331ec7
3 changed files with 8 additions and 2 deletions

View file

@ -49,7 +49,7 @@
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 42px; border-radius: 42px;
font-size: 36px; font-size: 24px;
} }
.xl { .xl {

View file

@ -7,6 +7,7 @@ import { ReactComponent as VideoIcon } from "./icons/Video.svg";
import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg"; import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
import { useButton } from "@react-aria/button"; import { useButton } from "@react-aria/button";
import { Subtitle } from "./typography/Typography"; import { Subtitle } from "./typography/Typography";
import { Avatar } from "./Avatar";
export function Header({ children, className, ...rest }) { export function Header({ children, className, ...rest }) {
return ( return (
@ -60,6 +61,11 @@ export function RoomHeaderInfo({ roomName }) {
return ( return (
<> <>
<div className={styles.roomAvatar}> <div className={styles.roomAvatar}>
<Avatar
size="md"
bgKey={roomName}
fallback={roomName.slice(0, 1).toUpperCase()}
/>
<VideoIcon width={16} height={16} /> <VideoIcon width={16} height={16} />
</div> </div>
<Subtitle fontWeight="semiBold">{roomName}</Subtitle> <Subtitle fontWeight="semiBold">{roomName}</Subtitle>

View file

@ -49,7 +49,7 @@ function CallTile({
size="lg" size="lg"
bgKey={name} bgKey={name}
src={avatarUrl} src={avatarUrl}
fallback={<VideoIcon width={16} height={16} />} fallback={name.slice(0, 1).toUpperCase()}
className={styles.avatar} className={styles.avatar}
/> />
<div className={styles.callInfo}> <div className={styles.callInfo}>