Fix untranslated text warnings

- Fix untranslated text
 - Adjust Tailwind class order
 - Adjust indentation

src/components/account.tsx

@@ -239,7 +239,7 @@ const Account = ({
 
             <Stack space={withAccountNote || note ? 1 : 0}>
               <HStack alignItems='center' space={1}>
-                <Text theme='muted' size='sm' direction='ltr' truncate>@{acct ?? username}</Text>
+                <Text theme='muted' size='sm' direction='ltr' truncate>@{acct ?? username}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
                 {account.pleroma?.favicon && (
                   <InstanceFavicon account={account} disabled={!withLinkToProfile} />
@@ -247,7 +247,7 @@ const Account = ({
 
                 {(timestamp) ? (
                   <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
                     {timestampUrl ? (
                       <Link to={timestampUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}>
@@ -261,7 +261,7 @@ const Account = ({
 
                 {approvalStatus && ['pending', 'rejected'].includes(approvalStatus) && (
                   <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
                     <Text tag='span' theme='muted' size='sm'>
                       {approvalStatus === 'pending'
@@ -273,7 +273,7 @@ const Account = ({
 
                 {showEdit ? (
                   <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <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')} />
                   </>
@@ -281,7 +281,7 @@ const Account = ({
 
                 {actionType === 'muting' && account.mute_expires_at ? (
                   <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
                     <Text theme='muted' size='sm'><RelativeTimestamp timestamp={account.mute_expires_at} futureDate /></Text>
                   </>

src/components/announcements/announcement.tsx

@@ -41,9 +41,11 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement, emojiMap }) => {
             hour={skipTime ? undefined : 'numeric'}
             minute={skipTime ? undefined : '2-digit'}
           />
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           {' '}
           -
           {' '}
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
           <FormattedDate
             value={endsAt}
             hour12

src/components/announcements/reaction.tsx

@@ -51,7 +51,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, sty
       onClick={handleClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      title={`:${shortCode}:`}
+      title={`:${shortCode}:`} // eslint-disable-line formatjs/no-literal-string-in-jsx
       style={style}
     >
       <span className='block size-4'>

src/components/big-card.tsx

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

src/components/display-name-inline.tsx

@@ -31,12 +31,12 @@ const DisplayNameInline: React.FC<IDisplayName> = ({ account, withSuffix = true
     </HStack>
   );
 
-  const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
+  const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
   return (
     <div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
       {displayName}
-      <span className='hidden text-xl font-bold sm:block'>-</span>
+      <span className='hidden text-xl font-bold sm:block'>-</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       {withSuffix && suffix}
     </div>
   );

src/components/display-name.tsx

@@ -33,7 +33,7 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = t
     </HStack>
   );
 
-  const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>);
+  const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
   return (
     <span className='display-name' data-testid='display-name'>

src/components/hashtag.tsx

@@ -20,7 +20,7 @@ const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
     <HStack alignItems='center' justifyContent='between' data-testid='hashtag'>
       <Stack>
         <Link to={`/tags/${hashtag.name}`} className='hover:underline'>
-          <Text tag='span' size='sm' weight='semibold'>#{hashtag.name}</Text>
+          <Text tag='span' size='sm' weight='semibold'>#{hashtag.name}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         </Link>
 
         {Boolean(count) && (

src/components/media-gallery.tsx

@@ -228,7 +228,7 @@ const Item: React.FC<IItem> = ({
           {...conditionalAttributes}
         />
 
-        <span className='media-gallery__gifv__label'>GIF</span>
+        <span className='media-gallery__gifv__label'>GIF</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       </div>
     );
   } else if (attachment.type === 'audio') {
@@ -276,7 +276,7 @@ const Item: React.FC<IItem> = ({
       style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
     >
       {last && total > ATTACHMENT_LIMIT && (
-        <div className='media-gallery__item-overflow'>
+        <div className='media-gallery__item-overflow'> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           +{total - ATTACHMENT_LIMIT + 1}
         </div>
       )}

src/components/polls/poll-footer.tsx

@@ -63,7 +63,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
               </Text>
             </Tooltip>
 
-            <Text theme='muted'>&middot;</Text>
+            <Text theme='muted'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           </>
         )}
 
@@ -75,7 +75,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
               </Text>
             </button>
 
-            <Text theme='muted'>&middot;</Text>
+            <Text theme='muted'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           </>
         )}
 
@@ -85,7 +85,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
 
         {poll.expires_at !== null && (
           <>
-            <Text theme='muted'>&middot;</Text>
+            <Text theme='muted'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             <Text weight='medium' theme='muted' data-testid='poll-expiration'>{timeRemaining}</Text>
           </>
         )}

src/components/polls/poll-option.tsx

@@ -152,7 +152,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
               )}
 
               <div className='text-primary-600 dark:text-white'>
-                <Text weight='medium' theme='inherit'>{Math.round(percent)}%</Text>
+                <Text weight='medium' theme='inherit'>{Math.round(percent)}%</Text>  {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
               </div>
             </HStack>
           </HStack>

src/components/site-error-boundary.tsx

@@ -84,7 +84,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
 
         <div className='py-8'>
           <div className='mx-auto max-w-xl space-y-2 text-center'>
-            <h1 className='text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-500 sm:text-4xl'>
+            <h1 className='text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-500'>
               <FormattedMessage id='alert.unexpected.message' defaultMessage='Something went wrong.' />
             </h1>
             <p className='text-lg text-gray-700 dark:text-gray-600'>
@@ -105,16 +105,20 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
             </p>
 
             <Text theme='muted'>
+              {/* eslint-disable formatjs/no-literal-string-in-jsx */}
               <Text weight='medium' tag='span' theme='muted'>{sourceCode.displayName}:</Text>
 
               {' '}{sourceCode.version}
+              {/* eslint-enable formatjs/no-literal-string-in-jsx */}
             </Text>
 
             <div className='mt-10'>
               <a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
+                {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                 <FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
                 {' '}
                 <span className='inline-block rtl:rotate-180' aria-hidden='true'>&rarr;</span>
+                {/* eslint-enable formatjs/no-literal-string-in-jsx */}
               </a>
             </div>
           </div>

src/components/status-action-bar.tsx

@@ -321,7 +321,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/outline/ban.svg'),
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
-      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
+      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),
       onConfirm: () => dispatch(blockAccount(account.id)),
       secondary: intl.formatMessage(messages.blockAndReport),

src/components/status-reply-mentions.tsx

@@ -56,7 +56,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
         to={`/@${account.acct}`}
         className='reply-mentions__account max-w-[200px] truncate align-bottom'
         onClick={(e) => e.stopPropagation()}
-      >
+      > {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         @{shortenNostr(account.username)}
       </Link>
     );

src/components/status.tsx

@@ -334,6 +334,7 @@ const Status: React.FC<IStatus> = (props) => {
     return (
       <HotKeys handlers={minHandlers}>
         <div className={clsx('status__wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Text theme='muted'>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
             {' '}
@@ -341,6 +342,7 @@ const Status: React.FC<IStatus> = (props) => {
               <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
             </button>
           </Text>
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </div>
       </HotKeys>
     );

src/components/statuses/sensitive-content-overlay.tsx

@@ -118,9 +118,11 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
 
               {status.spoiler_text && (
                 <div className='py-4 italic'>
+                  {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                   <Text className='line-clamp-6' theme='white' size='md' weight='medium'>
                     &ldquo;<span dangerouslySetInnerHTML={{ __html: status.spoilerHtml }} />&rdquo;
                   </Text>
+                  {/* eslint-enable formatjs/no-literal-string-in-jsx */}
                 </div>
               )}
             </div>

src/components/statuses/status-info.tsx

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

src/components/ui/button/button.test.tsx

@@ -13,14 +13,14 @@ describe('<Button />', () => {
   });
 
   it('renders the children', () => {
-    render(<Button><p>children</p></Button>);
+    render(<Button><p>children</p></Button>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
     expect(screen.getByRole('button')).toHaveTextContent('children');
   });
 
   it('renders the props.text instead of children', () => {
     const text = 'foo';
-    const children = <p>children</p>;
+    const children = <p>children</p>;  // eslint-disable-line formatjs/no-literal-string-in-jsx
     render(<Button text={text}>{children}</Button>);
 
     expect(screen.getByRole('button')).toHaveTextContent('foo');
@@ -63,13 +63,13 @@ describe('<Button />', () => {
 
   describe('to prop', () => {
     it('renders a link', () => {
-      render(<Button to='/'>link</Button>);
+      render(<Button to='/'>link</Button>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
       expect(screen.getByRole('link')).toBeInTheDocument();
     });
 
     it('does not render a link', () => {
-      render(<Button>link</Button>);
+      render(<Button>link</Button>); //eslint-disable-line formatjs/no-literal-string-in-jsx
 
       expect(screen.queryAllByRole('link')).toHaveLength(0);
     });
@@ -77,13 +77,13 @@ describe('<Button />', () => {
 
   describe('icon prop', () => {
     it('renders an icon', () => {
-      render(<Button icon='icon.png'>button</Button>);
+      render(<Button icon='icon.png'>button</Button>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
       expect(screen.getByTestId('icon')).toBeInTheDocument();
     });
 
     it('does not render an icon', () => {
-      render(<Button>button</Button>);
+      render(<Button>button</Button>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
       expect(screen.queryAllByTestId('icon')).toHaveLength(0);
     });

src/components/ui/card/card.test.tsx

@@ -12,7 +12,7 @@ describe('<Card />', () => {
           <CardTitle title='Card Title' />
         </CardHeader>
 
-        <CardBody>
+        <CardBody> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           Card Body
         </CardBody>
       </Card>,

src/components/ui/form-actions/form-actions.test.tsx

@@ -6,7 +6,7 @@ import FormActions from './form-actions';
 
 describe('<FormActions />', () => {
   it('renders successfully', () => {
-    render(<FormActions><div data-testid='child'>child</div></FormActions>);
+    render(<FormActions><div data-testid='child'>child</div></FormActions>); {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
     expect(screen.getByTestId('child')).toBeInTheDocument();
   });

src/components/ui/form/form.test.tsx

@@ -8,7 +8,7 @@ describe('<Form />', () => {
   it('renders children', () => {
     const onSubmitMock = vi.fn();
     render(
-      <Form onSubmit={onSubmitMock}>children</Form>,
+      <Form onSubmit={onSubmitMock}>children</Form>, // eslint-disable-line formatjs/no-literal-string-in-jsx
     );
 
     expect(screen.getByTestId('form')).toHaveTextContent('children');
@@ -17,7 +17,7 @@ describe('<Form />', () => {
   it('handles onSubmit prop', () => {
     const onSubmitMock = vi.fn();
     render(
-      <Form onSubmit={onSubmitMock}>children</Form>,
+      <Form onSubmit={onSubmitMock}>children</Form>, // eslint-disable-line formatjs/no-literal-string-in-jsx
     );
 
     fireEvent.submit(

src/components/ui/language-dropdown/language-dropdown.tsx

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

src/components/ui/modal/modal.tsx

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

src/components/ui/select/select.tsx

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

src/components/ui/tag-input/tag-input.tsx

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

src/components/ui/textarea/textarea.tsx

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

src/components/ui/widget/widget.tsx

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

src/features/about/index.tsx

@@ -39,7 +39,7 @@ const AboutPage: React.FC = () => {
   const alsoAvailable = (defaultLocale) && (
     <div>
       <FormattedMessage id='about.also_available' defaultMessage='Available in:' />
-      {' '}
+      {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       <ul className='inline list-none p-0'>
         <li className="inline after:content-['_·_']">
           <a href='#' onClick={() => setLocale(defaultLocale)}>

src/features/account-gallery/components/media-item.tsx

@@ -94,7 +94,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
           {...conditionalAttributes}
         />
 
-        <span className='media-gallery__gifv__label'>GIF</span>
+        <span className='media-gallery__gifv__label'>GIF</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       </div>
     );
   } else if (attachment.type === 'audio') {

src/features/account/components/header.tsx

@@ -114,7 +114,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     return (
       <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
         <div>
-          <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
+          <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
         </div>
 
         <div className='px-4 sm:px-6'>
@@ -137,7 +137,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       dispatch(openModal('CONFIRM', {
         icon: require('@tabler/icons/outline/ban.svg'),
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
-        message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
+        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),
         onConfirm: () => dispatch(blockAccount(account.id)),
         secondary: intl.formatMessage(messages.blockAndReport),
@@ -222,7 +222,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       const unfollowModal = getSettings(getState()).get('unfollowModal');
       if (unfollowModal) {
         dispatch(openModal('CONFIRM', {
-          message: <FormattedMessage id='confirmations.remove_from_followers.message' defaultMessage='Are you sure you want to remove {name} from your followers?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
+          message: <FormattedMessage id='confirmations.remove_from_followers.message' defaultMessage='Are you sure you want to remove {name} from your followers?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
           confirm: intl.formatMessage(messages.removeFromFollowersConfirm),
           onConfirm: () => dispatch(removeFromFollowers(account.id)),
         }));
@@ -660,7 +660,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       )}
 
       <div>
-        <div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
+        <div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
           {renderHeader()}
 
           <div className='absolute left-2 top-2'>

src/features/admin/announcements.tsx

@@ -52,7 +52,7 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
                 <Text tag='span' size='sm' weight='medium'>
                   <FormattedMessage id='admin.announcements.starts_at' defaultMessage='Starts at:' />
                 </Text>
-                {' '}
+                {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <FormattedDate value={announcement.starts_at} year='2-digit' month='short' day='2-digit' weekday='short' />
               </Text>
             )}
@@ -61,7 +61,7 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
                 <Text tag='span' size='sm' weight='medium'>
                   <FormattedMessage id='admin.announcements.ends_at' defaultMessage='Ends at:' />
                 </Text>
-                {' '}
+                {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <FormattedDate value={announcement.ends_at} year='2-digit' month='short' day='2-digit' weekday='short' />
               </Text>
             )}

src/features/admin/components/report.tsx

@@ -96,7 +96,7 @@ const Report: React.FC<IReport> = ({ id }) => {
             defaultMessage='Report on {acct}'
             values={{ acct: (
               <HoverRefWrapper accountId={targetAccount.id} inline>
-                <Link to={`/@${acct}`} title={acct}>@{acct}</Link>
+                <Link to={`/@${acct}`} title={acct}>@{acct}</Link> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
               </HoverRefWrapper>
             ) }}
           />
@@ -129,14 +129,14 @@ const Report: React.FC<IReport> = ({ id }) => {
           )}
 
           <HStack space={1}>
-            <Text theme='muted' tag='span'>&mdash;</Text>
+            <Text theme='muted' tag='span'>&mdash;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
             <HoverRefWrapper accountId={account.id} inline>
               <Link
                 to={`/@${reporterAcct}`}
                 title={reporterAcct}
                 className='text-primary-600 hover:underline dark:text-accent-blue'
-              >
+              > {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 @{reporterAcct}
               </Link>
             </HoverRefWrapper>

src/features/admin/domains.tsx

@@ -69,7 +69,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
             <Text tag='span' size='sm' weight='medium'>
               <FormattedMessage id='admin.domains.name' defaultMessage='Domain:' />
             </Text>
-            {' '}
+            {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             {domain.domain}
           </Text>
           <Text tag='span' size='sm' weight='medium'>

src/features/admin/relays.tsx

@@ -40,7 +40,7 @@ const Relay: React.FC<IRelay> = ({ relay }) => {
             <Text tag='span' size='sm' weight='medium'>
               <FormattedMessage id='admin.relays.url' defaultMessage='Instance URL:' />
             </Text>
-            {' '}
+            {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             {relay.actor}
           </Text>
           {relay.followed_back && (

src/features/admin/rules.tsx

@@ -51,7 +51,7 @@ const Rule: React.FC<IRule> = ({ rule }) => {
             <Text tag='span' size='sm' weight='medium'>
               <FormattedMessage id='admin.rule.priority' defaultMessage='Priority:' />
             </Text>
-            {' '}
+            {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             {rule.priority}
           </Text>
         )}

src/features/admin/tabs/dashboard.tsx

@@ -159,7 +159,7 @@ const Dashboard: React.FC = () => {
         </ListItem>
 
         <ListItem label={<FormattedMessage id='admin.software.backend' defaultMessage='Backend' />}>
-          <span>{v.software + (v.build ? `+${v.build}` : '')} {v.version}</span>
+          <span>{v.software + (v.build ? `+${v.build}` : '')} {v.version}</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         </ListItem>
       </List>
 

src/features/aliases/components/search.tsx

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

src/features/aliases/index.tsx

@@ -75,7 +75,7 @@ const Aliases = () => {
             <HStack alignItems='center' justifyContent='between' space={1} key={i} className='p-2'>
               <div>
                 <Text tag='span' theme='muted'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></Text>
-                {' '}
+                {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <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)}>

src/features/audio/index.tsx

@@ -554,7 +554,7 @@ const Audio: React.FC<IAudio> = (props) => {
             <span className='video-player__time'>
               <span className='video-player__time-current'>{formatTime(Math.floor(currentTime))}</span>
               {getDuration() && (<>
-                <span className='video-player__time-sep'>/</span>
+                <span className='video-player__time-sep'>/</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <span className='video-player__time-total'>{formatTime(Math.floor(getDuration()))}</span>
               </>)}
             </span>

src/features/auth-login/components/consumers-list.tsx

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

src/features/auth-login/components/password-reset-confirm.test.tsx

@@ -9,7 +9,7 @@ import PasswordResetConfirm from './password-reset-confirm';
 const TestableComponent = () => (
   <Switch>
     <Route path='/edit' exact><PasswordResetConfirm /></Route>
-    <Route path='/' exact><span data-testid='home'>Homepage</span></Route>
+    <Route path='/' exact><span data-testid='home'>Homepage</span></Route> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
   </Switch>
 );
 

src/features/chats/components/chat-list-item.tsx

@@ -84,7 +84,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
 
           <Stack alignItems='start' className='overflow-hidden'>
             <div className='flex w-full grow items-center space-x-1'>
-              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
+              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
               {chat.account?.verified && <VerificationBadge />}
             </div>
 

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

@@ -74,13 +74,13 @@ const ChatMessageListIntro = () => {
         <Text size='lg' align='center'>
           {needsAcceptance ? (
             <>
-              <Text tag='span' weight='semibold'>@{chat.account.acct}</Text>
+              <Text tag='span' weight='semibold'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
               {' '}
               <Text tag='span'>{intl.formatMessage(messages.intro)}</Text>
             </>
           ) : (
             <Link to={`/@${chat.account.acct}`}>
-              <Text tag='span' theme='inherit' weight='semibold'>@{chat.account.acct}</Text>
+              <Text tag='span' theme='inherit' weight='semibold'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             </Link>
           )}
         </Text>

src/features/chats/components/chat-message-list.tsx

@@ -195,7 +195,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
             <>
               <Text tag='span'>{intl.formatMessage(messages.blockedBy)}</Text>
               {' '}
-              <Text tag='span' theme='primary'>@{chat.account.acct}</Text>
+              <Text tag='span' theme='primary'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             </>
           </Text>
         </Stack>

src/features/chats/components/chat-page/chat-page.tsx

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

src/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -134,7 +134,7 @@ const ChatPageMain = () => {
             <div className='flex w-full grow items-center space-x-1'>
               <Link to={`/@${chat.account.acct}`}>
                 <Text weight='bold' size='sm' align='left' truncate>
-                  {chat.account.display_name || `@${chat.account.username}`}
+                  {chat.account.display_name || `@${chat.account.username}`} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 </Text>
               </Link>
               {chat.account.verified && <VerificationBadge />}
@@ -173,7 +173,7 @@ const ChatPageMain = () => {
                 <Avatar src={chat.account.avatar_static} size={50} />
                 <Stack>
                   <Text weight='semibold'>{chat.account.display_name}</Text>
-                  <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
+                  <Text size='sm' theme='primary'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 </Stack>
               </HStack>
 

src/features/chats/components/chat-pane-header.test.tsx

@@ -27,7 +27,7 @@ describe('<ChatPaneHeader />', () => {
     describe('when it is a node', () => {
       it('renders the title', () => {
         const title = (
-          <div><p>hello world</p></div>
+          <div><p>hello world</p></div> // eslint-disable-line formatjs/no-literal-string-in-jsx
         );
         render(<ChatPaneHeader title={title} onToggle={vi.fn()} isOpen />);
 

src/features/chats/components/chat-search/chat-search.test.tsx

@@ -12,7 +12,7 @@ const renderComponent = () => render(
   <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
     <ChatProvider>
       <ChatSearch />
-    </ChatProvider>,
+    </ChatProvider>, {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
   </VirtuosoMockContext.Provider>,
 );
 

src/features/chats/components/chat-search/results.tsx

@@ -41,7 +41,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
             <Text weight='bold' size='sm' truncate>{account.display_name}</Text>
             {account.verified && <VerificationBadge />}
           </div>
-          <Text size='sm' weight='medium' theme='muted' direction='ltr' truncate>@{account.acct}</Text>
+          <Text size='sm' weight='medium' theme='muted' direction='ltr' truncate>@{account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         </Stack>
       </HStack>
     </button>

src/features/chats/components/chat-textarea.tsx

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

src/features/chats/components/chat-widget.test.tsx

@@ -35,8 +35,10 @@ describe('<ChatWidget />', () => {
     it('hides the widget', async () => {
       const App = () => (
         <Switch>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Route path='/chats' exact><span>Chats page <ChatWidget /></span></Route>
           <Route path='/' exact><span data-testid='home'>Homepage <ChatWidget /></span></Route>
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Switch>
       );
 
@@ -85,8 +87,10 @@ describe('<ChatWidget />', () => {
     it('shows the widget', async () => {
       const App = () => (
         <Switch>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Route path='/chats' exact><span>Chats page <ChatWidget /></span></Route>
           <Route path='/' exact><span data-testid='home'>Homepage <ChatWidget /></span></Route>
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Switch>
       );
 

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

@@ -43,9 +43,11 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
 
         {(typeof unreadCount !== 'undefined' && unreadCount > 0) && (
           <HStack alignItems='center' space={2}>
+            {/* eslint-disable formatjs/no-literal-string-in-jsx */}
             <Text weight='semibold' data-testid='unread-count'>
               ({unreadCount})
             </Text>
+            {/* eslint-enable formatjs/no-literal-string-in-jsx */}
 
             <div className='size-2.5 rounded-full bg-accent-300' />
           </HStack>

src/features/chats/components/chat-widget/chat-settings.tsx

@@ -96,7 +96,7 @@ const ChatSettings = () => {
             <button onClick={closeSettings}>
               <Icon
                 src={require('@tabler/icons/outline/arrow-left.svg')}
-                className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
+                className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
               />
             </button>
 
@@ -112,7 +112,7 @@ const ChatSettings = () => {
           <Avatar src={chat.account.avatar_static} size={50} />
           <Stack>
             <Text weight='semibold'>{chat.account.display_name}</Text>
-            <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
+            <Text size='sm' theme='primary'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           </Stack>
         </HStack>
 

src/features/chats/components/chat-widget/chat-window.tsx

@@ -73,7 +73,7 @@ const ChatWindow = () => {
               <button onClick={closeChat}>
                 <Icon
                   src={require('@tabler/icons/outline/arrow-left.svg')}
-                  className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
+                  className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
                 />
               </button>
             )}
@@ -88,7 +88,7 @@ const ChatWindow = () => {
               <Stack alignItems='start'>
                 <LinkWrapper enabled={isOpen} to={`/@${chat.account.acct}`}>
                   <div className='flex grow items-center space-x-1'>
-                    <Text size='sm' weight='bold' truncate>{chat.account.display_name || `@${chat.account.acct}`}</Text>
+                    <Text size='sm' weight='bold' truncate>{chat.account.display_name || `@${chat.account.acct}`}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                     {chat.account.verified && <VerificationBadge />}
                   </div>
                 </LinkWrapper>

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

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

src/features/chats/components/ui/pane.tsx

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

src/features/compose/components/polls/poll-form.tsx

@@ -74,7 +74,7 @@ const Option: React.FC<IOption> = ({
     <HStack alignItems='center' justifyContent='between' space={4}>
       <HStack alignItems='center' space={2} grow>
         <div className='w-6'>
-          <Text weight='bold'>{index + 1}.</Text>
+          <Text weight='bold'>{index + 1}.</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         </div>
 
         <AutosuggestInput

src/features/compose/components/reply-mentions.tsx

@@ -55,7 +55,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   const accounts = to.slice(0, 2).map((acct: string) => {
     const username = acct.split('@')[0];
     return (
-      <span className='reply-mentions__account'>
+      <span className='reply-mentions__account'> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         @{shortenNostr(username)}
       </span>
     );

src/features/developers/developers-challenge.tsx

@@ -41,11 +41,13 @@ const DevelopersChallenge = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <Form onSubmit={handleSubmit}>
         <Text>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <FormattedMessage
             id='developers.challenge.message'
             defaultMessage='What is the result of calling {function}?'
             values={{ function: <span className='font-mono'>soapbox()</span> }}
           />
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Text>
 
         <Text tag='pre' family='mono' theme='muted'>

src/features/edit-profile/components/header-picker.tsx

@@ -36,7 +36,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
     <label
       ref={picker}
       className={clsx(
-        'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow',
+        'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 sm:h-36 sm:shadow dark:bg-gray-800 dark:text-accent-blue',
         {
           'border-2 border-primary-600 border-dashed !z-[99]': isDragging,
           'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,

src/features/event/components/event-header.tsx

@@ -80,7 +80,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     return (
       <>
         <div className='-mx-4 -mt-4'>
-          <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
+          <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
         </div>
 
         <PlaceholderEventHeader />
@@ -164,7 +164,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/outline/ban.svg'),
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
-      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.acct}</strong> }} />,
+      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}@{account.acct}</strong> }} />,
       confirm: intl.formatMessage(messages.blockConfirm),
       onConfirm: () => dispatch(blockAccount(account.id)),
       secondary: intl.formatMessage(messages.blockAndReport),
@@ -360,7 +360,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   return (
     <>
       <div className='-mx-4 -mt-4'>
-        <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
+        <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
           {banner && (
             <a href={banner.url} onClick={handleHeaderClick} target='_blank'>
               <StillImage

src/features/feed-suggestions/feed-suggestions.tsx

@@ -24,7 +24,7 @@ const SuggestionItem: React.FC<ISuggestionItem> = ({ accountId }) => {
   if (!account) return null;
 
   return (
-    <Stack space={3} className='w-52 shrink-0 rounded-md border border-solid border-gray-300 p-4 dark:border-gray-800 md:w-full md:shrink md:border-transparent md:p-0 dark:md:border-transparent'>
+    <Stack space={3} className='w-52 shrink-0 rounded-md border border-solid border-gray-300 p-4 md:w-full md:shrink md:border-transparent md:p-0 dark:border-gray-800 dark:md:border-transparent'>
       <Link
         to={`/@${account.acct}`}
         title={account.acct}
@@ -50,7 +50,7 @@ const SuggestionItem: React.FC<ISuggestionItem> = ({ accountId }) => {
               {account.verified && <VerificationBadge />}
             </HStack>
 
-            <Text theme='muted' align='center' size='sm' truncate>@{account.acct}</Text>
+            <Text theme='muted' align='center' size='sm' truncate>@{account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           </Stack>
         </Stack>
       </Link>

src/features/filters/index.tsx

@@ -76,12 +76,12 @@ const Filters = () => {
               <Stack className='grow' space={1}>
                 <Text weight='medium'>
                   <FormattedMessage id='filters.filters_list_phrases_label' defaultMessage='Keywords or phrases:' />
-                  {' '}
+                  {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                   <Text theme='muted' tag='span'>{filter.keywords.map(keyword => keyword.keyword).join(', ')}</Text>
                 </Text>
                 <Text weight='medium'>
                   <FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' />
-                  {' '}
+                  {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                   <Text theme='muted' tag='span'>{filter.context.map(context => contexts[context] ? intl.formatMessage(contexts[context]) : context).join(', ')}</Text>
                 </Text>
                 <HStack space={4} wrap>

src/features/group/components/group-header.tsx

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

src/features/group/components/group-member-count.tsx

@@ -15,7 +15,7 @@ const GroupMemberCount = ({ group }: IGroupMemberCount) => {
     <Link to={`/group/${group.slug}/members`} className='hover:underline'>
       <Text theme='inherit' tag='span' size='sm' weight='medium' data-testid='group-member-count'>
         {shortNumberFormat(group.members_count)}
-        {' '}
+        {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         <FormattedMessage
           id='groups.discover.search.results.member_count'
           defaultMessage='{members, plural, one {member} other {members}}'

src/features/group/components/group-tag-list-item.tsx

@@ -145,6 +145,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
     >
       <Link to={`/group/${group.slug}/tag/${tag.id}`} className='group grow'>
         <Stack>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Text
             weight='bold'
             theme={(tag.visible || !isOwner) ? 'default' : 'subtle'}
@@ -153,9 +154,12 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
           >
             #{tag.name}
           </Text>
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
           <Text size='sm' theme={(tag.visible || !isOwner) ? 'muted' : 'subtle'}>
+            {/* eslint-disable formatjs/no-literal-string-in-jsx */}
             {intl.formatMessage(messages.total)}:
             {' '}
+            {/* eslint-enable formatjs/no-literal-string-in-jsx */}
             <Text size='sm' theme='inherit' weight='semibold' tag='span'>
               {shortNumberFormat(tag.uses)}
             </Text>

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

@@ -58,7 +58,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
 
               <HStack alignItems='center' space={1}>
                 <GroupPrivacy group={group} />
-                <span>&bull;</span>
+                <span>&bull;</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <GroupMemberCount group={group} />
               </HStack>
             </Stack>

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

@@ -52,10 +52,10 @@ const GroupListItem = (props: IGroupListItem) => {
 
               {typeof group.members_count !== 'undefined' && (
                 <>
-                  <span>&bull;</span>
+                  <span>&bull;</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                   <Text theme='inherit' tag='span' size='sm' weight='medium'>
                     {shortNumberFormat(group.members_count)}
-                    {' '}
+                    {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                     <FormattedMessage
                       id='groups.discover.search.results.member_count'
                       defaultMessage='{members, plural, one {member} other {members}}'

src/features/groups/components/discover/search/blankslate.test.tsx

@@ -19,8 +19,8 @@ describe('<Blankslate />', () => {
     it('should render correctly', () => {
       render(
         <Blankslate
-          title={<span>Title</span>}
-          subtitle={<span>Subtitle</span>}
+          title={<span>Title</span>} /* eslint-disable-line formatjs/no-literal-string-in-jsx */
+          subtitle={<span>Subtitle</span>} /* eslint-disable-line formatjs/no-literal-string-in-jsx */
         />);
 
       expect(screen.getByTestId('no-results')).toHaveTextContent('Title');

src/features/groups/components/discover/tag-list-item.tsx

@@ -23,17 +23,19 @@ const TagListItem = (props: ITagListItem) => {
         <Text
           weight='bold'
           className='group-hover:text-primary-600 group-hover:underline dark:group-hover:text-accent-blue'
-        >
+        > {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           #{tag.name}
         </Text>
 
         <Text size='sm' theme='muted' weight='medium'>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <FormattedMessage
             id='groups.discovery.tags.no_of_groups'
             defaultMessage='Number of groups'
           />
           :{' '}
           {tag.groups}
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Text>
       </Stack>
     </Link>

src/features/placeholder/components/placeholder-group-search.tsx

@@ -27,6 +27,7 @@ export default ({ withJoinAction = true }: { withJoinAction?: boolean }) => {
               {generateText(6)}
             </Text>
 
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <span>&bull;</span>
 
             <Text theme='inherit' tag='span' size='sm' weight='medium'>

src/features/placeholder/components/placeholder-notification.tsx

@@ -8,7 +8,7 @@ import PlaceholderStatusContent from './placeholder-status-content';
 
 /** Fake notification to display while data is loading. */
 const PlaceholderNotification = () => (
-  <div className='bg-white px-4 py-6 black:bg-black dark:bg-primary-900 sm:p-6'>
+  <div className='bg-white px-4 py-6 black:bg-black sm:p-6 dark:bg-primary-900'>
     <div className='w-full animate-pulse'>
       <div className='mb-2'>
         <PlaceholderStatusContent minLength={20} maxLength={20} />

src/features/security/mfa/otp-confirm-form.tsx

@@ -66,6 +66,7 @@ const OtpConfirmForm: React.FC = () => {
     <Stack space={4}>
       <Form onSubmit={handleSubmit}>
         <Stack>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           <Text weight='semibold' size='lg'>
             1. <FormattedMessage id='mfa.mfa_setup_scan_title' defaultMessage='Scan' />
           </Text>
@@ -78,6 +79,7 @@ const OtpConfirmForm: React.FC = () => {
         <QRCode className='rounded-lg' value={state.qrCodeURI} includeMargin />
         {state.confirmKey}
 
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         <Text weight='semibold' size='lg'>
           2. <FormattedMessage id='mfa.mfa_setup_verify_title' defaultMessage='Verify' />
         </Text>

src/features/soapbox-config/components/site-preview.tsx

@@ -36,6 +36,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
 
   return (
     <div className={bodyClass}>
+      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
       <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
       <BackgroundShapes position='absolute' />
 

src/features/status/components/thread-status.tsx

@@ -31,7 +31,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
 
     return (
       <div
-        className={clsx('absolute left-5 z-[1] hidden w-0.5 bg-gray-200 black:bg-gray-800 dark:bg-primary-800 rtl:left-auto rtl:right-5', {
+        className={clsx('absolute left-5 z-[1] hidden w-0.5 bg-gray-200 black:bg-gray-800 rtl:left-auto rtl:right-5 dark:bg-primary-800', {
           '!block top-[calc(12px+42px)] h-[calc(100%-42px-8px-1rem)]': isConnectedBottom,
         })}
       />

src/features/ui/components/funding-panel.tsx

@@ -42,8 +42,10 @@ const FundingPanel: React.FC = () => {
   let ratioText;
 
   if (goalReached) {
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
     ratioText = <><strong>{moneyFormat(goal)}</strong> per month <span>&mdash; reached!</span></>;
   } else {
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
     ratioText = <><strong>{moneyFormat(amount)} out of {moneyFormat(goal)}</strong> per month</>;
   }
 

src/features/ui/components/modals/boost-modal.tsx

@@ -38,6 +38,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
         <ReplyIndicator status={status} hideActions />
 
         <Text>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={require('@tabler/icons/outline/repeat.svg')} /></span> }} />
         </Text>
       </Stack>

src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx

@@ -209,7 +209,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
       <FormGroup
         labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
       >
-        <div className='dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'>
+        <div className='dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 sm:h-32 sm:shadow dark:bg-gray-800 dark:text-white'>
           {banner ? (
             <>
               <img className='size-full object-cover' src={banner.url} alt='' />
@@ -234,7 +234,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
         labelText={<FormattedMessage id='compose_event.fields.description_label' defaultMessage='Event description' />}
       >
         <ComposeEditor
-          className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
+          className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500'
           placeholderClassName='pt-2'
           composeId='compose-event-modal'
           placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}

src/features/ui/components/modals/hotkeys-modal.tsx

@@ -38,36 +38,44 @@ const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
           </thead>
           <tbody>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>r</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>m</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>p</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>f</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' /></TableCell>
             </tr>
             {features.emojiReacts && (
               <tr>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <TableCell><Hotkey>e</Hotkey></TableCell>
                 <TableCell><FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' /></TableCell>
               </tr>
             )}
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>b</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>enter</Hotkey>, <Hotkey>o</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>a</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.open_media' defaultMessage='to open media' /></TableCell>
             </tr>
@@ -82,41 +90,50 @@ const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
           <tbody>
             {features.spoilers && (
               <tr>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <TableCell><Hotkey>x</Hotkey></TableCell>
                 <TableCell><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></TableCell>
               </tr>
             )}
             {features.spoilers && (
               <tr>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <TableCell><Hotkey>h</Hotkey></TableCell>
                 <TableCell><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></TableCell>
               </tr>
             )}
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>up</Hotkey>, <Hotkey>k</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>down</Hotkey>, <Hotkey>j</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>n</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to open the compose textarea' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>alt</Hotkey> + <Hotkey>n</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>backspace</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>s</Hotkey>, <Hotkey>/</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>esc</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></TableCell>
             </tr>
@@ -130,40 +147,49 @@ const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
           </thead>
           <tbody>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>h</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>n</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>f</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open likes list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>p</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>u</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>b</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>m</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></TableCell>
             </tr>
             {features.followRequests && (
               <tr>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <TableCell><Hotkey>g</Hotkey> + <Hotkey>r</Hotkey></TableCell>
                 <TableCell><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></TableCell>
               </tr>
             )}
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>?</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></TableCell>
             </tr>

src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx

@@ -42,7 +42,7 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
       <Stack space={3}>
         <Stack>
           <label
-            className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
+            className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 sm:h-36 sm:shadow dark:bg-gray-800 dark:text-accent-blue'
           >
             {group.header && <img className='size-full object-cover' src={group.header} alt='' />}
           </label>

src/features/ui/components/modals/mute-modal.tsx

@@ -59,6 +59,7 @@ const MuteModal = () => {
           <FormattedMessage
             id='confirmations.mute.message'
             defaultMessage='Are you sure you want to mute {name}?'
+            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             values={{ name: <strong className='break-words'>@{account.acct}</strong> }}
           />
         </Text>
@@ -93,6 +94,7 @@ const MuteModal = () => {
 
             {duration !== 0 && (
               <Stack space={2}>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <Text weight='medium'><FormattedMessage id='mute_modal.duration' defaultMessage='Duration' />: </Text>
 
                 <DurationSelector onDurationChange={handleChangeMuteDuration} />

src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx

@@ -71,10 +71,10 @@ const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ onClose, onNext
     }).catch(console.error);
   };
   return (
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
+    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
       <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
+        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
         <Stack space={2} justifyContent='center' alignItems='center' className='border-grey-200 dark:border-grey-800 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.avatar.title' defaultMessage={'Choose a profile picture'} />

src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx

@@ -52,11 +52,11 @@ const BioStep: React.FC<IBioStep> = ({ onClose, onNext }) => {
 
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
+    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
       <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
+        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
           </Text>

src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx

@@ -14,10 +14,10 @@ interface ICompletedModal {
 const CompletedModal: React.FC<ICompletedModal> = ({ onClose, onComplete }) => {
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
+    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
       <div className='relative w-full'>
-        <IconButton src={closeIcon} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' onClick={onClose} />
+        <IconButton src={closeIcon} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' onClick={onClose} />
         <Stack space={2} justifyContent='center' alignItems='center' className=''>
           <Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
           <Text size='2xl' align='center' weight='bold'>

src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx

@@ -76,11 +76,11 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
 
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
+    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
       <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
+        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
           </Text>
@@ -135,6 +135,7 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
             )}
 
             <Text weight='bold' size='sm'>{account?.display_name}</Text>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <Text theme='muted' size='sm'>@{account?.username}</Text>
           </div>
         </div>

src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx

@@ -63,11 +63,11 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
 
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
+    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
       <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
+        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
           </Text>

src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx

@@ -74,11 +74,11 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
 
   return (
 
-    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
+    <Stack space={10} justifyContent='center' alignItems='center' className='w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
       <div className='relative w-full'>
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
+        <IconButton src={closeIcon} onClick={onClose} className='absolute -top-[6%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
           </Text>

src/features/ui/components/modals/report-modal/report-modal.tsx

@@ -266,6 +266,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
       case ReportableEntities.GROUP:
         return intl.formatMessage(messages.reportGroup);
       default:
+        // eslint-disable-next-line formatjs/no-literal-string-in-jsx
         return <FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>@{account?.acct}</strong> }} />;
     }
   };

src/features/ui/components/modals/zap-invoice.tsx

@@ -57,7 +57,7 @@ const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, splitData, o
         <h3 className='text-xl font-bold'>
           {renderTitle()}
         </h3>
-        <IconButton src={closeIcon} onClick={onClickClose} className='absolute -top-[8%] right-[2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
+        <IconButton src={closeIcon} onClick={onClickClose} className='absolute -top-[8%] right-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
         <QRCodeCanvas value={invoice} />
         <div className='w-full'>
           <CopyableInput value={invoice} />

src/features/ui/components/modals/zap-split/display-name-row.tsx

@@ -37,11 +37,13 @@ const DisplayNameRow: React.FC<IDisplayName> = ({ account, withSuffix = true })
     </HStack>
   );
 
+  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
   const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
 
   return (
     <div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
       {displayName}
+      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
       <span className='hidden text-2xl font-bold sm:block'>-</span>
       {withSuffix && suffix}
     </div>

src/features/ui/components/modals/zap-split/zap-split-modal.tsx

@@ -98,6 +98,7 @@ const ZapSplitModal: React.FC<IZapSplitModal> = ({ zapSplitAccounts, onClose, sp
         )}
         <p className='absolute -bottom-4 -right-2'>
           <span className='font-bold'>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {currentStep + 1}/{zapSplitAccounts.length}
           </span>
         </p>

src/features/ui/components/modals/zap-split/zap-split.tsx

@@ -48,6 +48,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
           <div className='bg-grey-500 dark:border-grey-800 -mx-4 w-full border-b border-solid sm:-mx-10' />
 
           <Stack justifyContent='center' alignItems='center' className='min-w-72 text-center' space={4}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <h3 className='text-xl font-bold'>
               Help this community grow!
             </h3>
@@ -65,6 +66,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
 
         <div className='flex justify-center'>
           <div className='box-shadow:none rounded-none border-0 border-b-2 p-0.5 text-center !ring-0 dark:bg-transparent'>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <span className='!text-5xl font-bold'>{zapAmount}</span> sats
           </div>
         </div>

src/features/ui/components/new-account-zap-split.tsx

@@ -75,6 +75,7 @@ const AddNewAccount: React.FC<AddNewAccountProps> = ({
 
         <HStack space={2} className='w-full md:justify-end'>
           <div className='flex w-[96%] flex-col md:w-40'>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {formattedWeight(newWeight)}%
             <Slider value={newWeight} onChange={(e) => handleChange(e)} />
           </div>

src/features/ui/components/profile-dropdown.tsx

@@ -147,7 +147,7 @@ interface MenuItemProps {
 }
 
 const MenuItem: React.FC<MenuItemProps> = ({ className, menuItem }) => {
-  const baseClassName = clsx(className, 'block w-full cursor-pointer truncate px-4 py-2.5 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 rtl:text-right');
+  const baseClassName = clsx(className, 'block w-full cursor-pointer truncate px-4 py-2.5 text-left text-sm text-gray-700 hover:bg-gray-100 rtl:text-right dark:text-gray-500 dark:hover:bg-gray-800');
 
   if (menuItem.toggle) {
     return (

src/features/ui/components/profile-info-panel.tsx

@@ -122,6 +122,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
         <Stack space={2}>
           <Stack>
             <HStack space={1} alignItems='center'>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <Text size='sm' theme='muted' direction='ltr' truncate>
                 @{username}
               </Text>
@@ -154,6 +155,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           </HStack>
 
           <HStack alignItems='center' space={0.5}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <Text size='sm' theme='muted' direction='ltr' truncate>
               @{displayFqn ? account.fqn : account.acct}
             </Text>

src/features/ui/components/user-panel.tsx

@@ -70,6 +70,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
           </Link>
 
           <HStack>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <Text size='sm' theme='muted' direction='ltr' truncate>
               @{getAcct(account, fqn)}
             </Text>

src/features/ui/index.tsx

@@ -527,7 +527,7 @@ const UI: React.FC<IUI> = ({ children }) => {
 
           {me && features.chats && (
             <div className='hidden xl:block'>
-              <Suspense fallback={<div className='fixed bottom-0 z-[99] flex h-16 w-96 animate-pulse flex-col rounded-t-lg bg-white shadow-3xl dark:bg-gray-900 ltr:right-5 rtl:left-5' />}>
+              <Suspense fallback={<div className='fixed bottom-0 z-[99] flex h-16 w-96 animate-pulse flex-col rounded-t-lg bg-white shadow-3xl ltr:right-5 rtl:left-5 dark:bg-gray-900' />}>
                 <ChatWidget />
               </Suspense>
             </div>

src/features/video/index.tsx

@@ -544,6 +544,7 @@ const Video: React.FC<IVideo> = ({
             {(detailed || fullscreen) && (
               <span>
                 <span className='video-player__time-current'>{formatTime(currentTime)}</span>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <span className='video-player__time-sep'>/</span>
                 <span className='video-player__time-total'>{formatTime(duration)}</span>
               </span>

src/features/zap/components/zap-pay-request-form.tsx

@@ -102,7 +102,7 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
         <IconButton
           src={closeIcon}
           onClick={onClose}
-          className='absolute right-[-1%] top-[-2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
+          className='absolute right-[-1%] top-[-2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
         />
 
         <Text weight='semibold'>
@@ -128,8 +128,9 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
         <div className='relative flex items-end justify-center gap-4'>
           <Input
             type='text' onChange={handleCustomAmount} value={zapAmount}
-            className='box-shadow:none max-w-20 rounded-none border-0 border-b-4 p-0 text-center !text-2xl font-bold !ring-0 dark:bg-transparent sm:max-w-28 sm:p-0.5 sm:!text-4xl'
+            className='box-shadow:none max-w-20 rounded-none border-0 border-b-4 p-0 text-center !text-2xl font-bold !ring-0 sm:max-w-28 sm:p-0.5 sm:!text-4xl dark:bg-transparent'
           />
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           {hasZapSplit && <p className='absolute right-0 font-bold sm:-right-6 sm:text-xl'>sats</p>}
         </div>
 

src/features/zap/components/zap-split-account-item.tsx

@@ -23,6 +23,7 @@ export const ZapSplitSlider: React.FC<IZapSplitSlider> = ({ initialWeight, onWei
 
   return (
     <div className={clsx('flex flex-col', width)}>
+      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
       {formattedWeight(value)}%
       <Slider
         value={value}

src/init/soapbox-head.tsx

@@ -44,7 +44,9 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
       <Helmet>
         <html lang={locale} className={clsx('h-full', { 'dark': theme === 'dark', 'dark black': theme === 'black' })} />
         <body className={bodyClass} dir={direction} />
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         {['dark', 'black'].includes(theme) && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
         <meta name='theme-color' content={soapboxConfig.brandColor} />
       </Helmet>