mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Update to @tabler/icons 3.1.0, use filled for active state

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
environments/review-tabler-ico-cwsrtp/deployments/4514
marcin mikołajczak 6 months ago
parent 03e02a3d4f
commit 1505f96258
173 changed files with 515 additions and 500 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -75,7 +75,7 @@
"@soapbox.pub/wasmboy": "^0.8.0", "@soapbox.pub/wasmboy": "^0.8.0",
"@soapbox/nspec": "npm:@jsr/soapbox__nspec", "@soapbox/nspec": "npm:@jsr/soapbox__nspec",
"@soapbox/weblock": "npm:@jsr/soapbox__weblock", "@soapbox/weblock": "npm:@jsr/soapbox__weblock",
"@tabler/icons": "^2.0.0", "@tabler/icons": "^3.1.0",
"@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.7", "@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10", "@tailwindcss/typography": "^0.5.10",

8
src/actions/moderation.tsx
Unescape View File

@ -58,7 +58,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
); );
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/user-off.svg'), icon: require('@tabler/icons/outline/user-off.svg'),
heading: intl.formatMessage(messages.deactivateUserHeading, { acct }), heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
message, message,
confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }), confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@ -96,7 +96,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false; const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/user-minus.svg'), icon: require('@tabler/icons/outline/user-minus.svg'),
heading: intl.formatMessage(messages.deleteUserHeading, { acct }), heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
message, message,
confirm, confirm,
@ -118,7 +118,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
const acct = state.statuses.get(statusId)!.account.acct; const acct = state.statuses.get(statusId)!.account.acct;
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/alert-triangle.svg'), icon: require('@tabler/icons/outline/alert-triangle.svg'),
heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading), heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading),
message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }), message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }),
confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm), confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm),
@ -138,7 +138,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
const acct = state.statuses.get(statusId)!.account.acct; const acct = state.statuses.get(statusId)!.account.acct;
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
heading: intl.formatMessage(messages.deleteStatusHeading), heading: intl.formatMessage(messages.deleteStatusHeading),
message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }), message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }),
confirm: intl.formatMessage(messages.deleteStatusConfirm), confirm: intl.formatMessage(messages.deleteStatusConfirm),

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

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

2
src/components/account.tsx
Unescape View File

@ -264,7 +264,7 @@ const Account = ({
<> <>
<Text tag='span' theme='muted' size='sm'>&middot;</Text> <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/pencil.svg')} /> <Icon className='h-5 w-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
</> </>
) : null} ) : null}

6
src/components/authorize-reject-buttons.tsx
Unescape View File

@ -106,7 +106,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
<HStack space={3} alignItems='center'> <HStack space={3} alignItems='center'>
<AuthorizeRejectButton <AuthorizeRejectButton
theme='danger' theme='danger'
icon={require('@tabler/icons/x.svg')} icon={require('@tabler/icons/outline/x.svg')}
action={handleReject} action={handleReject}
isLoading={state === 'rejecting'} isLoading={state === 'rejecting'}
disabled={state === 'authorizing'} disabled={state === 'authorizing'}
@ -114,7 +114,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
/> />
<AuthorizeRejectButton <AuthorizeRejectButton
theme='primary' theme='primary'
icon={require('@tabler/icons/check.svg')} icon={require('@tabler/icons/outline/check.svg')}
action={handleAuthorize} action={handleAuthorize}
isLoading={state === 'authorizing'} isLoading={state === 'authorizing'}
disabled={state === 'rejecting'} disabled={state === 'rejecting'}
@ -162,7 +162,7 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon,
} }
> >
<IconButton <IconButton
src={isLoading ? require('@tabler/icons/player-stop-filled.svg') : icon} src={isLoading ? require('@tabler/icons/filled/player-stop.svg') : icon}
onClick={action} onClick={action}
theme='seamless' theme='seamless'
className='h-10 w-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900' className='h-10 w-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'

8
src/components/autosuggest-location.tsx
Unescape View File

@ -4,10 +4,10 @@ import { useAppSelector } from 'soapbox/hooks';
import { HStack, Icon, Stack, Text } from './ui'; import { HStack, Icon, Stack, Text } from './ui';
const buildingCommunityIcon = require('@tabler/icons/building-community.svg'); const buildingCommunityIcon = require('@tabler/icons/outline/building-community.svg');
const homeIcon = require('@tabler/icons/home-2.svg'); const homeIcon = require('@tabler/icons/outline/home-2.svg');
const mapPinIcon = require('@tabler/icons/map-pin.svg'); const mapPinIcon = require('@tabler/icons/outline/map-pin.svg');
const roadIcon = require('@tabler/icons/road.svg'); const roadIcon = require('@tabler/icons/outline/road.svg');
export const ADDRESS_ICONS: Record<string, string> = { export const ADDRESS_ICONS: Record<string, string> = {
house: homeIcon, house: homeIcon,

8
src/components/birthday-input.tsx
Unescape View File

@ -70,7 +70,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<IconButton <IconButton
className='datepicker__button rtl:rotate-180' className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/chevron-left.svg')} src={require('@tabler/icons/outline/chevron-left.svg')}
onClick={decreaseMonth} onClick={decreaseMonth}
disabled={prevMonthButtonDisabled} disabled={prevMonthButtonDisabled}
aria-label={intl.formatMessage(messages.previousMonth)} aria-label={intl.formatMessage(messages.previousMonth)}
@ -79,7 +79,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
{intl.formatDate(date, { month: 'long' })} {intl.formatDate(date, { month: 'long' })}
<IconButton <IconButton
className='datepicker__button rtl:rotate-180' className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/chevron-right.svg')} src={require('@tabler/icons/outline/chevron-right.svg')}
onClick={increaseMonth} onClick={increaseMonth}
disabled={nextMonthButtonDisabled} disabled={nextMonthButtonDisabled}
aria-label={intl.formatMessage(messages.nextMonth)} aria-label={intl.formatMessage(messages.nextMonth)}
@ -89,7 +89,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<IconButton <IconButton
className='datepicker__button rtl:rotate-180' className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/chevron-left.svg')} src={require('@tabler/icons/outline/chevron-left.svg')}
onClick={decreaseYear} onClick={decreaseYear}
disabled={prevYearButtonDisabled} disabled={prevYearButtonDisabled}
aria-label={intl.formatMessage(messages.previousYear)} aria-label={intl.formatMessage(messages.previousYear)}
@ -98,7 +98,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
{intl.formatDate(date, { year: 'numeric' })} {intl.formatDate(date, { year: 'numeric' })}
<IconButton <IconButton
className='datepicker__button rtl:rotate-180' className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/chevron-right.svg')} src={require('@tabler/icons/outline/chevron-right.svg')}
onClick={increaseYear} onClick={increaseYear}
disabled={nextYearButtonDisabled} disabled={nextYearButtonDisabled}
aria-label={intl.formatMessage(messages.nextYear)} aria-label={intl.formatMessage(messages.nextYear)}

4
src/components/domain.tsx
Unescape View File

@ -21,7 +21,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
// const onBlockDomain = () => { // const onBlockDomain = () => {
// dispatch(openModal('CONFIRM', { // dispatch(openModal('CONFIRM', {
// icon: require('@tabler/icons/ban.svg'), // icon: require('@tabler/icons/outline/ban.svg'),
// heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />, // heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
// message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />, // message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />,
// confirm: intl.formatMessage(messages.blockDomainConfirm), // confirm: intl.formatMessage(messages.blockDomainConfirm),
@ -38,7 +38,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
<Text tag='span'> <Text tag='span'>
{domain} {domain}
</Text> </Text>
<IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} /> <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
</HStack> </HStack>
); );
}; };

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

@ -41,7 +41,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
onOpen, onOpen,
onShiftClick, onShiftClick,
placement: initialPlacement = 'top', placement: initialPlacement = 'top',
src = require('@tabler/icons/dots.svg'), src = require('@tabler/icons/outline/dots.svg'),
title = 'Menu', title = 'Menu',
...filteredProps ...filteredProps
} = props; } = props;

4
src/components/event-preview.tsx
Unescape View File

