Fix anchor warning

merge-requests/3241/head
danidfra 2024-11-06 01:04:29 -03:00
rodzic 82d1ae01c6
commit aa232ed51a
9 zmienionych plików z 91 dodań i 64 usunięć

Wyświetl plik

@ -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}>
<div className='pointer-events-none'>
<Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
</div>
</Button>
<Link to={'/'} className='inline-flex'>
<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>
</Link>
);
React.useEffect(() => {

Wyświetl plik

@ -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)}>
{/* @ts-ignore */}
{languages[defaultLocale] || defaultLocale}
</Button>
<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>
</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)}>
{/* @ts-ignore */}
{languages[locale] || locale}
</Button>
<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>
</Link>
</li>
))
}

Wyświetl plik

@ -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}>
<Text tag='span' theme='primary' size='sm' className='hover:underline'>
{intl.formatMessage(messages.emptyMessageAction)}
</Text>
</Button>
<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>
</Link>
),
})}
</Card>

Wyświetl plik

@ -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}>
<FormattedMessage
id='reply_mentions.reply_empty'
defaultMessage='Replying to post'
/>
</Button>
<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>
</Link>
);
}
@ -69,15 +71,17 @@ 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}>
<FormattedMessage
id='reply_mentions.reply'
defaultMessage='Replying to {accounts}'
values={{
accounts: <FormattedList type='conjunction' value={accounts} />,
}}
/>
</Button>
<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}'
values={{
accounts: <FormattedList type='conjunction' value={accounts} />,
}}
/>
</button>
</Link>
);
};

Wyświetl plik

@ -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}>
<SvgIcon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
</Button>
<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>
</Link>
{explorerUrl && (
<a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>

Wyświetl plik

@ -441,18 +441,20 @@ 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}>
<span>
<FormattedMessage
id='event.participants'
defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
values={{
rawCount: event.participants_count || 0,
count: shortNumberFormat(event.participants_count || 0),
}}
/>
</span>
</Button>
<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'
defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
values={{
rawCount: event.participants_count || 0,
count: shortNumberFormat(event.participants_count || 0),
}}
/>
</span>
</button>
</Link>
</HStack>
<EventDate status={status} />

Wyświetl plik

@ -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}>
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
</Button>
<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>
</Link>
</React.Fragment>,
);
}

Wyświetl plik

@ -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}>
<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>
<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>
</Link>
<div
className={clsx({
'h-0 overflow-hidden': !expanded,

Wyświetl plik

@ -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;
}