Improved the hidden and removed status where it's now hidding name

- Before, this was still showing name and avatar
- This now reverts to a blank avatar image

refs https://github.com/TryGhost/Team/issues/1703

apps/comments-ui/src/components/Avatar.js

@@ -1,6 +1,7 @@
 import React, {useContext} from 'react';
 import AppContext from '../AppContext';
 import {getInitials} from '../utils/helpers';
+import {ReactComponent as AvatarIcon} from '../images/icons/avatar.svg';
 
 const Avatar = (props) => {
     const {member} = useContext(AppContext);
@@ -66,12 +67,18 @@ const Avatar = (props) => {
     };
 
     return (
-        <figure className={`relative ${dimensionClasses}`}>
-            <div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
-                <p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ commentGetInitials() }</p>
-            </div>
-            {commentMember && <img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>}
-        </figure>
+        props.isBlank ?
+            (<figure className={`relative ${dimensionClasses}`}>
+                <div className={`flex justify-center items-center rounded-full bg-neutral-300 ${dimensionClasses}`}>
+                    <AvatarIcon />
+                </div>
+            </figure>) :
+            (<figure className={`relative ${dimensionClasses}`}>
+                <div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
+                    <p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ commentGetInitials() }</p>
+                </div>
+                {commentMember && <img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>}
+            </figure>)
     );
 };
 

apps/comments-ui/src/components/Comment.js

