Fixed linting issues

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

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}`}>
<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"/>}
</>
);

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">
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)]">

View File

@ -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>
);

View File

@ -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>
);
};

View File

@ -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>
);

View File

@ -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>

View File

@ -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>

View File

@ -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>
);

View File

@ -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"

View File

@ -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"