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

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

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-04-03 13:28:30 +02:00
parent 03e02a3d4f
commit 1505f96258
173 changed files with 515 additions and 500 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

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

8
src/actions/moderation.tsx
View file

@ -58,7 +58,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
);
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/user-off.svg'),
icon: require('@tabler/icons/outline/user-off.svg'),
heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
message,
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;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/user-minus.svg'),
icon: require('@tabler/icons/outline/user-minus.svg'),
heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
message,
confirm,
@ -118,7 +118,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
const acct = state.statuses.get(statusId)!.account.acct;
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),
message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }),
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;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/trash.svg'),
icon: require('@tabler/icons/outline/trash.svg'),
heading: intl.formatMessage(messages.deleteStatusHeading),
message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }),
confirm: intl.formatMessage(messages.deleteStatusConfirm),

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

@ -76,12 +76,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
onClick={handleClear}
>
<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() })}
/>
<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() })}
aria-label={intl.formatMessage(messages.placeholder)}
/>

2
src/components/account.tsx
View file

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

6
src/components/authorize-reject-buttons.tsx
View file

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

8
src/components/autosuggest-location.tsx
View file

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

8
src/components/birthday-input.tsx
View file

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

4
src/components/domain.tsx
View file

@ -21,7 +21,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
// const onBlockDomain = () => {
// 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 }} />,
// 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),
@ -38,7 +38,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
<Text tag='span'>
{domain}
</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>
);
};

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

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

