Replace UserInfo avatar with <MemberAvatar/> for fallback logic

res/css/views/right_panel/_UserInfo.scss

@@ -63,7 +63,6 @@ limitations under the License.
 
     .mx_UserInfo_avatar {
         margin: 24px 32px 0 32px;
-        cursor: pointer;
     }
 
     .mx_UserInfo_avatar > div {
@@ -71,18 +70,23 @@ limitations under the License.
         margin: 0 auto;
     }
 
-    .mx_UserInfo_avatar > div > div {
+    .mx_UserInfo_avatar > div * {
         /* use padding-top instead of height to make this element square,
         as the % in padding is a % of the width (including margin,
         that's why we had to put the margin to center on a parent div),
         and not a % of the parent height. */
-        padding-top: 100%;
-        height: 0;
+        width: 30vh;
+        height: 30vh;
+        object-fit: cover;
         border-radius: 100%;
         box-sizing: content-box;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
+    }
+
+    // override the calculated sizes so that the letter isn't HUGE
+    .mx_UserInfo_avatar > div .mx_BaseAvatar_initial {
+        font-size: 26px !important;
+        width: 30vh !important;
+        line-height: 30vh !important;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {

src/components/views/right_panel/UserInfo.js

@@ -1051,16 +1051,9 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
         }
     }, [cli, user.userId]);
 
-
-    const onMemberAvatarKey = e => {
-        if (e.key === "Enter") {
-            onMemberAvatarClick();
-        }
-    };
-
     const onMemberAvatarClick = useCallback(() => {
         const member = user;
-        const avatarUrl = member.getMxcAvatarUrl();
+        const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
         if (!avatarUrl) return;
 
         const httpUrl = cli.mxcUrlToHttp(avatarUrl);
@@ -1158,21 +1151,22 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
         statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
     }
 
-    const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
-    let avatarElement;
-    if (avatarUrl) {
-        const httpUrl = cli.mxcUrlToHttp(avatarUrl, 800, 800);
-        avatarElement = <div
-            className="mx_UserInfo_avatar"
+    // const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
+    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+    const avatarElement = (
+        <div className="mx_UserInfo_avatar">
+            <div>
+                <MemberAvatar
+                    member={user}
+                    width={0.3 * window.outerHeight} // ~30vh
+                    height={0.3 * window.outerHeight} // ~30vh
+                    resizeMethod="scale"
+                    fallbackUserId={user.userId}
                     onClick={onMemberAvatarClick}
-            onKeyDown={onMemberAvatarKey}
-            tabIndex="0"
-            role="img"
-            aria-label={_t("Profile picture")}
-        >
-            <div><div style={{backgroundImage: `url(${httpUrl})`}} /></div>
-        </div>;
-    }
+                    urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
+            </div>
+        </div>
+    );
 
     let closeButton;
     if (onClose) {