diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 24131159d..8456a46a4 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -2,7 +2,7 @@ import clsx from 'clsx'; import React, { useEffect, useRef, useState } from 'react'; import { HotKeys } from 'react-hotkeys'; import { useIntl, FormattedMessage, defineMessages } from 'react-intl'; -import { useHistory } from 'react-router-dom'; +import { Link, useHistory } from 'react-router-dom'; import { mentionCompose, replyCompose } from 'soapbox/actions/compose'; import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions'; @@ -211,11 +211,50 @@ const Status: React.FC = (props) => { }; const renderStatusInfo = () => { - if (isReblog) { + if (isReblog && showGroup && group) { + return ( + } + text={ + + + + + + ), + group: ( + + + + ), + }} + /> + } + /> + ); + } else if (isReblog) { return ( } text={ = (props) => { defaultMessage='{name} reposted' values={{ name: ( - - - + + + + + ), }} /> @@ -243,9 +284,7 @@ const Status: React.FC = (props) => { avatarSize={avatarSize} icon={} text={ - - - + } /> ); @@ -253,18 +292,23 @@ const Status: React.FC = (props) => { return ( } text={ - - - ) }} - /> - + + + + + + + + ), + }} + /> } /> ); diff --git a/app/soapbox/components/statuses/status-info.tsx b/app/soapbox/components/statuses/status-info.tsx index 322a911bc..50fad86b3 100644 --- a/app/soapbox/components/statuses/status-info.tsx +++ b/app/soapbox/components/statuses/status-info.tsx @@ -1,37 +1,44 @@ import React from 'react'; -import { Link } from 'react-router-dom'; + +import { HStack, Text } from '../ui'; interface IStatusInfo { avatarSize: number - to?: string icon: React.ReactNode text: React.ReactNode } const StatusInfo = (props: IStatusInfo) => { - const { avatarSize, to, icon, text } = props; + const { avatarSize, icon, text } = props; - const onClick = (event: React.MouseEvent) => { + const onClick = (event: React.MouseEvent) => { event.stopPropagation(); }; - const Container = to ? Link : 'div'; - const containerProps: any = to ? { onClick, to } : {}; - return ( - -
- {icon} -
+
+ {icon} +
- {text} -
+ + {text} + + + ); }; diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx index 05e435d4e..2959d285d 100644 --- a/app/soapbox/features/status/components/detailed-status.tsx +++ b/app/soapbox/features/status/components/detailed-status.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { FormattedDate, FormattedMessage, useIntl } from 'react-intl'; +import { Link } from 'react-router-dom'; import Account from 'soapbox/components/account'; import StatusContent from 'soapbox/components/status-content'; @@ -56,22 +57,28 @@ const DetailedStatus: React.FC = ({
} + /> + } text={ - - - ) }} - /> - + + + + + + + + ), + }} + /> } />