TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Fixed linting issues

Browse Source
This commit is contained in:
Simon Backx 2023-06-21 17:25:47 +02:00
parent 346b9ff9e2
commit fbd268272a
10 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/comments-ui/src/components/content/Avatar.js
View File

@ -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}`}> (<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)]" /> <AvatarIcon className="stroke-white dark:stroke-[rgba(0,0,0,0.6)]" />
</div>)} </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"/>}
</> </>
); );

2
apps/comments-ui/src/components/content/CTABox.js
View File

@ -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"> <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. Become a {isPaid && 'paid'} member of <span className="font-semibold">{publication}</span> to start commenting.
</p> </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'} {(isPaid && member) ? 'Upgrade now' : 'Sign up now'}
</button> </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-center font-sans text-sm text-[rgba(0,0,0,0.4)] dark:text-[rgba(255,255,255,0.5)]">

2
apps/comments-ui/src/components/content/Comment.js
View File

@ -150,7 +150,7 @@ function RepliesContainer({comment}) {
} }
return ( return (
<div className="mt-10 mb-4 sm:mb-0"> <div className="mb-4 mt-10 sm:mb-0">
<Replies comment={comment} /> <Replies comment={comment} />
</div> </div>
); );

4
apps/comments-ui/src/components/content/Pagination.js
View File

@ -20,8 +20,8 @@ const Pagination = () => {
} }
return ( 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}> <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)] 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> <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> </button>
); );
}; };

4
apps/comments-ui/src/components/content/RepliesPagination.js
View File

@ -4,8 +4,8 @@ import {formatNumber} from '../../utils/helpers';
const RepliesPagination = ({loadMore, count}) => { const RepliesPagination = ({loadMore, count}) => {
return ( return (
<div className="flex w-full items-center justify-start"> <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"> <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)] 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> <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> </button>
</div> </div>
); );

10
apps/comments-ui/src/components/content/forms/Form.js
View File

@ -88,7 +88,7 @@ const FormEditor = ({submit, progress, setProgress, close, reduced, isOpen, edit
}, [editor, close, submitForm]); }, [editor, close, submitForm]);
return ( 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 <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'} 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} editor={editor}
/> />
</div> </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 && {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 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 <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" type="button"
data-testid="submit-form-button" data-testid="submit-form-button"
onClick={submitForm} onClick={submitForm}
@ -224,13 +224,13 @@ 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-[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="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">
<FormEditor close={close} reduced={reduced} isOpen={isOpen} editor={editor} submitText={submitText} submitSize={submitSize} submit={submit} setProgress={setProgress} progress={progress} /> <FormEditor close={close} reduced={reduced} isOpen={isOpen} editor={editor} submitText={submitText} submitSize={submitSize} submit={submit} setProgress={setProgress} progress={progress} />
</div> </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"> <div className="mr-3 grow-0">
<Avatar comment={comment} className="pointer-events-none" /> <Avatar comment={comment} className="pointer-events-none" />
</div> </div>

2
apps/comments-ui/src/components/popups/AddDetailsPopup.js
View File

@ -153,7 +153,7 @@ const AddDetailsPopup = (props) => {
}} }}
maxLength="64" 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> <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 className={`font-sans text-[1.3rem] text-neutral-400 ${(expertiseCharsLeft === 0) && 'text-red-500'}`}><b>{expertiseCharsLeft}</b> characters left</div>
</div> </div>

2
apps/comments-ui/src/components/popups/CloseButton.js
View File

@ -3,7 +3,7 @@ import {ReactComponent as CloseIcon} from '../../images/icons/close.svg';
const CloseButton = (props) => { const CloseButton = (props) => {
return ( 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]" /> <CloseIcon className="h-[20px] w-[20px]" />
</button> </button>
); );

2
apps/comments-ui/src/components/popups/GenericPopup.js
View File

@ -39,7 +39,7 @@ const GenericPopup = ({show, children, title, callback}) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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 <Transition.Child
enter="transition duration-200 delay-150 linear" enter="transition duration-200 delay-150 linear"
enterFrom="translate-y-4 opacity-0" enterFrom="translate-y-4 opacity-0"

2
apps/comments-ui/src/components/popups/ReportPopup.js
View File

@ -54,7 +54,7 @@ const ReportPopup = (props) => {
return ( 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}> <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> <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"> <div className="mt-10 flex flex-col items-center justify-start gap-4 sm:flex-row">
<button <button
type="button" type="button"