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

Fix anchor warning and update Icon component to use SvgIcon components

This commit is contained in:
danidfra 2024-10-26 17:26:36 -03:00
parent 0a6532f34a
commit 18cf231d67
9 changed files with 39 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/autosuggest-input.tsx
View File

@ -232,7 +232,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
} }
return menu.map((item, i) => ( return menu.map((item, i) => (
<a <a // eslint-disable-line jsx-a11y/anchor-is-valid
className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })} className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
href='#' href='#'
role='button' role='button'

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

@ -9,7 +9,7 @@ import { getSettings } from 'soapbox/actions/settings';
import { closeSidebar } from 'soapbox/actions/sidebar'; import { closeSidebar } from 'soapbox/actions/sidebar';
import { useAccount } from 'soapbox/api/hooks'; import { useAccount } from 'soapbox/api/hooks';
import Account from 'soapbox/components/account'; import Account from 'soapbox/components/account';
import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui'; import { Stack, Divider, HStack, Icon, IconButton, Text, Button } from 'soapbox/components/ui';
import ProfileStats from 'soapbox/features/ui/components/profile-stats'; import ProfileStats from 'soapbox/features/ui/components/profile-stats';
import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications'; import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
@ -123,11 +123,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
}; };
const renderAccount = (account: AccountEntity) => ( const renderAccount = (account: AccountEntity) => (
<a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}> <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}>
<div className='pointer-events-none'> <div className='pointer-events-none'>
<Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} /> <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
</div> </div>
</a> </Button>
); );
React.useEffect(() => { React.useEffect(() => {

10
src/features/about/index.tsx
View File

@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
import { fetchAboutPage } from 'soapbox/actions/about'; import { fetchAboutPage } from 'soapbox/actions/about';
import { Navlinks } from 'soapbox/components/navlinks'; import { Navlinks } from 'soapbox/components/navlinks';
import { Card } from 'soapbox/components/ui'; import { Button, Card } from 'soapbox/components/ui';
import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks'; import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
import { languages } from '../preferences'; import { languages } from '../preferences';
@ -42,18 +42,18 @@ const AboutPage: React.FC = () => {
{' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */} {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
<ul className='inline list-none p-0'> <ul className='inline list-none p-0'>
<li className="inline after:content-['_·_']"> <li className="inline after:content-['_·_']">
<a href='#' onClick={() => setLocale(defaultLocale)}> <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)}>
{/* @ts-ignore */} {/* @ts-ignore */}
{languages[defaultLocale] || defaultLocale} {languages[defaultLocale] || defaultLocale}
</a> </Button>
</li> </li>
{ {
pageLocales?.map(locale => ( pageLocales?.map(locale => (
<li className="inline after:content-['_·_'] last:after:content-none" key={locale}> <li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
<a href='#' onClick={() => setLocale(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)}>
{/* @ts-ignore */} {/* @ts-ignore */}
{languages[locale] || locale} {languages[locale] || locale}
</a> </Button>
</li> </li>
)) ))
} }

4
src/features/backups/index.tsx
View File

@ -78,11 +78,11 @@ const Backups = () => {
<Card variant='rounded' size='lg'> <Card variant='rounded' size='lg'>
{intl.formatMessage(messages.emptyMessage, { {intl.formatMessage(messages.emptyMessage, {
action: ( action: (
<a href='#' onClick={handleCreateBackup}> <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}>
<Text tag='span' theme='primary' size='sm' className='hover:underline'> <Text tag='span' theme='primary' size='sm' className='hover:underline'>
{intl.formatMessage(messages.emptyMessageAction)} {intl.formatMessage(messages.emptyMessageAction)}
</Text> </Text>
</a> </Button>
), ),
})} })}
</Card> </Card>

13
src/features/compose/components/reply-mentions.tsx
View File

@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
import { FormattedList, FormattedMessage } from 'react-intl'; import { FormattedList, FormattedMessage } from 'react-intl';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import { Button } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks';
import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose'; import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
import { makeGetStatus } from 'soapbox/selectors'; import { makeGetStatus } from 'soapbox/selectors';
@ -29,7 +30,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
const parentTo = status && statusToMentionsAccountIdsArray(status, account!); const parentTo = status && statusToMentionsAccountIdsArray(status, account!);
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault(); e.preventDefault();
dispatch(openModal('REPLY_MENTIONS', { dispatch(openModal('REPLY_MENTIONS', {
@ -43,19 +44,19 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
if (to.size === 0) { if (to.size === 0) {
return ( return (
<a href='#' className='reply-mentions' onClick={handleClick}> <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}>
<FormattedMessage <FormattedMessage
id='reply_mentions.reply_empty' id='reply_mentions.reply_empty'
defaultMessage='Replying to post' defaultMessage='Replying to post'
/> />
</a> </Button>
); );
} }
const accounts = to.slice(0, 2).map((acct: string) => { const accounts = to.slice(0, 2).map((acct: string) => {
const username = acct.split('@')[0]; const username = acct.split('@')[0];
return ( return (
<span className='reply-mentions__account'> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */} <span className='inline-block text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
@{shortenNostr(username)} @{shortenNostr(username)}
</span> </span>
); );
@ -68,7 +69,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
} }
return ( return (
<a href='#' className='reply-mentions' onClick={handleClick}> <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}>
<FormattedMessage <FormattedMessage
id='reply_mentions.reply' id='reply_mentions.reply'
defaultMessage='Replying to {accounts}' defaultMessage='Replying to {accounts}'
@ -76,7 +77,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
accounts: <FormattedList type='conjunction' value={accounts} />, accounts: <FormattedList type='conjunction' value={accounts} />,
}} }}
/> />
</a> </Button>
); );
}; };

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

@ -2,7 +2,8 @@ import React from 'react';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import CopyableInput from 'soapbox/components/copyable-input'; import CopyableInput from 'soapbox/components/copyable-input';
import { Text, Icon, Stack, HStack } from 'soapbox/components/ui'; import { Text, Stack, HStack, Button } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAppDispatch } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
import { getExplorerUrl } from '../utils/block-explorer'; import { getExplorerUrl } from '../utils/block-explorer';
@ -41,13 +42,13 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
<Text weight='bold'>{title || ticker.toUpperCase()}</Text> <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
<HStack alignItems='center' className='ml-auto'> <HStack alignItems='center' className='ml-auto'>
<a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}> <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}>
<Icon src={require('@tabler/icons/outline/qrcode.svg')} size={20} /> <SvgIcon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
</a> </Button>
{explorerUrl && ( {explorerUrl && (
<a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'> <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
<Icon src={require('@tabler/icons/outline/external-link.svg')} size={20} /> <SvgIcon src={require('@tabler/icons/outline/external-link.svg')} size={20} />
</a> </a>
)} )}
</HStack> </HStack>

