use a variable for the avatar size

src/components/Avatar.tsx

@@ -24,6 +24,8 @@ import logo from '../imgs/chat-icon.svg';
 
 import './Avatar.scss';
 
+const AVATAR_SIZE = 60;
+
 interface IProps {
     className?: string;
     avatarUrl: string;
@@ -59,11 +61,18 @@ export const UserAvatar: React.FC<IPropsUserAvatar> = ({
     userId,
 }: IPropsUserAvatar) => {
     const [hs] = useHSs({ identifier: userId });
-    return <Avatar
+    return (
-        avatarUrl={getThumbnailURI(hs, 34, 34, user.avatar_url)}
+        <Avatar
+            avatarUrl={getThumbnailURI(
+                hs,
+                AVATAR_SIZE,
+                AVATAR_SIZE,
+                user.avatar_url
+            )}
             label={user.displayname ? user.displayname : userId}
-    />;
+        />
-}
+    );
+};
 
 interface IPropsRoomAvatar {
     room: Room;
@@ -73,11 +82,18 @@ export const RoomAvatar: React.FC<IPropsRoomAvatar> = ({
     room,
 }: IPropsRoomAvatar) => {
     const [hs] = useHSs({ identifier: room.room_id });
-    return <Avatar
+    return (
-        avatarUrl={getThumbnailURI(hs, 34, 34, room.avatar_url)}
+        <Avatar
+            avatarUrl={getThumbnailURI(
+                hs,
+                AVATAR_SIZE,
+                AVATAR_SIZE,
+                room.avatar_url
+            )}
             label={room.name || room.room_id}
-    />;
+        />
-}
+    );
+};
 
 interface IPropsGroupAvatar {
     group: Group;
@@ -89,10 +105,17 @@ export const GroupAvatar: React.FC<IPropsGroupAvatar> = ({
     groupId,
 }: IPropsGroupAvatar) => {
     const [hs] = useHSs({ identifier: groupId });
-    return <Avatar
+    return (
-      avatarUrl={getThumbnailURI(hs, 34, 34, group.avatar_url)}
+        <Avatar
+            avatarUrl={getThumbnailURI(
+                hs,
+                AVATAR_SIZE,
+                AVATAR_SIZE,
+                group.avatar_url
+            )}
             label={group.name}
-    />;
+        />
-}
+    );
+};
 
 export default Avatar;