@@ -48,14 +48,15 @@ const Comment = (props) => {
             <>
                 <div className={`flex flex-row ${hasReplies ? 'mb-4' : 'mb-10'}`}>
                     <div className="mr-3">
-                        <Avatar comment={comment} saturation={avatarSaturation} />
+                        <Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
                     </div>
-                    <div>        
+                    <div>      
+                        {!isNotPublished &&  
                         <div className="mb-[4px] mt-[2px]">
                             <h4 className="text-lg font-sans font-semibold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
-                        </div>
+                        </div>}
    
-                        <div className={`mb-2 pr-4 font-sans leading-normal ${isNotPublished ? 'text-neutral-400' : 'text-neutral-900'} dark:text-[rgba(255,255,255,0.85)]`}>
+                        <div className={`mb-2 pr-4 font-sans leading-normal ${isNotPublished ? 'text-neutral-400 mt-[4px]' : 'text-neutral-900'} dark:text-[rgba(255,255,255,0.85)]`}>
                             <p dangerouslySetInnerHTML={html} className="gh-comment-content text-[16.5px] leading-normal"></p>
                         </div>
                         <div className="flex gap-5 items-center">

apps/comments-ui/src/components/CommentsBox.js

@@ -5,7 +5,7 @@ import Form from './Form';
 import Comment from './Comment';
 import Pagination from './Pagination';
 import NotPaidBox from './NotPaidBox';
-import Empty from './Empty';
+// import Empty from './Empty';
 import Loading from './Loading';
 
 const CommentsBoxContent = (props) => {
@@ -21,7 +21,8 @@ const CommentsBoxContent = (props) => {
         <>
             <Pagination />
             <div className={!pagination ? 'mt-4' : ''}>
-                {commentsCount === 0 ? <Empty /> : commentsElements}
+                {/* {commentsCount === 0 ? (member && <Empty />) : commentsElements} */}
+                {commentsCount > 0 && commentsElements}
             </div>
             <div>
                 { member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} /> }
@@ -69,10 +70,10 @@ const CommentsBox = (props) => {
     const style = {
         '--gh-accent-color': accentColor ?? 'blue',
         // need careful padding adjustments to match iFrame negative margins and to not cut off top editing form
-        paddingLeft: 'min(4vmin,20px)',
-        paddingRight: 'min(4vmin,20px)',
+        paddingLeft: 20,
+        paddingRight: 20,
         paddingTop: 16,
-        paddingBottom: 16
+        paddingBottom: 32
     };
     return (
         <section className={'ghost-display ' + containerClass} style={style}>

apps/comments-ui/src/components/Empty.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Empty = (props) => {
     return (
-        <div className="pr-8 pt-2 pb-10 italic font-sans leading-normal text-neutral-400 dark:text-[rgba(255,255,255,0.85)]">
+        <div className="pr-8 pt-2 pb-10 italic text-center font-sans leading-normal text-neutral-400 dark:text-[rgba(255,255,255,0.85)]">
             There are currently no comments.
         </div>
     );

apps/comments-ui/src/components/Form.js

@@ -10,6 +10,9 @@ const Form = (props) => {
     const [isFormOpen, setFormOpen] = useState(props.isReply || props.isEdit ? true : false);
     const formEl = useRef(null);
 
+    const {comment, commentsCount} = props;
+    const memberName = (props.isEdit ? comment.member.name : member.name); 
+
     let config;
     if (props.isReply) {
         config = {
@@ -26,7 +29,7 @@ const Form = (props) => {
         };
     } else {
         config = {
-            placeholder: 'Join the discussion',
+            placeholder: (commentsCount === 0 ? 'Be first to start the conversation' : 'Join the discussion'),
             autofocus: false
         };
     }
@@ -169,9 +172,6 @@ const Form = (props) => {
         return false;
     };
 
-    const {comment, commentsCount} = props;
-    const memberName = (props.isEdit ? comment.member.name : member.name); 
-
     const focusEditor = (event) => {
         event.stopPropagation();
 
@@ -202,10 +202,11 @@ const Form = (props) => {
         <>
             <form ref={formEl} onClick={focusEditor} className={`
                 transition duration-200
-                -mt-[12px] -mr-3 mb-10 -ml-[12px] pt-3 pb-2 px-3
+                pt-3 pb-2 px-3
+                -mt-[12px] -mr-3 mb-10 -ml-[12px]
                 bg-white dark:bg-[rgba(255,255,255,0.08)]
                 rounded-md shadow-formlg dark:shadow-transparent hover:shadow-formxl
-                ${!commentsCount && !props.isEdit && !props.isReply && '-mt-0 -mr-0 -ml-0'}
+                ${!commentsCount && !props.isEdit && !props.isReply && 'mt-0 ml-0 mr-0'}
                 ${isFormOpen ? 'cursor-default' : 'cursor-pointer'}`
             }>
                 <div className="w-full relative">
@@ -220,6 +221,7 @@ const Form = (props) => {
                                     focus:outline-0
                                     placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]  
                                     resize-none
+                                    ${commentsCount === 0 && 'placeholder:text-neutral-700'}
                                     ${isFormOpen ? 'cursor-textmin-h-[144px] pt-[33px] pb-[68px]' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
                                     ${props.isEdit && 'cursor-text'}
                                     ${!memberName && 'pointer-events-none'}

apps/comments-ui/src/images/icons/avatar.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_173_611)">
+<path d="M5.58984 7.32143C5.58984 8.15157 5.75335 8.97358 6.07103 9.74053C6.38872 10.5075 6.85435 11.2044 7.44135 11.7914C8.02834 12.3783 8.72521 12.844 9.49216 13.1617C10.2591 13.4793 11.0811 13.6429 11.9113 13.6429C12.7414 13.6429 13.5634 13.4793 14.3304 13.1617C15.0973 12.844 15.7942 12.3783 16.3812 11.7914C16.9682 11.2044 17.4338 10.5075 17.7515 9.74053C18.0692 8.97358 18.2327 8.15157 18.2327 7.32143C18.2327 6.49128 18.0692 5.66927 17.7515 4.90232C17.4338 4.13537 16.9682 3.4385 16.3812 2.8515C15.7942 2.2645 15.0973 1.79887 14.3304 1.48119C13.5634 1.16351 12.7414 1 11.9113 1C11.0811 1 10.2591 1.16351 9.49216 1.48119C8.72521 1.79887 8.02834 2.2645 7.44135 2.8515C6.85435 3.4385 6.38872 4.13537 6.07103 4.90232C5.75335 5.66927 5.58984 6.49128 5.58984 7.32143V7.32143Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.5 26.2858C1.5 23.5244 2.59695 20.8761 4.54953 18.9236C6.50212 16.971 9.15039 15.874 11.9118 15.874C14.6731 15.874 17.3214 16.971 19.274 18.9236C21.2266 20.8761 22.3235 23.5244 22.3235 26.2858H1.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_173_611">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>