mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
Fixed linting issues
This commit is contained in:
parent
346b9ff9e2
commit
fbd268272a
@ -91,7 +91,7 @@ export const Avatar = ({comment}) => {
|
||||
(<div className={`flex items-center justify-center rounded-full bg-neutral-900 dark:bg-[rgba(255,255,255,0.7)] ${dimensionClasses}`}>
|
||||
<AvatarIcon className="stroke-white dark:stroke-[rgba(0,0,0,0.6)]" />
|
||||
</div>)}
|
||||
{commentMember && <img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>}
|
||||
{commentMember && <img className={`absolute left-0 top-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>}
|
||||
</>
|
||||
);
|
||||
|
||||
|
@ -30,7 +30,7 @@ const CTABox = ({isFirst, isPaid}) => {
|
||||
<p className="sm:max-w-screen-sm mb-[28px] w-full px-0 text-center font-sans text-[16px] leading-normal text-neutral-600 dark:text-[rgba(255,255,255,0.85)] sm:px-8">
|
||||
Become a {isPaid && 'paid'} member of <span className="font-semibold">{publication}</span> to start commenting.
|
||||
</p>
|
||||
<button onClick={handleSignUpClick} className="font-san mb-[12px] inline-block rounded py-[14px] px-5 font-medium leading-none text-white transition-all hover:opacity-90" style={buttonStyle}>
|
||||
<button onClick={handleSignUpClick} className="font-san mb-[12px] inline-block rounded px-5 py-[14px] font-medium leading-none text-white transition-all hover:opacity-90" style={buttonStyle}>
|
||||
{(isPaid && member) ? 'Upgrade now' : '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)]">
|
||||
|
@ -150,7 +150,7 @@ function RepliesContainer({comment}) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-10 mb-4 sm:mb-0">
|
||||
<div className="mb-4 mt-10 sm:mb-0">
|
||||
<Replies comment={comment} />
|
||||
</div>
|
||||
);
|
||||
|
@ -20,8 +20,8 @@ const Pagination = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<button data-testid="pagination-component" type="button" className="group mb-10 flex w-full items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white" onClick={loadMore}>
|
||||
<span className="flex h-[39px] w-full items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-3 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↑ Show {formatNumber(left)} previous {left === 1 ? 'comment' : 'comments'}</span>
|
||||
<button data-testid="pagination-component" type="button" className="group mb-10 flex w-full items-center px-0 pb-2 pt-0 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white" onClick={loadMore}>
|
||||
<span className="flex h-[39px] w-full items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] px-3 py-2 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↑ Show {formatNumber(left)} previous {left === 1 ? 'comment' : 'comments'}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
@ -4,8 +4,8 @@ import {formatNumber} from '../../utils/helpers';
|
||||
const RepliesPagination = ({loadMore, count}) => {
|
||||
return (
|
||||
<div className="flex w-full items-center justify-start">
|
||||
<button type="button" className="group ml-[48px] mb-10 flex w-auto items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white sm:mb-12 " onClick={loadMore} data-testid="reply-pagination-button">
|
||||
<span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-4 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ Show {formatNumber(count)} more {count === 1 ? 'reply' : 'replies'}</span>
|
||||
<button type="button" className="group mb-10 ml-[48px] flex w-auto items-center px-0 pb-2 pt-0 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white sm:mb-12 " onClick={loadMore} data-testid="reply-pagination-button">
|
||||
<span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] px-4 py-2 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ Show {formatNumber(count)} more {count === 1 ? 'reply' : 'replies'}</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
@ -88,7 +88,7 @@ const FormEditor = ({submit, progress, setProgress, close, reduced, isOpen, edit
|
||||
}, [editor, close, submitForm]);
|
||||
|
||||
return (
|
||||
<div className={`relative w-full pl-[52px] transition-[padding] delay-100 duration-150 ${reduced && 'pl-0'} ${isOpen && 'pt-[64px] pl-[1px] sm:pl-[52px]'}`}>
|
||||
<div className={`relative w-full pl-[52px] transition-[padding] delay-100 duration-150 ${reduced && 'pl-0'} ${isOpen && 'pl-[1px] pt-[64px] sm:pl-[52px]'}`}>
|
||||
<div
|
||||
className={`w-full rounded-md border border-none border-slate-50 bg-[rgba(255,255,255,0.9)] px-3 py-4 font-sans text-[16.5px] leading-normal shadow-form transition-all delay-100 duration-150 hover:shadow-formxl focus:outline-0 dark:border-none dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-300 dark:shadow-transparent ${isOpen ? 'min-h-[144px] cursor-text pb-[68px] pt-2' : 'min-h-[48px] cursor-pointer overflow-hidden hover:border-slate-300'}
|
||||
`}>
|
||||
@ -97,12 +97,12 @@ const FormEditor = ({submit, progress, setProgress, close, reduced, isOpen, edit
|
||||
editor={editor}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute right-[9px] bottom-[9px] flex space-x-4 transition-[opacity] duration-150">
|
||||
<div className="absolute bottom-[9px] right-[9px] flex space-x-4 transition-[opacity] duration-150">
|
||||
{close &&
|
||||
<button type="button" onClick={close} className="ml-2.5 font-sans text-sm font-medium text-neutral-500 outline-0 dark:text-neutral-400">Cancel</button>
|
||||
}
|
||||
<button
|
||||
className={`flex w-auto items-center justify-center sm:w-[128px] ${submitSize === 'medium' && 'sm:w-[100px]'} ${submitSize === 'small' && 'sm:w-[64px]'} h-[39px] rounded-[6px] border bg-neutral-900 py-2 px-3 text-center font-sans text-sm font-semibold text-white outline-0 transition-[opacity] duration-150 dark:bg-[rgba(255,255,255,0.9)] dark:text-neutral-800`}
|
||||
className={`flex w-auto items-center justify-center sm:w-[128px] ${submitSize === 'medium' && 'sm:w-[100px]'} ${submitSize === 'small' && 'sm:w-[64px]'} h-[39px] rounded-[6px] border bg-neutral-900 px-3 py-2 text-center font-sans text-sm font-semibold text-white outline-0 transition-[opacity] duration-150 dark:bg-[rgba(255,255,255,0.9)] dark:text-neutral-800`}
|
||||
type="button"
|
||||
data-testid="submit-form-button"
|
||||
onClick={submitForm}
|
||||
@ -224,13 +224,13 @@ 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-[10px] 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 pb-2 pt-3 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">
|
||||
<FormEditor close={close} reduced={reduced} isOpen={isOpen} editor={editor} submitText={submitText} submitSize={submitSize} submit={submit} setProgress={setProgress} progress={progress} />
|
||||
</div>
|
||||
<div className='absolute top-1 left-0 flex h-12 w-full items-center justify-start'>
|
||||
<div className='absolute left-0 top-1 flex h-12 w-full items-center justify-start'>
|
||||
<div className="mr-3 grow-0">
|
||||
<Avatar comment={comment} className="pointer-events-none" />
|
||||
</div>
|
||||
|
@ -153,7 +153,7 @@ const AddDetailsPopup = (props) => {
|
||||
}}
|
||||
maxLength="64"
|
||||
/>
|
||||
<div className="mt-6 mb-2 flex flex-row justify-between">
|
||||
<div className="mb-2 mt-6 flex flex-row justify-between">
|
||||
<label htmlFor="comments-name" className="font-sans text-[1.3rem] font-semibold">Expertise</label>
|
||||
<div className={`font-sans text-[1.3rem] text-neutral-400 ${(expertiseCharsLeft === 0) && 'text-red-500'}`}><b>{expertiseCharsLeft}</b> characters left</div>
|
||||
</div>
|
||||
|
@ -3,7 +3,7 @@ import {ReactComponent as CloseIcon} from '../../images/icons/close.svg';
|
||||
|
||||
const CloseButton = (props) => {
|
||||
return (
|
||||
<button type="button" className="absolute top-6 right-6 opacity-20 transition-opacity duration-100 ease-out hover:opacity-40 sm:top-10 sm:right-8" onClick={props.close}>
|
||||
<button type="button" className="absolute right-6 top-6 opacity-20 transition-opacity duration-100 ease-out hover:opacity-40 sm:right-8 sm:top-10" onClick={props.close}>
|
||||
<CloseIcon className="h-[20px] w-[20px]" />
|
||||
</button>
|
||||
);
|
||||
|
@ -39,7 +39,7 @@ const GenericPopup = ({show, children, title, callback}) => {
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="to-rgba(0,0,0,0.1) fixed top-0 left-0 flex h-screen w-screen justify-center overflow-hidden bg-gradient-to-b from-[rgba(0,0,0,0.2)] pt-0 backdrop-blur-[2px] sm:pt-12" onMouseDown={close}>
|
||||
<div className="to-rgba(0,0,0,0.1) fixed left-0 top-0 flex h-screen w-screen justify-center overflow-hidden bg-gradient-to-b from-[rgba(0,0,0,0.2)] pt-0 backdrop-blur-[2px] sm:pt-12" onMouseDown={close}>
|
||||
<Transition.Child
|
||||
enter="transition duration-200 delay-150 linear"
|
||||
enterFrom="translate-y-4 opacity-0"
|
||||
|
@ -54,7 +54,7 @@ const ReportPopup = (props) => {
|
||||
return (
|
||||
<div className="rounded-none relative h-screen w-screen bg-white p-[28px] text-center shadow-modal sm:h-auto sm:w-[500px] sm:rounded-xl sm:p-8 sm:text-left" onMouseDown={stopPropagation}>
|
||||
<h1 className="mb-1 font-sans text-[24px] font-bold tracking-tight text-black">You want to report<span className="hidden sm:inline"> this comment</span>?</h1>
|
||||
<p className="text-base px-4 font-sans leading-9 text-neutral-500 sm:pr-4 sm:pl-0">Your request will be sent to the owner of this site.</p>
|
||||
<p className="text-base px-4 font-sans leading-9 text-neutral-500 sm:pl-0 sm:pr-4">Your request will be sent to the owner of this site.</p>
|
||||
<div className="mt-10 flex flex-col items-center justify-start gap-4 sm:flex-row">
|
||||
<button
|
||||
type="button"
|
||||
|
Loading…
Reference in New Issue
Block a user