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

Rewrite all `require` to ES6 imports

This commit is contained in:
Alex Gleason 2024-11-08 18:31:13 -06:00
parent 737b3554cd
commit 9d9f237fd2
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
196 changed files with 1079 additions and 942 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -152,7 +152,6 @@
"vite": "^5.4.8",
"vite-plugin-compile-time": "^0.2.1",
"vite-plugin-html": "^3.2.2",
"vite-plugin-require": "^1.2.14",
"vite-plugin-static-copy": "^1.0.6",
"zod": "^3.23.5",
"zustand": "^5.0.0"

12
src/actions/moderation.tsx
View File

@ -1,3 +1,7 @@
import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
import trashIcon from '@tabler/icons/outline/trash.svg';
import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
import userOffIcon from '@tabler/icons/outline/user-off.svg';
import React from 'react';
import { defineMessages, IntlShape } from 'react-intl';
@ -58,7 +62,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
);
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/user-off.svg'),
icon: userOffIcon,
heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
message,
confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@ -96,7 +100,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/user-minus.svg'),
icon: userMinusIcon,
heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
message,
confirm,
@ -118,7 +122,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
const acct = state.statuses.get(statusId)!.account.acct;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/alert-triangle.svg'),
icon: alertTriangleIcon,
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 +142,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
const acct = state.statuses.get(statusId)!.account.acct;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
heading: intl.formatMessage(messages.deleteStatusHeading),
message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }),
confirm: intl.formatMessage(messages.deleteStatusConfirm),

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

@ -1,3 +1,5 @@
import searchIcon from '@tabler/icons/outline/search.svg';
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -76,12 +78,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
onClick={handleClear}
>
<SvgIcon
src={require('@tabler/icons/outline/search.svg')}
src={searchIcon}
className={clsx('size-4 text-gray-400', { hidden: !isEmpty() })}
/>
<SvgIcon
src={require('@tabler/icons/outline/x.svg')}
src={xIcon}
className={clsx('size-4 text-gray-400', { hidden: isEmpty() })}
aria-label={intl.formatMessage(messages.placeholder)}
/>

3
src/components/account.tsx
View File

@ -1,3 +1,4 @@
import pencilIcon from '@tabler/icons/outline/pencil.svg';
import React, { useRef, useState } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Link, useHistory } from 'react-router-dom';
@ -275,7 +276,7 @@ const Account = ({
<>
<Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
<Icon className='size-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
<Icon className='size-5 text-gray-700 dark:text-gray-600' src={pencilIcon} />
</>
) : null}

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

@ -1,3 +1,6 @@
import playerStopFilledIcon from '@tabler/icons/filled/player-stop.svg';
import checkIcon from '@tabler/icons/outline/check.svg';
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import React, { useEffect, useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
@ -106,7 +109,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
<HStack space={3} alignItems='center'>
<AuthorizeRejectButton
theme='danger'
icon={require('@tabler/icons/outline/x.svg')}
icon={xIcon}
action={handleReject}
isLoading={state === 'rejecting'}
disabled={state === 'authorizing'}
@ -114,7 +117,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
/>
<AuthorizeRejectButton
theme='primary'
icon={require('@tabler/icons/outline/check.svg')}
icon={checkIcon}
action={handleAuthorize}
isLoading={state === 'authorizing'}
disabled={state === 'rejecting'}
@ -162,7 +165,7 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon,
}
>
<IconButton
src={isLoading ? require('@tabler/icons/filled/player-stop.svg') : icon}
src={isLoading ? playerStopFilledIcon : icon}
onClick={action}
theme='seamless'
className='size-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'

9
src/components/autosuggest-location.tsx
View File

@ -1,14 +1,13 @@
import buildingCommunityIcon from '@tabler/icons/outline/building-community.svg';
import homeIcon from '@tabler/icons/outline/home-2.svg';
import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
import roadIcon from '@tabler/icons/outline/road.svg';
import React from 'react';
import { useAppSelector } from 'soapbox/hooks';
import { HStack, Icon, Stack, Text } from './ui';
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,
street: roadIcon,

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

@ -1,9 +1,10 @@
import xIcon from '@tabler/icons/outline/x.svg';
import React from 'react';
import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
import IconButton from 'soapbox/components/ui/icon-button/icon-button';
const closeIcon = require('@tabler/icons/outline/x.svg');
const closeIcon = xIcon;
interface IBigCard {
title: React.ReactNode;

5
src/components/domain.tsx
View File

@ -1,3 +1,4 @@
import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -21,7 +22,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
// const onBlockDomain = () => {
// dispatch(openModal('CONFIRM', {
// icon: require('@tabler/icons/outline/ban.svg'),
// icon: banIcon,
// 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 +39,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
<Text tag='span'>
{domain}
</Text>
<IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
<IconButton iconClassName='h-5 w-5' src={lockOpenIcon} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
</HStack>
);
};

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

@ -1,4 +1,5 @@
import { offset, Placement, useFloating, flip, arrow, shift } from '@floating-ui/react';
import dotsIcon from '@tabler/icons/outline/dots.svg';
import clsx from 'clsx';
import { supportsPassiveEvents } from 'detect-passive-events';
import React, { useEffect, useMemo, useRef, useState } from 'react';
@ -43,7 +44,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
onOpen,
onShiftClick,
placement: initialPlacement = 'top',
src = require('@tabler/icons/outline/dots.svg'),
src = dotsIcon,
title = 'Menu',
...filteredProps
} = props;

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

@ -1,3 +1,5 @@
import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
import userIcon from '@tabler/icons/outline/user.svg';
import clsx from 'clsx';
import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@ -67,7 +69,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/outline/user.svg')} />
<Icon src={userIcon} />
<HStack space={1} alignItems='center' grow>
<span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
{account.verified && <VerificationBadge />}
@ -78,7 +80,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
{event.location && (
<HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/outline/map-pin.svg')} />
<Icon src={mapPinIcon} />
<span>
{event.location.get('name')}
</span>

17
src/components/gameboy.tsx
View File

@ -1,6 +1,13 @@
import { WasmBoy } from '@soapbox.pub/wasmboy';
import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
import downloadIcon from '@tabler/icons/outline/download.svg';
import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
import volume3Icon from '@tabler/icons/outline/volume-3.svg';
import volumeIcon from '@tabler/icons/outline/volume.svg';
// @ts-ignore No types available
// eslint-disable-next-line import/no-unresolved
import { WasmBoy } from '@soapbox.pub/wasmboy';
import clsx from 'clsx';
import React, { useCallback, useEffect, useRef, useState } from 'react';
@ -139,13 +146,13 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
theme='transparent'
className='text-white'
onClick={togglePaused}
src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')}
src={paused ? playerPlayIcon : playerPauseIcon}
/>
<IconButton
theme='transparent'
className='text-white'
onClick={toggleMuted}
src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')}
src={muted ? volume3Icon : volumeIcon}
/>
</HStack>
@ -153,14 +160,14 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
<IconButton
theme='transparent'
className='text-white'
src={require('@tabler/icons/outline/download.svg')}
src={downloadIcon}
onClick={handleDownload}
/>
<IconButton
theme='transparent'
className='text-white'
onClick={toggleFullscreen}
src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
src={fullscreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
/>
</HStack>
</HStack>

6
src/components/list.tsx
View File

@ -1,3 +1,5 @@
import checkIcon from '@tabler/icons/outline/check.svg';
import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
import clsx from 'clsx';
import React from 'react';
import { Link } from 'react-router-dom';
@ -72,7 +74,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/outline/chevron-right.svg')} className='ml-1 rtl:rotate-180' />
<Icon src={chevronRightIcon} className='ml-1 rtl:rotate-180' />
</HStack>
) : null}
@ -90,7 +92,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
}
>
<Icon
src={require('@tabler/icons/outline/check.svg')}
src={checkIcon}
className={
clsx({
'h-4 w-4 text-white dark:text-white transition-all duration-500': true,

3
src/components/load-gap.tsx
View File

@ -1,3 +1,4 @@
import dotsIcon from '@tabler/icons/outline/dots.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -20,7 +21,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/outline/dots.svg')} />
<Icon src={dotsIcon} />
</button>
);
};

6
src/components/location-search.tsx
View File

@ -1,3 +1,5 @@
import backspaceIcon from '@tabler/icons/outline/backspace.svg';
import searchIcon from '@tabler/icons/outline/search.svg';
import clsx from 'clsx';
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import throttle from 'lodash/throttle';
@ -100,8 +102,8 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
renderSuggestion={AutosuggestLocation}
/>
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
<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)} />
<Icon src={searchIcon} className={clsx('svg-icon--search', { active: isEmpty() })} />
<Icon src={backspaceIcon} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
</div>
</div>
);

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

