From e6cacdb2dbf107a779f86266742b22dcb1b821a6 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 21 Jul 2022 12:36:54 +0100
Subject: [PATCH] Moved reply box to bottom and made it autofocus

refs https://github.com/TryGhost/Team/issues/1703
---
 apps/comments-ui/src/components/Comment.js | 14 +++++++-------
 apps/comments-ui/src/components/Form.js    |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 2c53496783..ee3c7c93a0 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -65,11 +65,16 @@ const Comment = (props) => {
                         </div>
                     </div>    
                 </div>
+                {hasReplies && 
+                    <div className="ml-14 mt-10">
+                        <Replies comment={comment} />
+                    </div>
+                }
                 <Transition
                     show={isInReplyMode}
                     enter="transition duration-500 delay-50 ease-in-out"
-                    enterFrom="opacity-0 -translate-y-2"
-                    enterTo="opacity-100 translate-y-0"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
                     leave="transition-none duration-0"
                     leaveFrom="opacity-100"
                     leaveTo="opacity-0"
@@ -78,11 +83,6 @@ const Comment = (props) => {
                         <Form parent={comment} toggle={toggleReplyMode} isReply={true} />
                     </div>
                 </Transition>
-                {hasReplies && 
-                    <div className="ml-14 mt-10">
-                        <Replies comment={comment} />
-                    </div>
-                }
             </>
         );
     }
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 0543c27f72..20c211ad5a 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -14,7 +14,7 @@ const Form = (props) => {
     if (props.isReply) {
         config = {
             placeholder: 'Reply to comment',
-            autofocus: false
+            autofocus: true
         };
     } else if (props.isEdit) {
         config = {
@@ -163,7 +163,7 @@ const Form = (props) => {
                         <div className="relative w-full">
                             <EditorContent
                                 className={`
-                                    transition-all duration-150
+                                    transition-all duration-150 delay-100
                                     w-full pl-[56px] px-0 py-[10px] pr-4
                                     bg-transparent rounded-md border-none border border-slate-50 dark:border-none
                                     font-sans text-[16.5px] leading-normal dark:text-neutral-300 
@@ -204,7 +204,7 @@ const Form = (props) => {
                         <Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
                         <Transition
                             show={isFocused}
-                            enter="transition duration-500 ease-in-out"
+                            enter="transition duration-500 delay-100 ease-in-out"
                             enterFrom="opacity-0 -translate-x-2"
                             enterTo="opacity-100 translate-x-0"
                             leave="transition-none duration-0"