From b3a71d8c9464205d8e31abd399c85cfdf1292a7e Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Fri, 5 Aug 2022 09:59:05 +0100
Subject: [PATCH] Fixed the avatar icon to only show if there is no image but
 no name

- This changes the behaviour of the Avatar component to show the icon properly
- This removes a parameter from the Avatar component

refs https://github.com/TryGhost/Team/issues/1746
---
 apps/comments-ui/src/components/Avatar.js | 18 ++++++++----------
 apps/comments-ui/src/components/Form.js   |  2 +-
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/apps/comments-ui/src/components/Avatar.js b/apps/comments-ui/src/components/Avatar.js
index 256cd6a095..a9800ad246 100644
--- a/apps/comments-ui/src/components/Avatar.js
+++ b/apps/comments-ui/src/components/Avatar.js
@@ -5,6 +5,7 @@ import {ReactComponent as AvatarIcon} from '../images/icons/avatar.svg';
 
 const Avatar = (props) => {
     const {member} = useContext(AppContext);
+    const memberName = member?.name ?? props.comment?.member?.name;
 
     const getHashOfString = (str) => {
         let hash = 0;
@@ -68,9 +69,13 @@ const Avatar = (props) => {
 
     let avatarEl = (
         <>
-            <div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
-                <p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ commentGetInitials() }</p>
-            </div>
+            {memberName ?
+                (<div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
+                    <p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ commentGetInitials() }</p>
+                </div>) :
+                (<div className={`flex justify-center items-center rounded-full bg-neutral-900 dark:bg-[rgba(255,255,255,0.7)] ${dimensionClasses}`}>
+                    <AvatarIcon className="stroke-white dark:stroke-[rgba(0,0,0,0.6)]" />
+                </div>)}
             {commentMember && <img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>}
         </>
     );
@@ -82,13 +87,6 @@ const Avatar = (props) => {
                 <AvatarIcon className="stroke-white dark:stroke-neutral-600" />
             </div>
         );
-    // When an avatar has no name
-    } else if (props.isAnonymous) {
-        avatarEl = (
-            <div className={`flex justify-center items-center rounded-full bg-neutral-900 dark:bg-[rgba(255,255,255,0.7)] ${dimensionClasses}`}>
-                <AvatarIcon className="stroke-white dark:stroke-[rgba(0,0,0,0.6)]" />
-            </div>
-        );
     }
 
     return (
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 90bca096fd..c4fdc2a2eb 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -397,7 +397,7 @@ const Form = (props) => {
                     </div>
                     <div className='absolute top-1 left-0 flex justify-start items-center h-12'>
                         <div className="mr-3">
-                            <Avatar comment={comment} saturation={avatarSaturation} isAnonymous={memberName ? false : true} className="pointer-events-none" />
+                            <Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
                         </div>
                         <div>
                             <Transition