From be7e3f3e628ec513c83c626b464e44e1b75ec50c Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Tue, 14 Mar 2023 18:11:49 +0800
Subject: [PATCH] Fixed invisible top border issue of the form input (#14)

refs https://github.com/TryGhost/Team/issues/2615
---
 apps/comments-ui/src/components/content/CTABox.js     | 2 +-
 apps/comments-ui/src/components/content/forms/Form.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/comments-ui/src/components/content/CTABox.js b/apps/comments-ui/src/components/content/CTABox.js
index 8ab3ef6f6d..b7214a6a5d 100644
--- a/apps/comments-ui/src/components/content/CTABox.js
+++ b/apps/comments-ui/src/components/content/CTABox.js
@@ -23,7 +23,7 @@ const CTABox = ({isFirst, isPaid}) => {
     };
 
     return (
-        <section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} ${!isFirst && 'mt-4'} border-y-2 border-[rgba(0,0,0,0.075)] dark:border-[rgba(255,255,255,0.1)] sm:px-8`}>
+        <section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} ${!isFirst && 'mt-4'} border-y border-[rgba(0,0,0,0.075)] dark:border-[rgba(255,255,255,0.1)] sm:px-8`}>
             <h1 className={`mb-[8px] text-center font-sans text-[24px] tracking-tight  text-black dark:text-[rgba(255,255,255,0.85)] ${isFirst ? 'font-semibold' : 'font-bold'}`}>
                 {titleText}
             </h1>
diff --git a/apps/comments-ui/src/components/content/forms/Form.js b/apps/comments-ui/src/components/content/forms/Form.js
index 21c2927419..29f71375b2 100644
--- a/apps/comments-ui/src/components/content/forms/Form.js
+++ b/apps/comments-ui/src/components/content/forms/Form.js
@@ -94,7 +94,7 @@ const FormEditor = ({submit, progress, setProgress, close, reduced, isOpen, edit
             `}>
                 <EditorContent
                     onMouseDown={stopIfFocused} onTouchStart={stopIfFocused}
-                    editor={editor} 
+                    editor={editor}
                 />
             </div>
             <div className="absolute right-[9px] bottom-[9px] flex space-x-4 transition-[opacity] duration-150">
@@ -168,7 +168,7 @@ const Form = ({comment, submit, submitText, submitSize, close, editor, reduced,
         }
     };
 
-    const openEditDetails = useCallback((options) => {        
+    const openEditDetails = useCallback((options) => {
         editor?.commands?.blur();
 
         dispatchAction('openPopup', {
@@ -184,7 +184,7 @@ const Form = ({comment, submit, submitText, submitSize, close, editor, reduced,
                 if (!succeeded) {
                     return;
                 }
-        
+
                 // useEffect is not fast enought to enable it
                 editor.setEditable(true);
                 editor.commands.focus();
@@ -224,7 +224,7 @@ const Form = ({comment, submit, submitText, submitSize, close, editor, reduced,
     }, [editor, memberName, progress]);
 
     return (
-        <form ref={formEl} data-testid="form" onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused} className={`-mx-3 -mt-[14px] mb-10 rounded-md px-3 pt-3 pb-2 transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'} ${reduced && 'pl-1'}
+        <form ref={formEl} data-testid="form" onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused} className={`-mx-3 -mt-[10px] mb-10 rounded-md px-3 pt-3 pb-2 transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'} ${reduced && 'pl-1'}
         `}>
             <div className="relative w-full">
                 <div className="pr-[1px] font-sans leading-normal dark:text-neutral-300">