moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

eslint --fix

This commit is contained in:
Alex Gleason 2024-10-18 22:00:13 -05:00
parent 588b86eb84
commit 6d5b4189e5
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
141 changed files with 248 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/account-search.tsx
View File

@ -77,12 +77,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
>
<SvgIcon
src={require('@tabler/icons/outline/search.svg')}
className={clsx('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
className={clsx('size-4 text-gray-400', { hidden: !isEmpty() })}
/>
<SvgIcon
src={require('@tabler/icons/outline/x.svg')}
className={clsx('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
className={clsx('size-4 text-gray-400', { hidden: isEmpty() })}
aria-label={intl.formatMessage(messages.placeholder)}
/>
</div>

6
src/components/account.tsx
View File

@ -50,7 +50,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
return (
<button
className='h-4 w-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
className='size-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
onClick={handleClick}
disabled={disabled}
>
@ -208,7 +208,7 @@ const Account = ({
<Avatar src={account.avatar} size={avatarSize} />
{emoji && (
<Emoji
className='absolute -right-1.5 bottom-0 h-5 w-5'
className='absolute -right-1.5 bottom-0 size-5'
emoji={emoji}
src={emojiUrl}
/>
@ -275,7 +275,7 @@ const Account = ({
<>
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
<Icon className='h-5 w-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
<Icon className='size-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
</>
) : null}

2
src/components/announcements/reaction.tsx
View File

@ -54,7 +54,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, sty
title={`:${shortCode}:`}
style={style}
>
<span className='block h-4 w-4'>
<span className='block size-4'>
<Emoji hovered={hovered} emoji={reaction.name} emojiMap={emojiMap} />
</span>
<span className='block min-w-[9px] text-center text-xs font-medium text-primary-600 dark:text-white'>

4
src/components/authorize-reject-buttons.tsx
View File

@ -165,8 +165,8 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon,
src={isLoading ? require('@tabler/icons/filled/player-stop.svg') : icon}
onClick={action}
theme='seamless'
className='h-10 w-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
iconClassName={clsx('h-6 w-6', {
className='size-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
iconClassName={clsx('size-6', {
'text-primary-500': theme === 'primary',
'text-danger-600': theme === 'danger',
})}

4
src/components/big-card.tsx
View File

@ -16,9 +16,9 @@ const BigCard: React.FC<IBigCard> = ({ title, subtitle, children, onClose }) =>
return (
<Card variant='rounded' size='xl'>
<CardBody className='relative'>
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
<Stack space={2}>
{onClose && (<IconButton src={closeIcon} className='absolute right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' onClick={onClose} />)}
{onClose && (<IconButton src={closeIcon} className='absolute right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' onClick={onClose} />)}
<Text size='2xl' align='center' weight='bold'>{title}</Text>
{subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}
</Stack>

4
src/components/dropdown-menu/dropdown-menu-item.tsx
View File

@ -92,12 +92,12 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
})
}
>
{item.icon && <Icon src={item.icon} className='mr-3 h-5 w-5 flex-none rtl:ml-3 rtl:mr-0' />}
{item.icon && <Icon src={item.icon} className='mr-3 size-5 flex-none rtl:ml-3 rtl:mr-0' />}
<span className='truncate font-medium'>{item.text}</span>
{item.count ? (
<span className='ml-auto h-5 w-5 flex-none'>
<span className='ml-auto size-5 flex-none'>
<Counter count={item.count} />
</span>
) : null}

2
src/components/dropdown-menu/dropdown-menu.tsx
View File

@ -320,7 +320,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
<div
ref={arrowRef}
style={arrowProps}
className='pointer-events-none absolute z-[-1] h-3 w-3 bg-white black:bg-black dark:bg-gray-900'
className='pointer-events-none absolute z-[-1] size-3 bg-white black:bg-black dark:bg-gray-900'
/>
</div>
</Portal>

2
src/components/emoji-graphic.tsx
View File

@ -11,7 +11,7 @@ const EmojiGraphic: React.FC<IEmojiGraphic> = ({ emoji }) => {
return (
<div className='flex items-center justify-center'>
<div className='rounded-full bg-gray-100 p-8 dark:bg-gray-800'>
<Emoji className='h-24 w-24' emoji={emoji} />
<Emoji className='size-24' emoji={emoji} />
</div>
</div>
);

2
src/components/event-preview.tsx
View File

@ -56,7 +56,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
{floatingAction && action}
</div>
<div className='h-40 bg-primary-200 dark:bg-gray-600'>
{banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
{banner && <img className='size-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
</div>
<Stack className='p-2.5' space={2}>
<HStack space={2} alignItems='center' justifyContent='between'>

2
src/components/gameboy.tsx
View File

@ -120,7 +120,7 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
<canvas
ref={canvas}
onClick={handleCanvasClick}
className={clsx('h-full w-full bg-black ', {
className={clsx('size-full bg-black ', {
'object-contain': aspect === 'normal',
'object-cover': aspect === 'stretched',
})}

4
src/components/group-card.tsx
View File

@ -24,7 +24,7 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
<Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
<GroupHeaderImage
group={group}
className='absolute inset-0 h-full w-full rounded-t-lg object-cover'
className='absolute inset-0 size-full rounded-t-lg object-cover'
/>
</Stack>
@ -39,7 +39,7 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
<Text size='lg' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
{group.relationship?.pending_requests && (
<div className='h-2 w-2 rounded-full bg-secondary-500' />
<div className='size-2 rounded-full bg-secondary-500' />
)}
</HStack>

2
src/components/groups/popover/group-popover.tsx
View File

@ -52,7 +52,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
<Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
{group.header && (
<img
className='absolute inset-0 h-full w-full rounded-t-lg object-cover'
className='absolute inset-0 size-full rounded-t-lg object-cover'
src={group.header}
alt=''
/>

4
src/components/media-gallery.tsx
View File

@ -163,7 +163,7 @@ const Item: React.FC<IItem> = ({
const filename = truncateFilename(attachment.url, MAX_FILENAME_LENGTH);
const attachmentIcon = (
<Icon
className='h-16 w-16 text-gray-800 dark:text-gray-200'
className='size-16 text-gray-800 dark:text-gray-200'
src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || require('@tabler/icons/outline/paperclip.svg')}
/>
);
@ -195,7 +195,7 @@ const Item: React.FC<IItem> = ({
target='_blank'
>
<StillImage
className='h-full w-full'
className='size-full'
src={mediaPreview ? attachment.preview_url : attachment.url}
alt={attachment.description}
letterboxed={letterboxed}

2
src/components/pending-items-row.tsx
View File

@ -44,7 +44,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
<Icon
src={require('@tabler/icons/outline/chevron-right.svg')}
className='h-5 w-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
className='size-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
/>
</HStack>
</Link>

6
src/components/polls/poll-option.tsx
View File

@ -75,7 +75,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 h-6 w-6 flex-none items-center justify-center rounded-full border border-solid', {
className={clsx('flex size-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,
})}
@ -86,7 +86,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
aria-label={option.title}
>
{active && (
<Icon src={require('@tabler/icons/outline/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
<Icon src={require('@tabler/icons/outline/check.svg')} className='size-4 text-white dark:text-primary-900' />
)}
</span>
</div>
@ -145,7 +145,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
<Icon
src={require('@tabler/icons/outline/circle-check.svg')}
alt={intl.formatMessage(messages.voted)}
className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
className='size-4 text-primary-600 dark:fill-white dark:text-primary-800'
/>
) : (
<div className='svg-icon' />

8
src/components/preview-card.tsx
View File

@ -148,7 +148,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
const canvas = (
<Blurhash
className='absolute inset-0 -z-10 h-full w-full'
className='absolute inset-0 -z-10 size-full'
hash={card.blurhash}
/>
);
@ -185,7 +185,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
<button onClick={handleEmbedClick} className='appearance-none text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'>
<Icon
src={iconVariant}
className='h-6 w-6 text-inherit'
className='size-6 text-inherit'
/>
</button>
@ -199,7 +199,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
>
<Icon
src={require('@tabler/icons/outline/external-link.svg')}
className='h-6 w-6 text-inherit'
className='size-6 text-inherit'
/>
</a>
)}
@ -220,7 +220,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
embed = (
<div className={clsx(
'status-card__image',
'w-full flex-none rounded-l md:h-auto md:w-auto md:flex-auto',
'w-full flex-none rounded-l md:size-auto md:flex-auto',
{
'h-auto': horizontal,
'h-[200px]': !horizontal,

2
src/components/profile-hover-card.tsx
View File

@ -124,7 +124,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
<HStack alignItems='center' space={0.5}>
<Icon
src={require('@tabler/icons/outline/calendar.svg')}
className='h-4 w-4 text-gray-800 dark:text-gray-200'
className='size-4 text-gray-800 dark:text-gray-200'
/>
<Text size='sm' title={intl.formatDate(account.created_at, dateFormatOptions)}>

2
src/components/quoted-status-indicator.tsx
View File

@ -18,7 +18,7 @@ const QuotedStatusIndicator: React.FC<IQuotedStatusIndicator> = ({ statusId }) =
return (
<HStack alignItems='center' space={1}>
<Icon className='h-5 w-5' src={require('@tabler/icons/outline/quote.svg')} aria-hidden />
<Icon className='size-5' src={require('@tabler/icons/outline/quote.svg')} aria-hidden />
<Text truncate>{status.url}</Text>
</HStack>
);

2
src/components/radio.tsx
View File

@ -31,7 +31,7 @@ const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChang
checked={checked}
onChange={onChange}
value={value}
className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
className='size-4 border-gray-300 text-primary-600 focus:ring-primary-500'
/>
</ListItem>
);

2
src/components/scroll-top-button.tsx
View File

@ -91,7 +91,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
onClick={handleClick}
>
<Icon
className='h-4 w-4'
className='size-4'
src={require('@tabler/icons/outline/arrow-bar-to-up.svg')}
/>

8
src/components/sidebar-menu.tsx
View File

@ -56,7 +56,7 @@ const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick, co
const body = (
<HStack space={2} alignItems='center'>
<div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
<Icon src={icon} className='h-5 w-5 text-primary-500' count={count} />
<Icon src={icon} className='size-5 text-primary-500' count={count} />
</div>
<Text tag='span' weight='medium' theme='inherit'>{text}</Text>
@ -170,7 +170,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
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 size-full overflow-auto overflow-y-scroll'>
<div className='p-4'>
<Stack space={4}>
<Link to={`/@${account.acct}`} onClick={onClose}>
@ -348,7 +348,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<Icon
src={require('@tabler/icons/outline/chevron-down.svg')}
className={clsx('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
className={clsx('size-4 text-gray-900 transition-transform dark:text-gray-100', {
'rotate-180': switcher,
})}
/>
@ -360,7 +360,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{otherAccounts.map(account => renderAccount(account))}
<NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
<Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
<Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink>
</div>

2
src/components/sidebar-navigation-link.tsx
View File

@ -50,7 +50,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
src={(isActive && activeIcon) || icon}
count={count}
countMax={countMax}
className={clsx('h-5 w-5', {
className={clsx('size-5', {
'text-gray-600 black:text-white dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400': !isActive,
'text-primary-500 dark:text-primary-400': isActive,
})}

2
src/components/site-error-boundary.tsx
View File

@ -84,7 +84,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
<div className='py-8'>
<div className='mx-auto max-w-xl space-y-2 text-center'>
<h1 className='text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-500'>
<h1 className='text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-500 sm:text-4xl'>
<FormattedMessage id='alert.unexpected.message' defaultMessage='Something went wrong.' />
</h1>
<p className='text-lg text-gray-700 dark:text-gray-600'>

4
src/components/status-action-button.tsx
View File

@ -44,8 +44,8 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
const renderIcon = () => {
if (emoji) {
return (
<span className='flex h-6 w-6 items-center justify-center'>
<Emoji className='h-full w-full p-0.5' emoji={emoji.name} src={emoji.url} />
<span className='flex size-6 items-center justify-center'>
<Emoji className='size-full p-0.5' emoji={emoji.name} src={emoji.url} />
</span>
);
} else {

2
src/components/status-content.tsx
View File

@ -27,7 +27,7 @@ interface IReadMoreButton {
const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
<button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
<FormattedMessage id='status.read_more' defaultMessage='Read more' />
<Icon className='inline-block h-5 w-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
<Icon className='inline-block size-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
</button>
);

8
src/components/status.tsx
View File

@ -212,7 +212,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
avatarSize={avatarSize}
icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='h-4 w-4 text-green-600' />}
icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
text={
<FormattedMessage
id='status.reblogged_by_with_group'
@ -252,7 +252,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
avatarSize={avatarSize}
icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='h-4 w-4 text-green-600' />}
icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
text={
<FormattedMessage
id='status.reblogged_by'
@ -279,7 +279,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
avatarSize={avatarSize}
icon={<Icon src={require('@tabler/icons/outline/pinned.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-400' />}
icon={<Icon src={require('@tabler/icons/outline/pinned.svg')} className='size-4 text-gray-600 dark:text-gray-400' />}
text={
<FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
}
@ -289,7 +289,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
avatarSize={avatarSize}
icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='h-4 w-4 text-primary-600 dark:text-accent-blue' />}
icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
text={
<FormattedMessage
id='status.group'

2
src/components/statuses/status-info.tsx
View File

@ -25,7 +25,7 @@ const StatusInfo = (props: IStatusInfo) => {
<HStack
space={3}
alignItems='center'
className='cursor-default text-xs font-medium text-gray-700 rtl:space-x-reverse dark:text-gray-600'
className='cursor-default text-xs font-medium text-gray-700 dark:text-gray-600 rtl:space-x-reverse'
>
<div
className='flex justify-end'

2
src/components/still-image.tsx
View File

@ -40,7 +40,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
};
/** ClassNames shared between the `<img>` and `<canvas>` elements. */
const baseClassName = clsx('block h-full w-full', {
const baseClassName = clsx('block size-full', {
'object-contain': letterboxed,
'object-cover': !letterboxed,
});

4
src/components/ui/accordion/accordion.tsx
View File

@ -67,13 +67,13 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
<button onClick={handleAction} title={actionLabel}>
<Icon
src={actionIcon}
className='h-5 w-5 text-gray-700 dark:text-gray-600'
className='size-5 text-gray-700 dark:text-gray-600'
/>
</button>
)}
<Icon
src={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
className='h-5 w-5 text-gray-700 dark:text-gray-600'
className='size-5 text-gray-700 dark:text-gray-600'
/>
</HStack>
</button>

2
src/components/ui/avatar/avatar.tsx
View File

@ -36,7 +36,7 @@ const Avatar = (props: IAvatar) => {
>
<Icon
src={require('@tabler/icons/outline/photo-off.svg')}
className='h-4 w-4 text-gray-500 dark:text-gray-700'
className='size-4 text-gray-500 dark:text-gray-700'
/>
</div>
);

2
src/components/ui/button/button.tsx
View File

@ -66,7 +66,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
return null;
}
return <Icon src={icon} className='h-4 w-4' element={iconElement} />;
return <Icon src={icon} className='size-4' element={iconElement} />;
};
const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback((event) => {

2
src/components/ui/card/card.tsx
View File

@ -72,7 +72,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
return (
<Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
<SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
<SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-6 rtl:rotate-180' />
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
</Comp>
);

4
src/components/ui/carousel/carousel.tsx
View File

@ -69,7 +69,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
>
<Icon
src={require('@tabler/icons/outline/chevron-left.svg')}
className='h-5 w-5 text-black dark:text-white'
className='size-5 text-black dark:text-white'
/>
</button>
</div>
@ -101,7 +101,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
>
<Icon
src={require('@tabler/icons/outline/chevron-right.svg')}
className='h-5 w-5 text-black dark:text-white'
className='size-5 text-black dark:text-white'
/>
</button>
</div>

2
src/components/ui/checkbox/checkbox.tsx
View File

@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
{...props}
ref={ref}
type='checkbox'
className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
className='size-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
/>
);
});

2
src/components/ui/emoji-selector/emoji-selector.tsx
View File

@ -32,7 +32,7 @@ const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabInd
return (
<button className={clsx(className)} onClick={handleClick} tabIndex={tabIndex}>
<EmojiComponent className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} />
<EmojiComponent className='size-6 duration-100 hover:scale-110' emoji={emoji} />
</button>
);
};

4
src/components/ui/input/input.tsx
View File

@ -73,7 +73,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
>
{icon ? (
<div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>
<Icon src={icon} className='h-4 w-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
<Icon src={icon} className='size-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
</div>
) : null}
@ -124,7 +124,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
>
<SvgIcon
src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}
className='h-4 w-4'
className='size-4'
/>
</button>
</div>

4
src/components/ui/language-dropdown/language-dropdown.tsx
View File

@ -47,11 +47,11 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
return (
<DropdownMenu items={newMenu} modal>
{language ? (
<button type='button' className='flex h-full rounded-lg border-2 border-gray-700 px-1 text-gray-700 hover:cursor-pointer hover:border-gray-500 hover:text-gray-500 sm:mr-4 dark:border-white dark:text-white dark:hover:border-gray-700' onClick={() => dispatch(openDropdownMenu())}>
<button type='button' className='flex h-full rounded-lg border-2 border-gray-700 px-1 text-gray-700 hover:cursor-pointer hover:border-gray-500 hover:text-gray-500 dark:border-white dark:text-white dark:hover:border-gray-700 sm:mr-4' onClick={() => dispatch(openDropdownMenu())}>
{language.toUpperCase()}
</button>
) : (
<SvgIcon src={require('@tabler/icons/outline/world.svg')} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 sm:mr-4 dark:text-white' />
<SvgIcon src={require('@tabler/icons/outline/world.svg')} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 dark:text-white sm:mr-4' />
)}
</DropdownMenu>
);

4
src/components/ui/modal/modal.tsx
View File

@ -118,7 +118,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
src={require('@tabler/icons/outline/arrow-left.svg')}
title={intl.formatMessage(messages.back)}
onClick={onBack}
className='text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
/>
)}
@ -131,7 +131,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
src={closeIcon}
title={intl.formatMessage(messages.close)}
onClick={onClose}
className='text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
/>
)}
</div>

2
src/components/ui/radio-button/radio-button.tsx
View File

@ -25,7 +25,7 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
value={value}
checked={checked}
onChange={onChange}
className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
className='size-4 border-gray-300 text-primary-600 focus:ring-primary-500'
/>
<label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>

2
src/components/ui/select/select.tsx
View File

@ -14,7 +14,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
<select
ref={ref}
className={clsx(
'truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500',
'truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm',
className,
{
'w-full': full,

2
src/components/ui/slider/slider.tsx
View File

@ -60,7 +60,7 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
<div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
<div className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
<span
className='absolute top-1/2 z-[9] -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
className='absolute top-1/2 z-[9] -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
tabIndex={0}
style={{ left: `${value * 100}%` }}
/>

2
src/components/ui/tag-input/tag-input.tsx
View File

@ -45,7 +45,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
return (
<div className='relative mt-1 grow shadow-sm'>
<HStack
className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500'
className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
space={2}
wrap
>

2
src/components/ui/textarea/textarea.tsx
View File

@ -91,7 +91,7 @@ const Textarea = React.forwardRef(({
ref={ref}
rows={rows}
onChange={handleChange}
className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 sm:text-sm dark:text-gray-100 dark:placeholder:text-gray-600', {
className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm', {
'bg-white dark:bg-transparent shadow-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
theme === 'default',
'bg-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',

8
src/components/ui/toast/toast.tsx
View File

@ -43,7 +43,7 @@ const Toast = (props: IToast) => {
return (
<Icon
src={require('@tabler/icons/outline/circle-check.svg')}
className='h-6 w-6 text-success-500 dark:text-success-400'
className='size-6 text-success-500 dark:text-success-400'
aria-hidden
/>
);
@ -51,7 +51,7 @@ const Toast = (props: IToast) => {
return (
<Icon
src={require('@tabler/icons/outline/info-circle.svg')}
className='h-6 w-6 text-primary-600 dark:text-accent-blue'
className='size-6 text-primary-600 dark:text-accent-blue'
aria-hidden
/>
);
@ -59,7 +59,7 @@ const Toast = (props: IToast) => {
return (
<Icon
src={require('@tabler/icons/outline/alert-circle.svg')}
className='h-6 w-6 text-danger-600'
className='size-6 text-danger-600'
aria-hidden
/>
);
@ -143,7 +143,7 @@ const Toast = (props: IToast) => {
data-testid='toast-dismiss'
>
<span className='sr-only'><FormattedMessage id='lightbox.close' defaultMessage='Close' /></span>
<Icon src={require('@tabler/icons/outline/x.svg')} className='h-5 w-5' />
<Icon src={require('@tabler/icons/outline/x.svg')} className='size-5' />
</button>
</div>
</HStack>

2
src/components/ui/widget/widget.tsx
View File

@ -52,7 +52,7 @@ const Widget: React.FC<IWidget> = ({
<WidgetTitle title={title} />
{action || (onActionClick && (
<IconButton
className='ml-2 h-6 w-6 text-black rtl:rotate-180 dark:text-white'
className='ml-2 size-6 text-black dark:text-white rtl:rotate-180'
src={actionIcon}
onClick={onActionClick}
title={actionTitle}

2
src/components/upload-progress.tsx
View File

@ -14,7 +14,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
<HStack alignItems='center' space={2}>
<Icon
src={require('@tabler/icons/outline/cloud-upload.svg')}
className='h-7 w-7 text-gray-500'
className='size-7 text-gray-500'
/>
<Stack space={1}>

4
src/components/upload.tsx
View File

@ -148,7 +148,7 @@ const Upload: React.FC<IUpload> = ({
const uploadIcon = mediaType === 'unknown' && (
<Icon
className='mx-auto my-12 h-16 w-16 text-gray-800 dark:text-gray-200'
className='mx-auto my-12 size-16 text-gray-800 dark:text-gray-200'
src={MIMETYPE_ICONS[mimeType || ''] || defaultIcon}
/>
);
@ -225,7 +225,7 @@ const Upload: React.FC<IUpload> = ({
'opacity-100': !active,
})}
>
<Icon className='h-4 w-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
<Icon className='size-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
<FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
</span>
)}

2
src/features/account-gallery/components/media-item.tsx
View File

@ -68,7 +68,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
src={attachment.preview_url}
alt={attachment.description}
style={{ objectPosition: `${x}% ${y}%` }}
className='h-full w-full overflow-hidden rounded-lg'
className='size-full overflow-hidden rounded-lg'
/>
);
} else if (['gifv', 'video'].indexOf(attachment.type) !== -1) {

10
src/features/account/components/header.tsx
View File

@ -114,14 +114,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
return (
<div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
<div>
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
</div>
<div className='px-4 sm:px-6'>
<HStack alignItems='bottom' space={5} className='-mt-12'>
<div className='relative flex'>
<div
className='h-24 w-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
className='size-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
/>
</div>
</HStack>
@ -660,7 +660,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
)}
<div>
<div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
<div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
{renderHeader()}
<div className='absolute left-2 top-2'>
@ -678,12 +678,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
<Avatar
src={account.avatar}
size={96}
className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white dark:bg-primary-900 dark:ring-primary-900'
className='relative size-24 rounded-full bg-white ring-4 ring-white dark:bg-primary-900 dark:ring-primary-900'
/>
</a>
{account.verified && (
<div className='absolute bottom-0 right-0'>
<VerificationBadge className='h-6 w-6 rounded-full bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900' />
<VerificationBadge className='size-6 rounded-full bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900' />
</div>
)}
</div>

2
src/features/admin/tabs/dashboard.tsx
View File

@ -152,7 +152,7 @@ const Dashboard: React.FC = () => {
<span>{sourceCode.displayName} {sourceCode.version}</span>
<Icon
className='h-4 w-4'
className='size-4'
src={require('@tabler/icons/outline/external-link.svg')}
/>
</a>

2
src/features/aliases/components/search.tsx
View File

@ -44,7 +44,7 @@ const Search: React.FC = () => {
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
<input
className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500'
className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
type='text'
value={value}
onChange={handleChange}

2
src/features/auth-login/components/consumers-list.tsx
View File

@ -16,7 +16,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
if (providers.length > 0) {
return (
<Card className='bg-gray-50 p-4 black:bg-black sm:rounded-xl dark:bg-primary-800'>
<Card className='bg-gray-50 p-4 black:bg-black dark:bg-primary-800 sm:rounded-xl'>
<Text size='xs' theme='muted'>
<FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
</Text>

2
src/features/bookmark-folders/index.tsx
View File

@ -55,7 +55,7 @@ const BookmarkFolders: React.FC = () => {
<Emoji
emoji={folder.emoji}
src={folder.emoji_url || undefined}
className='h-5 w-5 flex-none'
className='size-5 flex-none'
/>
) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
<span>{folder.name}</span>

2
src/features/chats/components/chat-list-item.tsx
View File

@ -137,7 +137,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
<>
{chat.last_message.unread && (
<div
className='h-2 w-2 rounded-full bg-secondary-500'
className='size-2 rounded-full bg-secondary-500'
data-testid='chat-unread-indicator'
/>
)}

2
src/features/chats/components/chat-message-list-intro.tsx
View File

@ -107,7 +107,7 @@ const ChatMessageListIntro = () => {
</HStack>
) : (
<HStack justifyContent='center' alignItems='center' space={1} className='shrink-0'>
<Icon src={require('@tabler/icons/outline/clock.svg')} className='h-4 w-4 text-gray-600' />
<Icon src={require('@tabler/icons/outline/clock.svg')} className='size-4 text-gray-600' />
{chat.message_expiration && (
<Text size='sm' theme='muted'>
{intl.formatMessage(messages.messageLifespan, { day: secondsToDays(chat.message_expiration) })}

8
src/features/chats/components/chat-message.tsx
View File

@ -223,7 +223,7 @@ const ChatMessage = (props: IChatMessage) => {
>
<Icon
src={require('@tabler/icons/outline/mood-smile.svg')}
className='h-4 w-4'
className='size-4'
/>
</button>
</ChatMessageReactionWrapper>
@ -245,7 +245,7 @@ const ChatMessage = (props: IChatMessage) => {
>
<Icon
src={require('@tabler/icons/outline/dots.svg')}
className='h-4 w-4'
className='size-4'
/>
</button>
</DropdownMenu>
@ -364,7 +364,7 @@ const ChatMessage = (props: IChatMessage) => {
<Icon
src={require('@tabler/icons/outline/check.svg')}
strokeWidth={3}
className='h-2.5 w-2.5'
className='size-2.5'
/>
</span>
) : (
@ -372,7 +372,7 @@ const ChatMessage = (props: IChatMessage) => {
<Icon
src={require('@tabler/icons/outline/check.svg')}
strokeWidth={3}
className='h-2.5 w-2.5'
className='size-2.5'
/>
</span>
)}

4
src/features/chats/components/chat-page/chat-page.tsx
View File

@ -60,7 +60,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
<div
ref={containerRef}
style={{ height }}
className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg black:bg-transparent sm:rounded-t-xl dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'
className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg black:bg-transparent dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
>
{isOnboarded ? (
<div
@ -68,7 +68,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
data-testid='chat-page'
>
<Stack
className={clsx('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 black:bg-black sm:col-span-3 dark:bg-gray-900 dark:bg-none', {
className={clsx('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 black:bg-black dark:bg-gray-900 dark:bg-none sm:col-span-3', {
'hidden sm:block': isSidebarHidden,
})}
>

6
src/features/chats/components/chat-page/components/chat-page-main.tsx
View File

@ -121,7 +121,7 @@ const ChatPageMain = () => {
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/outline/arrow-left.svg')}
className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => history.push('/chats')}
/>
@ -213,7 +213,7 @@ const ChatPageMain = () => {
className='!px-0 hover:!bg-transparent'
>
<div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
<Icon src={require('@tabler/icons/outline/ban.svg')} className='h-5 w-5' />
<Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
<span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
</div>
</MenuItem>
@ -225,7 +225,7 @@ const ChatPageMain = () => {
className='!px-0 hover:!bg-transparent'
>
<div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
<Icon src={require('@tabler/icons/outline/logout.svg')} className='h-5 w-5' />
<Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
<span>{intl.formatMessage(messages.leaveChat)}</span>
</div>
</MenuItem>

2
src/features/chats/components/chat-page/components/chat-page-new.tsx
View File

@ -24,7 +24,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/outline/arrow-left.svg')}
className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => history.push('/chats')}
/>

2
src/features/chats/components/chat-page/components/chat-page-settings.tsx
View File

@ -51,7 +51,7 @@ const ChatPageSettings = () => {
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/outline/arrow-left.svg')}
className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => history.push('/chats')}
/>

2
src/features/chats/components/chat-pending-upload.tsx
View File

@ -9,7 +9,7 @@ interface IChatPendingUpload {
/** Displays a loading thumbnail for an upload in the chat composer. */
const ChatPendingUpload: React.FC<IChatPendingUpload> = ({ progress }) => {
return (
<div className='relative isolate inline-flex h-24 w-24 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-primary-900'>
<div className='relative isolate inline-flex size-24 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-primary-900'>
<ProgressBar progress={progress} size='sm' />
</div>
);

2
src/features/chats/components/chat-search-input.tsx
View File

@ -35,7 +35,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
<button onClick={onClear}>
<Icon
src={value.length ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
className='h-4 w-4 text-gray-700 dark:text-gray-600'
className='size-4 text-gray-700 dark:text-gray-600'
aria-hidden='true'
/>
</button>

2
src/features/chats/components/chat-search/chat-search.tsx
View File

@ -102,7 +102,7 @@ const ChatSearch = (props: IChatSearch) => {
<button onClick={clearValue}>
<Icon
src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
className='h-4 w-4 text-gray-700 dark:text-gray-600'
className='size-4 text-gray-700 dark:text-gray-600'
aria-hidden='true'
/>
</button>

6
src/features/chats/components/chat-textarea.tsx
View File

@ -39,9 +39,9 @@ const ChatTextarea: React.FC<IChatTextarea> = React.forwardRef(({
bg-white text-gray-900
shadow-sm placeholder:text-gray-600
focus-within:border-primary-500
focus-within:ring-1 focus-within:ring-primary-500 sm:text-sm dark:border-gray-800
dark:bg-gray-800 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600
dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500
focus-within:ring-1 focus-within:ring-primary-500 dark:border-gray-800 dark:bg-gray-800
dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500
dark:focus-within:ring-primary-500 sm:text-sm
`}
>
{(!!attachments?.length || isUploading) && (

8
src/features/chats/components/chat-upload-preview.tsx
View File

@ -24,7 +24,7 @@ const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment
case 'gifv':
return (
<img
className='pointer-events-none h-full w-full object-cover'
className='pointer-events-none size-full object-cover'
src={attachment.preview_url}
alt=''
/>
@ -32,7 +32,7 @@ const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment
case 'video':
return (
<video
className='pointer-events-none h-full w-full object-cover'
className='pointer-events-none size-full object-cover'
src={attachment.preview_url}
autoPlay
playsInline
@ -43,9 +43,9 @@ const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment
);
default:
return (
<div className='pointer-events-none flex h-full w-full items-center justify-center'>
<div className='pointer-events-none flex size-full items-center justify-center'>
<Icon
className='mx-auto my-12 h-16 w-16 text-gray-800 dark:text-gray-200'
className='mx-auto my-12 size-16 text-gray-800 dark:text-gray-200'
src={MIMETYPE_ICONS[mimeType || ''] || defaultIcon}
/>
</div>

10
src/features/chats/components/chat-upload.tsx
View File

@ -26,8 +26,8 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
};
return (
<div className='relative isolate inline-block h-24 w-24 overflow-hidden rounded-lg bg-gray-200 dark:bg-primary-900'>
<Blurhash hash={attachment.blurhash} className='absolute inset-0 -z-10 h-full w-full' />
<div className='relative isolate inline-block size-24 overflow-hidden rounded-lg bg-gray-200 dark:bg-primary-900'>
<Blurhash hash={attachment.blurhash} className='absolute inset-0 -z-10 size-full' />
<div className='absolute right-[6px] top-[6px]'>
<RemoveButton onClick={onDelete} />
@ -35,7 +35,7 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
<button
onClick={clickable ? handleOpenModal : undefined}
className={clsx('h-full w-full', { 'cursor-zoom-in': clickable, 'cursor-default': !clickable })}
className={clsx('size-full', { 'cursor-zoom-in': clickable, 'cursor-default': !clickable })}
>
<ChatUploadPreview attachment={attachment} />
</button>
@ -53,10 +53,10 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => {
<button
type='button'
onClick={onClick}
className='flex h-5 w-5 items-center justify-center rounded-full bg-secondary-500 p-1'
className='flex size-5 items-center justify-center rounded-full bg-secondary-500 p-1'
>
<Icon
className='h-3 w-3 text-white'
className='size-3 text-white'
src={require('@tabler/icons/outline/x.svg')}
/>
</button>

2
src/features/chats/components/chat-widget/chat-pane-header.tsx
View File

@ -47,7 +47,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
({unreadCount})
</Text>
<div className='h-2.5 w-2.5 rounded-full bg-accent-300' />
<div className='size-2.5 rounded-full bg-accent-300' />
</HStack>
)}
</ButtonComp>

6
src/features/chats/components/chat-widget/chat-settings.tsx
View File

@ -96,7 +96,7 @@ const ChatSettings = () => {
<button onClick={closeSettings}>
<Icon
src={require('@tabler/icons/outline/arrow-left.svg')}
className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
/>
</button>
@ -136,13 +136,13 @@ const ChatSettings = () => {
<Stack space={5}>
<button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
<Icon src={require('@tabler/icons/outline/ban.svg')} className='h-5 w-5' />
<Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
<span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
</button>
{features.chatsDelete && (
<button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
<Icon src={require('@tabler/icons/outline/logout.svg')} className='h-5 w-5' />
<Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
<span>{intl.formatMessage(messages.leaveChat)}</span>
</button>
)}

2
src/features/chats/components/chat-widget/chat-window.tsx
View File

@ -73,7 +73,7 @@ const ChatWindow = () => {
<button onClick={closeChat}>
<Icon
src={require('@tabler/icons/outline/arrow-left.svg')}
className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
/>
</button>
)}

2
src/features/chats/components/chat-widget/headers/chat-search-header.tsx
View File

@ -27,7 +27,7 @@ const ChatSearchHeader = () => {
>
<Icon
src={require('@tabler/icons/outline/arrow-left.svg')}
className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
/>
</button>

2
src/features/chats/components/ui/pane.tsx
View File

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

2
src/features/compose/components/search-zap-split.tsx
View File

@ -156,7 +156,7 @@ const SearchZapSplit = (props: ISearchZapSplit) => {
<SvgIcon
src={require('@tabler/icons/outline/x.svg')}
className={clsx('h-4 w-4 text-gray-600', { hidden: !hasValue })}
className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
aria-label={intl.formatMessage(messages.placeholder)}
/>
</div>

4
src/features/compose/components/search.tsx
View File

@ -167,12 +167,12 @@ const Search = (props: ISearch) => {
>
<SvgIcon
src={require('@tabler/icons/outline/search.svg')}
className={clsx('h-4 w-4 text-gray-600', { hidden: hasValue })}
className={clsx('size-4 text-gray-600', { hidden: hasValue })}
/>
<SvgIcon
src={require('@tabler/icons/outline/x.svg')}
className={clsx('h-4 w-4 text-gray-600', { hidden: !hasValue })}
className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
aria-label={intl.formatMessage(messages.placeholder)}
/>
</div>

4
src/features/compose/editor/nodes/emoji-node.tsx
View File

@ -81,9 +81,9 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
decorate(): JSX.Element {
const emoji = this.__emoji;
if (isNativeEmoji(emoji)) {
return <Component emoji={emoji.native} alt={emoji.colons} className='emojione h-4 w-4' />;
return <Component emoji={emoji.native} alt={emoji.colons} className='emojione size-4' />;
} else {
return <Component src={emoji.imageUrl} alt={emoji.colons} className='emojione h-4 w-4' />;
return <Component src={emoji.imageUrl} alt={emoji.colons} className='emojione size-4' />;
}
}

2
src/features/developers/service-worker-info.tsx
View File

@ -119,7 +119,7 @@ const ServiceWorkerInfo: React.FC<IServiceWorkerInfo> = () => {
<a href={url} target='_blank' className='flex items-center space-x-1 truncate'>
<span className='truncate'>{url}</span>
<Icon
className='h-4 w-4'
className='size-4'
src={require('@tabler/icons/outline/external-link.svg')}
/>
</a>

4
src/features/edit-identity/index.tsx
View File

@ -115,7 +115,7 @@ const EditIdentity: React.FC<IEditIdentity> = () => {
{(account.source?.nostr?.nip05 === identifier && account.acct !== identifier) && (
<Tooltip text={intl.formatMessage(messages.unverified)}>
<div>
<Emoji className='h-4 w-4' emoji='⚠️' />
<Emoji className='size-4' emoji='⚠️' />
</div>
</Tooltip>
)}
@ -169,7 +169,7 @@ const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (props) => {
placeholder={intl.formatMessage(messages.username)}
append={(
<HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
<Icon className='h-4 w-4' src={require('@tabler/icons/outline/at.svg')} />
<Icon className='size-4' src={require('@tabler/icons/outline/at.svg')} />
<span>{instance.domain}</span>
</HStack>
)}

6
src/features/edit-profile/components/avatar-picker.tsx
View File

@ -24,7 +24,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
<label
ref={picker}
className={clsx(
'absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-300 ring-2',
'absolute bottom-0 left-1/2 size-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-300 ring-2',
{
'border-2 border-primary-600 border-dashed !z-[99] overflow-hidden': isDragging,
'ring-white dark:ring-primary-900': !isDraggedOver,
@ -38,13 +38,13 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
<HStack
alignItems='center'
justifyContent='center'
className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
className={clsx('absolute left-0 top-0 size-full rounded-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-500': src,
})}
>
<Icon
src={require('@tabler/icons/outline/camera-plus.svg')}
className='h-5 w-5 text-white'
className='size-5 text-white'
/>
</HStack>
<span className='sr-only'><FormattedMessage id='group.upload_avatar' defaultMessage='Upload avatar' /></span>

8
src/features/edit-profile/components/header-picker.tsx
View File

@ -36,7 +36,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
<label
ref={picker}
className={clsx(
'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 sm:h-36 sm:shadow dark:bg-gray-800 dark:text-accent-blue',
'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow',
{
'border-2 border-primary-600 border-dashed !z-[99]': isDragging,
'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
@ -45,9 +45,9 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
title={intl.formatMessage(messages.title)}
tabIndex={0}
>
{src && <img className='h-full w-full object-cover' src={src} alt='' />}
{src && <img className='size-full object-cover' src={src} alt='' />}
<HStack
className={clsx('absolute top-0 h-full w-full transition-opacity', {
className={clsx('absolute top-0 size-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
})}
space={1.5}
@ -56,7 +56,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
>
<Icon
src={require('@tabler/icons/outline/photo-plus.svg')}
className='h-4.5 w-4.5'
className='size-4.5'
/>
<Text size='md' theme='primary' weight='semibold'>

6
src/features/event/components/event-header.tsx
View File

@ -80,7 +80,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
return (
<>
<div className='-mx-4 -mt-4'>
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
</div>
<PlaceholderEventHeader />
@ -360,7 +360,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
return (
<>
<div className='-mx-4 -mt-4'>
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
{banner && (
<a href={banner.url} onClick={handleHeaderClick} target='_blank'>
<StillImage
@ -397,7 +397,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
<Comp key={idx} {...itemProps} className='group'>
<div className='flex items-center'>
{menuItem.icon && (
<SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 flex-none text-gray-400 group-hover:text-gray-500' />
<SvgIcon src={menuItem.icon} className='mr-3 size-5 flex-none text-gray-400 group-hover:text-gray-500' />
)}
<div className='truncate'>{menuItem.text}</div>

8
src/features/events/components/event-carousel.tsx
View File

@ -57,9 +57,9 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
<div className='absolute left-3 top-1/2 z-10 -mt-4'>
<button
onClick={() => handleChangeIndex(index - 1)}
className='flex h-8 w-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
>
<Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='h-6 w-6 text-black dark:text-white' />
<Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='size-6 text-black dark:text-white' />
</button>
</div>
)}
@ -70,9 +70,9 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
<div className='absolute right-3 top-1/2 z-10 -mt-4'>
<button
onClick={() => handleChangeIndex(index + 1)}
className='flex h-8 w-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
>
<Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='h-6 w-6 text-black dark:text-white' />
<Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='size-6 text-black dark:text-white' />
</button>
</div>
)}

2
src/features/federation-restrictions/components/instance-restrictions.tsx
View File

@ -20,7 +20,7 @@ interface IRestriction {
const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
return (
<HStack space={3}>
<Icon className='h-5 w-5 flex-none' src={icon} />
<Icon className='size-5 flex-none' src={icon} />
<Text theme='muted'>
{children}

4
src/features/feed-suggestions/feed-suggestions.tsx
View File

@ -24,7 +24,7 @@ const SuggestionItem: React.FC<ISuggestionItem> = ({ accountId }) => {
if (!account) return null;
return (
<Stack space={3} className='w-52 shrink-0 rounded-md border border-solid border-gray-300 p-4 md:w-full md:shrink md:border-transparent md:p-0 dark:border-gray-800 dark:md:border-transparent'>
<Stack space={3} className='w-52 shrink-0 rounded-md border border-solid border-gray-300 p-4 dark:border-gray-800 md:w-full md:shrink md:border-transparent md:p-0 dark:md:border-transparent'>
<Link
to={`/@${account.acct}`}
title={account.acct}
@ -32,7 +32,7 @@ const SuggestionItem: React.FC<ISuggestionItem> = ({ accountId }) => {
<Stack space={3} className='mx-auto w-40 md:w-24'>
<img
src={account.avatar}
className='mx-auto block h-16 w-16 min-w-[56px] rounded-full object-cover'
className='mx-auto block size-16 min-w-[56px] rounded-full object-cover'
alt={account.acct}
/>

2
src/features/group/components/group-header-image.tsx
View File

@ -31,7 +31,7 @@ const GroupHeaderImage: React.FC<IGroupHeaderImage> = ({ className, group }) =>
>
<Icon
src={require('@tabler/icons/outline/photo-off.svg')}
className='h-6 w-6 text-gray-500 dark:text-gray-700'
className='size-6 text-gray-500 dark:text-gray-700'
/>
</div>
);

10
src/features/group/components/group-header.tsx
View File

@ -36,14 +36,14 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
return (
<div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6' data-testid='group-header-missing'>
<div>
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
</div>
<div className='px-4 sm:px-6'>
<HStack alignItems='bottom' space={5} className='-mt-12'>
<div className='relative flex'>
<div
className='h-24 w-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
className='size-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
/>
</div>
</HStack>
@ -92,7 +92,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
<StillImage
src={group.header}
alt={intl.formatMessage(messages.header)}
className='relative h-32 w-full bg-gray-200 object-center md:rounded-t-xl lg:h-52 dark:bg-gray-900/50'
className='relative h-32 w-full bg-gray-200 object-center dark:bg-gray-900/50 md:rounded-t-xl lg:h-52'
onError={() => setIsHeaderMissing(true)}
/>
);
@ -109,10 +109,10 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
return (
<div
data-testid='group-header-image'
className='flex h-32 w-full items-center justify-center bg-gray-200 md:rounded-t-xl lg:h-52 dark:bg-gray-800/30'
className='flex h-32 w-full items-center justify-center bg-gray-200 dark:bg-gray-800/30 md:rounded-t-xl lg:h-52'
>
{isHeaderMissing ? (
<Icon src={require('@tabler/icons/outline/photo-off.svg')} className='h-6 w-6 text-gray-500 dark:text-gray-700' />
<Icon src={require('@tabler/icons/outline/photo-off.svg')} className='size-6 text-gray-500 dark:text-gray-700' />
) : header}
</div>
);

4
src/features/group/components/group-privacy.tsx
View File

@ -20,7 +20,7 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
? require('@tabler/icons/outline/lock.svg')
: require('@tabler/icons/outline/world.svg')
}
className='h-6 w-6 text-gray-600 dark:text-gray-600'
className='size-6 text-gray-600 dark:text-gray-600'
/>
</div>
@ -46,7 +46,7 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
>
<HStack space={1} alignItems='center' data-testid='group-privacy'>
<Icon
className='h-4 w-4'
className='size-4'
src={
group.locked
? require('@tabler/icons/outline/lock.svg')

2
src/features/group/components/group-relationship.tsx
View File

@ -25,7 +25,7 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
className='text-primary-600 dark:text-accent-blue'
>
<Icon
className='h-4 w-4'
className='size-4'
src={
isOwner
? require('@tabler/icons/outline/users.svg')

2
src/features/group/components/group-tag-list-item.tsx
View File

@ -88,7 +88,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
return (
<Icon
src={require('@tabler/icons/filled/pin.svg')}
className='h-5 w-5 text-gray-600'
className='size-5 text-gray-600'
data-testid='pin-icon'
/>
);

2
src/features/group/edit-group.tsx
View File

@ -115,7 +115,7 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { groupId } }) => {
placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
maxLength={maxName}
{...displayName}
append={<Icon className='h-5 w-5 text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />}
append={<Icon className='size-5 text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />}
disabled
/>
</FormGroup>

2
src/features/group/group-tag-timeline.tsx
View File

@ -51,7 +51,7 @@ const GroupTagTimeline: React.FC<IGroupTimeline> = (props) => {
<div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
<Icon
src={require('@tabler/icons/outline/message-2.svg')}
className='h-6 w-6 text-gray-600'
className='size-6 text-gray-600'
/>
</div>

2
src/features/group/group-tags.tsx
View File

@ -42,7 +42,7 @@ const GroupTopics: React.FC<IGroupTopics> = (props) => {
<div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
<Icon
src={require('@tabler/icons/outline/hash.svg')}
className='h-6 w-6 text-gray-600'
className='size-6 text-gray-600'
/>
</div>

2
src/features/group/group-timeline.tsx
View File

@ -111,7 +111,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
<div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
<Icon
src={require('@tabler/icons/outline/message-2.svg')}
className='h-6 w-6 text-gray-600'
className='size-6 text-gray-600'
/>
</div>

2
src/features/groups/components/discover/group-grid-item.tsx
View File

@ -29,7 +29,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
>
<Link to={`/group/${group.slug}`}>
<Stack
className='aspect-h-7 aspect-w-10 h-full w-full overflow-hidden rounded-lg'
className='aspect-h-7 aspect-w-10 size-full overflow-hidden rounded-lg'
ref={ref}
style={{ minHeight: 180 }}
>

2
src/features/groups/components/discover/group-list-item.tsx
View File

@ -38,7 +38,7 @@ const GroupListItem = (props: IGroupListItem) => {
<HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
<Icon
className='h-4.5 w-4.5'
className='size-4.5'
src={group.locked ? require('@tabler/icons/outline/lock.svg') : require('@tabler/icons/outline/world.svg')}
/>

4
src/features/groups/components/discover/layout-buttons.tsx
View File

@ -22,7 +22,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
<Icon
src={require('@tabler/icons/outline/layout-list.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
clsx('size-5 text-gray-600', {
'text-primary-600': layout === GroupLayout.LIST,
})
}
@ -36,7 +36,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
<Icon
src={require('@tabler/icons/outline/layout-grid.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
clsx('size-5 text-gray-600', {
'text-primary-600': layout === GroupLayout.GRID,
})
}

4
src/features/groups/components/discover/search/recent-searches.tsx
View File

@ -60,10 +60,10 @@ export default (props: Props) => {
data-testid='recent-search-result'
>
<HStack alignItems='center' space={2}>
<div className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-800 dark:group-hover:bg-gray-700/20'>
<div className='flex size-10 items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-800 dark:group-hover:bg-gray-700/20'>
<Icon
src={require('@tabler/icons/outline/search.svg')}
className='h-5 w-5 text-gray-600'
className='size-5 text-gray-600'
/>
</div>

2
src/features/groups/discover.tsx
View File

@ -56,7 +56,7 @@ const Discover: React.FC = () => {
<button onClick={clearValue}>
<Icon
src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
className='h-4 w-4 text-gray-700 dark:text-gray-600'
className='size-4 text-gray-700 dark:text-gray-600'
aria-hidden='true'
/>
</button>

4
src/features/groups/tag.tsx
View File

@ -67,7 +67,7 @@ const Tag: React.FC<ITag> = (props) => {
<Icon
src={require('@tabler/icons/outline/layout-list.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
clsx('size-5 text-gray-600', {
'text-primary-600': layout === Layout.LIST,
})
}
@ -78,7 +78,7 @@ const Tag: React.FC<ITag> = (props) => {
<Icon
src={require('@tabler/icons/outline/layout-grid.svg')}
className={
clsx('h-5 w-5 text-gray-600', {
clsx('size-5 text-gray-600', {
'text-primary-600': layout === Layout.GRID,
})
}

2
src/features/notifications/components/notification.tsx
View File

@ -299,7 +299,7 @@ const Notification: React.FC<INotification> = (props) => {
<Emoji
emoji={notification.emoji}
src={notification.emoji_url || undefined}
className='h-4 w-4 flex-none'
className='size-4 flex-none'
/>
);
} else if (validType(type)) {

2
src/features/placeholder/components/placeholder-group-card.tsx
View File

@ -15,7 +15,7 @@ const PlaceholderGroupCard = () => {
{/* Group Avatar */}
<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='size-16 rounded-full bg-gray-500 ring-2 ring-white dark:bg-primary-800 dark:ring-primary-900' />
</div>
{/* Group Info */}

4
src/features/placeholder/components/placeholder-group-discover.tsx
View File

@ -9,13 +9,13 @@ const PlaceholderGroupDiscover = () => {
return (
<Stack space={2} className='animate-pulse'>
<Stack className='aspect-h-7 aspect-w-10 h-full w-full overflow-hidden rounded-lg'>
<Stack className='aspect-h-7 aspect-w-10 size-full overflow-hidden rounded-lg'>
{/* Group Cover Image */}
<div className='absolute inset-0 rounded-t-lg bg-gray-300 object-cover dark:bg-gray-800' />
<Stack justifyContent='end' className='z-10 p-4 text-gray-900 dark:text-gray-100' space={3}>
{/* Group Avatar */}
<div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
<div className='size-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
{/* Group Info */}
<Stack space={1} className='text-gray-500 dark:text-gray-700'>

Some files were not shown because too many files have changed in this diff Show More