@ -1,3 +1,5 @@
import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
import volumeIcon from '@tabler/icons/outline/volume.svg';
import clsx from 'clsx';
import React, { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
@ -156,7 +158,7 @@ const Item: React.FC<IItem> = ({
const attachmentIcon = (
<SvgIcon
className={clsx('size-16 text-gray-800 dark:text-gray-200', { 'size-8': compact })}
src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || require('@tabler/icons/outline/paperclip.svg')}
src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || paperclipIcon}
/>
);
@ -233,7 +235,7 @@ const Item: React.FC<IItem> = ({
target='_blank'
title={attachment.description}
>
<span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={require('@tabler/icons/outline/volume.svg')} /></span>
<span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={volumeIcon} /></span>
<span className={clsx('pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-[18px] text-white opacity-90 transition-opacity duration-100 ease-linear', { 'hidden': compact })}>{ext}</span>
</a>
);

5
src/components/modal-root.tsx
View File

@ -1,3 +1,4 @@
import trashIcon from '@tabler/icons/outline/trash.svg';
import clsx from 'clsx';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -74,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/outline/trash.svg'),
icon: trashIcon,
heading: isEditing
? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
: <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
@ -93,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/outline/trash.svg'),
icon: trashIcon,
heading: isEditing
? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
: <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,

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

@ -1,3 +1,5 @@
import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
import exclamationCircleIcon from '@tabler/icons/outline/exclamation-circle.svg';
import clsx from 'clsx';
import React from 'react';
import { FormattedMessage } from 'react-intl';
@ -25,7 +27,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
})}
>
<Icon
src={require('@tabler/icons/outline/exclamation-circle.svg')}
src={exclamationCircleIcon}
className={clsx({
'h-5 w-5': size === 'md',
'h-7 w-7': size === 'lg',
@ -43,7 +45,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
</HStack>
<Icon
src={require('@tabler/icons/outline/chevron-right.svg')}
src={chevronRightIcon}
className='size-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
/>
</HStack>

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

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

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

@ -1,3 +1,7 @@
import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
import linkIcon from '@tabler/icons/outline/link.svg';
import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
import clsx from 'clsx';
import { List as ImmutableList } from 'immutable';
import React, { useState, useEffect } from 'react';
@ -135,7 +139,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
)}
<HStack space={1} alignItems='center'>
<Text tag='span' theme='muted'>
<Icon src={require('@tabler/icons/outline/link.svg')} />
<Icon src={linkIcon} />
</Text>
<Text tag='span' theme='muted' size='sm' direction={direction}>
{card.provider_name}
@ -168,10 +172,10 @@ const PreviewCard: React.FC<IPreviewCard> = ({
if (embedded) {
embed = renderVideo();
} else {
let iconVariant = require('@tabler/icons/outline/player-play.svg');
let iconVariant = playerPlayIcon;
if (card.type === 'photo') {
iconVariant = require('@tabler/icons/outline/zoom-in.svg');
iconVariant = zoomInIcon;
}
embed = (
@ -198,7 +202,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/outline/external-link.svg')}
src={externalLinkIcon}
className='size-6 text-inherit'
/>
</a>

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

@ -1,4 +1,5 @@
import { useFloating } from '@floating-ui/react';
import calendarIcon from '@tabler/icons/outline/calendar.svg';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import { useIntl, FormattedMessage } from 'react-intl';
@ -123,7 +124,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
{account.local ? (
<HStack alignItems='center' space={0.5}>
<Icon
src={require('@tabler/icons/outline/calendar.svg')}
src={calendarIcon}
className='size-4 text-gray-800 dark:text-gray-200'
/>

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

@ -1,3 +1,4 @@
import quoteIcon from '@tabler/icons/outline/quote.svg';
import React, { useCallback } from 'react';
import { HStack, Icon, Text } from 'soapbox/components/ui';
@ -18,7 +19,7 @@ const QuotedStatusIndicator: React.FC<IQuotedStatusIndicator> = ({ statusId }) =
return (
<HStack alignItems='center' space={1}>
<Icon className='size-5' src={require('@tabler/icons/outline/quote.svg')} aria-hidden />
<Icon className='size-5' src={quoteIcon} aria-hidden />
<Text truncate>{status.url}</Text>
</HStack>
);

3
src/components/quoted-status.tsx
View File

@ -1,3 +1,4 @@
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -85,7 +86,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
if (onCancel) {
actions = {
onActionClick: handleClose,
actionIcon: require('@tabler/icons/outline/x.svg'),
actionIcon: xIcon,
actionAlignment: 'top',
actionTitle: intl.formatMessage(messages.cancel),
};

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

@ -1,3 +1,4 @@
import arrowBarToUpIcon from '@tabler/icons/outline/arrow-bar-to-up.svg';
import throttle from 'lodash/throttle';
import React, { useState, useEffect, useCallback } from 'react';
import { useIntl, MessageDescriptor } from 'react-intl';
@ -92,7 +93,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
>
<Icon
className='size-4'
src={require('@tabler/icons/outline/arrow-bar-to-up.svg')}
src={arrowBarToUpIcon}
/>
<Text theme='inherit' size='sm'>

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

@ -1,3 +1,21 @@
import atIcon from '@tabler/icons/outline/at.svg';
import banIcon from '@tabler/icons/outline/ban.svg';
import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
import circleXIcon from '@tabler/icons/outline/circle-x.svg';
import circlesIcon from '@tabler/icons/outline/circles.svg';
import codeIcon from '@tabler/icons/outline/code.svg';
import filterIcon from '@tabler/icons/outline/filter.svg';
import hashIcon from '@tabler/icons/outline/hash.svg';
import listIcon from '@tabler/icons/outline/list.svg';
import logoutIcon from '@tabler/icons/outline/logout.svg';
import plusIcon from '@tabler/icons/outline/plus.svg';
import settingsIcon from '@tabler/icons/outline/settings.svg';
import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
import userIcon from '@tabler/icons/outline/user.svg';
import worldIcon from '@tabler/icons/outline/world.svg';
import xIcon from '@tabler/icons/outline/x.svg';
/* eslint-disable jsx-a11y/interactive-supports-focus */
import clsx from 'clsx';
import React, { useCallback } from 'react';
@ -163,7 +181,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<IconButton
title={intl.formatMessage(messages.close)}
onClick={handleClose}
src={require('@tabler/icons/outline/x.svg')}
src={xIcon}
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'
@ -186,7 +204,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to={`/@${account.acct}`}
icon={require('@tabler/icons/outline/user.svg')}
icon={userIcon}
text={intl.formatMessage(messages.profile)}
onClick={onClose}
/>
@ -194,7 +212,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{(account.locked || followRequestsCount > 0) && (
<SidebarLink
to='/follow_requests'
icon={require('@tabler/icons/outline/user-plus.svg')}
icon={userPlusIcon}
text={intl.formatMessage(messages.followRequests)}
onClick={onClose}
/>
@ -203,7 +221,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.bookmarks && (
<SidebarLink
to='/bookmarks'
icon={require('@tabler/icons/outline/bookmark.svg')}
icon={bookmarkIcon}
text={intl.formatMessage(messages.bookmarks)}
onClick={onClose}
/>
@ -212,7 +230,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.groups && (
<SidebarLink
to='/groups'
icon={require('@tabler/icons/outline/circles.svg')}
icon={circlesIcon}
text={intl.formatMessage(messages.groups)}
onClick={onClose}
/>
@ -221,7 +239,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.lists && (
<SidebarLink
to='/lists'
icon={require('@tabler/icons/outline/list.svg')}
icon={listIcon}
text={intl.formatMessage(messages.lists)}
onClick={onClose}
/>
@ -230,7 +248,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.events && (
<SidebarLink
to='/events'
icon={require('@tabler/icons/outline/calendar-event.svg')}
icon={calendarEventIcon}
text={intl.formatMessage(messages.events)}
onClick={onClose}
/>
@ -239,7 +257,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{settings.get('isDeveloper') && (
<SidebarLink
to='/developers'
icon={require('@tabler/icons/outline/code.svg')}
icon={codeIcon}
text={intl.formatMessage(messages.developers)}
onClick={onClose}
/>
@ -250,7 +268,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to='/timeline/local'
icon={features.federating ? require('@tabler/icons/outline/at.svg') : require('@tabler/icons/outline/world.svg')}
icon={features.federating ? atIcon : worldIcon}
text={features.federating ? instance.domain : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
onClick={onClose}
/>
@ -258,7 +276,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.federating && (
<SidebarLink
to='/timeline/global'
icon={require('@tabler/icons/outline/world.svg')}
icon={worldIcon}
text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
onClick={onClose}
/>
@ -270,7 +288,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.blocks && (
<SidebarLink
to='/blocks'
icon={require('@tabler/icons/outline/ban.svg')}
icon={banIcon}
text={intl.formatMessage(messages.blocks)}
onClick={onClose}
/>
@ -278,14 +296,14 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to='/mutes'
icon={require('@tabler/icons/outline/circle-x.svg')}
icon={circleXIcon}
text={intl.formatMessage(messages.mutes)}
onClick={onClose}
/>
<SidebarLink
to='/settings/preferences'
icon={require('@tabler/icons/outline/settings.svg')}
icon={settingsIcon}
text={intl.formatMessage(messages.preferences)}
onClick={onClose}
count={settingsNotifications.size}
@ -294,7 +312,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.federating && (
<SidebarLink
to='/domain_blocks'
icon={require('@tabler/icons/outline/ban.svg')}
icon={banIcon}
text={intl.formatMessage(messages.domainBlocks)}
onClick={onClose}
/>
@ -303,7 +321,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{(features.filters || features.filtersV2) && (
<SidebarLink
to='/filters'
icon={require('@tabler/icons/outline/filter.svg')}
icon={filterIcon}
text={intl.formatMessage(messages.filters)}
onClick={onClose}
/>
@ -312,7 +330,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.followedHashtagsList && (
<SidebarLink
to='/followed_tags'
icon={require('@tabler/icons/outline/hash.svg')}
icon={hashIcon}
text={intl.formatMessage(messages.followedTags)}
onClick={onClose}
/>
@ -321,7 +339,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{account.admin && (
<SidebarLink
to='/soapbox/config'
icon={require('@tabler/icons/outline/settings.svg')}
icon={settingsIcon}
text={intl.formatMessage(messages.soapboxConfig)}
onClick={onClose}
/>
@ -331,7 +349,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to='/logout'
icon={require('@tabler/icons/outline/logout.svg')}
icon={logoutIcon}
text={intl.formatMessage(messages.logout)}
onClick={onClickLogOut}
/>
@ -346,7 +364,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
</Text>
<Icon
src={require('@tabler/icons/outline/chevron-down.svg')}
src={chevronDownIcon}
className={clsx('size-4 text-gray-900 transition-transform dark:text-gray-100', {
'rotate-180': switcher,
})}
@ -359,7 +377,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='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
<Icon className='size-4 text-primary-500' src={plusIcon} />
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink>
</div>

66
src/components/sidebar-navigation.tsx
View File

@ -1,3 +1,25 @@
import bellFilledIcon from '@tabler/icons/filled/bell.svg';
import circlesFilledIcon from '@tabler/icons/filled/circles.svg';
import homeFilledIcon from '@tabler/icons/filled/home.svg';
import settingsFilledIcon from '@tabler/icons/filled/settings.svg';
import userFilledIcon from '@tabler/icons/filled/user.svg';
import atIcon from '@tabler/icons/outline/at.svg';
import bellIcon from '@tabler/icons/outline/bell.svg';
import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
import circlesIcon from '@tabler/icons/outline/circles.svg';
import codeIcon from '@tabler/icons/outline/code.svg';
import dashboardIcon from '@tabler/icons/outline/dashboard.svg';
import dotsCircleHorizontalIcon from '@tabler/icons/outline/dots-circle-horizontal.svg';
import homeIcon from '@tabler/icons/outline/home.svg';
import listIcon from '@tabler/icons/outline/list.svg';
import mailIcon from '@tabler/icons/outline/mail.svg';
import messagesIcon from '@tabler/icons/outline/messages.svg';
import searchIcon from '@tabler/icons/outline/search.svg';
import settingsIcon from '@tabler/icons/outline/settings.svg';
import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
import userIcon from '@tabler/icons/outline/user.svg';
import worldIcon from '@tabler/icons/outline/world.svg';
import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@ -43,7 +65,7 @@ const SidebarNavigation = () => {
menu.push({
to: '/follow_requests',
text: intl.formatMessage(messages.follow_requests),
icon: require('@tabler/icons/outline/user-plus.svg'),
icon: userPlusIcon,
count: followRequestsCount,
});
}
@ -52,7 +74,7 @@ const SidebarNavigation = () => {
menu.push({
to: '/bookmarks',
text: intl.formatMessage(messages.bookmarks),
icon: require('@tabler/icons/outline/bookmark.svg'),
icon: bookmarkIcon,
});
}
@ -60,7 +82,7 @@ const SidebarNavigation = () => {
menu.push({
to: '/lists',
text: intl.formatMessage(messages.lists),
icon: require('@tabler/icons/outline/list.svg'),
icon: listIcon,
});
}
@ -68,14 +90,14 @@ const SidebarNavigation = () => {
menu.push({
to: '/events',
text: intl.formatMessage(messages.events),
icon: require('@tabler/icons/outline/calendar-event.svg'),
icon: calendarEventIcon,
});
}
if (isDeveloper) {
menu.push({
to: '/developers',
icon: require('@tabler/icons/outline/code.svg'),
icon: codeIcon,
text: intl.formatMessage(messages.developers),
});
}
@ -92,7 +114,7 @@ const SidebarNavigation = () => {
return (
<SidebarNavigationLink
to='/chats'
icon={require('@tabler/icons/outline/messages.svg')}
icon={messagesIcon}
count={unreadChatsCount}
countMax={9}
text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
@ -104,7 +126,7 @@ const SidebarNavigation = () => {
return (
<SidebarNavigationLink
to='/messages'
icon={require('@tabler/icons/outline/mail.svg')}
icon={mailIcon}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
/>
);
@ -118,14 +140,14 @@ const SidebarNavigation = () => {
<Stack space={2}>
<SidebarNavigationLink
to='/'
icon={require('@tabler/icons/outline/home.svg')}
activeIcon={require('@tabler/icons/filled/home.svg')}
icon={homeIcon}
activeIcon={homeFilledIcon}
text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
/>
<SidebarNavigationLink
to='/search'
icon={require('@tabler/icons/outline/search.svg')}
icon={searchIcon}
text={<FormattedMessage id='tabs_bar.search' defaultMessage='Discover' />}
/>
@ -133,8 +155,8 @@ const SidebarNavigation = () => {
<>
<SidebarNavigationLink
to='/notifications'
icon={require('@tabler/icons/outline/bell.svg')}
activeIcon={require('@tabler/icons/filled/bell.svg')}
icon={bellIcon}
activeIcon={bellFilledIcon}
count={notificationCount}
text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
/>
@ -144,23 +166,23 @@ const SidebarNavigation = () => {
{features.groups && (
<SidebarNavigationLink
to='/groups'
icon={require('@tabler/icons/outline/circles.svg')}
activeIcon={require('@tabler/icons/filled/circles.svg')}
icon={circlesIcon}
activeIcon={circlesFilledIcon}
text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
/>
)}
<SidebarNavigationLink
to={`/@${account.acct}`}
icon={require('@tabler/icons/outline/user.svg')}
activeIcon={require('@tabler/icons/filled/user.svg')}
icon={userIcon}
activeIcon={userFilledIcon}
text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
/>
<SidebarNavigationLink
to='/settings'
icon={require('@tabler/icons/outline/settings.svg')}
activeIcon={require('@tabler/icons/filled/settings.svg')}
icon={settingsIcon}
activeIcon={settingsFilledIcon}
text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
count={settingsNotifications.size}
/>
@ -168,7 +190,7 @@ const SidebarNavigation = () => {
{account.staff && (
<SidebarNavigationLink
to='/soapbox/admin'
icon={require('@tabler/icons/outline/dashboard.svg')}
icon={dashboardIcon}
count={dashboardCount}
text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
/>
@ -181,7 +203,7 @@ const SidebarNavigation = () => {
{(account || !restrictUnauth.timelines.local) && (
<SidebarNavigationLink
to='/timeline/local'
icon={features.federating ? require('@tabler/icons/outline/at.svg') : require('@tabler/icons/outline/world.svg')}
icon={features.federating ? atIcon : worldIcon}
text={features.federating ? instance.domain : <FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
/>
)}
@ -189,7 +211,7 @@ const SidebarNavigation = () => {
{(features.federating && (account || !restrictUnauth.timelines.federated)) && (
<SidebarNavigationLink
to='/timeline/global'
icon={require('@tabler/icons/outline/world.svg')}
icon={worldIcon}
text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
/>
)}
@ -199,7 +221,7 @@ const SidebarNavigation = () => {
{menu.length > 0 && (
<DropdownMenu items={menu} placement='top'>
<SidebarNavigationLink
icon={require('@tabler/icons/outline/dots-circle-horizontal.svg')}
icon={dotsCircleHorizontalIcon}
text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
/>
</DropdownMenu>

6
src/components/site-logo.tsx
View File

@ -1,6 +1,8 @@
import clsx from 'clsx';
import React from 'react';
import soapboxLogoWhiteSrc from 'soapbox/assets/images/soapbox-logo-white.svg';
import soapboxLogoSrc from 'soapbox/assets/images/soapbox-logo.svg';
import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
interface ISiteLogo extends React.ComponentProps<'img'> {
@ -19,9 +21,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
if (theme === 'dark') darkMode = true;
/** Soapbox logo. */
const soapboxLogo = darkMode
? require('soapbox/assets/images/soapbox-logo-white.svg')
: require('soapbox/assets/images/soapbox-logo.svg');
const soapboxLogo = darkMode ? soapboxLogoWhiteSrc : soapboxLogoSrc;
// Use the right logo if provided, then use fallbacks.
const getSrc = () => {

112
src/components/status-action-bar.tsx
View File

@ -1,3 +1,35 @@
import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
import arrowsVerticalIcon from '@tabler/icons/outline/arrows-vertical.svg';
import atIcon from '@tabler/icons/outline/at.svg';
import banIcon from '@tabler/icons/outline/ban.svg';
import bellOffIcon from '@tabler/icons/outline/bell-off.svg';
import bellIcon from '@tabler/icons/outline/bell.svg';
import boltIcon from '@tabler/icons/outline/bolt.svg';
import bookmarkOffIcon from '@tabler/icons/outline/bookmark-off.svg';
import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
import clipboardCopyIcon from '@tabler/icons/outline/clipboard-copy.svg';
import dotsIcon from '@tabler/icons/outline/dots.svg';
import editIcon from '@tabler/icons/outline/edit.svg';
import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
import flagIcon from '@tabler/icons/outline/flag.svg';
import foldersIcon from '@tabler/icons/outline/folders.svg';
import gavelIcon from '@tabler/icons/outline/gavel.svg';
import heartIcon from '@tabler/icons/outline/heart.svg';
import lockIcon from '@tabler/icons/outline/lock.svg';
import mailIcon from '@tabler/icons/outline/mail.svg';
import messageCircleIcon from '@tabler/icons/outline/message-circle.svg';
import messagesIcon from '@tabler/icons/outline/messages.svg';
import pencilIcon from '@tabler/icons/outline/pencil.svg';
import pinIcon from '@tabler/icons/outline/pin.svg';
import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
import quoteIcon from '@tabler/icons/outline/quote.svg';
import repeatIcon from '@tabler/icons/outline/repeat.svg';
import shareIcon from '@tabler/icons/outline/share.svg';
import thumbDownIcon from '@tabler/icons/outline/thumb-down.svg';
import thumbUpIcon from '@tabler/icons/outline/thumb-up.svg';
import trashIcon from '@tabler/icons/outline/trash.svg';
import uploadIcon from '@tabler/icons/outline/upload.svg';
import volume3Icon from '@tabler/icons/outline/volume-3.svg';
import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useHistory, useRouteMatch } from 'react-router-dom';
@ -238,7 +270,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
dispatch(deleteStatus(status.id, withRedraft));
} else {
dispatch(openModal('CONFIRM', {
icon: withRedraft ? require('@tabler/icons/outline/edit.svg') : require('@tabler/icons/outline/trash.svg'),
icon: withRedraft ? editIcon : trashIcon,
heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@ -319,7 +351,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
const account = status.account;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
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> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
confirm: intl.formatMessage(messages.blockConfirm),
@ -409,7 +441,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
if (expandable) {
menu.push({
text: intl.formatMessage(messages.open),
icon: require('@tabler/icons/outline/arrows-vertical.svg'),
icon: arrowsVerticalIcon,
to: `/@${status.account.acct}/posts/${status.id}`,
});
}
@ -418,14 +450,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.copy),
action: handleCopy,
icon: require('@tabler/icons/outline/clipboard-copy.svg'),
icon: clipboardCopyIcon,
});
if (features.embeds && account.local) {
menu.push({
text: intl.formatMessage(messages.embed),
action: handleEmbed,
icon: require('@tabler/icons/outline/share.svg'),
icon: shareIcon,
});
}
}
@ -436,7 +468,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.external, { domain }),
icon: require('@tabler/icons/outline/external-link.svg'),
icon: externalLinkIcon,
href: externalNostrUrl || status.uri,
target: '_blank',
});
@ -454,7 +486,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/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
icon: status.pinned ? pinnedOffIcon : pinIcon,
});
}
}
@ -463,7 +495,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/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
icon: status.bookmarked ? bookmarkOffIcon : bookmarkIcon,
});
}
@ -471,7 +503,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(status.pleroma.get('bookmark_folder') ? messages.bookmarkChangeFolder : messages.bookmarkSetFolder),
action: handleBookmarkFolderClick,
icon: require('@tabler/icons/outline/folders.svg'),
icon: foldersIcon,
});
}
@ -480,7 +512,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
action: handleConversationMuteClick,
icon: mutingConversation ? require('@tabler/icons/outline/bell.svg') : require('@tabler/icons/outline/bell-off.svg'),
icon: mutingConversation ? bellIcon : bellOffIcon,
});
menu.push(null);
@ -490,14 +522,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/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
icon: status.pinned ? pinnedOffIcon : pinIcon,
});
} 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/outline/repeat.svg'),
icon: repeatIcon,
});
}
}
@ -505,20 +537,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.delete),
action: handleDeleteClick,
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
destructive: true,
});
if (features.editStatuses) {
menu.push({
text: intl.formatMessage(messages.edit),
action: handleEditClick,
icon: require('@tabler/icons/outline/edit.svg'),
icon: editIcon,
});
} else {
menu.push({
text: intl.formatMessage(messages.redraft),
action: handleRedraftClick,
icon: require('@tabler/icons/outline/edit.svg'),
icon: editIcon,
destructive: true,
});
}
@ -526,20 +558,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.mention, { name: username }),
action: handleMentionClick,
icon: require('@tabler/icons/outline/at.svg'),
icon: atIcon,
});
if (status.account.pleroma?.accepts_chat_messages === true) {
menu.push({
text: intl.formatMessage(messages.chat, { name: username }),
action: handleChatClick,
icon: require('@tabler/icons/outline/messages.svg'),
icon: messagesIcon,
});
} else if (features.privacyScopes) {
menu.push({
text: intl.formatMessage(messages.direct, { name: username }),
action: handleDirectClick,
icon: require('@tabler/icons/outline/mail.svg'),
icon: mailIcon,
});
}
@ -547,7 +579,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/outline/volume-3.svg'),
icon: volume3Icon,
action: isMutingGroup ? handleUnmuteGroupClick : handleMuteGroupClick,
});
menu.push(null);
@ -556,19 +588,19 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.mute, { name: username }),
action: handleMuteClick,
icon: require('@tabler/icons/outline/volume-3.svg'),
icon: volume3Icon,
});
if (features.blocks) {
menu.push({
text: intl.formatMessage(messages.block, { name: username }),
action: handleBlockClick,
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
});
}
menu.push({
text: intl.formatMessage(messages.report, { name: username }),
action: handleReport,
icon: require('@tabler/icons/outline/flag.svg'),
icon: flagIcon,
});
}
@ -590,7 +622,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: 'Ban from Group',
action: handleBlockFromGroup,
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
destructive: true,
});
}
@ -599,7 +631,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.groupModDelete),
action: handleDeleteFromGroup,
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
destructive: true,
});
}
@ -611,28 +643,28 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
menu.push({
text: intl.formatMessage(messages.adminAccount, { name: username }),
action: onModerate,
icon: require('@tabler/icons/outline/gavel.svg'),
icon: gavelIcon,
});
if (isAdmin) {
menu.push({
text: intl.formatMessage(messages.admin_status),
href: `/pleroma/admin/#/statuses/${status.id}/`,
icon: require('@tabler/icons/outline/pencil.svg'),
icon: pencilIcon,
});
}
menu.push({
text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
action: handleToggleStatusSensitivity,
icon: require('@tabler/icons/outline/alert-triangle.svg'),
icon: alertTriangleIcon,
});
if (!ownAccount) {
menu.push({
text: intl.formatMessage(messages.deleteStatus),
action: handleDeleteStatus,
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
destructive: true,
});
}
@ -670,14 +702,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite);
const menu = _makeMenu(publicStatus);
let reblogIcon = require('@tabler/icons/outline/repeat.svg');
let reblogIcon = repeatIcon;
let replyTitle;
let replyDisabled = false;
if (status.visibility === 'direct') {
reblogIcon = require('@tabler/icons/outline/mail.svg');
reblogIcon = mailIcon;
} else if (status.visibility === 'private') {
reblogIcon = require('@tabler/icons/outline/lock.svg');
reblogIcon = lockIcon;
}
if ((status.group as Group)?.membership_required && !groupRelationship?.member) {
@ -688,11 +720,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/outline/repeat.svg'),
icon: repeatIcon,
}, {
text: intl.formatMessage(messages.quotePost),
action: handleQuoteClick,
icon: require('@tabler/icons/outline/quote.svg'),
icon: quoteIcon,
}];
const reblogButton = (
@ -741,7 +773,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
>
<StatusActionButton
title={replyTitle}
icon={require('@tabler/icons/outline/message-circle.svg')}
icon={messageCircleIcon}
onClick={handleReplyClick}
count={replyCount}
text={withLabels ? intl.formatMessage(messages.reply) : undefined}
@ -766,7 +798,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
<StatusReactionWrapper statusId={status.id}>
<StatusActionButton
title={meEmojiTitle}
icon={require('@tabler/icons/outline/heart.svg')}
icon={heartIcon}
filled
color='accent'
active={Boolean(meEmojiName)}
@ -779,7 +811,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
) : (
<StatusActionButton
title={intl.formatMessage(messages.favourite)}
icon={features.dislikes ? require('@tabler/icons/outline/thumb-up.svg') : require('@tabler/icons/outline/heart.svg')}
icon={features.dislikes ? thumbUpIcon : heartIcon}
color='accent'
filled
onClick={handleFavouriteClick}
@ -793,7 +825,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
{features.dislikes && (
<StatusActionButton
title={intl.formatMessage(messages.disfavourite)}
icon={require('@tabler/icons/outline/thumb-down.svg')}
icon={thumbDownIcon}
color='accent'
filled
onClick={handleDislikeClick}
@ -807,7 +839,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
{(acceptsZaps) && (
<StatusActionButton
title={intl.formatMessage(messages.zap)}
icon={require('@tabler/icons/outline/bolt.svg')}
icon={boltIcon}
color='accent'
filled
onClick={handleZapClick}
@ -821,7 +853,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
{canShare && (
<StatusActionButton
title={intl.formatMessage(messages.share)}
icon={require('@tabler/icons/outline/upload.svg')}
icon={uploadIcon}
onClick={handleShareClick}
theme={statusActionButtonTheme}
/>
@ -830,7 +862,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
<DropdownMenu items={menu} status={status}>
<StatusActionButton
title={intl.formatMessage(messages.more)}
icon={require('@tabler/icons/outline/dots.svg')}
icon={dotsIcon}
theme={statusActionButtonTheme}
/>
</DropdownMenu>

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

@ -1,3 +1,4 @@
import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
import clsx from 'clsx';
import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode } from 'html-react-parser';
import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
@ -27,7 +28,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 size-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
<Icon className='inline-block size-5' src={chevronRightIcon} />
</button>
);

11
src/components/status.tsx
View File

@ -1,3 +1,6 @@
import circlesIcon from '@tabler/icons/outline/circles.svg';
import pinnedIcon from '@tabler/icons/outline/pinned.svg';
import repeatIcon from '@tabler/icons/outline/repeat.svg';
import clsx from 'clsx';
import React, { useEffect, useRef, useState } from 'react';
import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
@ -212,7 +215,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
avatarSize={avatarSize}
icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
icon={<Icon src={repeatIcon} className='size-4 text-green-600' />}
text={
<FormattedMessage
id='status.reblogged_by_with_group'
@ -252,7 +255,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
avatarSize={avatarSize}
icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
icon={<Icon src={repeatIcon} className='size-4 text-green-600' />}
text={
<FormattedMessage
id='status.reblogged_by'
@ -279,7 +282,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
avatarSize={avatarSize}
icon={<Icon src={require('@tabler/icons/outline/pinned.svg')} className='size-4 text-gray-600 dark:text-gray-400' />}
icon={<Icon src={pinnedIcon} className='size-4 text-gray-600 dark:text-gray-400' />}
text={
<FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
}
@ -289,7 +292,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
avatarSize={avatarSize}
icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
icon={<Icon src={circlesIcon} className='size-4 text-primary-600 dark:text-accent-blue' />}
text={
<FormattedMessage
id='status.group'

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

@ -1,3 +1,8 @@
import dotsIcon from '@tabler/icons/outline/dots.svg';
import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
import eyeIcon from '@tabler/icons/outline/eye.svg';
import headsetIcon from '@tabler/icons/outline/headset.svg';
import trashIcon from '@tabler/icons/outline/trash.svg';
import clsx from 'clsx';
import React, { useEffect, useMemo, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -61,7 +66,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
dispatch(deleteStatus(status.id, false));
} else {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
heading: intl.formatMessage(messages.deleteHeading),
message: intl.formatMessage(messages.deleteMessage),
confirm: intl.formatMessage(messages.deleteConfirm),
@ -75,7 +80,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
{
text: intl.formatMessage(messages.delete),
action: handleDeleteStatus,
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
destructive: true,
},
];
@ -99,7 +104,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
{visible ? (
<Button
text={intl.formatMessage(messages.hide)}
icon={require('@tabler/icons/outline/eye-off.svg')}
icon={eyeOffIcon}
onClick={toggleVisibility}
theme='primary'
size='sm'
@ -140,7 +145,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
type='button'
theme='outline'
size='sm'
icon={require('@tabler/icons/outline/headset.svg')}
icon={headsetIcon}
>
{intl.formatMessage(messages.contact)}
</Button>
@ -153,7 +158,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
type='button'
theme='outline'
size='sm'
icon={require('@tabler/icons/outline/eye.svg')}
icon={eyeIcon}
onClick={toggleVisibility}
>
{intl.formatMessage(messages.show)}
@ -162,7 +167,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
{(isUnderReview && isOwnStatus) ? (
<DropdownMenu
items={menu}
src={require('@tabler/icons/outline/dots.svg')}
src={dotsIcon}
/>
) : null}
</HStack>

33
src/components/thumb-navigation.tsx
View File

@ -1,3 +1,14 @@
import bellFilledIcon from '@tabler/icons/filled/bell.svg';
import circlesFilledIcon from '@tabler/icons/filled/circles.svg';
import homeFilledIcon from '@tabler/icons/filled/home.svg';
import mailFilledIcon from '@tabler/icons/filled/mail.svg';
import bellIcon from '@tabler/icons/outline/bell.svg';
import circlesIcon from '@tabler/icons/outline/circles.svg';
import dashboardIcon from '@tabler/icons/outline/dashboard.svg';
import homeIcon from '@tabler/icons/outline/home.svg';
import mailIcon from '@tabler/icons/outline/mail.svg';
import messagesIcon from '@tabler/icons/outline/messages.svg';
import searchIcon from '@tabler/icons/outline/search.svg';
import React from 'react';
import { FormattedMessage } from 'react-intl';
@ -19,7 +30,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
if (features.chats) {
return (
<ThumbNavigationLink
src={require('@tabler/icons/outline/messages.svg')}
src={messagesIcon}
text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
to='/chats'
exact
@ -32,8 +43,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
if (features.directTimeline || features.conversations) {
return (
<ThumbNavigationLink
src={require('@tabler/icons/outline/mail.svg')}
activeSrc={require('@tabler/icons/filled/mail.svg')}
src={mailIcon}
activeSrc={mailFilledIcon}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
to='/messages'
paths={['/messages', '/conversations']}
@ -47,8 +58,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
return (
<div className='thumb-navigation'>
<ThumbNavigationLink
src={require('@tabler/icons/outline/home.svg')}
activeSrc={require('@tabler/icons/filled/home.svg')}
src={homeIcon}
activeSrc={homeFilledIcon}
text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
to='/'
exact
@ -56,8 +67,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{features.groups && (
<ThumbNavigationLink
src={require('@tabler/icons/outline/circles.svg')}
activeSrc={require('@tabler/icons/filled/circles.svg')}
src={circlesIcon}
activeSrc={circlesFilledIcon}
text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
to='/groups'
exact
@ -65,7 +76,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
)}
<ThumbNavigationLink
src={require('@tabler/icons/outline/search.svg')}
src={searchIcon}
text={<FormattedMessage id='navigation.search' defaultMessage='Discover' />}
to='/search'
exact
@ -73,8 +84,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{account && (
<ThumbNavigationLink
src={require('@tabler/icons/outline/bell.svg')}
activeSrc={require('@tabler/icons/filled/bell.svg')}
src={bellIcon}
activeSrc={bellFilledIcon}
text={<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />}
to='/notifications'
exact
@ -86,7 +97,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{(account && account.staff) && (
<ThumbNavigationLink
src={require('@tabler/icons/outline/dashboard.svg')}
src={dashboardIcon}
text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
to='/soapbox/admin'
count={dashboardCount}

5
src/components/translate-button.tsx
View File

@ -1,3 +1,4 @@
import languageIcon from '@tabler/icons/outline/language.svg';
import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
@ -53,7 +54,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
<Button
theme='muted'
text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />}
icon={require('@tabler/icons/outline/language.svg')}
icon={languageIcon}
onClick={handleTranslate}
/>
<Text theme='muted'>
@ -68,7 +69,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
<Button
theme='muted'
text={<FormattedMessage id='status.translate' defaultMessage='Translate' />}
icon={require('@tabler/icons/outline/language.svg')}
icon={languageIcon}
onClick={handleTranslate}
/>
</div>

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

@ -1,3 +1,6 @@
import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
import clsx from 'clsx';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -60,7 +63,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
{menu && (
<DropdownMenu
items={menu}
src={require('@tabler/icons/outline/dots-vertical.svg')}
src={dotsVerticalIcon}
/>
)}
{action && actionIcon && (
@ -72,7 +75,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
</button>
)}
<Icon
src={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
src={expanded ? chevronUpIcon : chevronDownIcon}
className='size-5 text-gray-700 dark:text-gray-600'
/>
</HStack>

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

@ -1,3 +1,4 @@
import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
import clsx from 'clsx';
import React, { useState } from 'react';
@ -35,7 +36,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/outline/photo-off.svg')}
src={photoOffIcon}
className='size-4 text-gray-500 dark:text-gray-700'
/>
</div>

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

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

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

@ -1,3 +1,5 @@
import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
import React, { useEffect, useState } from 'react';
import { useDimensions } from 'soapbox/hooks';
@ -68,7 +70,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
disabled={!hasPrevPage || isDisabled}
>
<Icon
src={require('@tabler/icons/outline/chevron-left.svg')}
src={chevronLeftIcon}
className='size-5 text-black dark:text-white'
/>
</button>
@ -100,7 +102,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
disabled={!hasNextPage || isDisabled}
>
<Icon
src={require('@tabler/icons/outline/chevron-right.svg')}
src={chevronRightIcon}
className='size-5 text-black dark:text-white'
/>
</button>

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

@ -1,4 +1,5 @@
import { shift, useFloating, Placement, offset, OffsetOptions } from '@floating-ui/react';
import dotsIcon from '@tabler/icons/outline/dots.svg';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
@ -134,7 +135,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
{all && (
<IconButton
className='text-gray-600 hover:text-gray-600 dark:hover:text-white'
src={require('@tabler/icons/outline/dots.svg')}
src={dotsIcon}
onClick={handleExpand}
/>
)}

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

@ -1,3 +1,5 @@
import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
import eyeIcon from '@tabler/icons/outline/eye.svg';
import clsx from 'clsx';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -123,7 +125,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/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}
src={revealed ? eyeOffIcon : eyeIcon}
className='size-4'
/>
</button>

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

@ -1,3 +1,4 @@
import worldIcon from '@tabler/icons/outline/world.svg';
import React from 'react';
import { openDropdownMenu } from 'soapbox/actions/dropdown-menu';
@ -26,7 +27,7 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
const dispatch = useAppDispatch();
const formattedLanguages = formatLanguages(languages);
const newMenu: MenuItem[] = [{ icon: require('@tabler/icons/outline/world.svg'), text: 'Default', action: () => {
const newMenu: MenuItem[] = [{ icon: worldIcon, text: 'Default', action: () => {
setLanguage('');
} }];
@ -51,7 +52,7 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
{language.toUpperCase()}
</button>
) : (
<SvgIcon src={require('@tabler/icons/outline/world.svg')} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 dark:text-white sm:mr-4' />
<SvgIcon src={worldIcon} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 dark:text-white sm:mr-4' />
)}
</DropdownMenu>
);

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

@ -1,3 +1,5 @@
import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import React from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -72,7 +74,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
cancelAction,
cancelText,
children,
closeIcon = require('@tabler/icons/outline/x.svg'),
closeIcon = xIcon,
closePosition = 'right',
confirmationAction,
confirmationDisabled,
@ -115,7 +117,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
>
{onBack && (
<IconButton
src={require('@tabler/icons/outline/arrow-left.svg')}
src={arrowLeftIcon}
title={intl.formatMessage(messages.back)}
onClick={onBack}
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'

3
src/components/ui/streamfield/streamfield.tsx
View File

@ -1,3 +1,4 @@
import xIcon from '@tabler/icons/outline/x.svg';
import React from 'react';
import { useIntl, defineMessages } from 'react-intl';
@ -83,7 +84,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/outline/x.svg')}
src={xIcon}
onClick={() => onRemoveItem(i)}
title={intl.formatMessage(messages.remove)}
/>

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

@ -1,3 +1,4 @@
import xIcon from '@tabler/icons/outline/x.svg';
import React from 'react';
import IconButton from '../icon-button/icon-button';
@ -18,7 +19,7 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
<IconButton
iconClassName='h-4 w-4'
src={require('@tabler/icons/outline/x.svg')}
src={xIcon}
onClick={() => onDelete(tag)}
/>
</div>

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

@ -1,3 +1,7 @@
import alertCircleIcon from '@tabler/icons/outline/alert-circle.svg';
import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import React from 'react';
import toast, { Toast as RHToast } from 'react-hot-toast';
@ -42,7 +46,7 @@ const Toast = (props: IToast) => {
case 'success':
return (
<Icon
src={require('@tabler/icons/outline/circle-check.svg')}
src={circleCheckIcon}
className='size-6 text-success-500 dark:text-success-400'
aria-hidden
/>
@ -50,7 +54,7 @@ const Toast = (props: IToast) => {
case 'info':
return (
<Icon
src={require('@tabler/icons/outline/info-circle.svg')}
src={infoCircleIcon}
className='size-6 text-primary-600 dark:text-accent-blue'
aria-hidden
/>
@ -58,7 +62,7 @@ const Toast = (props: IToast) => {
case 'error':
return (
<Icon
src={require('@tabler/icons/outline/alert-circle.svg')}
src={alertCircleIcon}
className='size-6 text-danger-600'
aria-hidden
/>
@ -143,7 +147,7 @@ const Toast = (props: IToast) => {
data-testid='toast-dismiss'
>
<span className='sr-only'><FormattedMessage id='lightbox.close' defaultMessage='Close' /></span>
<Icon src={require('@tabler/icons/outline/x.svg')} className='size-5' />
<Icon src={xIcon} className='size-5' />
</button>
</div>
</HStack>

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

@ -1,3 +1,4 @@
import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
import React from 'react';
import HStack from 'soapbox/components/ui/hstack/hstack';
@ -42,7 +43,7 @@ const Widget: React.FC<IWidget> = ({
title,
children,
onActionClick,
actionIcon = require('@tabler/icons/outline/arrow-right.svg'),
actionIcon = arrowRightIcon,
actionTitle,
action,
}): JSX.Element => {

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

@ -1,3 +1,4 @@
import cloudUploadIcon from '@tabler/icons/outline/cloud-upload.svg';
import React from 'react';
import { FormattedMessage } from 'react-intl';
@ -13,7 +14,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
return (
<HStack alignItems='center' space={2}>
<Icon
src={require('@tabler/icons/outline/cloud-upload.svg')}
src={cloudUploadIcon}
className='size-7 text-gray-500'
/>

3
src/components/upload.tsx
View File

@ -1,3 +1,4 @@
import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.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';
@ -240,7 +241,7 @@ const Upload: React.FC<IUpload> = ({
'opacity-100': !active,
})}
>
<Icon className='size-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
<Icon className='size-4' src={alertTriangleIcon} />
<FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
</span>
)}

4
src/components/validation-checkmark.tsx
View File

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

3
src/components/verification-badge.tsx
View File

@ -2,6 +2,7 @@ import clsx from 'clsx';
import React from 'react';
import { useIntl, defineMessages } from 'react-intl';
import verifiedIcon from 'soapbox/assets/icons/verified.svg';
import { Icon } from 'soapbox/components/ui';
import { useSoapboxConfig } from 'soapbox/hooks';
@ -18,7 +19,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
const soapboxConfig = useSoapboxConfig();
// Prefer a custom icon if found
const icon = soapboxConfig.verifiedIcon || require('soapbox/assets/icons/verified.svg');
const icon = soapboxConfig.verifiedIcon || verifiedIcon;
// Render component based on file extension
const Element = icon.endsWith('.svg') ? Icon : 'img';

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

@ -1,3 +1,5 @@
import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
import volumeIcon from '@tabler/icons/outline/volume.svg';
import clsx from 'clsx';
import React, { useState } from 'react';
@ -103,7 +105,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
thumbnail = (
<div className='relative z-[1] block size-full cursor-zoom-in leading-none text-gray-400 no-underline'>
<span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={require('@tabler/icons/outline/volume.svg')} /></span>
<span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={volumeIcon} /></span>
<span className='pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 px-1.5 py-0.5 text-[11px] font-semibold leading-[18px] text-white opacity-90 transition-opacity duration-100 ease-linear'>{fileExtension}</span>
</div>
);
@ -112,7 +114,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
if (!visible) {
icon = (
<span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
<SvgIcon className='size-24' src={require('@tabler/icons/outline/eye-off.svg')} />
<SvgIcon className='size-24' src={eyeOffIcon} />
</span>
);
}

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

@ -1,3 +1,4 @@
import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
import React from 'react';
import { FormattedMessage } from 'react-intl';
@ -16,7 +17,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/outline/briefcase.svg')}
src={briefcaseIcon}
className='flex-none text-primary-600 dark:text-primary-400'
/>

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

@ -1,3 +1,23 @@
import atIcon from '@tabler/icons/outline/at.svg';
import banIcon from '@tabler/icons/outline/ban.svg';
import boltIcon from '@tabler/icons/outline/bolt.svg';
import circleXIcon from '@tabler/icons/outline/circle-x.svg';
import clipboardCopyIcon from '@tabler/icons/outline/clipboard-copy.svg';
import dotsIcon from '@tabler/icons/outline/dots.svg';
import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
import flagIcon from '@tabler/icons/outline/flag.svg';
import gavelIcon from '@tabler/icons/outline/gavel.svg';
import listIcon from '@tabler/icons/outline/list.svg';
import mailIcon from '@tabler/icons/outline/mail.svg';
import messagesIcon from '@tabler/icons/outline/messages.svg';
import repeatIcon from '@tabler/icons/outline/repeat.svg';
import rssIcon from '@tabler/icons/outline/rss.svg';
import searchIcon from '@tabler/icons/outline/search.svg';
import settingsIcon from '@tabler/icons/outline/settings.svg';
import uploadIcon from '@tabler/icons/outline/upload.svg';
import userCheckIcon from '@tabler/icons/outline/user-check.svg';
import userXIcon from '@tabler/icons/outline/user-x.svg';
import userIcon from '@tabler/icons/outline/user.svg';
import { useMutation } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import { List as ImmutableList } from 'immutable';
@ -135,7 +155,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
dispatch(unblockAccount(account.id));
} else {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
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> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
confirm: intl.formatMessage(messages.blockConfirm),
@ -191,7 +211,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
const onBlockDomain = (domain: string) => {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
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),
@ -298,7 +318,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
if (features.rssFeeds && account.local) {
menu.push({
text: intl.formatMessage(messages.subscribeFeed),
icon: require('@tabler/icons/outline/rss.svg'),
icon: rssIcon,
href: software === MASTODON ? `${account.url}.rss` : `${account.url}/feed.rss`,
target: '_blank',
});
@ -308,7 +328,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.share, { name: account.username }),
action: handleShare,
icon: require('@tabler/icons/outline/upload.svg'),
icon: uploadIcon,
});
}
@ -321,7 +341,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.profileExternal, { domain }),
action: () => onProfileExternal(url),
icon: require('@tabler/icons/outline/external-link.svg'),
icon: externalLinkIcon,
href: url,
});
}
@ -330,14 +350,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.copy),
action: handleCopy,
icon: require('@tabler/icons/outline/clipboard-copy.svg'),
icon: clipboardCopyIcon,
});
if (account.nostr.pubkey) {
menu.push({
text: intl.formatMessage(messages.npub),
action: handleCopyNpub,
icon: require('@tabler/icons/outline/clipboard-copy.svg'),
icon: clipboardCopyIcon,
});
}
@ -347,7 +367,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/outline/search.svg'),
icon: searchIcon,
});
}
@ -359,38 +379,38 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.edit_profile),
to: '/settings/profile',
icon: require('@tabler/icons/outline/user.svg'),
icon: userIcon,
});
menu.push({
text: intl.formatMessage(messages.preferences),
to: '/settings',
icon: require('@tabler/icons/outline/settings.svg'),
icon: settingsIcon,
});
menu.push(null);
menu.push({
text: intl.formatMessage(messages.mutes),
to: '/mutes',
icon: require('@tabler/icons/outline/circle-x.svg'),
icon: circleXIcon,
});
if (features.blocks) {
menu.push({
text: intl.formatMessage(messages.blocks),
to: '/blocks',
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
});
}
} else {
menu.push({
text: intl.formatMessage(messages.mention, { name: account.username }),
action: onMention,
icon: require('@tabler/icons/outline/at.svg'),
icon: atIcon,
});
if (features.privacyScopes) {
menu.push({
text: intl.formatMessage(messages.direct, { name: account.username }),
action: onDirect,
icon: require('@tabler/icons/outline/mail.svg'),
icon: mailIcon,
});
}
@ -399,13 +419,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.hideReblogs, { name: account.username }),
action: onReblogToggle,
icon: require('@tabler/icons/outline/repeat.svg'),
icon: repeatIcon,
});
} else {
menu.push({
text: intl.formatMessage(messages.showReblogs, { name: account.username }),
action: onReblogToggle,
icon: require('@tabler/icons/outline/repeat.svg'),
icon: repeatIcon,
});
}
@ -413,7 +433,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list),
action: onAddToList,
icon: require('@tabler/icons/outline/list.svg'),
icon: listIcon,
});
}
@ -421,14 +441,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/outline/user-check.svg'),
icon: userCheckIcon,
});
}
} else if (features.lists && features.unrestrictedLists) {
menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list),
action: onAddToList,
icon: require('@tabler/icons/outline/list.svg'),
icon: listIcon,
});
}
@ -438,7 +458,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.removeFromFollowers),
action: onRemoveFromFollowers,
icon: require('@tabler/icons/outline/user-x.svg'),
icon: userXIcon,
});
}
@ -446,13 +466,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.unmute, { name: account.username }),
action: onMute,
icon: require('@tabler/icons/outline/circle-x.svg'),
icon: circleXIcon,
});
} else {
menu.push({
text: intl.formatMessage(messages.mute, { name: account.username }),
action: onMute,
icon: require('@tabler/icons/outline/circle-x.svg'),
icon: circleXIcon,
});
}
@ -461,13 +481,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.unblock, { name: account.username }),
action: onBlock,
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
});
} else {
menu.push({
text: intl.formatMessage(messages.block, { name: account.username }),
action: onBlock,
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
});
}
}
@ -475,7 +495,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.report, { name: account.username }),
action: onReport,
icon: require('@tabler/icons/outline/flag.svg'),
icon: flagIcon,
});
}
@ -488,13 +508,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.unblockDomain, { domain }),
action: () => onUnblockDomain(domain),
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
});
} else {
menu.push({
text: intl.formatMessage(messages.blockDomain, { domain }),
action: () => onBlockDomain(domain),
icon: require('@tabler/icons/outline/ban.svg'),
icon: banIcon,
});
}
}
@ -505,7 +525,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
menu.push({
text: intl.formatMessage(messages.adminAccount, { name: account.username }),
action: onModerate,
icon: require('@tabler/icons/outline/gavel.svg'),
icon: gavelIcon,
});
}
@ -592,7 +612,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
return (
<IconButton
src={require('@tabler/icons/outline/messages.svg')}
src={messagesIcon}
onClick={() => createAndNavigateToChat.mutate(account.id)}
title={intl.formatMessage(messages.chat, { name: account.username })}
theme='outlined'
@ -604,7 +624,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
} else if (account.pleroma?.accepts_chat_messages) {
return (
<IconButton
src={require('@tabler/icons/outline/messages.svg')}
src={messagesIcon}
onClick={() => createAndNavigateToChat.mutate(account.id)}
title={intl.formatMessage(messages.chat, { name: account.username })}
theme='outlined'
@ -626,7 +646,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
return (
<IconButton
src={require('@tabler/icons/outline/upload.svg')}
src={uploadIcon}
onClick={handleShare}
title={intl.formatMessage(messages.share, { name: account.username })}
theme='outlined'
@ -639,7 +659,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
const renderZapAccount = () => {
return (
<IconButton
src={require('@tabler/icons/outline/bolt.svg')}
src={boltIcon}
onClick={handleZapAccount}
title={intl.formatMessage(messages.zap, { target: account.display_name })}
theme='outlined'
@ -698,7 +718,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
{menu.length > 0 && (
<DropdownMenu items={menu} placement='bottom-end'>
<IconButton
src={require('@tabler/icons/outline/dots.svg')}
src={dotsIcon}
theme='outlined'
className='px-2'
iconClassName='h-4 w-4'

3
src/features/admin/announcements.tsx
View File

@ -1,3 +1,4 @@
import plusIcon from '@tabler/icons/outline/plus.svg';
import React from 'react';
import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -103,7 +104,7 @@ const Announcements: React.FC = () => {
<Stack className='gap-4'>
<Button
className='sm:w-fit sm:self-end'
icon={require('@tabler/icons/outline/plus.svg')}
icon={plusIcon}
onClick={handleCreateAnnouncement}
theme='secondary'
block

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

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

9
src/features/admin/components/report.tsx
View File

@ -1,3 +1,6 @@
import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
import hourglassEmptyIcon from '@tabler/icons/outline/hourglass-empty.svg';
import trashIcon from '@tabler/icons/outline/trash.svg';
import React, { useCallback, useState } from 'react';
import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
import { Link } from 'react-router-dom';
@ -45,11 +48,11 @@ const Report: React.FC<IReport> = ({ id }) => {
return [{
text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }),
action: handleDeactivateUser,
icon: require('@tabler/icons/outline/hourglass-empty.svg'),
icon: hourglassEmptyIcon,
}, {
text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }),
action: handleDeleteUser,
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
destructive: true,
}];
};
@ -149,7 +152,7 @@ const Report: React.FC<IReport> = ({ id }) => {
<FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
</Button>
<DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
<DropdownMenu items={menu} src={dotsVerticalIcon} />
</HStack>
</HStack>
);

3
src/features/admin/domains.tsx
View File

@ -1,3 +1,4 @@
import plusIcon from '@tabler/icons/outline/plus.svg';
import React, { useEffect } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -122,7 +123,7 @@ const Domains: React.FC = () => {
<Stack className='gap-4'>
<Button
className='sm:w-fit sm:self-end'
icon={require('@tabler/icons/outline/plus.svg')}
icon={plusIcon}
onClick={handleCreateDomain}
theme='secondary'
block

3
src/features/admin/manage-zap-split.tsx
View File

@ -1,3 +1,4 @@
import xIcon from '@tabler/icons/outline/x.svg';
import React, { useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -9,7 +10,7 @@ import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit';
import AddNewAccount from '../ui/components/new-account-zap-split';
import { ZapSplitSlider } from '../zap/components/zap-split-account-item';
const closeIcon = require('@tabler/icons/outline/x.svg');
const closeIcon = xIcon;
const messages = defineMessages({
heading: { id: 'column.admin.zap_split', defaultMessage: 'Manage Zap Split' },

3
src/features/admin/rules.tsx
View File

@ -1,3 +1,4 @@
import plusIcon from '@tabler/icons/outline/plus.svg';
import React from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -85,7 +86,7 @@ const Rules: React.FC = () => {
<Stack className='gap-4'>
<Button
className='sm:w-fit sm:self-end'
icon={require('@tabler/icons/outline/plus.svg')}
icon={plusIcon}
onClick={handleCreateRule}
theme='secondary'
block

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

@ -1,3 +1,5 @@
import downloadIcon from '@tabler/icons/outline/download.svg';
import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
import React from 'react';
import { FormattedMessage } from 'react-intl';
@ -155,7 +157,7 @@ const Dashboard: React.FC = () => {
<Icon
className='size-4'
src={require('@tabler/icons/outline/external-link.svg')}
src={externalLinkIcon}
/>
</a>
</ListItem>
@ -174,7 +176,7 @@ const Dashboard: React.FC = () => {
<List>
<ListItem label='subscribers.csv'>
<IconButton
src={require('@tabler/icons/outline/download.svg')}
src={downloadIcon}
onClick={handleSubscribersClick}
iconClassName='h-5 w-5'
/>
@ -182,7 +184,7 @@ const Dashboard: React.FC = () => {
<ListItem label='unsubscribers.csv'>
<IconButton
src={require('@tabler/icons/outline/download.svg')}
src={downloadIcon}
onClick={handleUnsubscribersClick}
iconClassName='h-5 w-5'
/>
@ -190,7 +192,7 @@ const Dashboard: React.FC = () => {
<ListItem label='combined.csv'>
<IconButton
src={require('@tabler/icons/outline/download.svg')}
src={downloadIcon}
onClick={handleCombinedClick}
iconClassName='h-5 w-5'
/>

3
src/features/aliases/components/account.tsx
View File

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

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

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

3
src/features/aliases/index.tsx
View File

@ -1,3 +1,4 @@
import xIcon from '@tabler/icons/outline/x.svg';
import React, { useEffect } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@ -79,7 +80,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/outline/x.svg')} />
<Icon className='mr-1.5' src={xIcon} />
<Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
</div>
</HStack>

11
src/features/audio/index.tsx
View File

@ -1,3 +1,8 @@
import downloadIcon from '@tabler/icons/outline/download.svg';
import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
import volume3Icon from '@tabler/icons/outline/volume-3.svg';
import volumeIcon from '@tabler/icons/outline/volume.svg';
import clsx from 'clsx';
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
@ -534,7 +539,7 @@ const Audio: React.FC<IAudio> = (props) => {
className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 active:text-white active:opacity-100 ')}
onClick={togglePlay}
>
<SvgIcon className='w-5' src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
<SvgIcon className='w-5' src={paused ? playerPlayIcon : playerPauseIcon} />
</button>
<button
@ -546,7 +551,7 @@ const Audio: React.FC<IAudio> = (props) => {
className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 active:text-white active:opacity-100')}
onClick={toggleMute}
>
<SvgIcon className='w-5' src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
<SvgIcon className='w-5' src={muted ? volume3Icon : volumeIcon} />
</button>
<div
@ -594,7 +599,7 @@ const Audio: React.FC<IAudio> = (props) => {
download
target='_blank'
>
<SvgIcon className='w-5' src={require('@tabler/icons/outline/download.svg')} />
<SvgIcon className='w-5' src={downloadIcon} />
</a>
</div>
</div>

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

@ -1,3 +1,10 @@
import brandFacebookIcon from '@tabler/icons/outline/brand-facebook.svg';
import brandGithubIcon from '@tabler/icons/outline/brand-github.svg';
import brandGoogleIcon from '@tabler/icons/outline/brand-google.svg';
import brandSlackIcon from '@tabler/icons/outline/brand-slack.svg';
import brandTwitterIcon from '@tabler/icons/outline/brand-twitter.svg';
import brandWindowsIcon from '@tabler/icons/outline/brand-windows.svg';
import keyIcon from '@tabler/icons/outline/key.svg';
import React from 'react';
import { useIntl, defineMessages } from 'react-intl';
@ -12,12 +19,12 @@ const messages = defineMessages({
/** Map between OAuth providers and brand icons. */
const BRAND_ICONS: Record<string, string> = {
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'),
twitter: brandTwitterIcon,
facebook: brandFacebookIcon,
google: brandGoogleIcon,
microsoft: brandWindowsIcon,
slack: brandSlackIcon,
github: brandGithubIcon,
};
interface IConsumerButton {
@ -29,7 +36,7 @@ const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const icon = BRAND_ICONS[provider] || require('@tabler/icons/outline/key.svg');
const icon = BRAND_ICONS[provider] || keyIcon;
const handleClick = () => {
dispatch(prepareRequest(provider));

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

@ -1,3 +1,5 @@
import atIcon from '@tabler/icons/outline/at.svg';
import checkIcon from '@tabler/icons/outline/check.svg';
import axios from 'axios';
import { Map as ImmutableMap } from 'immutable';
import debounce from 'lodash/debounce';
@ -152,7 +154,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
const heading = confirmationHeading || approvalHeading;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/check.svg'),
icon: checkIcon,
heading: heading,
message,
confirm: intl.formatMessage(messages.close),
@ -255,7 +257,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
autoCorrect='off'
autoCapitalize='off'
pattern='^[a-zA-Z\d_-]+'
icon={require('@tabler/icons/outline/at.svg')}
icon={atIcon}
onChange={onUsernameChange}
value={params.get('username', '')}
required

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

@ -1,3 +1,4 @@
import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
import React, { useEffect } from 'react';
import { defineMessages, FormattedDate, useIntl } from 'react-intl';
@ -27,7 +28,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
const handleRevoke = () => {
if (isCurrent)
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/alert-triangle.svg'),
icon: alertTriangleIcon,
heading: intl.formatMessage(messages.revokeSessionHeading),
message: intl.formatMessage(messages.revokeSessionMessage),
confirm: intl.formatMessage(messages.revokeSessionConfirm),

3
src/features/birthdays/account.tsx
View File

@ -1,3 +1,4 @@
import balloonIcon from '@tabler/icons/outline/balloon.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -36,7 +37,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
date: formattedBirthday,
})}
>
<Icon src={require('@tabler/icons/outline/balloon.svg')} />
<Icon src={balloonIcon} />
{formattedBirthday}
</div>
</HStack>

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

@ -1,3 +1,5 @@
import bookmarksIcon from '@tabler/icons/outline/bookmarks.svg';
import folderIcon from '@tabler/icons/outline/folder.svg';
import React from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { Redirect } from 'react-router-dom';
@ -40,7 +42,7 @@ const BookmarkFolders: React.FC = () => {
to='/bookmarks/all'
label={
<HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
<Icon src={bookmarksIcon} size={20} />
<span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
</HStack>
}
@ -57,7 +59,7 @@ const BookmarkFolders: React.FC = () => {
src={folder.emoji_url || undefined}
className='size-5 flex-none'
/>
) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
) : <Icon src={folderIcon} size={20} />}
<span>{folder.name}</span>
</HStack>
}

9
src/features/bookmarks/index.tsx
View File

@ -1,3 +1,6 @@
import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
import editIcon from '@tabler/icons/outline/edit.svg';
import trashIcon from '@tabler/icons/outline/trash.svg';
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import debounce from 'lodash/debounce';
import React from 'react';
@ -93,12 +96,12 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
{
text: intl.formatMessage(messages.editFolder),
action: handleEditFolder,
icon: require('@tabler/icons/outline/edit.svg'),
icon: editIcon,
},
{
text: intl.formatMessage(messages.deleteFolder),
action: handleDeleteFolder,
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
},
] : [];
@ -106,7 +109,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
<Column
label={folder ? folder.name : intl.formatMessage(messages.heading)}
action={
<DropdownMenu items={items} src={require('@tabler/icons/outline/dots-vertical.svg')} />
<DropdownMenu items={items} src={dotsVerticalIcon} />
}
transparent={!isMobile}
>

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

@ -1,3 +1,4 @@
import sendIcon from '@tabler/icons/outline/send.svg';
import React, { useState } from 'react';
import { defineMessages, IntlShape, useIntl } from 'react-intl';
@ -230,7 +231,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
) : null}
<IconButton
src={require('@tabler/icons/outline/send.svg')}
src={sendIcon}
iconClassName='h-5 w-5'
className='text-primary-500'
disabled={isSubmitDisabled}

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

@ -1,3 +1,5 @@
import dotsIcon from '@tabler/icons/outline/dots.svg';
import logoutIcon from '@tabler/icons/outline/logout.svg';
import React, { useMemo } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
@ -59,7 +61,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
},
}));
},
icon: require('@tabler/icons/outline/logout.svg'),
icon: logoutIcon,
}], []);
const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
@ -124,7 +126,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/outline/dots.svg')}
src={dotsIcon}
title='Settings'
className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
iconClassName='h-4 w-4'

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

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

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

@ -1,3 +1,9 @@
import checkIcon from '@tabler/icons/outline/check.svg';
import copyIcon from '@tabler/icons/outline/copy.svg';
import dotsIcon from '@tabler/icons/outline/dots.svg';
import flagIcon from '@tabler/icons/outline/flag.svg';
import moodSmileIcon from '@tabler/icons/outline/mood-smile.svg';
import trashIcon from '@tabler/icons/outline/trash.svg';
import { useMutation } from '@tanstack/react-query';
import clsx from 'clsx';
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
@ -159,7 +165,7 @@ const ChatMessage = (props: IChatMessage) => {
menu.push({
text: intl.formatMessage(messages.copy),
action: () => handleCopyText(chatMessage),
icon: require('@tabler/icons/outline/copy.svg'),
icon: copyIcon,
});
}
@ -167,7 +173,7 @@ const ChatMessage = (props: IChatMessage) => {
menu.push({
text: intl.formatMessage(messages.delete),
action: () => handleDeleteMessage.mutate(chatMessage.id),
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
destructive: true,
});
} else {
@ -175,13 +181,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/outline/flag.svg'),
icon: flagIcon,
});
}
menu.push({
text: intl.formatMessage(messages.deleteForMe),
action: () => handleDeleteMessage.mutate(chatMessage.id),
icon: require('@tabler/icons/outline/trash.svg'),
icon: trashIcon,
destructive: true,
});
}
@ -222,7 +228,7 @@ const ChatMessage = (props: IChatMessage) => {
})}
>
<Icon
src={require('@tabler/icons/outline/mood-smile.svg')}
src={moodSmileIcon}
className='size-4'
/>
</button>
@ -244,7 +250,7 @@ const ChatMessage = (props: IChatMessage) => {
data-testid='chat-message-menu'
>
<Icon
src={require('@tabler/icons/outline/dots.svg')}
src={dotsIcon}
className='size-4'
/>
</button>
@ -362,7 +368,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/outline/check.svg')}
src={checkIcon}
strokeWidth={3}
className='size-2.5'
/>
@ -370,7 +376,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/outline/check.svg')}
src={checkIcon}
strokeWidth={3}
className='size-2.5'
/>

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

@ -1,3 +1,7 @@
import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
import banIcon from '@tabler/icons/outline/ban.svg';
import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
import logoutIcon from '@tabler/icons/outline/logout.svg';
import React, { useRef } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link, useHistory, useParams } from 'react-router-dom';
@ -120,7 +124,7 @@ const ChatPageMain = () => {
<HStack alignItems='center' space={2} className='overflow-hidden'>
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/outline/arrow-left.svg')}
src={arrowLeftIcon}
className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => history.push('/chats')}
/>
@ -162,7 +166,7 @@ const ChatPageMain = () => {
<Menu>
<MenuButton
as={IconButton}
src={require('@tabler/icons/outline/info-circle.svg')}
src={infoCircleIcon}
iconClassName='h-5 w-5 text-gray-600'
children={null}
/>
@ -213,7 +217,7 @@ const ChatPageMain = () => {
className='!px-0 hover:!bg-transparent'
>
<div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
<Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
<Icon src={banIcon} className='size-5' />
<span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
</div>
</MenuItem>
@ -225,7 +229,7 @@ const ChatPageMain = () => {
className='!px-0 hover:!bg-transparent'
>
<div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
<Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
<Icon src={logoutIcon} className='size-5' />
<span>{intl.formatMessage(messages.leaveChat)}</span>
</div>
</MenuItem>

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

@ -1,3 +1,4 @@
import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
@ -23,7 +24,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
<Stack className='grow px-4 pt-6 sm:px-6'>
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/outline/arrow-left.svg')}
src={arrowLeftIcon}
className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => history.push('/chats')}
/>

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

@ -1,3 +1,4 @@
import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
@ -50,7 +51,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/outline/arrow-left.svg')}
src={arrowLeftIcon}
className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => history.push('/chats')}
/>

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

@ -1,3 +1,5 @@
import editIcon from '@tabler/icons/outline/edit.svg';
import settingsIcon from '@tabler/icons/outline/settings.svg';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
@ -42,13 +44,13 @@ const ChatPageSidebar = () => {
<HStack space={1}>
<IconButton
src={require('@tabler/icons/outline/settings.svg')}
src={settingsIcon}
iconClassName='h-5 w-5 text-gray-600'
onClick={handleSettingsClick}
/>
<IconButton
src={require('@tabler/icons/outline/edit.svg')}
src={editIcon}
iconClassName='h-5 w-5 text-gray-600'
onClick={handleChatCreate}
/>

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

@ -1,3 +1,4 @@
import editIcon from '@tabler/icons/outline/edit.svg';
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
@ -111,7 +112,7 @@ const ChatPane = () => {
toggleChatPane();
}
}}
secondaryActionIcon={require('@tabler/icons/outline/edit.svg')}
secondaryActionIcon={editIcon}
/>
{isOpen ? renderBody() : null}

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

