From 5e8ebe44b8d8a2ed570d543957742c567c269246 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 11 Aug 2022 11:54:28 +0100
Subject: [PATCH] Adding in a subtle border for the comments when it has
 replies

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

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index bc222b47fb..3192162d98 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -86,12 +86,12 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
             >
-                <div className={`flex flex-row w-full ${hasReplies ? 'mb-2 sm:mb-2' : 'mb-6 sm:mb-10'}`}>
+                <div className={`flex flex-row w-full ${hasReplies ? 'mb-0' : 'mb-10'}`}>
                     <div className="mr-3 flex flex-col justify-start items-center">
                         <div className="flex-0 mb-4">
                             <Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
                         </div>
-                        {/* {!props.isReply && <div className="w-[3px] h-full bg-gradient-to-b from-neutral-100 via-neutral-100 to-transparent grow rounded" />} */}
+                        {!props.isReply && hasReplies && <div className="w-[3px] h-full mb-2 bg-gradient-to-b from-neutral-100 via-neutral-100 to-transparent grow rounded" />}
                     </div>
                     <div className="grow">
                         <div className="flex items-start -mt-[3px] mb-2">
@@ -128,7 +128,7 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
                         )}
 
                         {hasReplies &&
-                            <div className="mt-8 sm:mt-10 mb-4 sm:mb-0">
+                            <div className="mt-10 mb-4 sm:mb-0">
                                 <Replies comment={comment} />
                             </div>
                         }
diff --git a/apps/comments-ui/src/components/RepliesPagination.js b/apps/comments-ui/src/components/RepliesPagination.js
index 23f74f4d49..3cb620491f 100644
--- a/apps/comments-ui/src/components/RepliesPagination.js
+++ b/apps/comments-ui/src/components/RepliesPagination.js
@@ -7,7 +7,7 @@ const RepliesPagination = (props) => {
     return (
         <button className="group w-full text-neutral-700 font-semibold mt-10 sm:mt-0 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
             <span className="whitespace-nowrap mr-4">↓ Show {count} more replies</span>
-            <span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] group-hover:bg-neutral-200 rounded h-[2px] mt-[3px]" />
+            {/* <span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] group-hover:bg-neutral-200 rounded h-[2px] mt-[3px]" /> */}
         </button>
     );
 };