Fix anchor warning

src/components/sidebar-menu.tsx

@@ -9,7 +9,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import { closeSidebar } from 'soapbox/actions/sidebar';
 import { useAccount } from 'soapbox/api/hooks';
 import Account from 'soapbox/components/account';
-import { Stack, Divider, HStack, Icon, IconButton, Text, Button } from 'soapbox/components/ui';
+import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
 import ProfileStats from 'soapbox/features/ui/components/profile-stats';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
 import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
@@ -122,11 +122,13 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   };
 
   const renderAccount = (account: AccountEntity) => (
-    <Button to='#' className='!block !border-none !p-0 !py-2 !text-primary-600  hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleSwitchAccount(account)} key={account.id}>
+    <Link to={'/'} className='inline-flex'>
-      <div className='pointer-events-none'>
+      <button className='button-theme-muted !block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline  focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleSwitchAccount(account)} key={account.id}>
+        <div className='pointer-events-none max-w-[288px]'>
           <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
         </div>
-    </Button>
+      </button>
+    </Link>
   );
 
   React.useEffect(() => {

src/features/about/index.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'soapbox/actions/about';
 import { Navlinks } from 'soapbox/components/navlinks';
-import { Button, Card } from 'soapbox/components/ui';
+import { Card } from 'soapbox/components/ui';
 import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
 
 import { languages } from '../preferences';
@@ -42,18 +42,22 @@ const AboutPage: React.FC = () => {
       {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       <ul className='inline list-none p-0'>
         <li className="inline after:content-['_·_']">
-          <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={() => setLocale(defaultLocale)}>
+          <Link to={'/'} className='inline-flex'>
+            <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(defaultLocale)}>
               {/* @ts-ignore */}
               {languages[defaultLocale] || defaultLocale}
-          </Button>
+            </button>
+          </Link>
         </li>
         {
           pageLocales?.map(locale => (
             <li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
-              <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={() => setLocale(locale)}>
+              <Link to={'/'} className='inline-flex'>
+                <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(locale)}>
                   {/* @ts-ignore */}
                   {languages[locale] || locale}
-              </Button>
+                </button>
+              </Link>
             </li>
           ))
         }

src/features/backups/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { fetchBackups, createBackup } from 'soapbox/actions/backups';
 import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
@@ -78,11 +79,13 @@ const Backups = () => {
     <Card variant='rounded' size='lg'>
       {intl.formatMessage(messages.emptyMessage, {
         action: (
-          <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleCreateBackup}>
+          <Link to={'/'} className='inline-flex'>
+            <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleCreateBackup}>
               <Text tag='span' theme='primary' size='sm' className='hover:underline'>
                 {intl.formatMessage(messages.emptyMessageAction)}
               </Text>
-          </Button>
+            </button>
+          </Link>
         ),
       })}
     </Card>

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

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
-import { Button } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks';
 import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
 import { makeGetStatus } from 'soapbox/selectors';
@@ -44,12 +44,14 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   if (to.size === 0) {
     return (
-      <Button to='#' className='mb-1 cursor-pointer !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600' theme='muted' onClick={handleClick}>
+      <Link to={'/'} className='inline-flex'>
+        <button className='button-theme-muted mb-1 cursor-pointer space-x-2 !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
           <FormattedMessage
             id='reply_mentions.reply_empty'
             defaultMessage='Replying to post'
           />
-      </Button>
+        </button>
+      </Link>
     );
   }
 
@@ -69,7 +71,8 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   }
 
   return (
-    <Button to='#' className='mb-1 cursor-pointer !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent  focus:ring-offset-0 dark:!text-gray-600' theme='muted' onClick={handleClick}>
+    <Link to={'/'} className='inline-flex'>
+      <button className='button-theme-muted mb-1 cursor-pointer space-x-2 !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent focus:ring-offset-0  dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
         <FormattedMessage
           id='reply_mentions.reply'
           defaultMessage='Replying to {accounts}'
@@ -77,7 +80,8 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
             accounts: <FormattedList type='conjunction' value={accounts} />,
           }}
         />
-    </Button>
+      </button>
+    </Link>
   );
 };
 

src/features/crypto-donate/components/crypto-address.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import CopyableInput from 'soapbox/components/copyable-input';
-import { Text, Stack, HStack, Button } from 'soapbox/components/ui';
+import { Text, Stack, HStack } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppDispatch } from 'soapbox/hooks';
 
@@ -42,9 +43,11 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
         <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
 
         <HStack alignItems='center' className='ml-auto'>
-          <Button className='!ml-1 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1' theme='muted' to='#' onClick={handleModalClick}>
+          <Link to={'/'} className='inline-flex'>
+            <button className='button-theme-muted !ml-1 space-x-2 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1 rtl:space-x-reverse' onClick={handleModalClick}>
               <SvgIcon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
-          </Button>
+            </button>
+          </Link>
 
           {explorerUrl && (
             <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>

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

@@ -441,7 +441,8 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
           <HStack alignItems='center' space={2}>
             <SvgIcon src={require('@tabler/icons/outline/users.svg')} />
-            <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleParticipantsClick}>
+            <Link to={'/'} className='inline-flex'>
+              <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleParticipantsClick}>
                 <span>
                   <FormattedMessage
                     id='event.participants'
@@ -452,7 +453,8 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                     }}
                   />
                 </span>
-            </Button>
+              </button>
+            </Link>
           </HStack>
 
           <EventDate status={status} />

src/features/event/event-information.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import { fetchStatus } from 'soapbox/actions/statuses';
@@ -7,7 +8,7 @@ import MissingIndicator from 'soapbox/components/missing-indicator';
 import StatusContent from 'soapbox/components/status-content';
 import StatusMedia from 'soapbox/components/status-media';
 import TranslateButton from 'soapbox/components/translate-button';
-import { Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
 import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
@@ -89,9 +90,11 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
       text.push(
         <React.Fragment key='event-map'>
           <br />
-          <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleShowMap}>
+          <Link to={'/'} className='inline-flex'>
+            <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleShowMap}>
               <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
-          </Button>
+            </button>
+          </Link>
         </React.Fragment>,
       );
     }

src/features/federation-restrictions/components/restricted-instance.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 
-import { Button } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
@@ -26,12 +26,14 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
 
   return (
     <div>
-      <Button to='#' className='flex items-center gap-1  !border-none !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' onClick={toggleExpanded}>
+      <Link to={'/'} className='inline-flex'>
+        <button className='button-theme-muted flex items-center gap-1 space-x-2 !border-none  !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={toggleExpanded}>
           <SvgIcon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
           <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
             {remoteInstance.host}
           </div>
-      </Button>
+        </button>
+      </Link>
       <div
         className={clsx({
           'h-0 overflow-hidden': !expanded,

src/styles/tailwind.css

@@ -3,6 +3,10 @@
 @tailwind utilities;
 
 @layer utilities {
+  .button-theme-muted {
+    @apply border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500
+  }
+
   .break-word-nested > p {
     word-break: break-word;
   }