11
src/features/event/components/event-header.tsx
View File

@ -13,7 +13,6 @@ import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions
import { initMuteModal } from 'soapbox/actions/mutes'; import { initMuteModal } from 'soapbox/actions/mutes';
import { initReport, ReportableEntities } from 'soapbox/actions/reports'; import { initReport, ReportableEntities } from 'soapbox/actions/reports';
import { deleteStatus } from 'soapbox/actions/statuses'; import { deleteStatus } from 'soapbox/actions/statuses';
import Icon from 'soapbox/components/icon';
import StillImage from 'soapbox/components/still-image'; import StillImage from 'soapbox/components/still-image';
import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui'; import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon'; import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
@ -421,7 +420,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
<Stack space={1}> <Stack space={1}>
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/outline/flag-3.svg')} /> <SvgIcon src={require('@tabler/icons/outline/flag-3.svg')} />
<span> <span>
<FormattedMessage <FormattedMessage
id='event.organized_by' id='event.organized_by'
@ -441,8 +440,8 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
</HStack> </HStack>
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/outline/users.svg')} /> <SvgIcon src={require('@tabler/icons/outline/users.svg')} />
<a href='#' className='hover:underline' onClick={handleParticipantsClick}> <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}>
<span> <span>
<FormattedMessage <FormattedMessage
id='event.participants' id='event.participants'
@ -453,14 +452,14 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
}} }}
/> />
</span> </span>
</a> </Button>
</HStack> </HStack>
<EventDate status={status} /> <EventDate status={status} />
{event.location && ( {event.location && (
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<Icon src={require('@tabler/icons/outline/map-pin.svg')} /> <SvgIcon src={require('@tabler/icons/outline/map-pin.svg')} />
<span> <span>
{event.location.get('name')} {event.location.get('name')}
</span> </span>

8
src/features/event/event-information.tsx
View File

@ -7,7 +7,7 @@ import MissingIndicator from 'soapbox/components/missing-indicator';
import StatusContent from 'soapbox/components/status-content'; import StatusContent from 'soapbox/components/status-content';
import StatusMedia from 'soapbox/components/status-media'; import StatusMedia from 'soapbox/components/status-media';
import TranslateButton from 'soapbox/components/translate-button'; import TranslateButton from 'soapbox/components/translate-button';
import { HStack, Icon, Stack, Text } from 'soapbox/components/ui'; import { Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container'; import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks';
import { makeGetStatus } from 'soapbox/selectors'; import { makeGetStatus } from 'soapbox/selectors';
@ -47,7 +47,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
setShowMedia(!showMedia); setShowMedia(!showMedia);
}; };
const handleShowMap: React.MouseEventHandler<HTMLAnchorElement> = (e) => { const handleShowMap: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault(); e.preventDefault();
dispatch(openModal('EVENT_MAP', { dispatch(openModal('EVENT_MAP', {
@ -89,9 +89,9 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
text.push( text.push(
<React.Fragment key='event-map'> <React.Fragment key='event-map'>
<br /> <br />
<a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}> <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}>
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' /> <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
</a> </Button>
</React.Fragment>, </React.Fragment>,
); );
} }

11
src/features/federation-restrictions/components/restricted-instance.tsx
View File

@ -1,7 +1,8 @@
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useState } from 'react'; import React, { useState } from 'react';
import Icon from 'soapbox/components/icon'; import { Button } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAppSelector } from 'soapbox/hooks'; import { useAppSelector } from 'soapbox/hooks';
import { makeGetRemoteInstance } from 'soapbox/selectors'; import { makeGetRemoteInstance } from 'soapbox/selectors';
@ -18,19 +19,19 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const toggleExpanded: React.MouseEventHandler<HTMLAnchorElement> = e => { const toggleExpanded: React.MouseEventHandler<HTMLButtonElement> = e => {
setExpanded((value) => !value); setExpanded((value) => !value);
e.preventDefault(); e.preventDefault();
}; };
return ( return (
<div> <div>
<a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}> <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}>
<Icon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} /> <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 })}> <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
{remoteInstance.host} {remoteInstance.host}
</div> </div>
</a> </Button>
<div <div
className={clsx({ className={clsx({
'h-0 overflow-hidden': !expanded, 'h-0 overflow-hidden': !expanded,