diff --git a/src/components/attachment-thumbs.tsx b/src/components/attachment-thumbs.tsx index c5a017408..abde976a1 100644 --- a/src/components/attachment-thumbs.tsx +++ b/src/components/attachment-thumbs.tsx @@ -21,7 +21,7 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => { const onOpenMedia = (media: ImmutableList, index: number) => dispatch(openModal('MEDIA', { media, index })); return ( -
+
{ {onClick && ( -
+
)}
); diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx index 26f507b72..14c6889f3 100644 --- a/src/components/autosuggest-emoji.tsx +++ b/src/components/autosuggest-emoji.tsx @@ -28,9 +28,9 @@ const AutosuggestEmoji: React.FC = ({ emoji }) => { } return ( -
+
{alt} diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx index 33ef63645..376100fad 100644 --- a/src/components/load-gap.tsx +++ b/src/components/load-gap.tsx @@ -19,8 +19,8 @@ const LoadGap: React.FC = ({ disabled, maxId, onClick }) => { const handleClick = () => onClick(maxId); return ( - ); }; diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx index 838997435..4bc234cb0 100644 --- a/src/components/status-list.tsx +++ b/src/components/status-list.tsx @@ -11,6 +11,8 @@ import PlaceholderStatus from 'soapbox/features/placeholder/components/placehold import PendingStatus from 'soapbox/features/ui/components/pending-status'; import { useSoapboxConfig } from 'soapbox/hooks'; +import { Stack, Text } from './ui'; + import type { OrderedSet as ImmutableOrderedSet } from 'immutable'; import type { VirtuosoHandle } from 'react-virtuoso'; import type { IScrollableList } from 'soapbox/components/scrollable-list'; @@ -212,14 +214,15 @@ const StatusList: React.FC = ({ if (isPartial) { return ( -
-
-
- - -
-
-
+ + + + + + + + + ); } diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx index 9117db9f2..a7fbfd1d8 100644 --- a/src/components/status-media.tsx +++ b/src/components/status-media.tsx @@ -44,11 +44,11 @@ const StatusMedia: React.FC = ({ }; const renderLoadingVideoPlayer = (): JSX.Element => { - return
; + return
; }; const renderLoadingAudioPlayer = (): JSX.Element => { - return
; + return
; }; const openMedia = (media: ImmutableList, index: number) => { @@ -93,7 +93,7 @@ const StatusMedia: React.FC = ({ backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined} foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined} accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined} - duration={attachment.meta.getIn(['original', 'duration'], 0) as number | undefined} + duration={attachment.meta.getIn(['original', 'duration'], 0) as number | undefined} height={263} /> diff --git a/src/components/status-reply-mentions.tsx b/src/components/status-reply-mentions.tsx index 4296b38d7..e4663c7a3 100644 --- a/src/components/status-reply-mentions.tsx +++ b/src/components/status-reply-mentions.tsx @@ -39,7 +39,7 @@ const StatusReplyMentions: React.FC = ({ status, hoverable // Rare, but it can happen. if (to.size === 0) { return ( -
+
= ({ status, hoverable e.stopPropagation()} > @{isPubkey(account.username) ? account.username.slice(0, 8) : account.username} @@ -81,7 +81,7 @@ const StatusReplyMentions: React.FC = ({ status, hoverable } return ( -
+
= ({ count, countMax, const icon = (active && activeSrc) || src; return ( - + {!demetricator && count !== undefined ? ( { }; return ( -
+
= ({ attachment, onOpenMedia }) => { {visible && thumbnail} diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx index a899d8d17..2156667a3 100644 --- a/src/features/account-gallery/index.tsx +++ b/src/features/account-gallery/index.tsx @@ -135,7 +135,7 @@ const AccountGallery = () => {
{isLoading && attachments.size === 0 && ( -
+
)} diff --git a/src/features/audio/index.tsx b/src/features/audio/index.tsx index 62903f125..57dfc01f9 100644 --- a/src/features/audio/index.tsx +++ b/src/features/audio/index.tsx @@ -507,8 +507,8 @@ const Audio: React.FC = (props) => { />
-
-
+
+
- - {formatTime(Math.floor(currentTime))} + + {formatTime(Math.floor(currentTime))} {getDuration() && (<> - / - {formatTime(Math.floor(getDuration()))} + / + {formatTime(Math.floor(getDuration()))} )}
@@ -564,7 +564,7 @@ const Audio: React.FC = (props) => { ', () => { it('renders correctly', () => { - render(); + render(); expect(screen.getByRole('heading')).toHaveTextContent('OTP Login'); expect(screen.getByTestId('form')).toBeInTheDocument(); diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx index 1b84c10c7..8fec57974 100644 --- a/src/features/compose/components/reply-mentions.tsx +++ b/src/features/compose/components/reply-mentions.tsx @@ -43,7 +43,7 @@ const ReplyMentions: React.FC = ({ composeId }) => { if (to.size === 0) { return ( - + = ({ composeId }) => { const accounts = to.slice(0, 2).map((acct: string) => { const username = acct.split('@')[0]; return ( - + @{isPubkey(username) ? username.slice(0, 8) : username} ); @@ -68,7 +68,7 @@ const ReplyMentions: React.FC = ({ composeId }) => { } return ( - + = ({ ticker, title, className }): JSX.Element => { +const CryptoIcon: React.FC = ({ ticker, title, className, imgClassName }): JSX.Element => { return (
{title diff --git a/src/features/crypto-donate/components/detailed-crypto-address.tsx b/src/features/crypto-donate/components/detailed-crypto-address.tsx index 554c05ade..a1cf9c2bc 100644 --- a/src/features/crypto-donate/components/detailed-crypto-address.tsx +++ b/src/features/crypto-donate/components/detailed-crypto-address.tsx @@ -20,22 +20,23 @@ const DetailedCryptoAddress: React.FC = ({ address, tick const explorerUrl = getExplorerUrl(ticker, address); return ( -
-
+
+
-
{title || ticker.toUpperCase()}
- - {note &&
{note}
} -
+ {note &&
{note}
} +
diff --git a/src/features/filters/edit-filter.tsx b/src/features/filters/edit-filter.tsx index 3501542ac..37cabbcc1 100644 --- a/src/features/filters/edit-filter.tsx +++ b/src/features/filters/edit-filter.tsx @@ -193,7 +193,7 @@ const EditFilter: React.FC = ({ params }) => { diff --git a/src/features/status/components/thread-status.tsx b/src/features/status/components/thread-status.tsx index a3674aa68..6b23efd6c 100644 --- a/src/features/status/components/thread-status.tsx +++ b/src/features/status/components/thread-status.tsx @@ -39,7 +39,7 @@ const ThreadStatus: React.FC = (props): JSX.Element => { }; return ( -
+
{renderConnector()} {isLoaded ? ( // @ts-ignore FIXME diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx index 6155eb1bc..53578b432 100644 --- a/src/features/status/components/thread.tsx +++ b/src/features/status/components/thread.tsx @@ -394,7 +394,7 @@ const Thread = (props: IThread) => {
{ return ( -
+
{intl.formatMessage(messages.body)}
diff --git a/src/features/ui/components/image-loader.tsx b/src/features/ui/components/image-loader.tsx index 6f2156ab1..6e38db38e 100644 --- a/src/features/ui/components/image-loader.tsx +++ b/src/features/ui/components/image-loader.tsx @@ -135,16 +135,11 @@ class ImageLoader extends React.PureComponent { const { alt, src, width, height, onClick } = this.props; const { loading } = this.state; - const className = clsx('image-loader', { - 'image-loader--loading': loading, - 'image-loader--amorphous': !this.hasSize(), - }); - return ( -
+
{loading ? ( = ({ status, actions, onClick, onClose }) => { const renderAction = (action: MenuItem | null, i: number) => { if (action === null) { - return
  • ; + return
  • ; } - const { icon = null, text, meta = null, active = false, href = '#', destructive } = action; + const { icon = null, text, meta = null, href = '#', destructive } = action; const Comp = href === '#' ? 'button' : 'a'; const compProps = href === '#' ? { onClick: onClick } : { href: href, rel: 'noopener' }; @@ -36,12 +36,15 @@ const ActionsModal: React.FC = ({ status, actions, onClick, onClo {...compProps} space={2.5} data-index={i} - className={clsx('w-full', { active, destructive })} + className={clsx( + 'flex w-full items-center px-4 py-3 text-left text-gray-700 no-underline hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', + { 'text-danger-600 dark:text-danger-400': destructive }, + )} element={Comp} > - {icon && } + {icon && }
    -
    {text}
    +
    {text}
    {meta}
    @@ -52,18 +55,21 @@ const ActionsModal: React.FC = ({ status, actions, onClick, onClo return ( {({ top }) => ( -
    +
    {status && ( - + )} -
      +
        {actions && actions.map(renderAction)} -
      • +
      • -
        • diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx index 69ae41acd..386402078 100644 --- a/src/features/ui/components/modals/reply-mentions-modal.tsx +++ b/src/features/ui/components/modals/reply-mentions-modal.tsx @@ -36,7 +36,7 @@ const ReplyMentionsModal: React.FC = ({ composeId, onClose closeIcon={require('@tabler/icons/outline/arrow-left.svg')} closePosition='left' > -
        +
        {mentions.map(accountId => )}
        diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx index bafa1081f..01552cdb8 100644 --- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx +++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx @@ -47,7 +47,7 @@ const SelectBookmarkFolderModal: React.FC = ({ statu } checked={selectedFolder === null} - value={''} + value='' />, ]; diff --git a/src/features/ui/components/modals/unauthorized-modal.tsx b/src/features/ui/components/modals/unauthorized-modal.tsx index 02c03fb9f..8d3ee2954 100644 --- a/src/features/ui/components/modals/unauthorized-modal.tsx +++ b/src/features/ui/components/modals/unauthorized-modal.tsx @@ -106,8 +106,8 @@ const UnauthorizedModal: React.FC = ({ action, onClose, acco secondaryAction={isOpen ? onRegister : undefined} secondaryText={isOpen ? : undefined} > -
        -
        +
        + = ({ action, onClose, acco onChange={onAccountChange} required /> - + -
        +
        diff --git a/src/features/ui/components/zoomable-image.tsx b/src/features/ui/components/zoomable-image.tsx index d826dc63e..571daae6a 100644 --- a/src/features/ui/components/zoomable-image.tsx +++ b/src/features/ui/components/zoomable-image.tsx @@ -124,11 +124,12 @@ class ZoomableImage extends React.PureComponent { return (
        {alt} = ({ return (
        = ({ )}