eslint --fix
This commit is contained in:
Alex Gleason
parent
588b86eb84
commit
6d5b4189e5
|
|
@ -18,9 +18,9 @@ interface SplitValue {
|
|||
*
|
||||
* @param {StatusEntity | undefined} status - The current status entity.
|
||||
* @param {AccountEntity} account - The account for which the zap split calculation is done.
|
||||
*
|
||||
*
|
||||
* @returns {Object} An object containing the zap split arrays, zap split data, and a function to calculate the received amount.
|
||||
*
|
||||
*
|
||||
* @property {ZapSplitData[]} zapArrays - Array of zap split data returned from the API.
|
||||
* @property {Object} zapSplitData - Contains the total split amount, amount to receive, and individual split values.
|
||||
* @property {Function} receiveAmount - A function to calculate the zap amount based on the split configuration.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'>·</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}
|
||||
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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=''
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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' />
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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)}>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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}%` }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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) })}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) && (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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' />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
|
|
@ -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 */}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue