From f8b4331ec794cdab4be48574a23f09404fa964db Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 21 Jan 2022 16:41:00 -0800
Subject: [PATCH] Use avatar component for rooms

---
 src/Avatar.module.css | 2 +-
 src/Header.jsx        | 6 ++++++
 src/home/CallList.jsx | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Avatar.module.css b/src/Avatar.module.css
index 516dca1..52b20a5 100644
--- a/src/Avatar.module.css
+++ b/src/Avatar.module.css
@@ -49,7 +49,7 @@
   width: 42px;
   height: 42px;
   border-radius: 42px;
-  font-size: 36px;
+  font-size: 24px;
 }
 
 .xl {
diff --git a/src/Header.jsx b/src/Header.jsx
index c2d7db3..8f82185 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -7,6 +7,7 @@ import { ReactComponent as VideoIcon } from "./icons/Video.svg";
 import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
 import { useButton } from "@react-aria/button";
 import { Subtitle } from "./typography/Typography";
+import { Avatar } from "./Avatar";
 
 export function Header({ children, className, ...rest }) {
   return (
@@ -60,6 +61,11 @@ export function RoomHeaderInfo({ roomName }) {
   return (
     <>
       <div className={styles.roomAvatar}>
+        <Avatar
+          size="md"
+          bgKey={roomName}
+          fallback={roomName.slice(0, 1).toUpperCase()}
+        />
         <VideoIcon width={16} height={16} />
       </div>
       <Subtitle fontWeight="semiBold">{roomName}</Subtitle>
diff --git a/src/home/CallList.jsx b/src/home/CallList.jsx
index 07b46e0..55469b9 100644
--- a/src/home/CallList.jsx
+++ b/src/home/CallList.jsx
@@ -49,7 +49,7 @@ function CallTile({
           size="lg"
           bgKey={name}
           src={avatarUrl}
-          fallback={<VideoIcon width={16} height={16} />}
+          fallback={name.slice(0, 1).toUpperCase()}
           className={styles.avatar}
         />
         <div className={styles.callInfo}>