bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Lint

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-04-01 20:37:34 +02:00
parent 817459536d
commit a1cf627bfd
40 changed files with 47 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/account.tsx
View file

@ -193,7 +193,7 @@ const Account = ({
<Avatar src={account.avatar} size={avatarSize} /> <Avatar src={account.avatar} size={avatarSize} />
{emoji && ( {emoji && (
<Emoji <Emoji
className='absolute bottom-0 -right-1.5 h-5 w-5' className='absolute -right-1.5 bottom-0 h-5 w-5'
emoji={emoji} emoji={emoji}
src={emojiUrl} src={emojiUrl}
/> />

2
app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx
View file

@ -69,7 +69,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
}, [itemRef.current, index]); }, [itemRef.current, index]);
if (item === null) { if (item === null) {
return <li className='my-1 mx-2 h-[2px] bg-gray-100 dark:bg-gray-800' />; return <li className='mx-2 my-1 h-[2px] bg-gray-100 dark:bg-gray-800' />;
} }
return ( return (

2
app/soapbox/components/error-boundary.tsx
View file

@ -113,7 +113,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
const errorText = this.getErrorText(); const errorText = this.getErrorText();
return ( return (
<div className='flex h-screen flex-col bg-white pt-16 pb-12 dark:bg-primary-900'> <div className='flex h-screen flex-col bg-white pb-12 pt-16 dark:bg-primary-900'>
<main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'> <main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
<div className='flex shrink-0 justify-center'> <div className='flex shrink-0 justify-center'>
<a href='/' className='inline-flex'> <a href='/' className='inline-flex'>

4
app/soapbox/components/event-preview.tsx
View file

@ -52,7 +52,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
return ( return (
<div className={clsx('relative w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-primary-800', 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'> <div className='absolute right-3 top-28'>
{floatingAction && action} {floatingAction && action}
</div> </div>
<div className='h-40 bg-primary-200 dark:bg-gray-600'> <div className='h-40 bg-primary-200 dark:bg-gray-600'>
@ -65,7 +65,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
{!floatingAction && action} {!floatingAction && action}
</HStack> </HStack>
<div className='flex flex-wrap gap-y-1 gap-x-2 text-gray-700 dark:text-gray-600'> <div className='flex flex-wrap gap-x-2 gap-y-1 text-gray-700 dark:text-gray-600'>
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/user.svg')} /> <Icon src={require('@tabler/icons/user.svg')} />
<HStack space={1} alignItems='center' grow> <HStack space={1} alignItems='center' grow>

2
app/soapbox/components/gdpr-banner.tsx
View file

@ -31,7 +31,7 @@ const GdprBanner: React.FC = () => {
return ( return (
<Banner theme='opaque' className={clsx('transition-transform', { 'translate-y-full': slideout })}> <Banner theme='opaque' className={clsx('transition-transform', { 'translate-y-full': slideout })}>
<div className='flex flex-col space-y-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:space-x-4'> <div className='flex flex-col space-y-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between lg:space-x-4 lg:space-y-0'>
<Stack space={2}> <Stack space={2}>
<Text size='xl' weight='bold'> <Text size='xl' weight='bold'>
<FormattedMessage id='gdpr.title' defaultMessage='{siteTitle} uses cookies' values={{ siteTitle: instance.title }} /> <FormattedMessage id='gdpr.title' defaultMessage='{siteTitle} uses cookies' values={{ siteTitle: instance.title }} />

2
app/soapbox/components/group-card.tsx
View file

@ -37,7 +37,7 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
</Stack> </Stack>
{/* Group Avatar */} {/* Group Avatar */}
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'> <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
<GroupAvatar group={group} size={64} withRing /> <GroupAvatar group={group} size={64} withRing />
</div> </div>

2
app/soapbox/components/groups/popover/group-popover.tsx
View file

@ -53,7 +53,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
</Stack> </Stack>
{/* Group Avatar */} {/* Group Avatar */}
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'> <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
<GroupAvatar group={group} size={64} withRing /> <GroupAvatar group={group} size={64} withRing />
</div> </div>

2
app/soapbox/components/icon-with-counter.tsx
View file

@ -16,7 +16,7 @@ const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, countMax, ..
<Icon id={icon} {...rest as IIcon} /> <Icon id={icon} {...rest as IIcon} />
{count > 0 && ( {count > 0 && (
<span className='absolute -top-2 -right-3'> <span className='absolute -right-3 -top-2'>
<Counter count={count} countMax={countMax} /> <Counter count={count} countMax={countMax} />
</span> </span>
)} )}

2
app/soapbox/components/profile-hover-card.tsx
View file

@ -142,7 +142,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
</Stack> </Stack>
{followedBy && ( {followedBy && (
<div className='absolute top-2 left-2'> <div className='absolute left-2 top-2'>
<Badge <Badge
slug='opaque' slug='opaque'
title={<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />} title={<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />}

2
app/soapbox/components/sidebar-menu.tsx
View file

@ -166,7 +166,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
src={require('@tabler/icons/x.svg')} src={require('@tabler/icons/x.svg')}
ref={closeButtonRef} ref={closeButtonRef}
iconClassName='h-6 w-6' iconClassName='h-6 w-6'
className='absolute top-0 right-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300' className='absolute right-0 top-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300'
/> />
<div className='relative h-full w-full overflow-auto overflow-y-scroll'> <div className='relative h-full w-full overflow-auto overflow-y-scroll'>

2
app/soapbox/components/still-image.tsx
View file

@ -70,7 +70,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
)} )}
{(hoverToPlay && showExt) && ( {(hoverToPlay && showExt) && (
<div className='pointer-events-none absolute left-2 bottom-2 opacity-90 group-hover:hidden'> <div className='pointer-events-none absolute bottom-2 left-2 opacity-90 group-hover:hidden'>
<ExtensionBadge ext='GIF' /> <ExtensionBadge ext='GIF' />
</div> </div>
)} )}

2
app/soapbox/components/ui/file-input/file-input.tsx
View file

@ -8,7 +8,7 @@ const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => {
{...props} {...props}
ref={ref} ref={ref}
type='file' type='file'
className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:py-1.5 file:px-3 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800' className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:px-3 file:py-1.5 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800'
/> />
); );
}); });

2
app/soapbox/components/ui/icon/icon.tsx
View file

@ -23,7 +23,7 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => ( const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => (
<div className='relative flex shrink-0 flex-col' data-testid='icon'> <div className='relative flex shrink-0 flex-col' data-testid='icon'>
{count ? ( {count ? (
<span className='absolute -top-2 -right-3 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'> <span className='absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
<Counter count={count} countMax={countMax} /> <Counter count={count} countMax={countMax} />
</span> </span>
) : null} ) : null}

2
app/soapbox/components/ui/menu/menu.tsx
View file

@ -37,6 +37,6 @@ const MenuList: React.FC<IMenuList> = (props) => {
}; };
/** Divides menu items. */ /** Divides menu items. */
const MenuDivider = () => <hr className='my-1 mx-2 border-t-2 border-gray-100 dark:border-gray-800' />; const MenuDivider = () => <hr className='mx-2 my-1 border-t-2 border-gray-100 dark:border-gray-800' />;
export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink }; export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink };

2
app/soapbox/features/account/components/header.tsx
View file

@ -617,7 +617,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
<div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'> <div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
{renderHeader()} {renderHeader()}
<div className='absolute top-2 left-2'> <div className='absolute left-2 top-2'>
<HStack alignItems='center' space={1}> <HStack alignItems='center' space={1}>
{info} {info}
</HStack> </HStack>

2
app/soapbox/features/admin/tabs/awaiting-approval.tsx
View file

@ -36,7 +36,7 @@ const AwaitingApproval: React.FC = () => {
className='divide-y divide-solid divide-gray-200 dark:divide-gray-800' className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
> >
{accountIds.map(id => ( {accountIds.map(id => (
<div key={id} className='py-4 px-5'> <div key={id} className='px-5 py-4'>
<UnapprovedAccount accountId={id} /> <UnapprovedAccount accountId={id} />
</div> </div>
))} ))}

2
app/soapbox/features/ads/components/ad.tsx
View file

@ -113,7 +113,7 @@ const Ad: React.FC<IAd> = ({ ad }) => {
</Card> </Card>
{showInfo && ( {showInfo && (
<div ref={infobox} className='absolute top-5 right-5 max-w-[234px]'> <div ref={infobox} className='absolute right-5 top-5 max-w-[234px]'>
<Card variant='rounded'> <Card variant='rounded'>
<Stack space={2}> <Stack space={2}>
<Text size='sm' weight='bold'> <Text size='sm' weight='bold'>

2
app/soapbox/features/auth-layout/index.tsx
View file

@ -37,7 +37,7 @@ const AuthLayout = () => {
<main className='relative h-full sm:flex sm:justify-center'> <main className='relative h-full sm:flex sm:justify-center'>
<div className='flex h-full w-full flex-col sm:max-w-lg md:max-w-2xl lg:max-w-6xl'> <div className='flex h-full w-full flex-col sm:max-w-lg md:max-w-2xl lg:max-w-6xl'>
<header className='relative mb-auto flex justify-between py-12 px-2'> <header className='relative mb-auto flex justify-between px-2 py-12'>
<div className='relative z-0 flex-1 px-2 lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center'> <div className='relative z-0 flex-1 px-2 lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center'>
<Link to='/' className='cursor-pointer'> <Link to='/' className='cursor-pointer'>
<SiteLogo alt={instance.title} className='h-7' /> <SiteLogo alt={instance.title} className='h-7' />

2
app/soapbox/features/chats/components/chat-list.tsx
View file

@ -80,7 +80,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
})} })}
/> />
<div <div
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', { 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 pb-8 pt-12 transition-opacity duration-500 dark:from-gray-900', {
'opacity-0': isNearBottom, 'opacity-0': isNearBottom,
'opacity-100': !isNearBottom, 'opacity-100': !isNearBottom,
})} })}

2
app/soapbox/features/chats/components/chat-page/components/chat-page-settings.tsx
View file

@ -47,7 +47,7 @@ const ChatPageSettings = () => {
}; };
return ( return (
<Stack className='h-full space-y-8 py-6 px-4 sm:p-6'> <Stack className='h-full space-y-8 px-4 py-6 sm:p-6'>
<HStack alignItems='center'> <HStack alignItems='center'>
<IconButton <IconButton
src={require('@tabler/icons/arrow-left.svg')} src={require('@tabler/icons/arrow-left.svg')}

2
app/soapbox/features/chats/components/chat-page/components/welcome.tsx
View file

@ -36,7 +36,7 @@ const Welcome = () => {
}; };
return ( return (
<Stack className='h-full overflow-y-auto py-20 px-4 sm:px-0' data-testid='chats-welcome'> <Stack className='h-full overflow-y-auto px-4 py-20 sm:px-0' data-testid='chats-welcome'>
<div className='mx-auto mb-2.5 w-full sm:w-3/5 xl:w-2/5'> <div className='mx-auto mb-2.5 w-full sm:w-3/5 xl:w-2/5'>
<Text align='center' weight='bold' className='mb-6 text-2xl leading-8 md:text-3xl'> <Text align='center' weight='bold' className='mb-6 text-2xl leading-8 md:text-3xl'>
{intl.formatMessage(messages.title, { br: <br /> })} {intl.formatMessage(messages.title, { br: <br /> })}

2
app/soapbox/features/chats/components/chat-search/results.tsx
View file

@ -69,7 +69,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
})} })}
/> />
<div <div
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', { 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 pb-8 pt-12 transition-opacity duration-500 dark:from-gray-900', {
'opacity-0': isNearBottom, 'opacity-0': isNearBottom,
'opacity-100': !isNearBottom, 'opacity-100': !isNearBottom,
})} })}