@ -67,7 +67,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
<div className='flex flex-wrap gap-x-2 gap-y-1 text-gray-700 dark:text-gray-600'> <div className='flex flex-wrap gap-x-2 gap-y-1 text-gray-700 dark:text-gray-600'>
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/user.svg')} /> <Icon src={require('@tabler/icons/outline/user.svg')} />
<HStack space={1} alignItems='center' grow> <HStack space={1} alignItems='center' grow>
<span dangerouslySetInnerHTML={{ __html: account.display_name_html }} /> <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
{account.verified && <VerificationBadge />} {account.verified && <VerificationBadge />}
@ -78,7 +78,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
{event.location && ( {event.location && (
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/map-pin.svg')} /> <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
<span> <span>
{event.location.get('name')} {event.location.get('name')}
</span> </span>

8
src/components/gameboy.tsx
Unescape View File

@ -138,13 +138,13 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
theme='transparent' theme='transparent'
className='text-white' className='text-white'
onClick={togglePaused} onClick={togglePaused}
src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')}
/> />
<IconButton <IconButton
theme='transparent' theme='transparent'
className='text-white' className='text-white'
onClick={toggleMuted} onClick={toggleMuted}
src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')}
/> />
</HStack> </HStack>
@ -152,14 +152,14 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
<IconButton <IconButton
theme='transparent' theme='transparent'
className='text-white' className='text-white'
src={require('@tabler/icons/download.svg')} src={require('@tabler/icons/outline/download.svg')}
onClick={handleDownload} onClick={handleDownload}
/> />
<IconButton <IconButton
theme='transparent' theme='transparent'
className='text-white' className='text-white'
onClick={toggleFullscreen} onClick={toggleFullscreen}
src={fullscreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')} src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
/> />
</HStack> </HStack>
</HStack> </HStack>

4
src/components/list.tsx
Unescape View File

@ -73,7 +73,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
<HStack space={1} alignItems='center' className='overflow-hidden text-gray-700 dark:text-gray-600'> <HStack space={1} alignItems='center' className='overflow-hidden text-gray-700 dark:text-gray-600'>
{children} {children}
<Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1 rtl:rotate-180' /> <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='ml-1 rtl:rotate-180' />
</HStack> </HStack>
) : null} ) : null}
@ -91,7 +91,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
} }
> >
<Icon <Icon
src={require('@tabler/icons/check.svg')} src={require('@tabler/icons/outline/check.svg')}
className={ className={
clsx({ clsx({
'h-4 w-4 text-white dark:text-white transition-all duration-500': true, 'h-4 w-4 text-white dark:text-white transition-all duration-500': true,

2
src/components/load-gap.tsx
Unescape View File

@ -20,7 +20,7 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
return ( return (
<button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}> <button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
<Icon src={require('@tabler/icons/dots.svg')} /> <Icon src={require('@tabler/icons/outline/dots.svg')} />
</button> </button>
); );
}; };

4
src/components/location-search.tsx
Unescape View File

@ -100,8 +100,8 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
renderSuggestion={AutosuggestLocation} renderSuggestion={AutosuggestLocation}
/> />
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}> <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} /> <Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
<Icon src={require('@tabler/icons/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} /> <Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
</div> </div>
</div> </div>
); );

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

@ -164,7 +164,7 @@ const Item: React.FC<IItem> = ({
const attachmentIcon = ( const attachmentIcon = (
<Icon <Icon
className='h-16 w-16 text-gray-800 dark:text-gray-200' className='h-16 w-16 text-gray-800 dark:text-gray-200'
src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || require('@tabler/icons/paperclip.svg')} src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || require('@tabler/icons/outline/paperclip.svg')}
/> />
); );
@ -240,7 +240,7 @@ const Item: React.FC<IItem> = ({
target='_blank' target='_blank'
title={attachment.description} title={attachment.description}
> >
<span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span> <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/outline/volume.svg')} /></span>
<span className='media-gallery__file-extension__label uppercase'>{ext}</span> <span className='media-gallery__file-extension__label uppercase'>{ext}</span>
</a> </a>
); );

4
src/components/modal-root.tsx
Unescape View File

@ -75,7 +75,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
if (hasComposeContent && type === 'COMPOSE') { if (hasComposeContent && type === 'COMPOSE') {
const isEditing = compose!.id !== null; const isEditing = compose!.id !== null;
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
heading: isEditing heading: isEditing
? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' /> ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
: <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />, : <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
@ -94,7 +94,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
} else if (hasEventComposeContent && type === 'COMPOSE_EVENT') { } else if (hasEventComposeContent && type === 'COMPOSE_EVENT') {
const isEditing = getState().compose_event.id !== null; const isEditing = getState().compose_event.id !== null;
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
heading: isEditing heading: isEditing
? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' /> ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
: <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />, : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,

4
src/components/pending-items-row.tsx
Unescape View File

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

4
src/components/polls/poll-option.tsx
Unescape View File

@ -86,7 +86,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
aria-label={option.title} aria-label={option.title}
> >
{active && ( {active && (
<Icon src={require('@tabler/icons/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' /> <Icon src={require('@tabler/icons/outline/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
)} )}
</span> </span>
</div> </div>
@ -143,7 +143,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
<HStack space={2} alignItems='center' className='relative'> <HStack space={2} alignItems='center' className='relative'>
{voted ? ( {voted ? (
<Icon <Icon
src={require('@tabler/icons/circle-check.svg')} src={require('@tabler/icons/outline/circle-check.svg')}
alt={intl.formatMessage(messages.voted)} alt={intl.formatMessage(messages.voted)}
className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800' className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
/> />

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

@ -135,7 +135,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
)} )}
<HStack space={1} alignItems='center'> <HStack space={1} alignItems='center'>
<Text tag='span' theme='muted'> <Text tag='span' theme='muted'>
<Icon src={require('@tabler/icons/link.svg')} /> <Icon src={require('@tabler/icons/outline/link.svg')} />
</Text> </Text>
<Text tag='span' theme='muted' size='sm' direction={direction}> <Text tag='span' theme='muted' size='sm' direction={direction}>
{card.provider_name} {card.provider_name}
@ -168,10 +168,10 @@ const PreviewCard: React.FC<IPreviewCard> = ({
if (embedded) { if (embedded) {
embed = renderVideo(); embed = renderVideo();
} else { } else {
let iconVariant = require('@tabler/icons/player-play.svg'); let iconVariant = require('@tabler/icons/outline/player-play.svg');
if (card.type === 'photo') { if (card.type === 'photo') {
iconVariant = require('@tabler/icons/zoom-in.svg'); iconVariant = require('@tabler/icons/outline/zoom-in.svg');
} }
embed = ( embed = (
@ -198,7 +198,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
className='text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100' className='text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'
> >
<Icon <Icon
src={require('@tabler/icons/external-link.svg')} src={require('@tabler/icons/outline/external-link.svg')}
className='h-6 w-6 text-inherit' className='h-6 w-6 text-inherit'
/> />
</a> </a>

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

@ -119,7 +119,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
{account.local ? ( {account.local ? (
<HStack alignItems='center' space={0.5}> <HStack alignItems='center' space={0.5}>
<Icon <Icon
src={require('@tabler/icons/calendar.svg')} src={require('@tabler/icons/outline/calendar.svg')}
className='h-4 w-4 text-gray-800 dark:text-gray-200' className='h-4 w-4 text-gray-800 dark:text-gray-200'
/> />

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

@ -84,7 +84,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
if (onCancel) { if (onCancel) {
actions = { actions = {
onActionClick: handleClose, onActionClick: handleClose,
actionIcon: require('@tabler/icons/x.svg'), actionIcon: require('@tabler/icons/outline/x.svg'),
actionAlignment: 'top', actionAlignment: 'top',
actionTitle: intl.formatMessage(messages.cancel), actionTitle: intl.formatMessage(messages.cancel),
}; };

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

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

40
src/components/sidebar-menu.tsx
Unescape View File

@ -161,7 +161,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<IconButton <IconButton
title={intl.formatMessage(messages.close)} title={intl.formatMessage(messages.close)}
onClick={handleClose} onClick={handleClose}
src={require('@tabler/icons/x.svg')} src={require('@tabler/icons/outline/x.svg')}
ref={closeButtonRef} ref={closeButtonRef}
iconClassName='h-6 w-6' iconClassName='h-6 w-6'
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' 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'
@ -184,7 +184,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink <SidebarLink
to={`/@${account.acct}`} to={`/@${account.acct}`}
icon={require('@tabler/icons/user.svg')} icon={require('@tabler/icons/outline/user.svg')}
text={intl.formatMessage(messages.profile)} text={intl.formatMessage(messages.profile)}
onClick={onClose} onClick={onClose}
/> />
@ -192,7 +192,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{(account.locked || followRequestsCount > 0) && ( {(account.locked || followRequestsCount > 0) && (
<SidebarLink <SidebarLink
to='/follow_requests' to='/follow_requests'
icon={require('@tabler/icons/user-plus.svg')} icon={require('@tabler/icons/outline/user-plus.svg')}
text={intl.formatMessage(messages.followRequests)} text={intl.formatMessage(messages.followRequests)}
onClick={onClose} onClick={onClose}
/> />
@ -201,7 +201,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.bookmarks && ( {features.bookmarks && (
<SidebarLink <SidebarLink
to='/bookmarks' to='/bookmarks'
icon={require('@tabler/icons/bookmark.svg')} icon={require('@tabler/icons/outline/bookmark.svg')}
text={intl.formatMessage(messages.bookmarks)} text={intl.formatMessage(messages.bookmarks)}
onClick={onClose} onClick={onClose}
/> />
@ -210,7 +210,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.groups && ( {features.groups && (
<SidebarLink <SidebarLink
to={groupsPath} to={groupsPath}
icon={require('@tabler/icons/circles.svg')} icon={require('@tabler/icons/outline/circles.svg')}
text={intl.formatMessage(messages.groups)} text={intl.formatMessage(messages.groups)}
onClick={onClose} onClick={onClose}
/> />
@ -219,7 +219,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.lists && ( {features.lists && (
<SidebarLink <SidebarLink
to='/lists' to='/lists'
icon={require('@tabler/icons/list.svg')} icon={require('@tabler/icons/outline/list.svg')}
text={intl.formatMessage(messages.lists)} text={intl.formatMessage(messages.lists)}
onClick={onClose} onClick={onClose}
/> />
@ -228,7 +228,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.events && ( {features.events && (
<SidebarLink <SidebarLink
to='/events' to='/events'
icon={require('@tabler/icons/calendar-event.svg')} icon={require('@tabler/icons/outline/calendar-event.svg')}
text={intl.formatMessage(messages.events)} text={intl.formatMessage(messages.events)}
onClick={onClose} onClick={onClose}
/> />
@ -237,7 +237,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{settings.get('isDeveloper') && ( {settings.get('isDeveloper') && (
<SidebarLink <SidebarLink
to='/developers' to='/developers'
icon={require('@tabler/icons/code.svg')} icon={require('@tabler/icons/outline/code.svg')}
text={intl.formatMessage(messages.developers)} text={intl.formatMessage(messages.developers)}
onClick={onClose} onClick={onClose}
/> />
@ -248,7 +248,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink <SidebarLink
to='/timeline/local' to='/timeline/local'
icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')} icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />} text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
onClick={onClose} onClick={onClose}
/> />
@ -256,7 +256,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.federating && ( {features.federating && (
<SidebarLink <SidebarLink
to='/timeline/fediverse' to='/timeline/fediverse'
icon={require('@tabler/icons/topology-star-ring-3.svg')} icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />} text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
onClick={onClose} onClick={onClose}
/> />
@ -267,21 +267,21 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink <SidebarLink
to='/blocks' to='/blocks'
icon={require('@tabler/icons/ban.svg')} icon={require('@tabler/icons/outline/ban.svg')}
text={intl.formatMessage(messages.blocks)} text={intl.formatMessage(messages.blocks)}
onClick={onClose} onClick={onClose}
/> />
<SidebarLink <SidebarLink
to='/mutes' to='/mutes'
icon={require('@tabler/icons/circle-x.svg')} icon={require('@tabler/icons/outline/circle-x.svg')}
text={intl.formatMessage(messages.mutes)} text={intl.formatMessage(messages.mutes)}
onClick={onClose} onClick={onClose}
/> />
<SidebarLink <SidebarLink
to='/settings/preferences' to='/settings/preferences'
icon={require('@tabler/icons/settings.svg')} icon={require('@tabler/icons/outline/settings.svg')}
text={intl.formatMessage(messages.preferences)} text={intl.formatMessage(messages.preferences)}
onClick={onClose} onClick={onClose}
/> />
@ -289,7 +289,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.federating && ( {features.federating && (
<SidebarLink <SidebarLink
to='/domain_blocks' to='/domain_blocks'
icon={require('@tabler/icons/ban.svg')} icon={require('@tabler/icons/outline/ban.svg')}
text={intl.formatMessage(messages.domainBlocks)} text={intl.formatMessage(messages.domainBlocks)}
onClick={onClose} onClick={onClose}
/> />
@ -298,7 +298,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{(features.filters || features.filtersV2) && ( {(features.filters || features.filtersV2) && (
<SidebarLink <SidebarLink
to='/filters' to='/filters'
icon={require('@tabler/icons/filter.svg')} icon={require('@tabler/icons/outline/filter.svg')}
text={intl.formatMessage(messages.filters)} text={intl.formatMessage(messages.filters)}
onClick={onClose} onClick={onClose}
/> />
@ -307,7 +307,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.followedHashtagsList && ( {features.followedHashtagsList && (
<SidebarLink <SidebarLink
to='/followed_tags' to='/followed_tags'
icon={require('@tabler/icons/hash.svg')} icon={require('@tabler/icons/outline/hash.svg')}
text={intl.formatMessage(messages.followedTags)} text={intl.formatMessage(messages.followedTags)}
onClick={onClose} onClick={onClose}
/> />
@ -316,7 +316,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{account.admin && ( {account.admin && (
<SidebarLink <SidebarLink
to='/soapbox/config' to='/soapbox/config'
icon={require('@tabler/icons/settings.svg')} icon={require('@tabler/icons/outline/settings.svg')}
text={intl.formatMessage(messages.soapboxConfig)} text={intl.formatMessage(messages.soapboxConfig)}
onClick={onClose} onClick={onClose}
/> />
@ -326,7 +326,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink <SidebarLink
to='/logout' to='/logout'
icon={require('@tabler/icons/logout.svg')} icon={require('@tabler/icons/outline/logout.svg')}
text={intl.formatMessage(messages.logout)} text={intl.formatMessage(messages.logout)}
onClick={onClickLogOut} onClick={onClickLogOut}
/> />
@ -341,7 +341,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
</Text> </Text>
<Icon <Icon
src={require('@tabler/icons/chevron-down.svg')} 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('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
'rotate-180': switcher, 'rotate-180': switcher,
})} })}
@ -354,7 +354,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{otherAccounts.map(account => renderAccount(account))} {otherAccounts.map(account => renderAccount(account))}
<NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}> <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/plus.svg')} /> <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text> <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink> </NavLink>
</div> </div>

6
src/components/sidebar-navigation-link.tsx
Unescape View File

@ -11,6 +11,8 @@ interface ISidebarNavigationLink {
countMax?: number; countMax?: number;
/** URL to an SVG icon. */ /** URL to an SVG icon. */
icon: string; icon: string;
/** URL to an SVG icon for active state. */
activeIcon?: string;
/** Link label. */ /** Link label. */
text: React.ReactNode; text: React.ReactNode;
/** Route to an internal page. */ /** Route to an internal page. */
@ -21,7 +23,7 @@ interface ISidebarNavigationLink {
/** Desktop sidebar navigation link. */ /** Desktop sidebar navigation link. */
const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => { const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
const { icon, text, to = '', count, countMax, onClick } = props; const { icon, activeIcon, text, to = '', count, countMax, onClick } = props;
const isActive = location.pathname === to; const isActive = location.pathname === to;
const handleClick: React.EventHandler<React.MouseEvent> = (e) => { const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
@ -45,7 +47,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
> >
<span className='relative'> <span className='relative'>
<Icon <Icon
src={icon} src={(isActive && activeIcon) || icon}
count={count} count={count}
countMax={countMax} countMax={countMax}
className={clsx('h-5 w-5', { className={clsx('h-5 w-5', {

40
src/components/sidebar-navigation.tsx
Unescape View File

@ -42,7 +42,7 @@ const SidebarNavigation = () => {
menu.push({ menu.push({
to: '/follow_requests', to: '/follow_requests',
text: intl.formatMessage(messages.follow_requests), text: intl.formatMessage(messages.follow_requests),
icon: require('@tabler/icons/user-plus.svg'), icon: require('@tabler/icons/outline/user-plus.svg'),
count: followRequestsCount, count: followRequestsCount,
}); });
} }
@ -51,7 +51,7 @@ const SidebarNavigation = () => {
menu.push({ menu.push({
to: '/bookmarks', to: '/bookmarks',
text: intl.formatMessage(messages.bookmarks), text: intl.formatMessage(messages.bookmarks),
icon: require('@tabler/icons/bookmark.svg'), icon: require('@tabler/icons/outline/bookmark.svg'),
}); });
} }
@ -59,7 +59,7 @@ const SidebarNavigation = () => {
menu.push({ menu.push({
to: '/lists', to: '/lists',
text: intl.formatMessage(messages.lists), text: intl.formatMessage(messages.lists),
icon: require('@tabler/icons/list.svg'), icon: require('@tabler/icons/outline/list.svg'),
}); });
} }
@ -67,14 +67,14 @@ const SidebarNavigation = () => {
menu.push({ menu.push({
to: '/events', to: '/events',
text: intl.formatMessage(messages.events), text: intl.formatMessage(messages.events),
icon: require('@tabler/icons/calendar-event.svg'), icon: require('@tabler/icons/outline/calendar-event.svg'),
}); });
} }
if (isDeveloper) { if (isDeveloper) {
menu.push({ menu.push({
to: '/developers', to: '/developers',
icon: require('@tabler/icons/code.svg'), icon: require('@tabler/icons/outline/code.svg'),
text: intl.formatMessage(messages.developers), text: intl.formatMessage(messages.developers),
}); });
} }
@ -91,7 +91,7 @@ const SidebarNavigation = () => {
return ( return (
<SidebarNavigationLink <SidebarNavigationLink
to='/chats' to='/chats'
icon={require('@tabler/icons/messages.svg')} icon={require('@tabler/icons/outline/messages.svg')}
count={unreadChatsCount} count={unreadChatsCount}
countMax={9} countMax={9}
text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />} text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
@ -103,7 +103,7 @@ const SidebarNavigation = () => {
return ( return (
<SidebarNavigationLink <SidebarNavigationLink
to='/messages' to='/messages'
icon={require('@tabler/icons/mail.svg')} icon={require('@tabler/icons/outline/mail.svg')}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />} text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
/> />
); );
@ -117,13 +117,14 @@ const SidebarNavigation = () => {
<Stack space={2}> <Stack space={2}>
<SidebarNavigationLink <SidebarNavigationLink
to='/' to='/'
icon={require('@tabler/icons/home.svg')} icon={require('@tabler/icons/outline/home.svg')}
activeIcon={require('@tabler/icons/filled/home.svg')}
text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />} text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
/> />
<SidebarNavigationLink <SidebarNavigationLink
to='/search' to='/search'
icon={require('@tabler/icons/search.svg')} icon={require('@tabler/icons/outline/search.svg')}
text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />} text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
/> />
@ -131,7 +132,8 @@ const SidebarNavigation = () => {
<> <>
<SidebarNavigationLink <SidebarNavigationLink
to='/notifications' to='/notifications'
icon={require('@tabler/icons/bell.svg')} icon={require('@tabler/icons/outline/bell.svg')}
activeIcon={require('@tabler/icons/filled/bell.svg')}
count={notificationCount} count={notificationCount}
text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />} text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
/> />
@ -141,27 +143,30 @@ const SidebarNavigation = () => {
{features.groups && ( {features.groups && (
<SidebarNavigationLink <SidebarNavigationLink
to={groupsPath} to={groupsPath}
icon={require('@tabler/icons/circles.svg')} icon={require('@tabler/icons/outline/circles.svg')}
activeIcon={require('@tabler/icons/filled/circles.svg')}
text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />} text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
/> />
)} )}
<SidebarNavigationLink <SidebarNavigationLink
to={`/@${account.acct}`} to={`/@${account.acct}`}
icon={require('@tabler/icons/user.svg')} icon={require('@tabler/icons/outline/user.svg')}
activeIcon={require('@tabler/icons/filled/user.svg')}
text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />} text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
/> />
<SidebarNavigationLink <SidebarNavigationLink
to='/settings' to='/settings'
icon={require('@tabler/icons/settings.svg')} icon={require('@tabler/icons/outline/settings.svg')}
activeIcon={require('@tabler/icons/filled/settings.svg')}
text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />} text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
/> />
{account.staff && ( {account.staff && (
<SidebarNavigationLink <SidebarNavigationLink
to='/soapbox/admin' to='/soapbox/admin'
icon={require('@tabler/icons/dashboard.svg')} icon={require('@tabler/icons/outline/dashboard.svg')}
count={dashboardCount} count={dashboardCount}
text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />} text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
/> />
@ -174,7 +179,8 @@ const SidebarNavigation = () => {
{(account || !restrictUnauth.timelines.local) && ( {(account || !restrictUnauth.timelines.local) && (
<SidebarNavigationLink <SidebarNavigationLink
to='/timeline/local' to='/timeline/local'
icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')} icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
activeIcon={features.federating ? require('@tabler/icons/filled/affiliate.svg') : undefined}
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />} text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
/> />
)} )}
@ -182,7 +188,7 @@ const SidebarNavigation = () => {
{(features.federating && (account || !restrictUnauth.timelines.federated)) && ( {(features.federating && (account || !restrictUnauth.timelines.federated)) && (
<SidebarNavigationLink <SidebarNavigationLink
to='/timeline/fediverse' to='/timeline/fediverse'
icon={require('@tabler/icons/topology-star-ring-3.svg')} icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />} text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
/> />
)} )}
@ -192,7 +198,7 @@ const SidebarNavigation = () => {
{menu.length > 0 && ( {menu.length > 0 && (
<DropdownMenu items={menu} placement='top'> <DropdownMenu items={menu} placement='top'>
<SidebarNavigationLink <SidebarNavigationLink
icon={require('@tabler/icons/dots-circle-horizontal.svg')} icon={require('@tabler/icons/outline/dots-circle-horizontal.svg')}
text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />} text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
/> />
</DropdownMenu> </DropdownMenu>

78
src/components/status-action-bar.tsx
Unescape View File

@ -232,7 +232,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
dispatch(deleteStatus(status.id, withRedraft)); dispatch(deleteStatus(status.id, withRedraft));
} else { } else {
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/trash.svg'), icon: withRedraft ? require('@tabler/icons/outline/edit.svg') : require('@tabler/icons/outline/trash.svg'),
heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading), heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage), message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm), confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@ -313,7 +313,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
const account = status.account; const account = status.account;
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />, heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm), confirm: intl.formatMessage(messages.blockConfirm),
@ -409,7 +409,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(messages.open), text: intl.formatMessage(messages.open),
action: handleOpen, action: handleOpen,
icon: require('@tabler/icons/arrows-vertical.svg'), icon: require('@tabler/icons/outline/arrows-vertical.svg'),
}); });
} }
@ -417,14 +417,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(messages.copy), text: intl.formatMessage(messages.copy),
action: handleCopy, action: handleCopy,
icon: require('@tabler/icons/clipboard-copy.svg'), icon: require('@tabler/icons/outline/clipboard-copy.svg'),
}); });
if (features.embeds && account.local) { if (features.embeds && account.local) {
menu.push({ menu.push({
text: intl.formatMessage(messages.embed), text: intl.formatMessage(messages.embed),
action: handleEmbed, action: handleEmbed,
icon: require('@tabler/icons/share.svg'), icon: require('@tabler/icons/outline/share.svg'),
}); });
} }
} }
@ -441,7 +441,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(status.pinned ? messages.unpinFromGroup : messages.pinToGroup), text: intl.formatMessage(status.pinned ? messages.unpinFromGroup : messages.pinToGroup),
action: handleGroupPinClick, action: handleGroupPinClick,
icon: status.pinned ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'), icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
}); });
} }
} }
@ -450,7 +450,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark), text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
action: handleBookmarkClick, action: handleBookmarkClick,
icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'), icon: status.bookmarked ? require('@tabler/icons/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
}); });
} }
@ -458,7 +458,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(messages.external, { domain }), text: intl.formatMessage(messages.external, { domain }),
action: handleExternalClick, action: handleExternalClick,
icon: require('@tabler/icons/external-link.svg'), icon: require('@tabler/icons/outline/external-link.svg'),
}); });
} }
@ -467,7 +467,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
action: handleConversationMuteClick, action: handleConversationMuteClick,
icon: mutingConversation ? require('@tabler/icons/bell.svg') : require('@tabler/icons/bell-off.svg'), icon: mutingConversation ? require('@tabler/icons/outline/bell.svg') : require('@tabler/icons/outline/bell-off.svg'),
}); });
menu.push(null); menu.push(null);
@ -477,14 +477,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin), text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
action: handlePinClick, action: handlePinClick,
icon: status.pinned ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'), icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
}); });
} else { } else {
if (status.visibility === 'private') { if (status.visibility === 'private') {
menu.push({ menu.push({
text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private), text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
action: handleReblogClick, action: handleReblogClick,
icon: require('@tabler/icons/repeat.svg'), icon: require('@tabler/icons/outline/repeat.svg'),
}); });
} }
} }
@ -492,20 +492,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(messages.delete), text: intl.formatMessage(messages.delete),
action: handleDeleteClick, action: handleDeleteClick,
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
destructive: true, destructive: true,
}); });
if (features.editStatuses) { if (features.editStatuses) {
menu.push({ menu.push({
text: intl.formatMessage(messages.edit), text: intl.formatMessage(messages.edit),
action: handleEditClick, action: handleEditClick,
icon: require('@tabler/icons/edit.svg'), icon: require('@tabler/icons/outline/edit.svg'),
}); });
} else { } else {
menu.push({ menu.push({
text: intl.formatMessage(messages.redraft), text: intl.formatMessage(messages.redraft),
action: handleRedraftClick, action: handleRedraftClick,
icon: require('@tabler/icons/edit.svg'), icon: require('@tabler/icons/outline/edit.svg'),
destructive: true, destructive: true,
}); });
} }
@ -513,20 +513,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(messages.mention, { name: username }), text: intl.formatMessage(messages.mention, { name: username }),
action: handleMentionClick, action: handleMentionClick,
icon: require('@tabler/icons/at.svg'), icon: require('@tabler/icons/outline/at.svg'),
}); });
if (status.account.pleroma?.accepts_chat_messages === true) { if (status.account.pleroma?.accepts_chat_messages === true) {
menu.push({ menu.push({
text: intl.formatMessage(messages.chat, { name: username }), text: intl.formatMessage(messages.chat, { name: username }),
action: handleChatClick, action: handleChatClick,
icon: require('@tabler/icons/messages.svg'), icon: require('@tabler/icons/outline/messages.svg'),
}); });
} else if (features.privacyScopes) { } else if (features.privacyScopes) {
menu.push({ menu.push({
text: intl.formatMessage(messages.direct, { name: username }), text: intl.formatMessage(messages.direct, { name: username }),
action: handleDirectClick, action: handleDirectClick,
icon: require('@tabler/icons/mail.svg'), icon: require('@tabler/icons/outline/mail.svg'),
}); });
} }
@ -534,7 +534,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
if (features.groupsMuting && status.group) { if (features.groupsMuting && status.group) {
menu.push({ menu.push({
text: isMutingGroup ? intl.formatMessage(messages.unmuteGroup) : intl.formatMessage(messages.muteGroup), text: isMutingGroup ? intl.formatMessage(messages.unmuteGroup) : intl.formatMessage(messages.muteGroup),
icon: require('@tabler/icons/volume-3.svg'), icon: require('@tabler/icons/outline/volume-3.svg'),
action: isMutingGroup ? handleUnmuteGroupClick : handleMuteGroupClick, action: isMutingGroup ? handleUnmuteGroupClick : handleMuteGroupClick,
}); });
menu.push(null); menu.push(null);
@ -543,17 +543,17 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(messages.mute, { name: username }), text: intl.formatMessage(messages.mute, { name: username }),
action: handleMuteClick, action: handleMuteClick,
icon: require('@tabler/icons/volume-3.svg'), icon: require('@tabler/icons/outline/volume-3.svg'),
}); });
menu.push({ menu.push({
text: intl.formatMessage(messages.block, { name: username }), text: intl.formatMessage(messages.block, { name: username }),
action: handleBlockClick, action: handleBlockClick,
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
}); });
menu.push({ menu.push({
text: intl.formatMessage(messages.report, { name: username }), text: intl.formatMessage(messages.report, { name: username }),
action: handleReport, action: handleReport,
icon: require('@tabler/icons/flag.svg'), icon: require('@tabler/icons/outline/flag.svg'),
}); });
} }
@ -575,7 +575,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: 'Ban from Group', text: 'Ban from Group',
action: handleBlockFromGroup, action: handleBlockFromGroup,
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
destructive: true, destructive: true,
}); });
} }
@ -584,7 +584,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(messages.groupModDelete), text: intl.formatMessage(messages.groupModDelete),
action: handleDeleteFromGroup, action: handleDeleteFromGroup,
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
destructive: true, destructive: true,
}); });
} }
@ -596,28 +596,28 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({ menu.push({
text: intl.formatMessage(messages.adminAccount, { name: username }), text: intl.formatMessage(messages.adminAccount, { name: username }),
action: onModerate, action: onModerate,
icon: require('@tabler/icons/gavel.svg'), icon: require('@tabler/icons/outline/gavel.svg'),
}); });
if (isAdmin) { if (isAdmin) {
menu.push({ menu.push({
text: intl.formatMessage(messages.admin_status), text: intl.formatMessage(messages.admin_status),
href: `/pleroma/admin/#/statuses/${status.id}/`, href: `/pleroma/admin/#/statuses/${status.id}/`,
icon: require('@tabler/icons/pencil.svg'), icon: require('@tabler/icons/outline/pencil.svg'),
}); });
} }
menu.push({ menu.push({
text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive), text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
action: handleToggleStatusSensitivity, action: handleToggleStatusSensitivity,
icon: require('@tabler/icons/alert-triangle.svg'), icon: require('@tabler/icons/outline/alert-triangle.svg'),
}); });
if (!ownAccount) { if (!ownAccount) {
menu.push({ menu.push({
text: intl.formatMessage(messages.deleteStatus), text: intl.formatMessage(messages.deleteStatus),
action: handleDeleteStatus, action: handleDeleteStatus,
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
destructive: true, destructive: true,
}); });
} }
@ -655,14 +655,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite); const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite);
const menu = _makeMenu(publicStatus); const menu = _makeMenu(publicStatus);
let reblogIcon = require('@tabler/icons/repeat.svg'); let reblogIcon = require('@tabler/icons/outline/repeat.svg');
let replyTitle; let replyTitle;
let replyDisabled = false; let replyDisabled = false;
if (status.visibility === 'direct') { if (status.visibility === 'direct') {
reblogIcon = require('@tabler/icons/mail.svg'); reblogIcon = require('@tabler/icons/outline/mail.svg');
} else if (status.visibility === 'private') { } else if (status.visibility === 'private') {
reblogIcon = require('@tabler/icons/lock.svg'); reblogIcon = require('@tabler/icons/outline/lock.svg');
} }
if ((status.group as Group)?.membership_required && !groupRelationship?.member) { if ((status.group as Group)?.membership_required && !groupRelationship?.member) {
@ -673,11 +673,11 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
const reblogMenu = [{ const reblogMenu = [{
text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog), text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
action: handleReblogClick, action: handleReblogClick,
icon: require('@tabler/icons/repeat.svg'), icon: require('@tabler/icons/outline/repeat.svg'),
}, { }, {
text: intl.formatMessage(messages.quotePost), text: intl.formatMessage(messages.quotePost),
action: handleQuoteClick, action: handleQuoteClick,
icon: require('@tabler/icons/quote.svg'), icon: require('@tabler/icons/outline/quote.svg'),
}]; }];
const reblogButton = ( const reblogButton = (
@ -726,7 +726,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
> >
<StatusActionButton <StatusActionButton
title={replyTitle} title={replyTitle}
icon={require('@tabler/icons/message-circle-2.svg')} icon={require('@tabler/icons/outline/message-circle-2.svg')}
onClick={handleReplyClick} onClick={handleReplyClick}
count={replyCount} count={replyCount}
text={withLabels ? intl.formatMessage(messages.reply) : undefined} text={withLabels ? intl.formatMessage(messages.reply) : undefined}
@ -751,7 +751,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
<StatusReactionWrapper statusId={status.id}> <StatusReactionWrapper statusId={status.id}>
<StatusActionButton <StatusActionButton
title={meEmojiTitle} title={meEmojiTitle}
icon={require('@tabler/icons/heart.svg')} icon={require('@tabler/icons/outline/heart.svg')}
filled filled
color='accent' color='accent'
active={Boolean(meEmojiName)} active={Boolean(meEmojiName)}
@ -764,7 +764,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
) : ( ) : (
<StatusActionButton <StatusActionButton
title={intl.formatMessage(messages.favourite)} title={intl.formatMessage(messages.favourite)}
icon={features.dislikes ? require('@tabler/icons/thumb-up.svg') : require('@tabler/icons/heart.svg')} icon={features.dislikes ? require('@tabler/icons/outline/thumb-up.svg') : require('@tabler/icons/outline/heart.svg')}
color='accent' color='accent'
filled filled
onClick={handleFavouriteClick} onClick={handleFavouriteClick}
@ -778,7 +778,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
{features.dislikes && ( {features.dislikes && (
<StatusActionButton <StatusActionButton
title={intl.formatMessage(messages.disfavourite)} title={intl.formatMessage(messages.disfavourite)}
icon={require('@tabler/icons/thumb-down.svg')} icon={require('@tabler/icons/outline/thumb-down.svg')}
color='accent' color='accent'
filled filled
onClick={handleDislikeClick} onClick={handleDislikeClick}
@ -792,7 +792,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
{(acceptsZaps && window.webln) && ( {(acceptsZaps && window.webln) && (
<StatusActionButton <StatusActionButton
title={intl.formatMessage(messages.zap)} title={intl.formatMessage(messages.zap)}
icon={require('@tabler/icons/bolt.svg')} icon={require('@tabler/icons/outline/bolt.svg')}
color='accent' color='accent'
filled filled
onClick={handleZapClick} onClick={handleZapClick}
@ -805,7 +805,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
{canShare && ( {canShare && (
<StatusActionButton <StatusActionButton
title={intl.formatMessage(messages.share)} title={intl.formatMessage(messages.share)}
icon={require('@tabler/icons/upload.svg')} icon={require('@tabler/icons/outline/upload.svg')}
onClick={handleShareClick} onClick={handleShareClick}
theme={statusActionButtonTheme} theme={statusActionButtonTheme}
/> />
@ -814,7 +814,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
<DropdownMenu items={menu} status={status}> <DropdownMenu items={menu} status={status}>
<StatusActionButton <StatusActionButton
title={intl.formatMessage(messages.more)} title={intl.formatMessage(messages.more)}
icon={require('@tabler/icons/dots.svg')} icon={require('@tabler/icons/outline/dots.svg')}
theme={statusActionButtonTheme} theme={statusActionButtonTheme}
/> />
</DropdownMenu> </DropdownMenu>

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

@ -27,7 +27,7 @@ interface IReadMoreButton {
const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => ( 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}> <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' /> <FormattedMessage id='status.read_more' defaultMessage='Read more' />
<Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} /> <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
</button> </button>
); );

8
src/components/status.tsx
Unescape View File

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

12
src/components/statuses/sensitive-content-overlay.tsx
Unescape View File

@ -61,7 +61,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
dispatch(deleteStatus(status.id, false)); dispatch(deleteStatus(status.id, false));
} else { } else {
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
heading: intl.formatMessage(messages.deleteHeading), heading: intl.formatMessage(messages.deleteHeading),
message: intl.formatMessage(messages.deleteMessage), message: intl.formatMessage(messages.deleteMessage),
confirm: intl.formatMessage(messages.deleteConfirm), confirm: intl.formatMessage(messages.deleteConfirm),
@ -75,7 +75,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
{ {
text: intl.formatMessage(messages.delete), text: intl.formatMessage(messages.delete),
action: handleDeleteStatus, action: handleDeleteStatus,
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
destructive: true, destructive: true,
}, },
]; ];
@ -99,7 +99,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
{visible ? ( {visible ? (
<Button <Button
text={intl.formatMessage(messages.hide)} text={intl.formatMessage(messages.hide)}
icon={require('@tabler/icons/eye-off.svg')} icon={require('@tabler/icons/outline/eye-off.svg')}
onClick={toggleVisibility} onClick={toggleVisibility}
theme='primary' theme='primary'
size='sm' size='sm'
@ -138,7 +138,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
type='button' type='button'
theme='outline' theme='outline'
size='sm' size='sm'
icon={require('@tabler/icons/headset.svg')} icon={require('@tabler/icons/outline/headset.svg')}
> >
{intl.formatMessage(messages.contact)} {intl.formatMessage(messages.contact)}
</Button> </Button>
@ -151,7 +151,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
type='button' type='button'
theme='outline' theme='outline'
size='sm' size='sm'
icon={require('@tabler/icons/eye.svg')} icon={require('@tabler/icons/outline/eye.svg')}
onClick={toggleVisibility} onClick={toggleVisibility}
> >
{intl.formatMessage(messages.show)} {intl.formatMessage(messages.show)}
@ -160,7 +160,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
{(isUnderReview && isOwnStatus) ? ( {(isUnderReview && isOwnStatus) ? (
<DropdownMenu <DropdownMenu
items={menu} items={menu}
src={require('@tabler/icons/dots.svg')} src={require('@tabler/icons/outline/dots.svg')}
/> />
) : null} ) : null}
</HStack> </HStack>

9
src/components/thumb-navigation-link.tsx
Unescape View File

@ -9,13 +9,14 @@ interface IThumbNavigationLink {
count?: number; count?: number;
countMax?: number; countMax?: number;
src: string; src: string;
activeSrc?: string;
text: string | React.ReactElement; text: string | React.ReactElement;
to: string; to: string;
exact?: boolean; exact?: boolean;
paths?: Array<string>; paths?: Array<string>;
} }
const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax, src, text, to, exact, paths }): JSX.Element => { const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax, src, activeSrc, text, to, exact, paths }): JSX.Element => {
const { pathname } = useLocation(); const { pathname } = useLocation();
const isActive = (): boolean => { const isActive = (): boolean => {
@ -28,11 +29,13 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
const active = isActive(); const active = isActive();
const icon = (active && activeSrc) || src;
return ( return (
<NavLink to={to} exact={exact} className='thumb-navigation__link'> <NavLink to={to} exact={exact} className='thumb-navigation__link'>
{count !== undefined ? ( {count !== undefined ? (
<IconWithCounter <IconWithCounter
src={src} src={icon}
className={clsx({ className={clsx({
'h-5 w-5': true, 'h-5 w-5': true,
'text-gray-600 black:text-white': !active, 'text-gray-600 black:text-white': !active,
@ -43,7 +46,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
/> />
) : ( ) : (
<Icon <Icon
src={src} src={icon}
className={clsx({ className={clsx({
'h-5 w-5': true, 'h-5 w-5': true,
'text-gray-600 black:text-white': !active, 'text-gray-600 black:text-white': !active,

18
src/components/thumb-navigation.tsx
Unescape View File

@ -20,7 +20,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
if (features.chats) { if (features.chats) {
return ( return (
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/messages.svg')} src={require('@tabler/icons/outline/messages.svg')}
text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />} text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
to='/chats' to='/chats'
exact exact
@ -33,7 +33,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
if (features.directTimeline || features.conversations) { if (features.directTimeline || features.conversations) {
return ( return (
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/mail.svg')} src={require('@tabler/icons/outline/mail.svg')}
activeSrc={require('@tabler/icons/filled/mail.svg')}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />} text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
to='/messages' to='/messages'
paths={['/messages', '/conversations']} paths={['/messages', '/conversations']}
@ -47,7 +48,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
return ( return (
<div className='thumb-navigation'> <div className='thumb-navigation'>
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/home.svg')} src={require('@tabler/icons/outline/home.svg')}
activeSrc={require('@tabler/icons/filled/home.svg')}
text={<FormattedMessage id='navigation.home' defaultMessage='Home' />} text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
to='/' to='/'
exact exact
@ -55,7 +57,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{features.groups && ( {features.groups && (
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/circles.svg')} src={require('@tabler/icons/outline/circles.svg')}
activeSrc={require('@tabler/icons/filled/circles.svg')}
text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />} text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
to={groupsPath} to={groupsPath}
exact exact
@ -63,7 +66,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
)} )}
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/search.svg')} src={require('@tabler/icons/outline/search.svg')}
text={<FormattedMessage id='navigation.search' defaultMessage='Search' />} text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
to='/search' to='/search'
exact exact
@ -71,7 +74,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{account && ( {account && (
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/bell.svg')} src={require('@tabler/icons/outline/bell.svg')}
activeSrc={require('@tabler/icons/filled/bell.svg')}
text={<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />} text={<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />}
to='/notifications' to='/notifications'
exact exact
@ -83,7 +87,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{(account && account.staff) && ( {(account && account.staff) && (
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/dashboard.svg')} src={require('@tabler/icons/outline/dashboard.svg')}
text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />} text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
to='/soapbox/admin' to='/soapbox/admin'
count={dashboardCount} count={dashboardCount}

4
src/components/translate-button.tsx
Unescape View File

@ -53,7 +53,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
<Button <Button
theme='muted' theme='muted'
text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />} text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />}
icon={require('@tabler/icons/language.svg')} icon={require('@tabler/icons/outline/language.svg')}
onClick={handleTranslate} onClick={handleTranslate}
/> />
<Text theme='muted'> <Text theme='muted'>
@ -68,7 +68,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
<Button <Button
theme='muted' theme='muted'
text={<FormattedMessage id='status.translate' defaultMessage='Translate' />} text={<FormattedMessage id='status.translate' defaultMessage='Translate' />}
icon={require('@tabler/icons/language.svg')} icon={require('@tabler/icons/outline/language.svg')}
onClick={handleTranslate} onClick={handleTranslate}
/> />
</div> </div>

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

@ -60,7 +60,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
{menu && ( {menu && (
<DropdownMenu <DropdownMenu
items={menu} items={menu}
src={require('@tabler/icons/dots-vertical.svg')} src={require('@tabler/icons/outline/dots-vertical.svg')}
/> />
)} )}
{action && actionIcon && ( {action && actionIcon && (
@ -72,7 +72,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
</button> </button>
)} )}
<Icon <Icon
src={expanded ? require('@tabler/icons/chevron-up.svg') : require('@tabler/icons/chevron-down.svg')} 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='h-5 w-5 text-gray-700 dark:text-gray-600'
/> />
</HStack> </HStack>

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

@ -35,7 +35,7 @@ const Avatar = (props: IAvatar) => {
className={clsx('flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-900', className)} className={clsx('flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-900', className)}
> >
<Icon <Icon
src={require('@tabler/icons/photo-off.svg')} src={require('@tabler/icons/outline/photo-off.svg')}
className='h-4 w-4 text-gray-500 dark:text-gray-700' className='h-4 w-4 text-gray-500 dark:text-gray-700'
/> />
</div> </div>

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

@ -72,7 +72,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
return ( 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)}> <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/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' /> <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span> <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
</Comp> </Comp>
); );

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

@ -68,7 +68,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
disabled={!hasPrevPage || isDisabled} disabled={!hasPrevPage || isDisabled}
> >
<Icon <Icon
src={require('@tabler/icons/chevron-left.svg')} src={require('@tabler/icons/outline/chevron-left.svg')}
className='h-5 w-5 text-black dark:text-white' className='h-5 w-5 text-black dark:text-white'
/> />
</button> </button>
@ -100,7 +100,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
disabled={!hasNextPage || isDisabled} disabled={!hasNextPage || isDisabled}
> >
<Icon <Icon
src={require('@tabler/icons/chevron-right.svg')} src={require('@tabler/icons/outline/chevron-right.svg')}
className='h-5 w-5 text-black dark:text-white' className='h-5 w-5 text-black dark:text-white'
/> />
</button> </button>

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

@ -134,7 +134,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
{all && ( {all && (
<IconButton <IconButton
className='text-gray-600 hover:text-gray-600 dark:hover:text-white' className='text-gray-600 hover:text-gray-600 dark:hover:text-white'
src={require('@tabler/icons/dots.svg')} src={require('@tabler/icons/outline/dots.svg')}
onClick={handleExpand} onClick={handleExpand}
/> />
)} )}

2
src/components/ui/icon/svg-icon.test.tsx
Unescape View File

@ -1,4 +1,4 @@
import IconCode from '@tabler/icons/code.svg'; import IconCode from '@tabler/icons/outline/code.svg';
import React from 'react'; import React from 'react';
import { render, screen } from 'soapbox/jest/test-helpers'; import { render, screen } from 'soapbox/jest/test-helpers';

2
src/components/ui/input/input.tsx
Unescape View File

@ -123,7 +123,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400' className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
> >
<SvgIcon <SvgIcon
src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')} src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}
className='h-4 w-4' className='h-4 w-4'
/> />
</button> </button>

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

@ -65,7 +65,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
cancelAction, cancelAction,
cancelText, cancelText,
children, children,
closeIcon = require('@tabler/icons/x.svg'), closeIcon = require('@tabler/icons/outline/x.svg'),
closePosition = 'right', closePosition = 'right',
confirmationAction, confirmationAction,
confirmationDisabled, confirmationDisabled,
@ -107,7 +107,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
> >
{onBack && ( {onBack && (
<IconButton <IconButton
src={require('@tabler/icons/arrow-left.svg')} src={require('@tabler/icons/outline/arrow-left.svg')}
title={intl.formatMessage(messages.back)} title={intl.formatMessage(messages.back)}
onClick={onBack} 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 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'

2
src/components/ui/streamfield/streamfield.tsx
Unescape View File

@ -83,7 +83,7 @@ const Streamfield: React.FC<IStreamfield> = ({
<IconButton <IconButton
iconClassName='h-4 w-4' iconClassName='h-4 w-4'
className='bg-transparent text-gray-600 hover:text-gray-600' className='bg-transparent text-gray-600 hover:text-gray-600'
src={require('@tabler/icons/x.svg')} src={require('@tabler/icons/outline/x.svg')}
onClick={() => onRemoveItem(i)} onClick={() => onRemoveItem(i)}
title={intl.formatMessage(messages.remove)} title={intl.formatMessage(messages.remove)}
/> />

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

@ -18,7 +18,7 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
<IconButton <IconButton
iconClassName='h-4 w-4' iconClassName='h-4 w-4'
src={require('@tabler/icons/x.svg')} src={require('@tabler/icons/outline/x.svg')}
onClick={() => onDelete(tag)} onClick={() => onDelete(tag)}
/> />
</div> </div>

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

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

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

@ -42,7 +42,7 @@ const Widget: React.FC<IWidget> = ({
title, title,
children, children,
onActionClick, onActionClick,
actionIcon = require('@tabler/icons/arrow-right.svg'), actionIcon = require('@tabler/icons/outline/arrow-right.svg'),
actionTitle, actionTitle,
action, action,
}): JSX.Element => { }): JSX.Element => {

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

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

18
src/components/upload.tsx
Unescape View File

@ -1,12 +1,12 @@
import bookIcon from '@tabler/icons/book.svg'; import bookIcon from '@tabler/icons/outline/book.svg';
import fileCodeIcon from '@tabler/icons/file-code.svg'; import fileCodeIcon from '@tabler/icons/outline/file-code.svg';
import fileSpreadsheetIcon from '@tabler/icons/file-spreadsheet.svg'; import fileSpreadsheetIcon from '@tabler/icons/outline/file-spreadsheet.svg';
import fileTextIcon from '@tabler/icons/file-text.svg'; import fileTextIcon from '@tabler/icons/outline/file-text.svg';
import fileZipIcon from '@tabler/icons/file-zip.svg'; import fileZipIcon from '@tabler/icons/outline/file-zip.svg';
import defaultIcon from '@tabler/icons/paperclip.svg'; import defaultIcon from '@tabler/icons/outline/paperclip.svg';
import presentationIcon from '@tabler/icons/presentation.svg'; import presentationIcon from '@tabler/icons/outline/presentation.svg';
import xIcon from '@tabler/icons/x.svg'; import xIcon from '@tabler/icons/outline/x.svg';
import zoomInIcon from '@tabler/icons/zoom-in.svg'; import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
import clsx from 'clsx'; import clsx from 'clsx';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';
import React, { useState } from 'react'; import React, { useState } from 'react';

2
src/components/validation-checkmark.tsx
Unescape View File

@ -12,7 +12,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
return ( return (
<HStack alignItems='center' space={2} data-testid='validation-checkmark'> <HStack alignItems='center' space={2} data-testid='validation-checkmark'>
<Icon <Icon
src={isValid ? require('@tabler/icons/check.svg') : require('@tabler/icons/point.svg')} src={isValid ? require('@tabler/icons/outline/check.svg') : require('@tabler/icons/outline/point.svg')}
className={clsx({ className={clsx({
'w-4 h-4': true, 'w-4 h-4': true,
'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid, 'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid,

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

@ -103,7 +103,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase(); const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
thumbnail = ( thumbnail = (
<div className='media-gallery__item-thumbnail'> <div className='media-gallery__item-thumbnail'>
<span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span> <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/outline/volume.svg')} /></span>
<span className='media-gallery__file-extension__label'>{fileExtension}</span> <span className='media-gallery__file-extension__label'>{fileExtension}</span>
</div> </div>
); );
@ -112,7 +112,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
if (!visible) { if (!visible) {
icon = ( icon = (
<span className='media-gallery__item__icons'> <span className='media-gallery__item__icons'>
<Icon src={require('@tabler/icons/eye-off.svg')} /> <Icon src={require('@tabler/icons/outline/eye-off.svg')} />
</span> </span>
); );
} }

2
src/features/account-timeline/components/moved-note.tsx
Unescape View File

@ -16,7 +16,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
<div className='p-4'> <div className='p-4'>
<HStack className='mb-2' alignItems='center' space={1.5}> <HStack className='mb-2' alignItems='center' space={1.5}>
<Icon <Icon
src={require('@tabler/icons/briefcase.svg')} src={require('@tabler/icons/outline/briefcase.svg')}
className='flex-none text-primary-600 dark:text-primary-400' className='flex-none text-primary-600 dark:text-primary-400'
/> />

62
src/features/account/components/header.tsx
Unescape View File

@ -131,7 +131,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
dispatch(unblockAccount(account.id)); dispatch(unblockAccount(account.id));
} else { } else {
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />, heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm), confirm: intl.formatMessage(messages.blockConfirm),
@ -187,7 +187,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
const onBlockDomain = (domain: string) => { const onBlockDomain = (domain: string) => {
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />, heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications.' values={{ domain: <strong>{domain}</strong> }} />, message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications.' values={{ domain: <strong>{domain}</strong> }} />,
confirm: intl.formatMessage(messages.blockDomainConfirm), confirm: intl.formatMessage(messages.blockDomainConfirm),
@ -291,7 +291,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.subscribeFeed), text: intl.formatMessage(messages.subscribeFeed),
action: handleRssFeedClick, action: handleRssFeedClick,
icon: require('@tabler/icons/rss.svg'), icon: require('@tabler/icons/outline/rss.svg'),
}); });
} }
@ -299,7 +299,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.share, { name: account.username }), text: intl.formatMessage(messages.share, { name: account.username }),
action: handleShare, action: handleShare,
icon: require('@tabler/icons/upload.svg'), icon: require('@tabler/icons/outline/upload.svg'),
}); });
} }
@ -309,14 +309,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.profileExternal, { domain }), text: intl.formatMessage(messages.profileExternal, { domain }),
action: () => onProfileExternal(account.url), action: () => onProfileExternal(account.url),
icon: require('@tabler/icons/external-link.svg'), icon: require('@tabler/icons/outline/external-link.svg'),
}); });
} }
menu.push({ menu.push({
text: intl.formatMessage(messages.copy), text: intl.formatMessage(messages.copy),
action: handleCopy, action: handleCopy,
icon: require('@tabler/icons/clipboard-copy.svg'), icon: require('@tabler/icons/outline/clipboard-copy.svg'),
}); });
if (!ownAccount) return menu; if (!ownAccount) return menu;
@ -325,7 +325,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(account.id === ownAccount.id ? messages.searchSelf : messages.search, { name: account.username }), text: intl.formatMessage(account.id === ownAccount.id ? messages.searchSelf : messages.search, { name: account.username }),
action: onSearch, action: onSearch,
icon: require('@tabler/icons/search.svg'), icon: require('@tabler/icons/outline/search.svg'),
}); });
} }
@ -337,36 +337,36 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.edit_profile), text: intl.formatMessage(messages.edit_profile),
to: '/settings/profile', to: '/settings/profile',
icon: require('@tabler/icons/user.svg'), icon: require('@tabler/icons/outline/user.svg'),
}); });
menu.push({ menu.push({
text: intl.formatMessage(messages.preferences), text: intl.formatMessage(messages.preferences),
to: '/settings', to: '/settings',
icon: require('@tabler/icons/settings.svg'), icon: require('@tabler/icons/outline/settings.svg'),
}); });
menu.push(null); menu.push(null);
menu.push({ menu.push({
text: intl.formatMessage(messages.mutes), text: intl.formatMessage(messages.mutes),
to: '/mutes', to: '/mutes',
icon: require('@tabler/icons/circle-x.svg'), icon: require('@tabler/icons/outline/circle-x.svg'),
}); });
menu.push({ menu.push({
text: intl.formatMessage(messages.blocks), text: intl.formatMessage(messages.blocks),
to: '/blocks', to: '/blocks',
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
}); });
} else { } else {
menu.push({ menu.push({
text: intl.formatMessage(messages.mention, { name: account.username }), text: intl.formatMessage(messages.mention, { name: account.username }),
action: onMention, action: onMention,
icon: require('@tabler/icons/at.svg'), icon: require('@tabler/icons/outline/at.svg'),
}); });
if (features.privacyScopes) { if (features.privacyScopes) {
menu.push({ menu.push({
text: intl.formatMessage(messages.direct, { name: account.username }), text: intl.formatMessage(messages.direct, { name: account.username }),
action: onDirect, action: onDirect,
icon: require('@tabler/icons/mail.svg'), icon: require('@tabler/icons/outline/mail.svg'),
}); });
} }
@ -375,13 +375,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.hideReblogs, { name: account.username }), text: intl.formatMessage(messages.hideReblogs, { name: account.username }),
action: onReblogToggle, action: onReblogToggle,
icon: require('@tabler/icons/repeat.svg'), icon: require('@tabler/icons/outline/repeat.svg'),
}); });
} else { } else {
menu.push({ menu.push({
text: intl.formatMessage(messages.showReblogs, { name: account.username }), text: intl.formatMessage(messages.showReblogs, { name: account.username }),
action: onReblogToggle, action: onReblogToggle,
icon: require('@tabler/icons/repeat.svg'), icon: require('@tabler/icons/outline/repeat.svg'),
}); });
} }
@ -389,7 +389,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list), text: intl.formatMessage(messages.add_or_remove_from_list),
action: onAddToList, action: onAddToList,
icon: require('@tabler/icons/list.svg'), icon: require('@tabler/icons/outline/list.svg'),
}); });
} }
@ -397,14 +397,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(account.relationship?.endorsed ? messages.unendorse : messages.endorse), text: intl.formatMessage(account.relationship?.endorsed ? messages.unendorse : messages.endorse),
action: onEndorseToggle, action: onEndorseToggle,
icon: require('@tabler/icons/user-check.svg'), icon: require('@tabler/icons/outline/user-check.svg'),
}); });
} }
} else if (features.lists && features.unrestrictedLists) { } else if (features.lists && features.unrestrictedLists) {
menu.push({ menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list), text: intl.formatMessage(messages.add_or_remove_from_list),
action: onAddToList, action: onAddToList,
icon: require('@tabler/icons/list.svg'), icon: require('@tabler/icons/outline/list.svg'),
}); });
} }
@ -414,7 +414,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.removeFromFollowers), text: intl.formatMessage(messages.removeFromFollowers),
action: onRemoveFromFollowers, action: onRemoveFromFollowers,
icon: require('@tabler/icons/user-x.svg'), icon: require('@tabler/icons/outline/user-x.svg'),
}); });
} }
@ -422,13 +422,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.unmute, { name: account.username }), text: intl.formatMessage(messages.unmute, { name: account.username }),
action: onMute, action: onMute,
icon: require('@tabler/icons/circle-x.svg'), icon: require('@tabler/icons/outline/circle-x.svg'),
}); });
} else { } else {
menu.push({ menu.push({
text: intl.formatMessage(messages.mute, { name: account.username }), text: intl.formatMessage(messages.mute, { name: account.username }),
action: onMute, action: onMute,
icon: require('@tabler/icons/circle-x.svg'), icon: require('@tabler/icons/outline/circle-x.svg'),
}); });
} }
@ -436,20 +436,20 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.unblock, { name: account.username }), text: intl.formatMessage(messages.unblock, { name: account.username }),
action: onBlock, action: onBlock,
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
}); });
} else { } else {
menu.push({ menu.push({
text: intl.formatMessage(messages.block, { name: account.username }), text: intl.formatMessage(messages.block, { name: account.username }),
action: onBlock, action: onBlock,
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
}); });
} }
menu.push({ menu.push({
text: intl.formatMessage(messages.report, { name: account.username }), text: intl.formatMessage(messages.report, { name: account.username }),
action: onReport, action: onReport,
icon: require('@tabler/icons/flag.svg'), icon: require('@tabler/icons/outline/flag.svg'),
}); });
} }
@ -462,13 +462,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.unblockDomain, { domain }), text: intl.formatMessage(messages.unblockDomain, { domain }),
action: () => onUnblockDomain(domain), action: () => onUnblockDomain(domain),
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
}); });
} else { } else {
menu.push({ menu.push({
text: intl.formatMessage(messages.blockDomain, { domain }), text: intl.formatMessage(messages.blockDomain, { domain }),
action: () => onBlockDomain(domain), action: () => onBlockDomain(domain),
icon: require('@tabler/icons/ban.svg'), icon: require('@tabler/icons/outline/ban.svg'),
}); });
} }
} }
@ -479,7 +479,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.adminAccount, { name: account.username }), text: intl.formatMessage(messages.adminAccount, { name: account.username }),
action: onModerate, action: onModerate,
icon: require('@tabler/icons/gavel.svg'), icon: require('@tabler/icons/outline/gavel.svg'),
}); });
} }
@ -566,7 +566,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
return ( return (
<IconButton <IconButton
src={require('@tabler/icons/messages.svg')} src={require('@tabler/icons/outline/messages.svg')}
onClick={() => createAndNavigateToChat.mutate(account.id)} onClick={() => createAndNavigateToChat.mutate(account.id)}
title={intl.formatMessage(messages.chat, { name: account.username })} title={intl.formatMessage(messages.chat, { name: account.username })}
theme='outlined' theme='outlined'
@ -578,7 +578,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
} else if (account.pleroma?.accepts_chat_messages) { } else if (account.pleroma?.accepts_chat_messages) {
return ( return (
<IconButton <IconButton
src={require('@tabler/icons/messages.svg')} src={require('@tabler/icons/outline/messages.svg')}
onClick={() => createAndNavigateToChat.mutate(account.id)} onClick={() => createAndNavigateToChat.mutate(account.id)}
title={intl.formatMessage(messages.chat, { name: account.username })} title={intl.formatMessage(messages.chat, { name: account.username })}
theme='outlined' theme='outlined'
@ -600,7 +600,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
return ( return (
<IconButton <IconButton
src={require('@tabler/icons/upload.svg')} src={require('@tabler/icons/outline/upload.svg')}
onClick={handleShare} onClick={handleShare}
title={intl.formatMessage(messages.share, { name: account.username })} title={intl.formatMessage(messages.share, { name: account.username })}
theme='outlined' theme='outlined'
@ -657,7 +657,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
{menu.length > 0 && ( {menu.length > 0 && (
<DropdownMenu items={menu} placement='bottom-end'> <DropdownMenu items={menu} placement='bottom-end'>
<IconButton <IconButton
src={require('@tabler/icons/dots.svg')} src={require('@tabler/icons/outline/dots.svg')}
theme='outlined' theme='outlined'
className='px-2' className='px-2'
iconClassName='h-4 w-4' iconClassName='h-4 w-4'

2
src/features/admin/announcements.tsx
Unescape View File

@ -102,7 +102,7 @@ const Announcements: React.FC = () => {
<Stack className='gap-4'> <Stack className='gap-4'>
<Button <Button
className='sm:w-fit sm:self-end' className='sm:w-fit sm:self-end'
icon={require('@tabler/icons/plus.svg')} icon={require('@tabler/icons/outline/plus.svg')}
onClick={handleCreateAnnouncement} onClick={handleCreateAnnouncement}
theme='secondary' theme='secondary'
block block

6
src/features/admin/components/report-status.tsx
Unescape View File

@ -34,11 +34,11 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
return [{ return [{
text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }), text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
to: `/@${acct}/posts/${status.id}`, to: `/@${acct}/posts/${status.id}`,
icon: require('@tabler/icons/pencil.svg'), icon: require('@tabler/icons/outline/pencil.svg'),
}, { }, {
text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }), text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
action: handleDeleteStatus, action: handleDeleteStatus,
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
destructive: true, destructive: true,
}]; }];
}; };
@ -55,7 +55,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
<div className='flex-none'> <div className='flex-none'>
<DropdownMenu <DropdownMenu
items={menu} items={menu}
src={require('@tabler/icons/dots-vertical.svg')} src={require('@tabler/icons/outline/dots-vertical.svg')}
/> />
</div> </div>
</HStack> </HStack>

6
src/features/admin/components/report.tsx
Unescape View File

@ -45,11 +45,11 @@ const Report: React.FC<IReport> = ({ id }) => {
return [{ return [{
text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }), text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }),
action: handleDeactivateUser, action: handleDeactivateUser,
icon: require('@tabler/icons/hourglass-empty.svg'), icon: require('@tabler/icons/outline/hourglass-empty.svg'),
}, { }, {
text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }), text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }),
action: handleDeleteUser, action: handleDeleteUser,
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
destructive: true, destructive: true,
}]; }];
}; };
@ -149,7 +149,7 @@ const Report: React.FC<IReport> = ({ id }) => {
<FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' /> <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
</Button> </Button>
<DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} /> <DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
</HStack> </HStack>
</HStack> </HStack>
); );

