mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-04 02:01:58 -05:00
Fixed various visual details in Comments UI (#21121)
REF PLG-225 - Updated placeholder text color to work in dark mode - Fixed spacing for reply input field - Changed comment input field styles - Changed left border width from 3px to 1px - Updated "Expertise" modal typography - Updated CTA typography
This commit is contained in:
parent
175d76c831
commit
68c3d99f15
7 changed files with 26 additions and 18 deletions
|
@ -32,16 +32,16 @@ const CTABox: React.FC<Props> = ({isFirst, isPaid}) => {
|
|||
|
||||
return (
|
||||
<section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} ${!isFirst && 'mt-4'} ${!member && commentCount ? 'border-t' : 'border-none'} border-[rgba(0,0,0,0.075)] sm:px-8 dark:border-[rgba(255,255,255,0.1)]`} data-testid="cta-box">
|
||||
<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-2xl tracking-tight text-black dark:text-[rgba(255,255,255,0.85)] ${isFirst ? 'font-semibold' : 'font-bold'}`}>
|
||||
{titleText}
|
||||
</h1>
|
||||
<p className="mb-[28px] w-full px-0 text-center font-sans text-[16px] leading-normal text-neutral-600 sm:max-w-screen-sm sm:px-8 dark:text-[rgba(255,255,255,0.85)]">
|
||||
<p className="mb-[28px] w-full px-0 text-center font-sans text-lg leading-normal text-neutral-600 sm:max-w-screen-sm sm:px-8 dark:text-[rgba(255,255,255,0.85)]">
|
||||
{text}
|
||||
</p>
|
||||
<button className="font-san mb-[12px] inline-block rounded px-5 py-[14px] font-medium leading-none text-white transition-all hover:opacity-90" data-testid="signup-button" style={buttonStyle} type="button" onClick={handleSignUpClick}>
|
||||
<button className="text-md mb-[12px] inline-block rounded px-5 py-[14px] font-sans font-medium leading-none text-white transition-all hover:opacity-90" data-testid="signup-button" style={buttonStyle} type="button" onClick={handleSignUpClick}>
|
||||
{(isPaid && member) ? t('Upgrade now') : t('Sign up now')}
|
||||
</button>
|
||||
{!member && (<p className="text-center font-sans text-sm text-[rgba(0,0,0,0.4)] dark:text-[rgba(255,255,255,0.5)]">
|
||||
{!member && (<p className="text-md text-center font-sans text-[rgba(0,0,0,0.4)] dark:text-[rgba(255,255,255,0.5)]">
|
||||
<span className='mr-1 inline-block text-[15px]'>{t('Already a member?')}</span>
|
||||
<button className="rounded-md text-sm font-semibold transition-all hover:opacity-90" data-testid="signin-button" style={linkStyle} type="button" onClick={handleSignInClick}>{t('Sign in')}</button>
|
||||
</p>)}
|
||||
|
|
|
@ -213,7 +213,7 @@ const CommentHeader: React.FC<{comment: Comment}> = ({comment}) => {
|
|||
const memberExpertise = member && comment.member && comment.member.uuid === member.uuid ? member.expertise : comment?.member?.expertise;
|
||||
|
||||
return (
|
||||
<div className={`mb-2 mt-[-3px] flex flex-wrap items-start sm:flex-row ${memberExpertise ? 'flex-col' : 'flex-row'}`}>
|
||||
<div className={`mb-2 mt-0.5 flex flex-wrap items-start sm:flex-row ${memberExpertise ? 'flex-col' : 'flex-row'}`}>
|
||||
<AuthorName comment={comment} />
|
||||
<div className="flex items-baseline pr-4 font-sans text-base leading-snug text-[rgba(0,0,0,0.5)] sm:text-sm dark:text-[rgba(255,255,255,0.5)]">
|
||||
<span>
|
||||
|
@ -270,7 +270,7 @@ const RepliesLine: React.FC<{hasReplies: boolean}> = ({hasReplies}) => {
|
|||
return null;
|
||||
}
|
||||
|
||||
return (<div className="mb-2 h-full w-[3px] grow rounded bg-gradient-to-b from-[rgba(0,0,0,0.05)] via-[rgba(0,0,0,0.05)] to-transparent dark:from-[rgba(255,255,255,0.08)] dark:via-[rgba(255,255,255,0.08)]" />);
|
||||
return (<div className="mb-2 h-full w-px grow rounded bg-gradient-to-b from-[rgba(0,0,0,0.08)] via-[rgba(0,0,0,0.08)] to-transparent dark:from-[rgba(255,255,255,0.08)] dark:via-[rgba(255,255,255,0.08)]" />);
|
||||
};
|
||||
|
||||
type CommentLayoutProps = {
|
||||
|
|
|
@ -103,9 +103,9 @@ const FormEditor: React.FC<FormEditorProps> = ({submit, progress, setProgress, c
|
|||
}, [editor, close, submitForm]);
|
||||
|
||||
return (
|
||||
<div className={`relative w-full pl-[40px] transition-[padding] delay-100 duration-150 sm:pl-[44px] ${reduced && 'pl-0'} ${isOpen && 'pl-[1px] pt-[56px] sm:pl-[52px] sm:pt-[64px]'}`}>
|
||||
<div className={`relative w-full pl-[40px] transition-[padding] delay-100 duration-150 sm:pl-[44px] ${reduced && 'pl-0'} ${isOpen && 'pl-[1px] pt-[56px] sm:pl-[44px] sm:pt-[52px]'}`}>
|
||||
<div
|
||||
className={`shadow-form hover:shadow-formxl text-md w-full rounded-md border border-none border-slate-50 bg-[rgba(255,255,255,0.9)] px-2 font-sans leading-normal transition-all delay-100 duration-150 focus:outline-0 sm:px-3 sm:text-lg dark:border-none dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-300 dark:shadow-transparent ${isOpen ? 'min-h-[144px] cursor-text py-2 pb-[68px]' : 'min-h-[48px] cursor-pointer overflow-hidden py-3 hover:border-slate-300 sm:py-4'}
|
||||
className={`text-md w-full rounded-md border border-[rgba(0,0,0,0.1)] bg-[rgba(255,255,255,0.9)] px-2 font-sans leading-normal transition-all delay-100 duration-150 focus:outline-0 sm:px-3 sm:text-lg dark:bg-[rgba(255,255,255,0.14)] dark:text-neutral-300 ${isOpen ? 'min-h-[144px] cursor-text py-2 pb-[68px]' : 'min-h-[48px] cursor-pointer overflow-hidden py-3 sm:py-4'}
|
||||
`}
|
||||
data-testid="form-editor">
|
||||
<EditorContent
|
||||
|
@ -265,7 +265,7 @@ const Form: React.FC<FormProps> = ({comment, submit, submitText, submitSize, clo
|
|||
}, [editor, memberName, progress]);
|
||||
|
||||
return (
|
||||
<form ref={formEl} className={`-mx-3 mb-7 mt-[-10px] rounded-md px-3 pb-2 pt-3 transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'} ${reduced && 'pl-1'}`} data-testid="form" onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused}>
|
||||
<form ref={formEl} className={`-mx-3 mb-7 mt-[-10px] rounded-md transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'} ${reduced && 'pl-1'}`} data-testid="form" onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused}>
|
||||
<div className="relative w-full">
|
||||
<div className="pr-[1px] font-sans leading-normal dark:text-neutral-300">
|
||||
<FormEditor close={close} editor={editor} isOpen={isOpen} progress={progress} reduced={reduced} setProgress={setProgress} submit={submit} submitSize={submitSize} submitText={submitText} />
|
||||
|
|
|
@ -94,7 +94,7 @@ const MainForm: React.FC<Props> = ({commentsCount}) => {
|
|||
const isOpen = editor?.isFocused ?? false;
|
||||
|
||||
return (
|
||||
<div ref={formEl} className='mt-[-4px]' data-testid="main-form">
|
||||
<div ref={formEl} className='mt-[-4px] px-3 pb-2 pt-3' data-testid="main-form">
|
||||
<Form editor={editor} isOpen={isOpen} reduced={false} {...submitProps} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -38,7 +38,7 @@ const SecundaryForm: React.FC<Props> = ({editor, submit, close, closeIfNotChange
|
|||
const reduced = isMobile();
|
||||
|
||||
return (
|
||||
<div className='mt-[-20px]'>
|
||||
<div className='mt-[-28px] pr-3'>
|
||||
<Form close={close} editor={editor} isOpen={true} reduced={reduced} submit={submit} submitSize={submitSize} submitText={submitText} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -85,7 +85,7 @@ const AddDetailsPopup = (props: Props) => {
|
|||
<div className="font-sans text-base font-semibold tracking-tight text-white">
|
||||
{profile.name}
|
||||
</div>
|
||||
<div className="font-sans text-[14px] tracking-tight text-neutral-400">
|
||||
<div className="font-sans text-sm tracking-tight text-neutral-400">
|
||||
{profile.expertise}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -124,11 +124,11 @@ const AddDetailsPopup = (props: Props) => {
|
|||
</div>
|
||||
</div>
|
||||
<div className={`p-0 sm:p-8`}>
|
||||
<h1 className="mb-1 text-center font-sans text-[24px] font-bold tracking-tight text-black sm:text-left">{t('Complete your profile')}<span className="hidden sm:inline">.</span></h1>
|
||||
<p className="pr-0 text-center font-sans text-base leading-9 text-neutral-500 sm:pr-10 sm:text-left">{t('Add context to your comment, share your name and expertise to foster a healthy discussion.')}</p>
|
||||
<h1 className="mb-1 text-center font-sans text-2xl font-bold tracking-tight text-black sm:text-left">{t('Complete your profile')}<span className="hidden sm:inline">.</span></h1>
|
||||
<p className="text-md pr-0 text-center font-sans leading-snug text-neutral-500 sm:pr-10 sm:text-left">{t('Add context to your comment, share your name and expertise to foster a healthy discussion.')}</p>
|
||||
<section className="mt-8 text-left">
|
||||
<div className="mb-2 flex flex-row justify-between">
|
||||
<label className="font-sans text-[1.3rem] font-semibold" htmlFor="comments-name">{t('Name')}</label>
|
||||
<label className="font-sans text-base font-semibold" htmlFor="comments-name">{t('Name')}</label>
|
||||
<Transition
|
||||
enter="transition duration-300 ease-out"
|
||||
enterFrom="opacity-0"
|
||||
|
@ -163,8 +163,8 @@ const AddDetailsPopup = (props: Props) => {
|
|||
}}
|
||||
/>
|
||||
<div className="mb-2 mt-6 flex flex-row justify-between">
|
||||
<label className="font-sans text-[1.3rem] font-semibold" htmlFor="comments-name">{t('Expertise')}</label>
|
||||
<div className={`font-sans text-[1.3rem] text-neutral-400 ${(expertiseCharsLeft === 0) && 'text-red-500'}`}>{charsText}</div>
|
||||
<label className="font-sans text-base font-semibold" htmlFor="comments-name">{t('Expertise')}</label>
|
||||
<div className={`font-sans text-base text-neutral-400 ${(expertiseCharsLeft === 0) && 'text-red-500'}`}>{charsText}</div>
|
||||
</div>
|
||||
<input
|
||||
ref={inputExpertiseRef}
|
||||
|
@ -190,7 +190,7 @@ const AddDetailsPopup = (props: Props) => {
|
|||
}}
|
||||
/>
|
||||
<button
|
||||
className={`mt-10 flex h-[42px] w-full items-center justify-center rounded-md px-8 font-sans text-[15px] font-semibold text-white opacity-100 transition-opacity duration-200 ease-linear hover:opacity-90`}
|
||||
className={`text-md mt-10 flex h-[42px] w-full items-center justify-center rounded-md px-8 font-sans font-semibold text-white opacity-100 transition-opacity duration-200 ease-linear hover:opacity-90`}
|
||||
data-testid="save-button"
|
||||
style={{backgroundColor: accentColor ?? '#000000'}}
|
||||
type="button"
|
||||
|
|
|
@ -51,6 +51,14 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-comment-content p.is-editor-empty:first-child::before {
|
||||
color: rgba(0,0,0,.25) !important;
|
||||
}
|
||||
|
||||
.dark .gh-comment-content p.is-editor-empty:first-child::before {
|
||||
color: rgba(255,255,255,.35) !important;
|
||||
}
|
||||
|
||||
/* The following lines are needed for the editor */
|
||||
|
||||
/* Placeholder */
|
||||
|
|
Loading…
Add table
Reference in a new issue