2
app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
View file

@ -31,7 +31,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
} }
return ( return (
<HStack {...rest} alignItems='center' justifyContent='between' className='h-16 rounded-t-xl py-3 px-4'> <HStack {...rest} alignItems='center' justifyContent='between' className='h-16 rounded-t-xl px-4 py-3'>
<ButtonComp <ButtonComp
className='flex h-16 grow flex-row items-center space-x-1' className='flex h-16 grow flex-row items-center space-x-1'
data-testid='title' data-testid='title'

4
app/soapbox/features/directory/components/account-card.tsx
View file

@ -31,7 +31,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
<div className='flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow dark:divide-primary-700 dark:bg-primary-800'> <div className='flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow dark:divide-primary-700 dark:bg-primary-800'>
<div className='relative'> <div className='relative'>
{followedBy && ( {followedBy && (
<div className='absolute top-2.5 left-2.5'> <div className='absolute left-2.5 top-2.5'>
<Badge <Badge
slug='opaque' slug='opaque'
title={<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />} title={<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />}
@ -59,7 +59,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
<Text <Text
truncate truncate
align='left' align='left'
className={clsx('[&_br]:hidden [&_p]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate')} className={clsx('[&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden')}
dangerouslySetInnerHTML={{ __html: account.note_emojified || '&nbsp;' }} dangerouslySetInnerHTML={{ __html: account.note_emojified || '&nbsp;' }}
/> />
</Stack> </Stack>

2
app/soapbox/features/edit-profile/components/profile-preview.tsx
View file

@ -26,7 +26,7 @@ const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
<Avatar className='bg-gray-400' src={account.avatar} /> <Avatar className='bg-gray-400' src={account.avatar} />
{account.verified && ( {account.verified && (
<div className='absolute -top-1.5 -right-1.5'> <div className='absolute -right-1.5 -top-1.5'>
<VerificationBadge /> <VerificationBadge />
</div> </div>
)} )}

2
app/soapbox/features/group/components/group-header.tsx
View file

@ -109,7 +109,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
<div className='relative'> <div className='relative'>
{renderHeader()} {renderHeader()}
<div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'> <div className='absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2'>
<a href={group.avatar} onClick={handleAvatarClick} target='_blank'> <a href={group.avatar} onClick={handleAvatarClick} target='_blank'>
<GroupAvatar <GroupAvatar
group={group} group={group}

2
app/soapbox/features/group/edit-group.tsx
View file

@ -66,7 +66,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => { const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
return ( return (
<label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'> <label className='absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
{src && <Avatar src={src} size={80} />} {src && <Avatar src={src} size={80} />}
<HStack <HStack
alignItems='center' alignItems='center'

4
app/soapbox/features/groups/components/discover/group-grid-item.tsx
View file

@ -27,7 +27,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
> >
<Link to={`/groups/${group.id}`}> <Link to={`/groups/${group.id}`}>
<Stack <Stack
className='aspect-w-10 aspect-h-7 h-full w-full overflow-hidden rounded-lg' className='aspect-h-7 aspect-w-10 h-full w-full overflow-hidden rounded-lg'
ref={ref} ref={ref}
style={{ minHeight: 180 }} style={{ minHeight: 180 }}
> >
@ -62,7 +62,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
</Stack> </Stack>
<div <div
className='absolute inset-x-0 bottom-0 z-0 flex justify-center rounded-b-lg bg-gradient-to-t from-gray-900 to-transparent pt-12 pb-8 transition-opacity duration-500' className='absolute inset-x-0 bottom-0 z-0 flex justify-center rounded-b-lg bg-gradient-to-t from-gray-900 to-transparent pb-8 pt-12 transition-opacity duration-500'
/> />
</Stack> </Stack>
</Link> </Link>

2
app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
View file

@ -24,7 +24,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
} }
return ( return (
<div className='flex flex-col sm:pt-4 sm:pb-10'> <div className='flex flex-col sm:pb-10 sm:pt-4'>
<ScrollableList <ScrollableList
isLoading={isFetching} isLoading={isFetching}
scrollKey='suggestions' scrollKey='suggestions'

2
app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
View file

@ -14,7 +14,7 @@ const PlaceholderEventPreview = () => {
<Stack className='p-2.5' space={2}> <Stack className='p-2.5' space={2}>
<Text weight='semibold'>{generateText(eventNameLength)}</Text> <Text weight='semibold'>{generateText(eventNameLength)}</Text>
<div className='flex flex-wrap gap-y-1 gap-x-2 text-gray-700 dark:text-gray-600'> <div className='flex flex-wrap gap-x-2 gap-y-1 text-gray-700 dark:text-gray-600'>
<span>{generateText(nameLength)}</span> <span>{generateText(nameLength)}</span>
<span>{generateText(nameLength)}</span> <span>{generateText(nameLength)}</span>
<span>{generateText(nameLength)}</span> <span>{generateText(nameLength)}</span>

2
app/soapbox/features/placeholder/components/placeholder-group-card.tsx
View file

@ -14,7 +14,7 @@ const PlaceholderGroupCard = () => {
<div className='relative grow basis-1/2 rounded-t-lg bg-gray-300 dark:bg-gray-800' /> <div className='relative grow basis-1/2 rounded-t-lg bg-gray-300 dark:bg-gray-800' />
{/* Group Avatar */} {/* Group Avatar */}
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'> <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
<div className='h-16 w-16 rounded-full bg-gray-500 ring-2 ring-white dark:bg-primary-800 dark:ring-primary-900' /> <div className='h-16 w-16 rounded-full bg-gray-500 ring-2 ring-white dark:bg-primary-800 dark:ring-primary-900' />
</div> </div>

2
app/soapbox/features/placeholder/components/placeholder-group-discover.tsx
View file

@ -9,7 +9,7 @@ const PlaceholderGroupDiscover = () => {
return ( return (
<Stack space={2} className='animate-pulse'> <Stack space={2} className='animate-pulse'>
<Stack className='aspect-w-10 aspect-h-7 h-full w-full overflow-hidden rounded-lg'> <Stack className='aspect-h-7 aspect-w-10 h-full w-full overflow-hidden rounded-lg'>
{/* Group Cover Image */} {/* Group Cover Image */}
<div className='absolute inset-0 rounded-t-lg bg-gray-300 object-cover dark:bg-gray-800' /> <div className='absolute inset-0 rounded-t-lg bg-gray-300 object-cover dark:bg-gray-800' />

2
app/soapbox/features/public-layout/components/footer.tsx
View file

@ -21,7 +21,7 @@ const Footer = () => {
}); });
return ( return (
<footer className='relative mx-auto mt-auto max-w-7xl py-12 px-4 sm:px-6 lg:px-8 xl:flex xl:items-center xl:justify-between'> <footer className='relative mx-auto mt-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 xl:flex xl:items-center xl:justify-between'>
<div className='flex flex-wrap justify-center'> <div className='flex flex-wrap justify-center'>
{navlinks.map((link, idx) => { {navlinks.map((link, idx) => {
const url = link.get('url'); const url = link.get('url');

2
app/soapbox/features/public-layout/components/header.tsx
View file

@ -69,7 +69,7 @@ const Header = () => {
<nav className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8' aria-label='Header'> <nav className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8' aria-label='Header'>
<div className='flex w-full items-center justify-between border-b border-indigo-500 py-6 lg:border-none'> <div className='flex w-full items-center justify-between border-b border-indigo-500 py-6 lg:border-none'>
<div className='relative flex w-36 items-center sm:justify-center'> <div className='relative flex w-36 items-center sm:justify-center'>
<div className='absolute -top-24 -left-6 z-0 hidden md:block'> <div className='absolute -left-6 -top-24 z-0 hidden md:block'>
<Sonar /> <Sonar />
</div> </div>

10
app/soapbox/features/public-layout/components/sonar.tsx
View file

@ -3,12 +3,12 @@ import React from 'react';
const Sonar = () => ( const Sonar = () => (
<div className='relative'> <div className='relative'>
<div className='relative h-48 w-48'> <div className='relative h-48 w-48'>
<div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-4 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' /> <div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-4 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
<div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-3 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' /> <div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-3 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
<div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-2 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' /> <div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-2 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
<div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-1 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' /> <div className='pointer-events-none absolute left-0 top-0 h-full w-full animate-sonar-scale-1 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
<div className='absolute top-0 left-0 h-48 w-48 rounded-full bg-white dark:bg-primary-900' /> <div className='absolute left-0 top-0 h-48 w-48 rounded-full bg-white dark:bg-primary-900' />
</div> </div>
</div> </div>
); );

2
app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
View file

@ -217,7 +217,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
{banner ? ( {banner ? (
<> <>
<img className='h-full w-full object-cover' src={banner.url} alt='' /> <img className='h-full w-full object-cover' src={banner.url} alt='' />
<IconButton className='absolute top-2 right-2' src={require('@tabler/icons/x.svg')} onClick={handleClearBanner} /> <IconButton className='absolute right-2 top-2' src={require('@tabler/icons/x.svg')} onClick={handleClearBanner} />
</> </>
) : ( ) : (
<UploadButton disabled={isUploading} onSelectFile={handleFiles} /> <UploadButton disabled={isUploading} onSelectFile={handleFiles} />

2
app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
View file

@ -65,7 +65,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => { const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
return ( return (
<label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-4 ring-white dark:ring-primary-900'> <label className='absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-4 ring-white dark:ring-primary-900'>
{src && <Avatar src={src} size={80} />} {src && <Avatar src={src} size={80} />}
<HStack <HStack
alignItems='center' alignItems='center'

2
app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
View file

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

2
app/soapbox/features/ui/components/navbar.tsx
View file

@ -67,7 +67,7 @@ const Navbar = () => {
<div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'> <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
<div className='relative flex h-12 justify-between lg:h-16'> <div className='relative flex h-12 justify-between lg:h-16'>
{account && ( {account && (
<div className='absolute inset-y-0 left-0 flex items-center rtl:right-0 rtl:left-auto lg:hidden'> <div className='absolute inset-y-0 left-0 flex items-center rtl:left-auto rtl:right-0 lg:hidden'>
<button onClick={onOpenSidebar}> <button onClick={onOpenSidebar}>
<Avatar src={account.avatar} size={34} /> <Avatar src={account.avatar} size={34} />
</button> </button>

2
app/soapbox/features/ui/components/promo-panel.tsx
View file

@ -20,7 +20,7 @@ const PromoPanel: React.FC = () => {
{promoItems.map((item, i) => ( {promoItems.map((item, i) => (
<Text key={i}> <Text key={i}>
<a className='flex items-center' href={item.url} target='_blank'> <a className='flex items-center' href={item.url} target='_blank'>
<ForkAwesomeIcon id={item.icon} className='mr-2 flex-none text-lg rtl:mr-0 rtl:ml-2' fixedWidth /> <ForkAwesomeIcon id={item.icon} className='mr-2 flex-none text-lg rtl:ml-2 rtl:mr-0' fixedWidth />
{item.textLocales.get(locale) || item.text} {item.textLocales.get(locale) || item.text}
</a> </a>
</Text> </Text>