2
src/features/admin/domains.tsx
Unescape View File

@ -116,7 +116,7 @@ const Domains: React.FC = () => {
<Stack className='gap-4'> <Stack className='gap-4'>
<Button <Button
className='sm:w-fit sm:self-end' className='sm:w-fit sm:self-end'
icon={require('@tabler/icons/plus.svg')} icon={require('@tabler/icons/outline/plus.svg')}
onClick={handleCreateDomain} onClick={handleCreateDomain}
theme='secondary' theme='secondary'
block block

8
src/features/admin/tabs/dashboard.tsx
Unescape View File

@ -133,7 +133,7 @@ const Dashboard: React.FC = () => {
<Icon <Icon
className='h-4 w-4' className='h-4 w-4'
src={require('@tabler/icons/external-link.svg')} src={require('@tabler/icons/outline/external-link.svg')}
/> />
</a> </a>
</ListItem> </ListItem>
@ -152,7 +152,7 @@ const Dashboard: React.FC = () => {
<List> <List>
<ListItem label='subscribers.csv'> <ListItem label='subscribers.csv'>
<IconButton <IconButton
src={require('@tabler/icons/download.svg')} src={require('@tabler/icons/outline/download.svg')}
onClick={handleSubscribersClick} onClick={handleSubscribersClick}
iconClassName='h-5 w-5' iconClassName='h-5 w-5'
/> />
@ -160,7 +160,7 @@ const Dashboard: React.FC = () => {
<ListItem label='unsubscribers.csv'> <ListItem label='unsubscribers.csv'>
<IconButton <IconButton
src={require('@tabler/icons/download.svg')} src={require('@tabler/icons/outline/download.svg')}
onClick={handleUnsubscribersClick} onClick={handleUnsubscribersClick}
iconClassName='h-5 w-5' iconClassName='h-5 w-5'
/> />
@ -168,7 +168,7 @@ const Dashboard: React.FC = () => {
<ListItem label='combined.csv'> <ListItem label='combined.csv'>
<IconButton <IconButton
src={require('@tabler/icons/download.svg')} src={require('@tabler/icons/outline/download.svg')}
onClick={handleCombinedClick} onClick={handleCombinedClick}
iconClassName='h-5 w-5' iconClassName='h-5 w-5'
/> />

2
src/features/aliases/components/account.tsx
Unescape View File

@ -37,7 +37,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
if (!added && accountId !== me) { if (!added && accountId !== me) {
button = ( button = (
<IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} /> <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
); );
} }

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

@ -53,7 +53,7 @@ const Search: React.FC = () => {
/> />
<div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}> <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} /> <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
</div> </div>
</label> </label>
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button> <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>

2
src/features/aliases/index.tsx
Unescape View File

@ -79,7 +79,7 @@ const Aliases = () => {
<Text tag='span'>{alias}</Text> <Text tag='span'>{alias}</Text>
</div> </div>
<div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}> <div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
<Icon className='mr-1.5' src={require('@tabler/icons/x.svg')} /> <Icon className='mr-1.5' src={require('@tabler/icons/outline/x.svg')} />
<Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text> <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
</div> </div>
</HStack> </HStack>

6
src/features/audio/index.tsx
Unescape View File

@ -518,7 +518,7 @@ const Audio: React.FC<IAudio> = (props) => {
className='player-button' className='player-button'
onClick={togglePlay} onClick={togglePlay}
> >
<Icon src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} /> <Icon src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
</button> </button>
<button <button
@ -528,7 +528,7 @@ const Audio: React.FC<IAudio> = (props) => {
className='player-button' className='player-button'
onClick={toggleMute} onClick={toggleMute}
> >
<Icon src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} /> <Icon src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
</button> </button>
<div <div
@ -569,7 +569,7 @@ const Audio: React.FC<IAudio> = (props) => {
download download
target='_blank' target='_blank'
> >
<Icon src={require('@tabler/icons/download.svg')} /> <Icon src={require('@tabler/icons/outline/download.svg')} />
</a> </a>
</div> </div>
</div> </div>

14
src/features/auth-login/components/consumer-button.tsx
Unescape View File

@ -12,12 +12,12 @@ const messages = defineMessages({
/** Map between OAuth providers and brand icons. */ /** Map between OAuth providers and brand icons. */
const BRAND_ICONS: Record<string, string> = { const BRAND_ICONS: Record<string, string> = {
twitter: require('@tabler/icons/brand-twitter.svg'), twitter: require('@tabler/icons/outline/brand-twitter.svg'),
facebook: require('@tabler/icons/brand-facebook.svg'), facebook: require('@tabler/icons/outline/brand-facebook.svg'),
google: require('@tabler/icons/brand-google.svg'), google: require('@tabler/icons/outline/brand-google.svg'),
microsoft: require('@tabler/icons/brand-windows.svg'), microsoft: require('@tabler/icons/outline/brand-windows.svg'),
slack: require('@tabler/icons/brand-slack.svg'), slack: require('@tabler/icons/outline/brand-slack.svg'),
github: require('@tabler/icons/brand-github.svg'), github: require('@tabler/icons/outline/brand-github.svg'),
}; };
interface IConsumerButton { interface IConsumerButton {
@ -29,7 +29,7 @@ const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const icon = BRAND_ICONS[provider] || require('@tabler/icons/key.svg'); const icon = BRAND_ICONS[provider] || require('@tabler/icons/outline/key.svg');
const handleClick = () => { const handleClick = () => {
dispatch(prepareRequest(provider)); dispatch(prepareRequest(provider));

4
src/features/auth-login/components/registration-form.tsx
Unescape View File

@ -143,7 +143,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
</>); </>);
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/check.svg'), icon: require('@tabler/icons/outline/check.svg'),
heading: needsConfirmation heading: needsConfirmation
? intl.formatMessage(messages.needsConfirmationHeader) ? intl.formatMessage(messages.needsConfirmationHeader)
: needsApproval : needsApproval
@ -250,7 +250,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
autoCorrect='off' autoCorrect='off'
autoCapitalize='off' autoCapitalize='off'
pattern='^[a-zA-Z\d_-]+' pattern='^[a-zA-Z\d_-]+'
icon={require('@tabler/icons/at.svg')} icon={require('@tabler/icons/outline/at.svg')}
onChange={onUsernameChange} onChange={onUsernameChange}
value={params.get('username', '')} value={params.get('username', '')}
required required

2
src/features/auth-token-list/index.tsx
Unescape View File

@ -27,7 +27,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
const handleRevoke = () => { const handleRevoke = () => {
if (isCurrent) if (isCurrent)
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/alert-triangle.svg'), icon: require('@tabler/icons/outline/alert-triangle.svg'),
heading: intl.formatMessage(messages.revokeSessionHeading), heading: intl.formatMessage(messages.revokeSessionHeading),
message: intl.formatMessage(messages.revokeSessionMessage), message: intl.formatMessage(messages.revokeSessionMessage),
confirm: intl.formatMessage(messages.revokeSessionConfirm), confirm: intl.formatMessage(messages.revokeSessionConfirm),

2
src/features/birthdays/account.tsx
Unescape View File

@ -36,7 +36,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
date: formattedBirthday, date: formattedBirthday,
})} })}
> >
<Icon src={require('@tabler/icons/balloon.svg')} /> <Icon src={require('@tabler/icons/outline/balloon.svg')} />
{formattedBirthday} {formattedBirthday}
</div> </div>
</HStack> </HStack>

4
src/features/bookmark-folders/index.tsx
Unescape View File

@ -40,7 +40,7 @@ const BookmarkFolders: React.FC = () => {
to='/bookmarks/all' to='/bookmarks/all'
label={ label={
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/bookmarks.svg')} size={20} /> <Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
<span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span> <span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
</HStack> </HStack>
} }
@ -57,7 +57,7 @@ const BookmarkFolders: React.FC = () => {
src={folder.emoji_url || undefined} src={folder.emoji_url || undefined}
className='h-5 w-5 flex-none' className='h-5 w-5 flex-none'
/> />
) : <Icon src={require('@tabler/icons/folder.svg')} size={20} />} ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
<span>{folder.name}</span> <span>{folder.name}</span>
</HStack> </HStack>
} }

6
src/features/bookmarks/index.tsx
Unescape View File

@ -91,12 +91,12 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
{ {
text: intl.formatMessage(messages.editFolder), text: intl.formatMessage(messages.editFolder),
action: handleEditFolder, action: handleEditFolder,
icon: require('@tabler/icons/edit.svg'), icon: require('@tabler/icons/outline/edit.svg'),
}, },
{ {
text: intl.formatMessage(messages.deleteFolder), text: intl.formatMessage(messages.deleteFolder),
action: handleDeleteFolder, action: handleDeleteFolder,
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
}, },
] : []; ] : [];
@ -104,7 +104,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
<Column <Column
label={folder ? folder.name : intl.formatMessage(messages.heading)} label={folder ? folder.name : intl.formatMessage(messages.heading)}
action={ action={
<DropdownMenu items={items} src={require('@tabler/icons/dots-vertical.svg')} /> <DropdownMenu items={items} src={require('@tabler/icons/outline/dots-vertical.svg')} />
} }
transparent transparent
> >

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

