Fixed invisible top border issue of the form input (#14)

refs https://github.com/TryGhost/Team/issues/2615
This commit is contained in:
Sodbileg Gansukh 2023-03-14 18:11:49 +08:00 committed by GitHub
parent 4abbb0a8ca
commit be7e3f3e62
2 changed files with 5 additions and 5 deletions

View File

@ -23,7 +23,7 @@ const CTABox = ({isFirst, isPaid}) => {
}; };
return ( 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'}`}> <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} {titleText}
</h1> </h1>

View File

@ -94,7 +94,7 @@ const FormEditor = ({submit, progress, setProgress, close, reduced, isOpen, edit
`}> `}>
<EditorContent <EditorContent
onMouseDown={stopIfFocused} onTouchStart={stopIfFocused} onMouseDown={stopIfFocused} onTouchStart={stopIfFocused}
editor={editor} editor={editor}
/> />
</div> </div>
<div className="absolute right-[9px] bottom-[9px] flex space-x-4 transition-[opacity] duration-150"> <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(); editor?.commands?.blur();
dispatchAction('openPopup', { dispatchAction('openPopup', {
@ -184,7 +184,7 @@ const Form = ({comment, submit, submitText, submitSize, close, editor, reduced,
if (!succeeded) { if (!succeeded) {
return; return;
} }
// useEffect is not fast enought to enable it // useEffect is not fast enought to enable it
editor.setEditable(true); editor.setEditable(true);
editor.commands.focus(); editor.commands.focus();
@ -224,7 +224,7 @@ const Form = ({comment, submit, submitText, submitSize, close, editor, reduced,
}, [editor, memberName, progress]); }, [editor, memberName, progress]);
return ( 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="relative w-full">
<div className="pr-[1px] font-sans leading-normal dark:text-neutral-300"> <div className="pr-[1px] font-sans leading-normal dark:text-neutral-300">