diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js index abfe25baa9..00a51a52ab 100644 --- a/apps/comments-ui/src/components/Comment.js +++ b/apps/comments-ui/src/components/Comment.js @@ -92,7 +92,7 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => { <p className="font-sans text-[16px] leading-normal text-neutral-400 italic mt-[4px]">{notPublishedMessage}</p> </div> : <div> - <h4 className="text-[17px] font-sans font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4> + <h4 className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23] dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4> <div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]"> {memberBio && <div>{memberBio}<span className="mx-[0.3em]">ยท</span></div>} <div title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</div> diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js index 4de01227fb..6b82ddce94 100644 --- a/apps/comments-ui/src/components/Form.js +++ b/apps/comments-ui/src/components/Form.js @@ -302,6 +302,19 @@ const Form = (props) => { editor.commands.focus(); }; + const handleAddBoth = (event) => { + event.preventDefault(); + setPreventClosing(true); + + dispatchAction('openPopup', { + type: 'addDetailsDialog', + callback: () => { + editor?.commands.focus(); + setPreventClosing(false); + } + }); + }; + const handleAddBio = (event) => { event.preventDefault(); setPreventClosing(true); @@ -409,12 +422,9 @@ const Form = (props) => { leaveFrom="opacity-100" leaveTo="opacity-0" > - <h4 className="text-[17px] font-sans font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{memberName ? memberName : 'Anonymous'}</h4> + <button className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23)] hover:text-black dark:text-[rgba(255,255,255,0.85)]" onClick={handleAddBoth}>{memberName ? memberName : 'Anonymous'}</button> <div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]"> - {memberBio ? - <div onClick={handleAddBio}>{memberBio}</div> : - <button className="transition duration-150 hover:text-neutral-500" onClick={handleAddBio}>Add your bio</button> - } + <button className="transition duration-150 hover:text-neutral-500" onClick={memberBio ? handleAddBoth : handleAddBio}>{memberBio ? memberBio : 'Add your bio'}</button> </div> </Transition> </div>