From 838fe784f184d14741d21924195ed373714fb09a Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 7 Jul 2022 15:24:10 +0200
Subject: [PATCH] Little tweaks for better add and reply forms

---
 apps/comments-ui/src/components/AddForm.js   |  4 +--
 apps/comments-ui/src/components/Comment.js   | 17 +++++++---
 apps/comments-ui/src/components/ReplyForm.js | 34 ++++++++------------
 3 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/apps/comments-ui/src/components/AddForm.js b/apps/comments-ui/src/components/AddForm.js
index 286d8bb789..8aacd9ae09 100644
--- a/apps/comments-ui/src/components/AddForm.js
+++ b/apps/comments-ui/src/components/AddForm.js
@@ -1,6 +1,5 @@
-// import React, {useState} from 'react';
-import {Transition} from '@headlessui/react';
 import React, {useContext, useState} from 'react';
+import {Transition} from '@headlessui/react';
 import AppContext from '../AppContext';
 import Avatar from './Avatar';
 
@@ -18,7 +17,6 @@ const AddForm = (props) => {
         event.preventDefault();
 
         if (message.length === 0) {
-            // alert('Please enter a message'); TODO: Check, but don't think we really need this
             return;
         }
 
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 46cd5f6de5..baf4f2794b 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -1,5 +1,5 @@
-import {formatRelativeTime} from '../utils/helpers';
 import React, {useContext, useState} from 'react';
+import {Transition} from '@headlessui/react';
 import Avatar from './Avatar';
 import Like from './Like';
 import Reply from './Reply';
@@ -8,6 +8,7 @@ import EditForm from './EditForm';
 import Replies from './Replies';
 import ReplyForm from './ReplyForm';
 import AppContext from '../AppContext';
+import {formatRelativeTime} from '../utils/helpers';
 
 const Comment = (props) => {
     const [isInEditMode, setIsInEditMode] = useState(false);
@@ -63,11 +64,19 @@ const Comment = (props) => {
                         </div>
                     </div>    
                 </div>
-                {isInReplyMode &&
-                    <div className={`ml-14 mb-10 ${!hasReplies && 'mt-10'}`}>
+                <Transition
+                    show={isInReplyMode}
+                    enter="transition duration-500 ease-in-out"
+                    enterFrom="opacity-0 -translate-y-2"
+                    enterTo="opacity-100 translate-x-0"
+                    leave="transition-none duration-0"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="ml-14 my-10">
                         <ReplyForm parent={comment} toggle={toggleReplyMode} avatarSaturation={props.avatarSaturation} />
                     </div>
-                }
+                </Transition>
                 {hasReplies && 
                     <div className="ml-14 mt-10">
                         <Replies comment={comment} avatarSaturation={props.avatarSaturation} />
diff --git a/apps/comments-ui/src/components/ReplyForm.js b/apps/comments-ui/src/components/ReplyForm.js
index a3b49aed84..0da6b75988 100644
--- a/apps/comments-ui/src/components/ReplyForm.js
+++ b/apps/comments-ui/src/components/ReplyForm.js
@@ -5,7 +5,7 @@ import Avatar from './Avatar';
 const ReplyForm = (props) => {
     const [message, setMessage] = useState('');
     const [focused, setFocused] = useState(false);
-    const {member, postId, dispatchAction} = useContext(AppContext);
+    const {postId, dispatchAction} = useContext(AppContext);
 
     const getHTML = () => {
         // Convert newlines to <br> for now (until we add a real editor)
@@ -47,7 +47,7 @@ const ReplyForm = (props) => {
 
     const handleBlur = (event) => {
         if (message === '') {
-            setFocused(false);
+            props.toggle();
         }
     };
 
@@ -56,37 +56,29 @@ const ReplyForm = (props) => {
     };
 
     return (
-        <form onSubmit={submitForm} className="comment-form mb-4">
-            <div className="w-full">
-                <div className="flex mb-4 space-x-4 justify-start items-center">
-                    <Avatar saturation={props.avatarSaturation} />
-                    <div>
-                        <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{member.name}</h4>
-                        <h6 className="text-[13px] text-neutral-400 font-sans">Now</h6>
-                    </div>
-                </div>
+        <form onSubmit={submitForm} onClick={handleFocus} className={`comment-form transition duration-200 border border-neutral-150 hover:border-neutral-200 rounded-md px-3 pt-3 pb-2 -ml-[13px] -mr-[12px] -mt-[15px] shadow-lg shadow-neutral-50 hover:shadow-xl hover:shadow-neutral-100 ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
+            <div className="w-full relative">
                 <div className="pr-3 font-sans leading-normal dark:text-neutral-300">
                     <div className="relative w-full">
                         <textarea
-                            className={`transition-[height] duration-150 w-full resize-none rounded-md border border-slate-200 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
+                            className={`transition-[height] pl-[56px] mt-0 duration-150 w-full placeholder:text-neutral-300 border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
                             value={message}
                             onChange={handleChange}
                             onFocus={handleFocus}
                             onBlur={handleBlur}
-                            placeholder={focused ? '' : 'Reply to this comment'}
+                            autofocus={true}
+                            placeholder='Reply to comment'
                         />
-                        {focused && <button
-                            className={`transition-[opacity] duration-150 rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-100' : 'opacity-0'}`}
-                            type="submit">
-                            Add your reply
-                        </button>}
                         <button
-                            className={`transition-[opacity] duration-100 absolute top-2 right-2 rounded-md border py-1 px-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-0' : 'opacity-100'}`}
-                            disabled={true}>
-                            Reply
+                            className={`transition-[opacity] duration-150 absolute -right-3 bottom-2 rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`}
+                            type="submit">
+                            Add reply
                         </button>
                     </div>
                 </div>
+                <div className="flex mb-1 justify-start items-center absolute top-[2px] left-0">
+                    <Avatar saturation={props.avatarSaturation} />
+                </div>
             </div>
         </form>
     );