@ -230,7 +230,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
) : null} ) : null}
<IconButton <IconButton
src={require('@tabler/icons/send.svg')} src={require('@tabler/icons/outline/send.svg')}
iconClassName='h-5 w-5' iconClassName='h-5 w-5'
className='text-primary-500' className='text-primary-500'
disabled={isSubmitDisabled} disabled={isSubmitDisabled}

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

@ -59,7 +59,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
}, },
})); }));
}, },
icon: require('@tabler/icons/logout.svg'), icon: require('@tabler/icons/outline/logout.svg'),
}], []); }], []);
const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => { const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
@ -124,7 +124,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
<div className='hidden text-gray-600 hover:text-gray-100 group-hover:block'> <div className='hidden text-gray-600 hover:text-gray-100 group-hover:block'>
<DropdownMenu items={menu}> <DropdownMenu items={menu}>
<IconButton <IconButton
src={require('@tabler/icons/dots.svg')} src={require('@tabler/icons/outline/dots.svg')}
title='Settings' title='Settings'
className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500' className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
iconClassName='h-4 w-4' iconClassName='h-4 w-4'

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

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

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

@ -159,7 +159,7 @@ const ChatMessage = (props: IChatMessage) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.copy), text: intl.formatMessage(messages.copy),
action: () => handleCopyText(chatMessage), action: () => handleCopyText(chatMessage),
icon: require('@tabler/icons/copy.svg'), icon: require('@tabler/icons/outline/copy.svg'),
}); });
} }
@ -167,7 +167,7 @@ const ChatMessage = (props: IChatMessage) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.delete), text: intl.formatMessage(messages.delete),
action: () => handleDeleteMessage.mutate(chatMessage.id), action: () => handleDeleteMessage.mutate(chatMessage.id),
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
destructive: true, destructive: true,
}); });
} else { } else {
@ -175,13 +175,13 @@ const ChatMessage = (props: IChatMessage) => {
menu.push({ menu.push({
text: intl.formatMessage(messages.report), text: intl.formatMessage(messages.report),
action: () => dispatch(initReport(ReportableEntities.CHAT_MESSAGE, chat.account, { chatMessage })), action: () => dispatch(initReport(ReportableEntities.CHAT_MESSAGE, chat.account, { chatMessage })),
icon: require('@tabler/icons/flag.svg'), icon: require('@tabler/icons/outline/flag.svg'),
}); });
} }
menu.push({ menu.push({
text: intl.formatMessage(messages.deleteForMe), text: intl.formatMessage(messages.deleteForMe),
action: () => handleDeleteMessage.mutate(chatMessage.id), action: () => handleDeleteMessage.mutate(chatMessage.id),
icon: require('@tabler/icons/trash.svg'), icon: require('@tabler/icons/outline/trash.svg'),
destructive: true, destructive: true,
}); });
} }
@ -222,7 +222,7 @@ const ChatMessage = (props: IChatMessage) => {
})} })}
> >
<Icon <Icon
src={require('@tabler/icons/mood-smile.svg')} src={require('@tabler/icons/outline/mood-smile.svg')}
className='h-4 w-4' className='h-4 w-4'
/> />
</button> </button>
@ -244,7 +244,7 @@ const ChatMessage = (props: IChatMessage) => {
data-testid='chat-message-menu' data-testid='chat-message-menu'
> >
<Icon <Icon
src={require('@tabler/icons/dots.svg')} src={require('@tabler/icons/outline/dots.svg')}
className='h-4 w-4' className='h-4 w-4'
/> />
</button> </button>
@ -362,7 +362,7 @@ const ChatMessage = (props: IChatMessage) => {
{isRead ? ( {isRead ? (
<span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'> <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'>
<Icon <Icon
src={require('@tabler/icons/check.svg')} src={require('@tabler/icons/outline/check.svg')}
strokeWidth={3} strokeWidth={3}
className='h-2.5 w-2.5' className='h-2.5 w-2.5'
/> />
@ -370,7 +370,7 @@ const ChatMessage = (props: IChatMessage) => {
) : ( ) : (
<span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'> <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'>
<Icon <Icon
src={require('@tabler/icons/check.svg')} src={require('@tabler/icons/outline/check.svg')}
strokeWidth={3} strokeWidth={3}
className='h-2.5 w-2.5' className='h-2.5 w-2.5'
/> />

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

@ -120,7 +120,7 @@ const ChatPageMain = () => {
<HStack alignItems='center' space={2} className='overflow-hidden'> <HStack alignItems='center' space={2} className='overflow-hidden'>
<HStack alignItems='center'> <HStack alignItems='center'>
<IconButton <IconButton
src={require('@tabler/icons/arrow-left.svg')} 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 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => history.push('/chats')} onClick={() => history.push('/chats')}
/> />
@ -162,7 +162,7 @@ const ChatPageMain = () => {
<Menu> <Menu>
<MenuButton <MenuButton
as={IconButton} as={IconButton}
src={require('@tabler/icons/info-circle.svg')} src={require('@tabler/icons/outline/info-circle.svg')}
iconClassName='h-5 w-5 text-gray-600' iconClassName='h-5 w-5 text-gray-600'
children={null} children={null}
/> />
@ -213,7 +213,7 @@ const ChatPageMain = () => {
className='!px-0 hover:!bg-transparent' 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'> <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/ban.svg')} className='h-5 w-5' /> <Icon src={require('@tabler/icons/outline/ban.svg')} className='h-5 w-5' />
<span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span> <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
</div> </div>
</MenuItem> </MenuItem>
@ -225,7 +225,7 @@ const ChatPageMain = () => {
className='!px-0 hover:!bg-transparent' 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'> <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/logout.svg')} className='h-5 w-5' /> <Icon src={require('@tabler/icons/outline/logout.svg')} className='h-5 w-5' />
<span>{intl.formatMessage(messages.leaveChat)}</span> <span>{intl.formatMessage(messages.leaveChat)}</span>
</div> </div>
</MenuItem> </MenuItem>

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

@ -23,7 +23,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
<Stack className='grow px-4 pt-6 sm:px-6'> <Stack className='grow px-4 pt-6 sm:px-6'>
<HStack alignItems='center'> <HStack alignItems='center'>
<IconButton <IconButton
src={require('@tabler/icons/arrow-left.svg')} 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 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => history.push('/chats')} onClick={() => history.push('/chats')}
/> />

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

@ -50,7 +50,7 @@ const ChatPageSettings = () => {
<Stack className='h-full space-y-8 px-4 py-6 sm:p-6'> <Stack className='h-full space-y-8 px-4 py-6 sm:p-6'>
<HStack alignItems='center'> <HStack alignItems='center'>
<IconButton <IconButton
src={require('@tabler/icons/arrow-left.svg')} src={require('@tabler/icons/outline/arrow-left.svg')}
className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180' className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => history.push('/chats')} onClick={() => history.push('/chats')}
/> />

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

@ -42,13 +42,13 @@ const ChatPageSidebar = () => {
<HStack space={1}> <HStack space={1}>
<IconButton <IconButton
src={require('@tabler/icons/settings.svg')} src={require('@tabler/icons/outline/settings.svg')}
iconClassName='h-5 w-5 text-gray-600' iconClassName='h-5 w-5 text-gray-600'
onClick={handleSettingsClick} onClick={handleSettingsClick}
/> />
<IconButton <IconButton
src={require('@tabler/icons/edit.svg')} src={require('@tabler/icons/outline/edit.svg')}
iconClassName='h-5 w-5 text-gray-600' iconClassName='h-5 w-5 text-gray-600'
onClick={handleChatCreate} onClick={handleChatCreate}
/> />

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

@ -111,7 +111,7 @@ const ChatPane = () => {
toggleChatPane(); toggleChatPane();
} }
}} }}
secondaryActionIcon={require('@tabler/icons/edit.svg')} secondaryActionIcon={require('@tabler/icons/outline/edit.svg')}
/> />
{isOpen ? renderBody() : null} {isOpen ? renderBody() : null}

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

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

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

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

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

@ -5,7 +5,7 @@ import { MIMETYPE_ICONS } from 'soapbox/components/upload';
import type { Attachment } from 'soapbox/types/entities'; import type { Attachment } from 'soapbox/types/entities';
const defaultIcon = require('@tabler/icons/paperclip.svg'); const defaultIcon = require('@tabler/icons/outline/paperclip.svg');
interface IChatUploadPreview { interface IChatUploadPreview {
className?: string; className?: string;

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

@ -57,7 +57,7 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => {
> >
<Icon <Icon
className='h-3 w-3 text-white' className='h-3 w-3 text-white'
src={require('@tabler/icons/x.svg')} src={require('@tabler/icons/outline/x.svg')}
/> />
</button> </button>
); );

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

@ -63,7 +63,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
<IconButton <IconButton
onClick={onToggle} onClick={onToggle}
src={isOpen ? require('@tabler/icons/chevron-down.svg') : require('@tabler/icons/chevron-up.svg')} src={isOpen ? require('@tabler/icons/outline/chevron-down.svg') : require('@tabler/icons/outline/chevron-up.svg')}
iconClassName='h-5 w-5 text-gray-600' iconClassName='h-5 w-5 text-gray-600'
/> />
</HStack> </HStack>

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

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

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

@ -72,7 +72,7 @@ const ChatWindow = () => {
{isOpen && ( {isOpen && (
<button onClick={closeChat}> <button onClick={closeChat}>
<Icon <Icon
src={require('@tabler/icons/arrow-left.svg')} src={require('@tabler/icons/outline/arrow-left.svg')}
className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400' className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
/> />
</button> </button>
@ -107,7 +107,7 @@ const ChatWindow = () => {
</HStack> </HStack>
} }
secondaryAction={secondaryAction()} secondaryAction={secondaryAction()}
secondaryActionIcon={isOpen ? require('@tabler/icons/info-circle.svg') : require('@tabler/icons/edit.svg')} secondaryActionIcon={isOpen ? require('@tabler/icons/outline/info-circle.svg') : require('@tabler/icons/outline/edit.svg')}
isToggleable={!isOpen} isToggleable={!isOpen}
isOpen={isOpen} isOpen={isOpen}
onToggle={toggleChatPane} onToggle={toggleChatPane}

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

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

4
src/features/compose/components/compose-form.tsx
Unescape View File

@ -231,10 +231,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
if (isEditing) { if (isEditing) {
publishText = intl.formatMessage(messages.saveChanges); publishText = intl.formatMessage(messages.saveChanges);
} else if (privacy === 'direct') { } else if (privacy === 'direct') {
publishIcon = require('@tabler/icons/mail.svg'); publishIcon = require('@tabler/icons/outline/mail.svg');
publishText = intl.formatMessage(messages.message); publishText = intl.formatMessage(messages.message);
} else if (privacy === 'private') { } else if (privacy === 'private') {
publishIcon = require('@tabler/icons/lock.svg'); publishIcon = require('@tabler/icons/outline/lock.svg');
publishText = intl.formatMessage(messages.publish); publishText = intl.formatMessage(messages.publish);
} else { } else {
publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);

2
src/features/compose/components/markdown-button.tsx
Unescape View File

@ -25,7 +25,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ composeId }) => {
return ( return (
<ComposeFormButton <ComposeFormButton
icon={require('@tabler/icons/markdown.svg')} icon={require('@tabler/icons/outline/markdown.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active} active={active}
onClick={onClick} onClick={onClick}

2
src/features/compose/components/poll-button.tsx
Unescape View File

@ -39,7 +39,7 @@ const PollButton: React.FC<IPollButton> = ({ composeId, disabled }) => {
return ( return (
<ComposeFormButton <ComposeFormButton
icon={require('@tabler/icons/chart-bar.svg')} icon={require('@tabler/icons/outline/chart-bar.svg')}
title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)} title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
active={active} active={active}
disabled={disabled} disabled={disabled}

8
src/features/compose/components/privacy-dropdown.tsx
Unescape View File

@ -160,10 +160,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
const [placement, setPlacement] = useState('bottom'); const [placement, setPlacement] = useState('bottom');
const options = [ const options = [
{ icon: require('@tabler/icons/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) }, { icon: require('@tabler/icons/outline/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
{ icon: require('@tabler/icons/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) }, { icon: require('@tabler/icons/outline/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
{ icon: require('@tabler/icons/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) }, { icon: require('@tabler/icons/outline/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
{ icon: require('@tabler/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) }, { icon: require('@tabler/icons/outline/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
]; ];
const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value)); const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value));

2
src/features/compose/components/reply-indicator.tsx
Unescape View File

@ -29,7 +29,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
if (!hideActions && onCancel) { if (!hideActions && onCancel) {
actions = { actions = {
onActionClick: handleClick, onActionClick: handleClick,
actionIcon: require('@tabler/icons/x.svg'), actionIcon: require('@tabler/icons/outline/x.svg'),
actionAlignment: 'top', actionAlignment: 'top',
actionTitle: 'Dismiss', actionTitle: 'Dismiss',
}; };

2
src/features/compose/components/schedule-button.tsx
Unescape View File

@ -39,7 +39,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ composeId, disabled }) => {
return ( return (
<ComposeFormButton <ComposeFormButton
icon={require('@tabler/icons/calendar-stats.svg')} icon={require('@tabler/icons/outline/calendar-stats.svg')}
title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)} title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
active={active} active={active}
disabled={disabled} disabled={disabled}

2
src/features/compose/components/schedule-form.tsx
Unescape View File

@ -73,7 +73,7 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
<IconButton <IconButton
iconClassName='h-4 w-4' iconClassName='h-4 w-4'
className='bg-transparent text-gray-400 hover:text-gray-600' className='bg-transparent text-gray-400 hover:text-gray-600'
src={require('@tabler/icons/x.svg')} src={require('@tabler/icons/outline/x.svg')}
onClick={handleRemove} onClick={handleRemove}
title={intl.formatMessage(messages.remove)} title={intl.formatMessage(messages.remove)}
/> />

2
src/features/compose/components/search-results.tsx
Unescape View File

@ -201,7 +201,7 @@ const SearchResults = () => {
<> <>
{filterByAccount ? ( {filterByAccount ? (
<HStack className='mb-4 border-b border-solid border-gray-200 px-2 pb-4 dark:border-gray-800' space={2}> <HStack className='mb-4 border-b border-solid border-gray-200 px-2 pb-4 dark:border-gray-800' space={2}>
<IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleUnsetAccount} /> <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleUnsetAccount} />
<Text truncate> <Text truncate>
<FormattedMessage <FormattedMessage
id='search_results.filter_message' id='search_results.filter_message'

6
src/features/compose/components/search.tsx
Unescape View File

@ -111,7 +111,7 @@ const Search = (props: ISearch) => {
const makeMenu = () => [ const makeMenu = () => [
{ {
text: intl.formatMessage(messages.action, { query: value }), text: intl.formatMessage(messages.action, { query: value }),
icon: require('@tabler/icons/search.svg'), icon: require('@tabler/icons/outline/search.svg'),
action: handleSubmit, action: handleSubmit,
}, },
]; ];
@ -166,12 +166,12 @@ const Search = (props: ISearch) => {
onClick={handleClear} onClick={handleClear}
> >
<SvgIcon <SvgIcon
src={require('@tabler/icons/search.svg')} src={require('@tabler/icons/outline/search.svg')}
className={clsx('h-4 w-4 text-gray-600', { hidden: hasValue })} className={clsx('h-4 w-4 text-gray-600', { hidden: hasValue })}
/> />
<SvgIcon <SvgIcon
src={require('@tabler/icons/x.svg')} src={require('@tabler/icons/outline/x.svg')}
className={clsx('h-4 w-4 text-gray-600', { hidden: !hasValue })} className={clsx('h-4 w-4 text-gray-600', { hidden: !hasValue })}
aria-label={intl.formatMessage(messages.placeholder)} aria-label={intl.formatMessage(messages.placeholder)}
/> />

2
src/features/compose/components/spoiler-button.tsx
Unescape View File

@ -26,7 +26,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ composeId }) => {
return ( return (
<ComposeFormButton <ComposeFormButton
icon={require('@tabler/icons/alert-triangle.svg')} icon={require('@tabler/icons/outline/alert-triangle.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active} active={active}
onClick={onClick} onClick={onClick}

4
src/features/compose/components/upload-button.tsx
Unescape View File

@ -54,8 +54,8 @@ const UploadButton: React.FC<IUploadButton> = ({
const src = icon || ( const src = icon || (
onlyImages(attachmentTypes) onlyImages(attachmentTypes)
? require('@tabler/icons/photo.svg') ? require('@tabler/icons/outline/photo.svg')
: require('@tabler/icons/paperclip.svg') : require('@tabler/icons/outline/paperclip.svg')
); );
return ( return (

4
src/features/crypto-donate/components/crypto-address.tsx
Unescape View File

@ -42,12 +42,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
<HStack alignItems='center' className='ml-auto'> <HStack alignItems='center' className='ml-auto'>
<a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}> <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
<Icon src={require('@tabler/icons/qrcode.svg')} size={20} /> <Icon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
</a> </a>
{explorerUrl && ( {explorerUrl && (
<a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'> <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
<Icon src={require('@tabler/icons/external-link.svg')} size={20} /> <Icon src={require('@tabler/icons/outline/external-link.svg')} size={20} />
</a> </a>
)} )}
</HStack> </HStack>

2
src/features/crypto-donate/components/detailed-crypto-address.tsx
Unescape View File

@ -30,7 +30,7 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
<div className='crypto-address__title'>{title || ticker.toUpperCase()}</div> <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
<div className='crypto-address__actions'> <div className='crypto-address__actions'>
{explorerUrl && <a href={explorerUrl} target='_blank'> {explorerUrl && <a href={explorerUrl} target='_blank'>
<Icon src={require('@tabler/icons/external-link.svg')} /> <Icon src={require('@tabler/icons/outline/external-link.svg')} />
</a>} </a>}
</div> </div>
</div> </div>

16
src/features/developers/developers-menu.tsx
Unescape View File

@ -57,7 +57,7 @@ const Developers: React.FC = () => {
<Column label={intl.formatMessage(messages.heading)}> <Column label={intl.formatMessage(messages.heading)}>
<div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'> <div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'>
<DashWidget to='/developers/apps/create'> <DashWidget to='/developers/apps/create'>
<SvgIcon src={require('@tabler/icons/apps.svg')} className='text-gray-700 dark:text-gray-600' /> <SvgIcon src={require('@tabler/icons/outline/apps.svg')} className='text-gray-700 dark:text-gray-600' />
<Text> <Text>
<FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' /> <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@ -65,7 +65,7 @@ const Developers: React.FC = () => {
</DashWidget> </DashWidget>
<DashWidget to='/developers/settings_store'> <DashWidget to='/developers/settings_store'>
<SvgIcon src={require('@tabler/icons/code-plus.svg')} className='text-gray-700 dark:text-gray-600' /> <SvgIcon src={require('@tabler/icons/outline/code-plus.svg')} className='text-gray-700 dark:text-gray-600' />
<Text> <Text>
<FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' /> <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@ -73,7 +73,7 @@ const Developers: React.FC = () => {
</DashWidget> </DashWidget>
<DashWidget to='/developers/timeline'> <DashWidget to='/developers/timeline'>
<SvgIcon src={require('@tabler/icons/home.svg')} className='text-gray-700 dark:text-gray-600' /> <SvgIcon src={require('@tabler/icons/outline/home.svg')} className='text-gray-700 dark:text-gray-600' />
<Text> <Text>
<FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' /> <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@ -81,7 +81,7 @@ const Developers: React.FC = () => {
</DashWidget> </DashWidget>
<DashWidget to='/error'> <DashWidget to='/error'>
<SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' /> <SvgIcon src={require('@tabler/icons/outline/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' />
<Text> <Text>
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' /> <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@ -89,7 +89,7 @@ const Developers: React.FC = () => {
</DashWidget> </DashWidget>
<DashWidget to='/error/network'> <DashWidget to='/error/network'>
<SvgIcon src={require('@tabler/icons/refresh.svg')} className='text-gray-700 dark:text-gray-600' /> <SvgIcon src={require('@tabler/icons/outline/refresh.svg')} className='text-gray-700 dark:text-gray-600' />
<Text> <Text>
<FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' /> <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@ -97,7 +97,7 @@ const Developers: React.FC = () => {
</DashWidget> </DashWidget>
<DashWidget to='/developers/sw'> <DashWidget to='/developers/sw'>
<SvgIcon src={require('@tabler/icons/script.svg')} className='text-gray-700 dark:text-gray-600' /> <SvgIcon src={require('@tabler/icons/outline/script.svg')} className='text-gray-700 dark:text-gray-600' />
<Text> <Text>
<FormattedMessage id='developers.navigation.service_worker_label' defaultMessage='Service Worker' /> <FormattedMessage id='developers.navigation.service_worker_label' defaultMessage='Service Worker' />
@ -105,7 +105,7 @@ const Developers: React.FC = () => {
</DashWidget> </DashWidget>
<DashWidget onClick={leaveDevelopers}> <DashWidget onClick={leaveDevelopers}>
<SvgIcon src={require('@tabler/icons/logout.svg')} className='text-gray-700 dark:text-gray-600' /> <SvgIcon src={require('@tabler/icons/outline/logout.svg')} className='text-gray-700 dark:text-gray-600' />
<Text> <Text>
<FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' /> <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
@ -113,7 +113,7 @@ const Developers: React.FC = () => {
</DashWidget> </DashWidget>
<DashWidget onClick={showToast}> <DashWidget onClick={showToast}>
<SvgIcon src={require('@tabler/icons/urgent.svg')} className='text-gray-700 dark:text-gray-600' /> <SvgIcon src={require('@tabler/icons/outline/urgent.svg')} className='text-gray-700 dark:text-gray-600' />
<Text> <Text>
<FormattedMessage id='developers.navigation.show_toast' defaultMessage='Trigger Toast' /> <FormattedMessage id='developers.navigation.show_toast' defaultMessage='Trigger Toast' />

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

@ -120,7 +120,7 @@ const ServiceWorkerInfo: React.FC<IServiceWorkerInfo> = () => {
<span className='truncate'>{url}</span> <span className='truncate'>{url}</span>
<Icon <Icon
className='h-4 w-4' className='h-4 w-4'
src={require('@tabler/icons/external-link.svg')} src={require('@tabler/icons/outline/external-link.svg')}
/> />
</a> </a>
</ListItem> </ListItem>

2
src/features/edit-identity/index.tsx
Unescape View File

@ -110,7 +110,7 @@ const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (props) => {
placeholder={intl.formatMessage(messages.username)} placeholder={intl.formatMessage(messages.username)}
append={( append={(
<HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'> <HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
<Icon className='h-4 w-4' src={require('@tabler/icons/at.svg')} /> <Icon className='h-4 w-4' src={require('@tabler/icons/outline/at.svg')} />
<span>{instance.domain}</span> <span>{instance.domain}</span>
</HStack> </HStack>
)} )}

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

@ -43,7 +43,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
})} })}
> >
<Icon <Icon
src={require('@tabler/icons/camera-plus.svg')} src={require('@tabler/icons/outline/camera-plus.svg')}
className='h-5 w-5 text-white' className='h-5 w-5 text-white'
/> />
</HStack> </HStack>

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

@ -55,7 +55,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
justifyContent='center' justifyContent='center'
> >
<Icon <Icon
src={require('@tabler/icons/photo-plus.svg')} src={require('@tabler/icons/outline/photo-plus.svg')}
className='h-4.5 w-4.5' className='h-4.5 w-4.5'
/> />
@ -76,7 +76,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
{onClear && src && ( {onClear && src && (
<IconButton <IconButton
onClick={handleClear} onClick={handleClear}
src={require('@tabler/icons/x.svg')} src={require('@tabler/icons/outline/x.svg')}
theme='dark' theme='dark'
className='absolute right-2 top-2 z-10 hover:scale-105 hover:bg-gray-900' className='absolute right-2 top-2 z-10 hover:scale-105 hover:bg-gray-900'
iconClassName='h-5 w-5' iconClassName='h-5 w-5'

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

Write Preview
Loading…
Cancel
Save