mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

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ęć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

14
src/components/sidebar-menu.tsx
Wyświetl plik

@ -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, 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 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';
@ -122,11 +122,13 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
}; };
const renderAccount = (account: AccountEntity) => ( 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}>
<Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} /> <div className='pointer-events-none max-w-[288px]'>
</div> <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
</Button> </div>
</button>
</Link>
); );
React.useEffect(() => { React.useEffect(() => {

24
src/features/about/index.tsx
Wyświetl plik

@ -1,10 +1,10 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { FormattedMessage } from 'react-intl'; 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 { fetchAboutPage } from 'soapbox/actions/about';
import { Navlinks } from 'soapbox/components/navlinks'; 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 { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
import { languages } from '../preferences'; import { languages } from '../preferences';
@ -42,18 +42,22 @@ 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-['_·_']">
<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'>
{/* @ts-ignore */} <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)}>
{languages[defaultLocale] || defaultLocale} {/* @ts-ignore */}
</Button> {languages[defaultLocale] || defaultLocale}
</button>
</Link>
</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}>
<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'>
{/* @ts-ignore */} <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)}>
{languages[locale] || locale} {/* @ts-ignore */}
</Button> {languages[locale] || locale}
</button>
</Link>
</li> </li>
)) ))
} }

13
src/features/backups/index.tsx
Wyświetl plik

@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { FormattedDate, defineMessages, useIntl } from 'react-intl'; import { FormattedDate, defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { fetchBackups, createBackup } from 'soapbox/actions/backups'; import { fetchBackups, createBackup } from 'soapbox/actions/backups';
import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui'; import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
@ -78,11 +79,13 @@ const Backups = () => {
<Card variant='rounded' size='lg'> <Card variant='rounded' size='lg'>
{intl.formatMessage(messages.emptyMessage, { {intl.formatMessage(messages.emptyMessage, {
action: ( 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'>
<Text tag='span' theme='primary' size='sm' className='hover:underline'> <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}>
{intl.formatMessage(messages.emptyMessageAction)} <Text tag='span' theme='primary' size='sm' className='hover:underline'>
</Text> {intl.formatMessage(messages.emptyMessageAction)}
</Button> </Text>
</button>
</Link>
), ),
})} })}
</Card> </Card>

36
src/features/compose/components/reply-mentions.tsx
Wyświetl plik

@ -1,8 +1,8 @@
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { FormattedList, FormattedMessage } from 'react-intl'; import { FormattedList, FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
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';
@ -44,12 +44,14 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
if (to.size === 0) { if (to.size === 0) {
return ( 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'>
<FormattedMessage <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}>
id='reply_mentions.reply_empty' <FormattedMessage
defaultMessage='Replying to post' id='reply_mentions.reply_empty'
/> defaultMessage='Replying to post'
</Button> />
</button>
</Link>
); );
} }
@ -69,15 +71,17 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
} }
return ( 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'>
<FormattedMessage <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}>
id='reply_mentions.reply' <FormattedMessage
defaultMessage='Replying to {accounts}' id='reply_mentions.reply'
values={{ defaultMessage='Replying to {accounts}'
accounts: <FormattedList type='conjunction' value={accounts} />, values={{
}} accounts: <FormattedList type='conjunction' value={accounts} />,
/> }}
</Button> />
</button>
</Link>
); );
}; };

11
src/features/crypto-donate/components/crypto-address.tsx
Wyświetl plik

@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
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, 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 SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAppDispatch } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
@ -42,9 +43,11 @@ 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'>
<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'>
<SvgIcon src={require('@tabler/icons/outline/qrcode.svg')} size={20} /> <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}>
</Button> <SvgIcon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
</button>
</Link>
{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'>

26
src/features/event/components/event-header.tsx
Wyświetl plik

@ -441,18 +441,20 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<SvgIcon src={require('@tabler/icons/outline/users.svg')} /> <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'>
<span> <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}>
<FormattedMessage <span>
id='event.participants' <FormattedMessage
defaultMessage='{count} {rawCount, plural, one {person} other {people}} going' id='event.participants'
values={{ defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
rawCount: event.participants_count || 0, values={{
count: shortNumberFormat(event.participants_count || 0), rawCount: event.participants_count || 0,
}} count: shortNumberFormat(event.participants_count || 0),
/> }}
</span> />
</Button> </span>
</button>
</Link>
</HStack> </HStack>
<EventDate status={status} /> <EventDate status={status} />

11
src/features/event/event-information.tsx
Wyświetl plik

@ -1,5 +1,6 @@
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { FormattedDate, FormattedMessage } from 'react-intl'; import { FormattedDate, FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import { fetchStatus } from 'soapbox/actions/statuses'; 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 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 { 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 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';
@ -89,9 +90,11 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
text.push( text.push(
<React.Fragment key='event-map'> <React.Fragment key='event-map'>
<br /> <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'>
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' /> <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}>
</Button> <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
</button>
</Link>
</React.Fragment>, </React.Fragment>,
); );
} }

16
src/features/federation-restrictions/components/restricted-instance.tsx
Wyświetl plik

@ -1,7 +1,7 @@
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useState } from 'react'; 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 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';
@ -26,12 +26,14 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
return ( return (
<div> <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'>
<SvgIcon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} /> <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}>
<div className={clsx({ 'line-through': remoteInstance.federation.reject })}> <SvgIcon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
{remoteInstance.host} <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
</div> {remoteInstance.host}
</Button> </div>
</button>
</Link>
<div <div
className={clsx({ className={clsx({
'h-0 overflow-hidden': !expanded, 'h-0 overflow-hidden': !expanded,

4
src/styles/tailwind.css
Wyświetl plik

@ -3,6 +3,10 @@
@tailwind utilities; @tailwind utilities;
@layer 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 { .break-word-nested > p {
word-break: break-word; word-break: break-word;
} }