yarn lint:js --fix

This commit is contained in:
Alex Gleason 2023-02-06 12:06:44 -06:00
parent 701215d7bc
commit 785612691a
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
33 changed files with 47 additions and 47 deletions

View file

@ -43,7 +43,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction,
return (
<button
className={clsx('flex shrink-0 items-center gap-1.5 bg-gray-100 dark:bg-primary-900 rounded-sm px-1.5 py-1 transition-colors', {
className={clsx('flex shrink-0 items-center gap-1.5 rounded-sm bg-gray-100 px-1.5 py-1 transition-colors dark:bg-primary-900', {
'bg-gray-200 dark:bg-primary-800': hovered,
'bg-primary-200 dark:bg-primary-500': reaction.me,
})}

View file

@ -235,7 +235,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
return menu.map((item, i) => (
<a
className={clsx('flex items-center space-x-2 px-4 py-2.5 text-sm cursor-pointer text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
href='#'
role='button'
tabIndex={0}

View file

@ -244,7 +244,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
<Textarea
ref={this.setTextarea}
className={clsx('transition-[min-height] motion-reduce:transition-none dark:bg-transparent px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
className={clsx('w-full resize-none border-0 px-0 text-gray-800 transition-[min-height] placeholder:text-gray-600 focus:border-0 focus:shadow-none focus:ring-0 motion-reduce:transition-none dark:bg-transparent dark:text-white dark:placeholder:text-gray-600', {
'min-h-[40px]': condensed,
'min-h-[100px]': !condensed,
})}

View file

@ -12,13 +12,13 @@ const Badge: React.FC<IBadge> = ({ title, slug }) => {
return (
<span
data-testid='badge'
className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
className={clsx('inline-flex items-center rounded px-2 py-0.5 text-xs font-medium', {
'bg-fuchsia-700 text-white': slug === 'patron',
'bg-emerald-800 text-white': slug === 'badge:donor',
'bg-black text-white': slug === 'admin',
'bg-cyan-600 text-white': slug === 'moderator',
'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': fallback,
'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
'bg-white/75 text-gray-900': slug === 'opaque',
})}
>
{title}

View file

@ -51,7 +51,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
));
return (
<div className={clsx('w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden', className)}>
<div className={clsx('relative w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-primary-800', className)}>
<div className='absolute top-28 right-3'>
{floatingAction && action}
</div>

View file

@ -10,7 +10,7 @@ interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
const OutlineBox: React.FC<IOutlineBox> = ({ children, className, ...rest }) => {
return (
<div
className={clsx('p-4 rounded-lg border border-solid border-gray-300 dark:border-gray-800', className)}
className={clsx('rounded-lg border border-solid border-gray-300 p-4 dark:border-gray-800', className)}
{...rest}
>
{children}

View file

@ -46,7 +46,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
return (
<label
className={
clsx('flex relative p-2 bg-white dark:bg-primary-900 cursor-pointer rounded-3xl border border-solid hover:bg-primary-50 dark:hover:bg-primary-800/50', {
clsx('relative flex cursor-pointer rounded-3xl border border-solid bg-white p-2 hover:bg-primary-50 dark:bg-primary-900 dark:hover:bg-primary-800/50', {
'border-primary-600 ring-1 ring-primary-600 bg-primary-50 dark:bg-primary-800/50 dark:border-primary-300 dark:ring-primary-300': active,
'border-primary-300 dark:border-primary-500': !active,
})
@ -74,7 +74,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
<div className='col-start-1 row-start-1 flex items-center justify-self-end'>
<span
className={clsx('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
className={clsx('flex h-6 w-6 flex-none items-center justify-center rounded-full border border-solid', {
'bg-primary-600 border-primary-600 dark:bg-primary-300 dark:border-primary-300': active,
'border-primary-300 bg-white dark:bg-primary-900 dark:border-primary-500': !active,
})}

View file

@ -36,7 +36,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
const visible = count > 0 && scrolled;
const classes = clsx('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
const classes = clsx('fixed left-1/2 top-20 z-50 -translate-x-1/2', {
'hidden': !visible,
});

View file

@ -334,7 +334,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<Icon
src={require('@tabler/icons/chevron-down.svg')}
className={clsx('w-4 h-4 text-gray-900 dark:text-gray-100 transition-transform', {
className={clsx('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
'rotate-180': switcher,
})}
/>

View file

@ -79,10 +79,10 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
ref={ref}
type='button'
className={clsx(
'flex items-center p-1 rounded-full rtl:space-x-reverse',
'flex items-center rounded-full p-1 rtl:space-x-reverse',
'text-gray-600 hover:text-gray-600 dark:hover:text-white',
'bg-white dark:bg-transparent',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0',
{
'text-black dark:text-white': active && emoji,
'hover:text-gray-600 dark:hover:text-white': !filteredProps.disabled,

View file

@ -39,7 +39,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
};
/** ClassNames shared between the `<img>` and `<canvas>` elements. */
const baseClassName = clsx('w-full h-full block', {
const baseClassName = clsx('block h-full w-full', {
'object-contain': letterboxed,
'object-cover': !letterboxed,
});
@ -47,7 +47,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
return (
<div
data-testid='still-image-container'
className={clsx(className, 'relative group overflow-hidden isolate')}
className={clsx(className, 'group relative isolate overflow-hidden')}
style={style}
>
<img

View file

@ -12,7 +12,7 @@ const Banner: React.FC<IBanner> = ({ theme, children, className }) => {
return (
<div
data-testid='banner'
className={clsx('fixed bottom-0 left-0 right-0 py-8 z-50', {
className={clsx('fixed inset-x-0 bottom-0 z-50 py-8', {
'backdrop-blur bg-primary-800/80 dark:bg-primary-900/80': theme === 'frosted',
'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-3xl dark:shadow-inset': theme === 'opaque',
}, className)}

View file

@ -47,7 +47,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
return (
<HStack
className={clsx('gap-2 bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max max-w-[100vw] flex-wrap')}
className={clsx('z-[999] w-max max-w-[100vw] flex-wrap gap-2 rounded-full bg-white p-3 shadow-md dark:bg-gray-900')}
>
{Array.from(emojis).map((emoji, i) => (
<EmojiButton

View file

@ -68,7 +68,7 @@ const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
[justifyContentOptions[justifyContent]]: typeof justifyContent !== 'undefined',
// @ts-ignore
[spaces[space]]: typeof space !== 'undefined',
'flex-grow': grow,
'grow': grow,
'flex-wrap': wrap,
}, className)}
/>

View file

@ -25,7 +25,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
<button
ref={ref}
type='button'
className={clsx('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
className={clsx('flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
'bg-white dark:bg-transparent': !transparent,
'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
'opacity-50': filteredProps.disabled,

View file

@ -28,7 +28,7 @@ const MenuList: React.FC<IMenuList> = (props) => {
<MenuItems
onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
className={
clsx(className, 'py-1 bg-white dark:bg-primary-900 rounded-lg shadow-menu')
clsx(className, 'shadow-menu rounded-lg bg-white py-1 dark:bg-primary-900')
}
{...filteredProps}
/>

View file

@ -87,12 +87,12 @@ const Modal: React.FC<IModal> = ({
}, [skipFocus, buttonRef]);
return (
<div data-testid='modal' className={clsx('block w-full p-6 mx-auto text-start align-middle transition-all transform bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
<div data-testid='modal' className={clsx('pointer-events-auto mx-auto block w-full rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all dark:bg-primary-900 dark:text-gray-100', widths[width])}>
<div className='w-full justify-between sm:flex sm:items-start'>
<div className='w-full'>
{title && (
<div
className={clsx('w-full flex items-center gap-2', {
className={clsx('flex w-full items-center gap-2', {
'flex-row-reverse': closePosition === 'left',
})}
>
@ -121,7 +121,7 @@ const Modal: React.FC<IModal> = ({
{confirmationAction && (
<HStack className='mt-5' justifyContent='between' data-testid='modal-actions'>
<div className={clsx({ 'flex-grow': !confirmationFullWidth })}>
<div className={clsx({ 'grow': !confirmationFullWidth })}>
{cancelAction && (
<Button
theme='tertiary'
@ -132,7 +132,7 @@ const Modal: React.FC<IModal> = ({
)}
</div>
<HStack space={2} className={clsx({ 'flex-grow': confirmationFullWidth })}>
<HStack space={2} className={clsx({ 'grow': confirmationFullWidth })}>
{secondaryAction && (
<Button
theme='secondary'

View file

@ -59,7 +59,7 @@ const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.Legacy
[alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
// @ts-ignore
[justifyContentOptions[justifyContent]]: typeof justifyContent !== 'undefined',
'flex-grow': grow,
'grow': grow,
}, className)}
/>
);

View file

@ -271,7 +271,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
const darkMode = useTheme() === 'dark';
const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
const bodyClass = clsx('bg-white dark:bg-gray-800 text-base h-full', {
const bodyClass = clsx('h-full bg-white text-base dark:bg-gray-800', {
'no-reduce-motion': !settings.get('reduceMotion'),
'underline-links': settings.get('underlineLinks'),
'demetricator': settings.get('demetricator'),

View file

@ -74,13 +74,13 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
<>
<div
className={clsx('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
className={clsx('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
'opacity-0': isNearTop,
'opacity-100': !isNearTop,
})}
/>
<div
className={clsx('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
className={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pt-12 pb-8 transition-opacity duration-500 dark:from-gray-900', {
'opacity-0': isNearBottom,
'opacity-100': !isNearBottom,
})}

View file

@ -68,7 +68,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
data-testid='chat-page'
>
<Stack
className={clsx('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
className={clsx('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none sm:col-span-3', {
'hidden sm:block': isSidebarHidden,
})}
>
@ -76,7 +76,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
</Stack>
<Stack
className={clsx('col-span-9 sm:col-span-6 h-full overflow-hidden', {
className={clsx('col-span-9 h-full overflow-hidden sm:col-span-6', {
'hidden sm:block': !isSidebarHidden,
})}
>

View file

@ -63,13 +63,13 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
<>
<div
className={clsx('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
className={clsx('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
'opacity-0': isNearTop,
'opacity-100': !isNearTop,
})}
/>
<div
className={clsx('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
className={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pt-12 pb-8 transition-opacity duration-500 dark:from-gray-900', {
'opacity-0': isNearBottom,
'opacity-100': !isNearBottom,
})}

View file

@ -159,7 +159,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
}, [chat.id, inputRef?.current]);
return (
<Stack className={clsx('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
<Stack className={clsx('flex grow overflow-hidden', className)} onMouseOver={handleMouseOver}>
<div className='flex h-full grow justify-center overflow-hidden'>
<ChatMessageList chat={chat} />
</div>

View file

@ -18,7 +18,7 @@ const Pane: React.FC<IPane> = ({ isOpen = false, index, children, main = false }
return (
<div
className={clsx('flex flex-col shadow-3xl bg-white dark:bg-gray-900 rounded-t-lg fixed bottom-0 right-1 w-96 z-[99]', {
className={clsx('fixed bottom-0 right-1 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl dark:bg-gray-900', {
'h-[550px] max-h-[100vh]': isOpen,
'h-16': !isOpen,
})}

View file

@ -26,9 +26,9 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
const bodyClass = clsx(
'site-preview',
'relative flex justify-center align-center text-base',
'align-center relative flex justify-center text-base',
'border border-solid border-gray-200 dark:border-gray-600',
'h-40 rounded-lg overflow-hidden',
'h-40 overflow-hidden rounded-lg',
{
'bg-white': !dark,
'bg-gray-900': dark,
@ -43,7 +43,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
<FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
</div>
<div className={clsx('flex absolute inset-0 shadow z-10 h-12 lg:h-16', {
<div className={clsx('absolute inset-0 z-10 flex h-12 shadow lg:h-16', {
'bg-white': !dark,
'bg-gray-800': dark,
})}

View file

@ -8,7 +8,7 @@ interface IBackgroundShapes {
/** Gradient that appears in the background of the UI. */
const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
<div className={clsx(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
<div className={clsx(position, 'pointer-events-none inset-x-0 top-0 flex justify-center overflow-hidden')}>
<div className='bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark h-screen w-screen' />
</div>
);

View file

@ -19,7 +19,7 @@ interface IFooterLink {
const FooterLink: React.FC<IFooterLink> = ({ children, className, ...rest }): JSX.Element => {
return (
<div>
<Link className={clsx('text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500 hover:underline', className)} {...rest}>{children}</Link>
<Link className={clsx('text-gray-700 hover:text-gray-800 hover:underline dark:text-gray-600 dark:hover:text-gray-500', className)} {...rest}>{children}</Link>
</div>
);
};

View file

@ -60,7 +60,7 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
{version.poll.options.map((option: any) => (
<HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
<span
className={clsx('inline-block w-4 h-4 flex-none mr-2.5 border border-solid border-primary-600 rounded-full', {
className={clsx('mr-2.5 inline-block h-4 w-4 flex-none rounded-full border border-solid border-primary-600', {
'rounded': poll.multiple,
})}
tabIndex={0}

View file

@ -48,7 +48,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
)}
<div
className={clsx('pt-6 grid gap-4', {
className={clsx('grid gap-4 pt-6', {
'grid-cols-2': isOpen,
'grid-cols-1': !isOpen,
})}

View file

@ -34,7 +34,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
>
{src && <img className='h-full w-full object-cover' src={src} alt='' />}
<HStack
className={clsx('h-full w-full top-0 absolute transition-opacity', {
className={clsx('absolute top-0 h-full w-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
})}
space={3}
@ -71,7 +71,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
alignItems='center'
justifyContent='center'
className={clsx('h-full w-full left-0 top-0 rounded-full absolute transition-opacity', {
className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-500': src,
})}
>

View file

@ -139,13 +139,13 @@ const ReasonStep = (_props: IReasonStep) => {
</div>
<div
className={clsx('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
className={clsx('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
'opacity-0': isNearTop,
'opacity-100': !isNearTop,
})}
/>
<div
className={clsx('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
className={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white pt-12 pb-8 transition-opacity duration-500 dark:from-gray-900', {
'opacity-0': isNearBottom,
'opacity-100': !isNearBottom,
})}

View file

@ -77,7 +77,7 @@ const Navbar = () => {
<HStack
space={4}
alignItems='center'
className={clsx('flex-1 enter lg:items-stretch', {
className={clsx('enter flex-1 lg:items-stretch', {
'justify-center lg:justify-start': account,
'justify-start': !account,
})}

View file

@ -44,7 +44,7 @@ const UploadArea: React.FC<IUploadArea> = ({ active, onClose }) => {
{({ backgroundOpacity, backgroundScale }) => (
<div
className={clsx({
'flex items-center justify-center bg-gray-700 bg-opacity-90 h-full w-full absolute left-0 top-0 z-1000 pointer-events-none': true,
'flex items-center justify-center bg-gray-700/90 h-full w-full absolute left-0 top-0 z-1000 pointer-events-none': true,
'visible': active,
'invisible': !active,
})}