@ -1,3 +1,5 @@
import searchIcon from '@tabler/icons/outline/search.svg';
import xIcon from '@tabler/icons/outline/x.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -34,7 +36,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
append={
<button onClick={onClear}>
<Icon
src={value.length ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
src={value.length ? xIcon : searchIcon}
className='size-4 text-gray-700 dark:text-gray-600'
aria-hidden='true'
/>

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

@ -1,3 +1,5 @@
import searchIcon from '@tabler/icons/outline/search.svg';
import xIcon from '@tabler/icons/outline/x.svg';
import { useMutation } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import React, { useState } from 'react';
@ -101,7 +103,7 @@ const ChatSearch = (props: IChatSearch) => {
append={
<button onClick={clearValue}>
<Icon
src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
src={hasSearchValue ? xIcon : searchIcon}
className='size-4 text-gray-700 dark:text-gray-600'
aria-hidden='true'
/>

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

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

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

@ -1,3 +1,4 @@
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import { List as ImmutableList } from 'immutable';
import React from 'react';
@ -57,7 +58,7 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => {
>
<Icon
className='size-3 text-white'
src={require('@tabler/icons/outline/x.svg')}
src={xIcon}
/>
</button>
);

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

@ -1,3 +1,5 @@
import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
import React, { HTMLAttributes } from 'react';
import { HStack, IconButton, Text } from 'soapbox/components/ui';
@ -65,7 +67,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
<IconButton
onClick={onToggle}
src={isOpen ? require('@tabler/icons/outline/chevron-down.svg') : require('@tabler/icons/outline/chevron-up.svg')}
src={isOpen ? chevronDownIcon : chevronUpIcon}
iconClassName='h-5 w-5 text-gray-600'
/>
</HStack>

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

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

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

@ -1,3 +1,6 @@
import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
import editIcon from '@tabler/icons/outline/edit.svg';
import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
import React, { useRef } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
@ -72,7 +75,7 @@ const ChatWindow = () => {
{isOpen && (
<button onClick={closeChat}>
<Icon
src={require('@tabler/icons/outline/arrow-left.svg')}
src={arrowLeftIcon}
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
/>
</button>
@ -107,7 +110,7 @@ const ChatWindow = () => {
</HStack>
}
secondaryAction={secondaryAction()}
secondaryActionIcon={isOpen ? require('@tabler/icons/outline/info-circle.svg') : require('@tabler/icons/outline/edit.svg')}
secondaryActionIcon={isOpen ? infoCircleIcon : editIcon}
isToggleable={!isOpen}
isOpen={isOpen}
onToggle={toggleChatPane}

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

@ -1,3 +1,4 @@
import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -26,7 +27,7 @@ const ChatSearchHeader = () => {
}}
>
<Icon
src={require('@tabler/icons/outline/arrow-left.svg')}
src={arrowLeftIcon}
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
/>
</button>

6
src/features/compose/components/compose-form.tsx
View File

@ -1,3 +1,5 @@
import lockIcon from '@tabler/icons/outline/lock.svg';
import mailIcon from '@tabler/icons/outline/mail.svg';
import clsx from 'clsx';
import { CLEAR_EDITOR_COMMAND, TextNode, type LexicalEditor, $getRoot } from 'lexical';
import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
@ -229,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/outline/mail.svg');
publishIcon = mailIcon;
publishText = intl.formatMessage(messages.message);
} else if (privacy === 'private') {
publishIcon = require('@tabler/icons/outline/lock.svg');
publishIcon = lockIcon;
publishText = intl.formatMessage(messages.publish);
} else {
publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);

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

@ -1,3 +1,4 @@
import markdownIcon from '@tabler/icons/outline/markdown.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -25,7 +26,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ composeId }) => {
return (
<ComposeFormButton
icon={require('@tabler/icons/outline/markdown.svg')}
icon={markdownIcon}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={onClick}

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

@ -1,3 +1,4 @@
import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -39,7 +40,7 @@ const PollButton: React.FC<IPollButton> = ({ composeId, disabled }) => {
return (
<ComposeFormButton
icon={require('@tabler/icons/outline/chart-bar.svg')}
icon={chartBarIcon}
title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
active={active}
disabled={disabled}

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

@ -1,3 +1,7 @@
import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
import lockIcon from '@tabler/icons/outline/lock.svg';
import mailIcon from '@tabler/icons/outline/mail.svg';
import worldIcon from '@tabler/icons/outline/world.svg';
import clsx from 'clsx';
import { supportsPassiveEvents } from 'detect-passive-events';
import React, { useState, useRef, useEffect } from 'react';
@ -160,10 +164,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
const [placement, setPlacement] = useState('bottom');
const options = [
{ 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) },
{ icon: worldIcon, value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
{ icon: lockOpenIcon, value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
{ icon: lockIcon, value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
{ icon: mailIcon, value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
];
const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value));

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

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

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

@ -1,3 +1,4 @@
import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -39,7 +40,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ composeId, disabled }) => {
return (
<ComposeFormButton
icon={require('@tabler/icons/outline/calendar-stats.svg')}
icon={calendarStatsIcon}
title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
active={active}
disabled={disabled}

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

@ -1,3 +1,4 @@
import xIcon from '@tabler/icons/outline/x.svg';
import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@ -52,7 +53,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/outline/x.svg')}
src={xIcon}
onClick={handleRemove}
title={intl.formatMessage(messages.remove)}
/>

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

@ -1,3 +1,4 @@
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import React, { useEffect, useRef } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -213,7 +214,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/outline/x.svg')} onClick={handleUnsetAccount} />
<IconButton iconClassName='h-5 w-5' src={xIcon} onClick={handleUnsetAccount} />
<Text truncate>
<FormattedMessage
id='search_results.filter_message'

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

@ -1,3 +1,4 @@
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import debounce from 'lodash/debounce';
import React, { useCallback, useEffect } from 'react';
@ -153,7 +154,7 @@ const SearchZapSplit = (props: ISearchZapSplit) => {
>
<SvgIcon
src={require('@tabler/icons/outline/x.svg')}
src={xIcon}
className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
aria-label={intl.formatMessage(messages.placeholder)}
/>

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

@ -1,3 +1,5 @@
import searchIcon from '@tabler/icons/outline/search.svg';
import xIcon from '@tabler/icons/outline/x.svg';
import clsx from 'clsx';
import debounce from 'lodash/debounce';
import React, { useCallback, useEffect } from 'react';
@ -111,7 +113,7 @@ const Search = (props: ISearch) => {
const makeMenu = () => [
{
text: intl.formatMessage(messages.action, { query: value }),
icon: require('@tabler/icons/outline/search.svg'),
icon: searchIcon,
action: handleSubmit,
},
];
@ -166,12 +168,12 @@ const Search = (props: ISearch) => {
onClick={handleClear}
>
<SvgIcon
src={require('@tabler/icons/outline/search.svg')}
src={searchIcon}
className={clsx('size-4 text-gray-600', { hidden: hasValue })}
/>
<SvgIcon
src={require('@tabler/icons/outline/x.svg')}
src={xIcon}
className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
aria-label={intl.formatMessage(messages.placeholder)}
/>

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

@ -1,3 +1,4 @@
import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -26,7 +27,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ composeId }) => {
return (
<ComposeFormButton
icon={require('@tabler/icons/outline/alert-triangle.svg')}
icon={alertTriangleIcon}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={onClick}

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

@ -1,3 +1,5 @@
import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
import photoIcon from '@tabler/icons/outline/photo.svg';
import React, { useRef } from 'react';
import { defineMessages, IntlShape, useIntl } from 'react-intl';
@ -54,8 +56,8 @@ const UploadButton: React.FC<IUploadButton> = ({
const src = icon || (
onlyImages(attachmentTypes)
? require('@tabler/icons/outline/photo.svg')
: require('@tabler/icons/outline/paperclip.svg')
? photoIcon
: paperclipIcon
);
return (

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

@ -1,3 +1,5 @@
import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
import qrcodeIcon from '@tabler/icons/outline/qrcode.svg';
import React from 'react';
import { openModal } from 'soapbox/actions/modals';
@ -42,12 +44,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/outline/qrcode.svg')} size={20} />
<Icon src={qrcodeIcon} 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/outline/external-link.svg')} size={20} />
<Icon src={externalLinkIcon} size={20} />
</a>
)}
</HStack>

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

@ -1,3 +1,4 @@
import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
import { QRCodeCanvas as QRCode } from 'qrcode.react';
import React from 'react';
@ -30,7 +31,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/outline/external-link.svg')} />
<Icon src={externalLinkIcon} />
</a>}
</div>
</div>

24
src/features/developers/developers-menu.tsx
View File

@ -1,3 +1,11 @@
import appsIcon from '@tabler/icons/outline/apps.svg';
import codePlusIcon from '@tabler/icons/outline/code-plus.svg';
import homeIcon from '@tabler/icons/outline/home.svg';
import logoutIcon from '@tabler/icons/outline/logout.svg';
import moodSadIcon from '@tabler/icons/outline/mood-sad.svg';
import refreshIcon from '@tabler/icons/outline/refresh.svg';
import scriptIcon from '@tabler/icons/outline/script.svg';
import urgentIcon from '@tabler/icons/outline/urgent.svg';
import React from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { Link, useHistory } from 'react-router-dom';
@ -57,7 +65,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/outline/apps.svg')} className='text-gray-700 dark:text-gray-600' />
<SvgIcon src={appsIcon} className='text-gray-700 dark:text-gray-600' />
<Text>
<FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@ -65,7 +73,7 @@ const Developers: React.FC = () => {
</DashWidget>
<DashWidget to='/developers/settings_store'>
<SvgIcon src={require('@tabler/icons/outline/code-plus.svg')} className='text-gray-700 dark:text-gray-600' />
<SvgIcon src={codePlusIcon} className='text-gray-700 dark:text-gray-600' />
<Text>
<FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@ -73,7 +81,7 @@ const Developers: React.FC = () => {
</DashWidget>
<DashWidget to='/developers/timeline'>
<SvgIcon src={require('@tabler/icons/outline/home.svg')} className='text-gray-700 dark:text-gray-600' />
<SvgIcon src={homeIcon} className='text-gray-700 dark:text-gray-600' />
<Text>
<FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@ -81,7 +89,7 @@ const Developers: React.FC = () => {
</DashWidget>
<DashWidget to='/error'>
<SvgIcon src={require('@tabler/icons/outline/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' />
<SvgIcon src={moodSadIcon} className='text-gray-700 dark:text-gray-600' />
<Text>
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@ -89,7 +97,7 @@ const Developers: React.FC = () => {
</DashWidget>
<DashWidget to='/error/network'>
<SvgIcon src={require('@tabler/icons/outline/refresh.svg')} className='text-gray-700 dark:text-gray-600' />
<SvgIcon src={refreshIcon} className='text-gray-700 dark:text-gray-600' />
<Text>
<FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@ -97,7 +105,7 @@ const Developers: React.FC = () => {
</DashWidget>
<DashWidget to='/developers/sw'>
<SvgIcon src={require('@tabler/icons/outline/script.svg')} className='text-gray-700 dark:text-gray-600' />
<SvgIcon src={scriptIcon} className='text-gray-700 dark:text-gray-600' />
<Text>
<FormattedMessage id='developers.navigation.service_worker_label' defaultMessage='Service Worker' />
@ -105,7 +113,7 @@ const Developers: React.FC = () => {
</DashWidget>
<DashWidget onClick={leaveDevelopers}>
<SvgIcon src={require('@tabler/icons/outline/logout.svg')} className='text-gray-700 dark:text-gray-600' />
<SvgIcon src={logoutIcon} className='text-gray-700 dark:text-gray-600' />
<Text>
<FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
@ -113,7 +121,7 @@ const Developers: React.FC = () => {
</DashWidget>
<DashWidget onClick={showToast}>
<SvgIcon src={require('@tabler/icons/outline/urgent.svg')} className='text-gray-700 dark:text-gray-600' />
<SvgIcon src={urgentIcon} className='text-gray-700 dark:text-gray-600' />
<Text>
<FormattedMessage id='developers.navigation.show_toast' defaultMessage='Trigger Toast' />

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