4
src/components/event-preview.tsx
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'>
<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>
<span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
{account.verified && <VerificationBadge />}
@ -78,7 +78,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
{event.location && (
<HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/map-pin.svg')} />
<Icon src={require('@tabler/icons/outline/map-pin.svg')} />
<span>
{event.location.get('name')}
</span>

8
src/components/gameboy.tsx
View file

@ -138,13 +138,13 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
theme='transparent'
className='text-white'
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
theme='transparent'
className='text-white'
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>
@ -152,14 +152,14 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
<IconButton
theme='transparent'
className='text-white'
src={require('@tabler/icons/download.svg')}
src={require('@tabler/icons/outline/download.svg')}
onClick={handleDownload}
/>
<IconButton
theme='transparent'
className='text-white'
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>

4
src/components/list.tsx
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'>
{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>
) : null}
@ -91,7 +91,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
}
>
<Icon
src={require('@tabler/icons/check.svg')}
src={require('@tabler/icons/outline/check.svg')}
className={
clsx({
'h-4 w-4 text-white dark:text-white transition-all duration-500': true,

2
src/components/load-gap.tsx
View file

@ -20,7 +20,7 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
return (
<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>
);
};

4
src/components/location-search.tsx
View file

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

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

@ -164,7 +164,7 @@ const Item: React.FC<IItem> = ({
const attachmentIcon = (
<Icon
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'
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>
</a>
);

4
src/components/modal-root.tsx
View file

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

4
src/components/pending-items-row.tsx
View file

@ -25,7 +25,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
})}
>
<Icon
src={require('@tabler/icons/exclamation-circle.svg')}
src={require('@tabler/icons/outline/exclamation-circle.svg')}
className={clsx({
'h-5 w-5': size === 'md',
'h-7 w-7': size === 'lg',
@ -43,7 +43,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
</HStack>
<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'
/>
</HStack>

4
src/components/polls/poll-option.tsx
View file

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

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

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

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

@ -119,7 +119,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
{account.local ? (
<HStack alignItems='center' space={0.5}>
<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'
/>

2
src/components/quoted-status.tsx
View file

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

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

@ -92,7 +92,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
>
<Icon
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'>

40
src/components/sidebar-menu.tsx
View file

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

6
src/components/sidebar-navigation-link.tsx
View file

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

40
src/components/sidebar-navigation.tsx
View file

@ -42,7 +42,7 @@ const SidebarNavigation = () => {
menu.push({
to: '/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,
});
}
@ -51,7 +51,7 @@ const SidebarNavigation = () => {
menu.push({
to: '/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({
to: '/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({
to: '/events',
text: intl.formatMessage(messages.events),
icon: require('@tabler/icons/calendar-event.svg'),
icon: require('@tabler/icons/outline/calendar-event.svg'),
});
}
if (isDeveloper) {
menu.push({
to: '/developers',
icon: require('@tabler/icons/code.svg'),
icon: require('@tabler/icons/outline/code.svg'),
text: intl.formatMessage(messages.developers),
});
}
@ -91,7 +91,7 @@ const SidebarNavigation = () => {
return (
<SidebarNavigationLink
to='/chats'
icon={require('@tabler/icons/messages.svg')}
icon={require('@tabler/icons/outline/messages.svg')}
count={unreadChatsCount}
countMax={9}
text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
@ -103,7 +103,7 @@ const SidebarNavigation = () => {
return (
<SidebarNavigationLink
to='/messages'
icon={require('@tabler/icons/mail.svg')}
icon={require('@tabler/icons/outline/mail.svg')}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
/>
);
@ -117,13 +117,14 @@ const SidebarNavigation = () => {
<Stack space={2}>
<SidebarNavigationLink
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' />}
/>
<SidebarNavigationLink
to='/search'
icon={require('@tabler/icons/search.svg')}
icon={require('@tabler/icons/outline/search.svg')}
text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
/>
@ -131,7 +132,8 @@ const SidebarNavigation = () => {
<>
<SidebarNavigationLink
to='/notifications'
icon={require('@tabler/icons/bell.svg')}
icon={require('@tabler/icons/outline/bell.svg')}
activeIcon={require('@tabler/icons/filled/bell.svg')}
count={notificationCount}
text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
/>
@ -141,27 +143,30 @@ const SidebarNavigation = () => {
{features.groups && (
<SidebarNavigationLink
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' />}
/>
)}
<SidebarNavigationLink
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' />}
/>
<SidebarNavigationLink
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' />}
/>
{account.staff && (
<SidebarNavigationLink
to='/soapbox/admin'
icon={require('@tabler/icons/dashboard.svg')}
icon={require('@tabler/icons/outline/dashboard.svg')}
count={dashboardCount}
text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
/>
@ -174,7 +179,8 @@ const SidebarNavigation = () => {
{(account || !restrictUnauth.timelines.local) && (
<SidebarNavigationLink
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' />}
/>
)}
@ -182,7 +188,7 @@ const SidebarNavigation = () => {
{(features.federating && (account || !restrictUnauth.timelines.federated)) && (
<SidebarNavigationLink
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' />}
/>
)}
@ -192,7 +198,7 @@ const SidebarNavigation = () => {
{menu.length > 0 && (
<DropdownMenu items={menu} placement='top'>
<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' />}
/>
</DropdownMenu>

78
src/components/status-action-bar.tsx
View file

@ -232,7 +232,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
dispatch(deleteStatus(status.id, withRedraft));
} else {
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),
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@ -313,7 +313,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
const account = status.account;
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 }} />,
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),
@ -409,7 +409,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.open),
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({
text: intl.formatMessage(messages.copy),
action: handleCopy,
icon: require('@tabler/icons/clipboard-copy.svg'),
icon: require('@tabler/icons/outline/clipboard-copy.svg'),
});
if (features.embeds && account.local) {
menu.push({
text: intl.formatMessage(messages.embed),
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({
text: intl.formatMessage(status.pinned ? messages.unpinFromGroup : messages.pinToGroup),
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({
text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
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({
text: intl.formatMessage(messages.external, { domain }),
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({
text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
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);
@ -477,14 +477,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
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 {
if (status.visibility === 'private') {
menu.push({
text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
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({
text: intl.formatMessage(messages.delete),
action: handleDeleteClick,
icon: require('@tabler/icons/trash.svg'),
icon: require('@tabler/icons/outline/trash.svg'),
destructive: true,
});
if (features.editStatuses) {
menu.push({
text: intl.formatMessage(messages.edit),
action: handleEditClick,
icon: require('@tabler/icons/edit.svg'),
icon: require('@tabler/icons/outline/edit.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.redraft),
action: handleRedraftClick,
icon: require('@tabler/icons/edit.svg'),
icon: require('@tabler/icons/outline/edit.svg'),
destructive: true,
});
}
@ -513,20 +513,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.mention, { name: username }),
action: handleMentionClick,
icon: require('@tabler/icons/at.svg'),
icon: require('@tabler/icons/outline/at.svg'),
});
if (status.account.pleroma?.accepts_chat_messages === true) {
menu.push({
text: intl.formatMessage(messages.chat, { name: username }),
action: handleChatClick,
icon: require('@tabler/icons/messages.svg'),
icon: require('@tabler/icons/outline/messages.svg'),
});
} else if (features.privacyScopes) {
menu.push({
text: intl.formatMessage(messages.direct, { name: username }),
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) {
menu.push({
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,
});
menu.push(null);
@ -543,17 +543,17 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.mute, { name: username }),
action: handleMuteClick,
icon: require('@tabler/icons/volume-3.svg'),
icon: require('@tabler/icons/outline/volume-3.svg'),
});
menu.push({
text: intl.formatMessage(messages.block, { name: username }),
action: handleBlockClick,
icon: require('@tabler/icons/ban.svg'),
icon: require('@tabler/icons/outline/ban.svg'),
});
menu.push({
text: intl.formatMessage(messages.report, { name: username }),
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({
text: 'Ban from Group',
action: handleBlockFromGroup,
icon: require('@tabler/icons/ban.svg'),
icon: require('@tabler/icons/outline/ban.svg'),
destructive: true,
});
}
@ -584,7 +584,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.groupModDelete),
action: handleDeleteFromGroup,
icon: require('@tabler/icons/trash.svg'),
icon: require('@tabler/icons/outline/trash.svg'),
destructive: true,
});
}
@ -596,28 +596,28 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.adminAccount, { name: username }),
action: onModerate,
icon: require('@tabler/icons/gavel.svg'),
icon: require('@tabler/icons/outline/gavel.svg'),
});
if (isAdmin) {
menu.push({
text: intl.formatMessage(messages.admin_status),
href: `/pleroma/admin/#/statuses/${status.id}/`,
icon: require('@tabler/icons/pencil.svg'),
icon: require('@tabler/icons/outline/pencil.svg'),
});
}
menu.push({
text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
action: handleToggleStatusSensitivity,
icon: require('@tabler/icons/alert-triangle.svg'),
icon: require('@tabler/icons/outline/alert-triangle.svg'),
});
if (!ownAccount) {
menu.push({
text: intl.formatMessage(messages.deleteStatus),
action: handleDeleteStatus,
icon: require('@tabler/icons/trash.svg'),
icon: require('@tabler/icons/outline/trash.svg'),
destructive: true,
});
}
@ -655,14 +655,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite);
const menu = _makeMenu(publicStatus);
let reblogIcon = require('@tabler/icons/repeat.svg');
let reblogIcon = require('@tabler/icons/outline/repeat.svg');
let replyTitle;
let replyDisabled = false;
if (status.visibility === 'direct') {
reblogIcon = require('@tabler/icons/mail.svg');
reblogIcon = require('@tabler/icons/outline/mail.svg');
} 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) {
@ -673,11 +673,11 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
const reblogMenu = [{
text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
action: handleReblogClick,
icon: require('@tabler/icons/repeat.svg'),
icon: require('@tabler/icons/outline/repeat.svg'),
}, {
text: intl.formatMessage(messages.quotePost),
action: handleQuoteClick,
icon: require('@tabler/icons/quote.svg'),
icon: require('@tabler/icons/outline/quote.svg'),
}];
const reblogButton = (
@ -726,7 +726,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
>
<StatusActionButton
title={replyTitle}
icon={require('@tabler/icons/message-circle-2.svg')}
icon={require('@tabler/icons/outline/message-circle-2.svg')}
onClick={handleReplyClick}
count={replyCount}
text={withLabels ? intl.formatMessage(messages.reply) : undefined}
@ -751,7 +751,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
<StatusReactionWrapper statusId={status.id}>
<StatusActionButton
title={meEmojiTitle}
icon={require('@tabler/icons/heart.svg')}
icon={require('@tabler/icons/outline/heart.svg')}
filled
color='accent'
active={Boolean(meEmojiName)}
@ -764,7 +764,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
) : (
<StatusActionButton
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'
filled
onClick={handleFavouriteClick}
@ -778,7 +778,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
{features.dislikes && (
<StatusActionButton
title={intl.formatMessage(messages.disfavourite)}
icon={require('@tabler/icons/thumb-down.svg')}
icon={require('@tabler/icons/outline/thumb-down.svg')}
color='accent'
filled
onClick={handleDislikeClick}
@ -792,7 +792,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
{(acceptsZaps && window.webln) && (
<StatusActionButton
title={intl.formatMessage(messages.zap)}
icon={require('@tabler/icons/bolt.svg')}
icon={require('@tabler/icons/outline/bolt.svg')}
color='accent'
filled
onClick={handleZapClick}
@ -805,7 +805,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
{canShare && (
<StatusActionButton
title={intl.formatMessage(messages.share)}
icon={require('@tabler/icons/upload.svg')}
icon={require('@tabler/icons/outline/upload.svg')}
onClick={handleShareClick}
theme={statusActionButtonTheme}
/>
@ -814,7 +814,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
<DropdownMenu items={menu} status={status}>
<StatusActionButton
title={intl.formatMessage(messages.more)}
icon={require('@tabler/icons/dots.svg')}
icon={require('@tabler/icons/outline/dots.svg')}
theme={statusActionButtonTheme}
/>
</DropdownMenu>

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

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

8
src/components/status.tsx
View file

@ -210,7 +210,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
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={
<FormattedMessage
id='status.reblogged_by_with_group'
@ -250,7 +250,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
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={
<FormattedMessage
id='status.reblogged_by'
@ -277,7 +277,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
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={
<FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
}
@ -287,7 +287,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
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={
<FormattedMessage
id='status.group'

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

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

9
src/components/thumb-navigation-link.tsx
View file

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

18
src/components/thumb-navigation.tsx
View file

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

4
src/components/translate-button.tsx
View file

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

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

@ -60,7 +60,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
{menu && (
<DropdownMenu
items={menu}
src={require('@tabler/icons/dots-vertical.svg')}
src={require('@tabler/icons/outline/dots-vertical.svg')}
/>
)}
{action && actionIcon && (
@ -72,7 +72,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
</button>
)}
<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'
/>
</HStack>

2
src/components/ui/avatar/avatar.tsx
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)}
>
<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'
/>
</div>

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

@ -72,7 +72,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
return (
<Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
<SvgIcon src={require('@tabler/icons/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>
</Comp>
);

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

@ -68,7 +68,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
disabled={!hasPrevPage || isDisabled}
>
<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'
/>
</button>
@ -100,7 +100,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
disabled={!hasNextPage || isDisabled}
>
<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'
/>
</button>

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

@ -134,7 +134,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
{all && (
<IconButton
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}
/>
)}

2
src/components/ui/icon/svg-icon.test.tsx
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 { render, screen } from 'soapbox/jest/test-helpers';

2
src/components/ui/input/input.tsx
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'
>
<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'
/>
</button>

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

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

2
src/components/ui/streamfield/streamfield.tsx
View file

@ -83,7 +83,7 @@ const Streamfield: React.FC<IStreamfield> = ({
<IconButton
iconClassName='h-4 w-4'
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)}
title={intl.formatMessage(messages.remove)}
/>

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

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

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

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

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

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

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

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

18
src/components/upload.tsx
View file

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

2
src/components/validation-checkmark.tsx
View file

@ -12,7 +12,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
return (
<HStack alignItems='center' space={2} data-testid='validation-checkmark'>
<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({
'w-4 h-4': true,
'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid,

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

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

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

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

62
src/features/account/components/header.tsx
View file

@ -131,7 +131,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
dispatch(unblockAccount(account.id));
} else {
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 }} />,
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),
@ -187,7 +187,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
const onBlockDomain = (domain: string) => {
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 }} />,
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),
@ -291,7 +291,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.subscribeFeed),
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({
text: intl.formatMessage(messages.share, { name: account.username }),
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({
text: intl.formatMessage(messages.profileExternal, { domain }),
action: () => onProfileExternal(account.url),
icon: require('@tabler/icons/external-link.svg'),
icon: require('@tabler/icons/outline/external-link.svg'),
});
}
menu.push({
text: intl.formatMessage(messages.copy),
action: handleCopy,
icon: require('@tabler/icons/clipboard-copy.svg'),
icon: require('@tabler/icons/outline/clipboard-copy.svg'),
});
if (!ownAccount) return menu;
@ -325,7 +325,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(account.id === ownAccount.id ? messages.searchSelf : messages.search, { name: account.username }),
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({
text: intl.formatMessage(messages.edit_profile),
to: '/settings/profile',
icon: require('@tabler/icons/user.svg'),
icon: require('@tabler/icons/outline/user.svg'),
});
menu.push({
text: intl.formatMessage(messages.preferences),
to: '/settings',
icon: require('@tabler/icons/settings.svg'),
icon: require('@tabler/icons/outline/settings.svg'),
});
menu.push(null);
menu.push({
text: intl.formatMessage(messages.mutes),
to: '/mutes',
icon: require('@tabler/icons/circle-x.svg'),
icon: require('@tabler/icons/outline/circle-x.svg'),
});
menu.push({
text: intl.formatMessage(messages.blocks),
to: '/blocks',
icon: require('@tabler/icons/ban.svg'),
icon: require('@tabler/icons/outline/ban.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.mention, { name: account.username }),
action: onMention,
icon: require('@tabler/icons/at.svg'),
icon: require('@tabler/icons/outline/at.svg'),
});
if (features.privacyScopes) {
menu.push({
text: intl.formatMessage(messages.direct, { name: account.username }),
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({
text: intl.formatMessage(messages.hideReblogs, { name: account.username }),
action: onReblogToggle,
icon: require('@tabler/icons/repeat.svg'),
icon: require('@tabler/icons/outline/repeat.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.showReblogs, { name: account.username }),
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({
text: intl.formatMessage(messages.add_or_remove_from_list),
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({
text: intl.formatMessage(account.relationship?.endorsed ? messages.unendorse : messages.endorse),
action: onEndorseToggle,
icon: require('@tabler/icons/user-check.svg'),
icon: require('@tabler/icons/outline/user-check.svg'),
});
}
} else if (features.lists && features.unrestrictedLists) {
menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list),
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({
text: intl.formatMessage(messages.removeFromFollowers),
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({
text: intl.formatMessage(messages.unmute, { name: account.username }),
action: onMute,
icon: require('@tabler/icons/circle-x.svg'),
icon: require('@tabler/icons/outline/circle-x.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.mute, { name: account.username }),
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({
text: intl.formatMessage(messages.unblock, { name: account.username }),
action: onBlock,
icon: require('@tabler/icons/ban.svg'),
icon: require('@tabler/icons/outline/ban.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.block, { name: account.username }),
action: onBlock,
icon: require('@tabler/icons/ban.svg'),
icon: require('@tabler/icons/outline/ban.svg'),
});
}
menu.push({
text: intl.formatMessage(messages.report, { name: account.username }),
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({
text: intl.formatMessage(messages.unblockDomain, { domain }),
action: () => onUnblockDomain(domain),
icon: require('@tabler/icons/ban.svg'),
icon: require('@tabler/icons/outline/ban.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.blockDomain, { 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({
text: intl.formatMessage(messages.adminAccount, { name: account.username }),
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 (
<IconButton
src={require('@tabler/icons/messages.svg')}
src={require('@tabler/icons/outline/messages.svg')}
onClick={() => createAndNavigateToChat.mutate(account.id)}
title={intl.formatMessage(messages.chat, { name: account.username })}
theme='outlined'
@ -578,7 +578,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
} else if (account.pleroma?.accepts_chat_messages) {
return (
<IconButton
src={require('@tabler/icons/messages.svg')}
src={require('@tabler/icons/outline/messages.svg')}
onClick={() => createAndNavigateToChat.mutate(account.id)}
title={intl.formatMessage(messages.chat, { name: account.username })}
theme='outlined'
@ -600,7 +600,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
return (
<IconButton
src={require('@tabler/icons/upload.svg')}
src={require('@tabler/icons/outline/upload.svg')}
onClick={handleShare}
title={intl.formatMessage(messages.share, { name: account.username })}
theme='outlined'
@ -657,7 +657,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
{menu.length > 0 && (
<DropdownMenu items={menu} placement='bottom-end'>
<IconButton
src={require('@tabler/icons/dots.svg')}
src={require('@tabler/icons/outline/dots.svg')}
theme='outlined'
className='px-2'
iconClassName='h-4 w-4'

2
src/features/admin/announcements.tsx
View file

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

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

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

6
src/features/admin/components/report.tsx
View file

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

2
src/features/admin/domains.tsx
View file

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

8
src/features/admin/tabs/dashboard.tsx
View file

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

2
src/features/aliases/components/account.tsx
View file

@ -37,7 +37,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
if (!added && accountId !== me) {
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
View file

@ -53,7 +53,7 @@ const Search: React.FC = () => {
/>
<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>
</label>
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>

2
src/features/aliases/index.tsx
View file

@ -79,7 +79,7 @@ const Aliases = () => {
<Text tag='span'>{alias}</Text>
</div>
<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>
</div>
</HStack>

6
src/features/audio/index.tsx
View file

@ -518,7 +518,7 @@ const Audio: React.FC<IAudio> = (props) => {
className='player-button'
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
@ -528,7 +528,7 @@ const Audio: React.FC<IAudio> = (props) => {
className='player-button'
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>
<div
@ -569,7 +569,7 @@ const Audio: React.FC<IAudio> = (props) => {
download
target='_blank'
>
<Icon src={require('@tabler/icons/download.svg')} />
<Icon src={require('@tabler/icons/outline/download.svg')} />
</a>
</div>
</div>

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

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

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

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

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

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

2
src/features/birthdays/account.tsx
View file

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

4
src/features/bookmark-folders/index.tsx
View file

@ -40,7 +40,7 @@ const BookmarkFolders: React.FC = () => {
to='/bookmarks/all'
label={
<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>
</HStack>
}
@ -57,7 +57,7 @@ const BookmarkFolders: React.FC = () => {
src={folder.emoji_url || undefined}
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>
</HStack>
}

6
src/features/bookmarks/index.tsx
View file

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

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

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

4
src/features/chats/components/chat-list-item.tsx
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) => {
@ -124,7 +124,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
<div className='hidden text-gray-600 hover:text-gray-100 group-hover:block'>
<DropdownMenu items={menu}>
<IconButton
src={require('@tabler/icons/dots.svg')}
src={require('@tabler/icons/outline/dots.svg')}
title='Settings'
className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
iconClassName='h-4 w-4'

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

@ -107,7 +107,7 @@ const ChatMessageListIntro = () => {
</HStack>
) : (
<HStack justifyContent='center' alignItems='center' space={1} className='shrink-0'>
<Icon src={require('@tabler/icons/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 && (
<Text size='sm' theme='muted'>
{intl.formatMessage(messages.messageLifespan, { day: secondsToDays(chat.message_expiration) })}

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

@ -159,7 +159,7 @@ const ChatMessage = (props: IChatMessage) => {
menu.push({
text: intl.formatMessage(messages.copy),
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({
text: intl.formatMessage(messages.delete),
action: () => handleDeleteMessage.mutate(chatMessage.id),
icon: require('@tabler/icons/trash.svg'),
icon: require('@tabler/icons/outline/trash.svg'),
destructive: true,
});
} else {
@ -175,13 +175,13 @@ const ChatMessage = (props: IChatMessage) => {
menu.push({
text: intl.formatMessage(messages.report),
action: () => dispatch(initReport(ReportableEntities.CHAT_MESSAGE, chat.account, { chatMessage })),
icon: require('@tabler/icons/flag.svg'),
icon: require('@tabler/icons/outline/flag.svg'),
});
}
menu.push({
text: intl.formatMessage(messages.deleteForMe),
action: () => handleDeleteMessage.mutate(chatMessage.id),
icon: require('@tabler/icons/trash.svg'),
icon: require('@tabler/icons/outline/trash.svg'),
destructive: true,
});
}
@ -222,7 +222,7 @@ const ChatMessage = (props: IChatMessage) => {
})}
>
<Icon
src={require('@tabler/icons/mood-smile.svg')}
src={require('@tabler/icons/outline/mood-smile.svg')}
className='h-4 w-4'
/>
</button>
@ -244,7 +244,7 @@ const ChatMessage = (props: IChatMessage) => {
data-testid='chat-message-menu'
>
<Icon
src={require('@tabler/icons/dots.svg')}
src={require('@tabler/icons/outline/dots.svg')}
className='h-4 w-4'
/>
</button>
@ -362,7 +362,7 @@ const ChatMessage = (props: IChatMessage) => {
{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'>
<Icon
src={require('@tabler/icons/check.svg')}
src={require('@tabler/icons/outline/check.svg')}
strokeWidth={3}
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'>
<Icon
src={require('@tabler/icons/check.svg')}
src={require('@tabler/icons/outline/check.svg')}
strokeWidth={3}
className='h-2.5 w-2.5'
/>

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

@ -120,7 +120,7 @@ const ChatPageMain = () => {
<HStack alignItems='center' space={2} className='overflow-hidden'>
<HStack alignItems='center'>
<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'
onClick={() => history.push('/chats')}
/>
@ -162,7 +162,7 @@ const ChatPageMain = () => {
<Menu>
<MenuButton
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'
children={null}
/>
@ -213,7 +213,7 @@ const ChatPageMain = () => {
className='!px-0 hover:!bg-transparent'
>
<div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
<Icon src={require('@tabler/icons/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>
</div>
</MenuItem>
@ -225,7 +225,7 @@ const ChatPageMain = () => {
className='!px-0 hover:!bg-transparent'
>
<div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
<Icon src={require('@tabler/icons/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>
</div>
</MenuItem>

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

@ -23,7 +23,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
<Stack className='grow px-4 pt-6 sm:px-6'>
<HStack alignItems='center'>
<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'
onClick={() => history.push('/chats')}
/>

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

@ -50,7 +50,7 @@ const ChatPageSettings = () => {
<Stack className='h-full space-y-8 px-4 py-6 sm:p-6'>
<HStack alignItems='center'>
<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'
onClick={() => history.push('/chats')}
/>

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

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

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

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

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

@ -34,7 +34,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
append={
<button onClick={onClear}>
<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'
aria-hidden='true'
/>

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

@ -99,7 +99,7 @@ const ChatSearch = (props: IChatSearch) => {
append={
<button onClick={clearValue}>
<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'
aria-hidden='true'
/>

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

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

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

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

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

@ -63,7 +63,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
<IconButton
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'
/>
</HStack>

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

@ -95,7 +95,7 @@ const ChatSettings = () => {
<HStack alignItems='center' space={2}>
<button onClick={closeSettings}>
<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'
/>
</button>
@ -136,13 +136,13 @@ const ChatSettings = () => {
<Stack space={5}>
<button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
<Icon src={require('@tabler/icons/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>
</button>
{features.chatsDelete && (
<button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
<Icon src={require('@tabler/icons/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>
</button>
)}

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

@ -72,7 +72,7 @@ const ChatWindow = () => {
{isOpen && (
<button onClick={closeChat}>
<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'
/>
</button>
@ -107,7 +107,7 @@ const ChatWindow = () => {
</HStack>
}
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}
isOpen={isOpen}
onToggle={toggleChatPane}

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

@ -26,7 +26,7 @@ const ChatSearchHeader = () => {
}}
>
<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'
/>
</button>

4
src/features/compose/components/compose-form.tsx
View file

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

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

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

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

@ -39,7 +39,7 @@ const PollButton: React.FC<IPollButton> = ({ composeId, disabled }) => {
return (
<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)}
active={active}
disabled={disabled}

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

@ -160,10 +160,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
const [placement, setPlacement] = useState('bottom');
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/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/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_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/outline/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_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/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));

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

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

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

@ -39,7 +39,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ composeId, disabled }) => {
return (
<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)}
active={active}
disabled={disabled}

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

@ -73,7 +73,7 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
<IconButton
iconClassName='h-4 w-4'
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}
title={intl.formatMessage(messages.remove)}
/>

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

@ -201,7 +201,7 @@ const SearchResults = () => {
<>
{filterByAccount ? (
<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>
<FormattedMessage
id='search_results.filter_message'

6
src/features/compose/components/search.tsx
View file

@ -111,7 +111,7 @@ const Search = (props: ISearch) => {
const makeMenu = () => [
{
text: intl.formatMessage(messages.action, { query: value }),
icon: require('@tabler/icons/search.svg'),
icon: require('@tabler/icons/outline/search.svg'),
action: handleSubmit,
},
];
@ -166,12 +166,12 @@ const Search = (props: ISearch) => {
onClick={handleClear}
>
<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 })}
/>
<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 })}
aria-label={intl.formatMessage(messages.placeholder)}
/>

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

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

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

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

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

@ -42,12 +42,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
<HStack alignItems='center' className='ml-auto'>
<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>
{explorerUrl && (
<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>
)}
</HStack>

2
src/features/crypto-donate/components/detailed-crypto-address.tsx
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__actions'>
{explorerUrl && <a href={explorerUrl} target='_blank'>
<Icon src={require('@tabler/icons/external-link.svg')} />
<Icon src={require('@tabler/icons/outline/external-link.svg')} />
</a>}
</div>
</div>

16
src/features/developers/developers-menu.tsx
View file

@ -57,7 +57,7 @@ const Developers: React.FC = () => {
<Column label={intl.formatMessage(messages.heading)}>
<div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'>
<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>
<FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@ -65,7 +65,7 @@ const Developers: React.FC = () => {
</DashWidget>
<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>
<FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@ -73,7 +73,7 @@ const Developers: React.FC = () => {
</DashWidget>
<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>
<FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@ -81,7 +81,7 @@ const Developers: React.FC = () => {
</DashWidget>
<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>
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@ -89,7 +89,7 @@ const Developers: React.FC = () => {
</DashWidget>
<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>
<FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@ -97,7 +97,7 @@ const Developers: React.FC = () => {
</DashWidget>
<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>
<FormattedMessage id='developers.navigation.service_worker_label' defaultMessage='Service Worker' />
@ -105,7 +105,7 @@ const Developers: React.FC = () => {
</DashWidget>
<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>
<FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
@ -113,7 +113,7 @@ const Developers: React.FC = () => {
</DashWidget>
<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>
<FormattedMessage id='developers.navigation.show_toast' defaultMessage='Trigger Toast' />

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

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

2
src/features/edit-identity/index.tsx
View file

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

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

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

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

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

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