diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx index d7ecfaf05..9755e7120 100644 --- a/app/soapbox/components/quoted-status.tsx +++ b/app/soapbox/components/quoted-status.tsx @@ -1,15 +1,18 @@ import classNames from 'clsx'; -import React, { useState } from 'react'; -import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl'; +import React, { MouseEventHandler, useState } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import { useHistory } from 'react-router-dom'; import StatusMedia from 'soapbox/components/status-media'; -import { Stack, Text } from 'soapbox/components/ui'; +import { Stack } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account_container'; import { useSettings } from 'soapbox/hooks'; import { defaultMediaVisibility } from 'soapbox/utils/status'; import OutlineBox from './outline-box'; +import StatusReplyMentions from './status-reply-mentions'; +import StatusContent from './status_content'; +import SensitiveContentOverlay from './statuses/sensitive-content-overlay'; import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities'; @@ -36,7 +39,7 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => const [showMedia, setShowMedia] = useState(defaultMediaVisibility(status, displayMedia)); - const handleExpandClick = (e: React.MouseEvent) => { + const handleExpandClick: MouseEventHandler = (e) => { if (!status) return; const account = status.account as AccountEntity; @@ -57,57 +60,6 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => setShowMedia(!showMedia); }; - const renderReplyMentions = () => { - if (!status?.in_reply_to_id) { - return null; - } - - const account = status.account as AccountEntity; - const to = status.mentions || []; - - if (to.size === 0) { - if (status.in_reply_to_account_id === account.id) { - return ( -
- -
- ); - } else { - return ( -
- -
- ); - } - } - - const accounts = to.slice(0, 2).map(account => <>@{account.username}).toArray(); - - if (to.size > 2) { - accounts.push( - , - ); - } - - return ( -
- , - }} - /> -
- ); - }; - if (!status) { return null; } @@ -127,7 +79,7 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => return ( @@ -144,20 +96,36 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => withLinkToProfile={!compose} /> - {renderReplyMentions()} + + + + {(status.hidden) && ( + + )} - + + - + {(status.media_attachments.size > 0) && ( + + )} + + ); diff --git a/app/soapbox/components/status-content.css b/app/soapbox/components/status-content.css index 7c1317d16..997df73f4 100644 --- a/app/soapbox/components/status-content.css +++ b/app/soapbox/components/status-content.css @@ -1,9 +1,9 @@ .status-content p { - @apply mb-5 whitespace-pre-wrap; + @apply mb-4 whitespace-pre-wrap; } .status-content p:last-child { - @apply mb-0.5; + @apply mb-0; } .status-content a { @@ -20,7 +20,7 @@ .status-content ul, .status-content ol { - @apply pl-10 mb-5; + @apply pl-10 mb-4; } .status-content ul { @@ -32,7 +32,7 @@ } .status-content blockquote { - @apply py-1 pl-4 mb-5 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400; + @apply py-1 pl-4 mb-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400; } .status-content code { @@ -51,7 +51,7 @@ /* Code block */ .status-content pre { - @apply py-2 px-3 mb-5 leading-6 overflow-x-auto rounded-md break-all; + @apply py-2 px-3 mb-4 leading-6 overflow-x-auto rounded-md break-all; } .status-content pre:last-child { @@ -60,7 +60,7 @@ /* Markdown images */ .status-content img:not(.emojione):not([width][height]) { - @apply w-full h-72 object-contain rounded-lg overflow-hidden my-5 block; + @apply w-full h-72 object-contain rounded-lg overflow-hidden my-4 block; } /* User setting to underline links */ diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 3e30a3032..02eca62fe 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -65,7 +65,6 @@ const Status: React.FC = (props) => { hidden, featured, unread, - group, hideActionBar, variant = 'rounded', withDismiss, @@ -296,8 +295,8 @@ const Status: React.FC = (props) => { const accountAction = props.accountAction || reblogElement; - const inReview = status.visibility === 'self'; - const isSensitive = status.hidden; + const inReview = actualStatus.visibility === 'self'; + const isSensitive = actualStatus.hidden; return ( @@ -349,6 +348,8 @@ const Status: React.FC = (props) => {
+ + = (props) => { }) } > - {(inReview || isSensitive) ? ( + {(inReview || isSensitive) && ( - ) : null} - - {!group && actualStatus.group && ( -
- Posted in {String(actualStatus.getIn(['group', 'title']))} -
)} - - - - - - - {quote} + + + + {(quote || actualStatus.media_attachments.size > 0) && ( + + + + {quote} + + )} +
{!hideActionBar && ( diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx index 4896d1a91..28c2d020c 100644 --- a/app/soapbox/features/status/components/detailed-status.tsx +++ b/app/soapbox/features/status/components/detailed-status.tsx @@ -29,7 +29,6 @@ interface IDetailedStatus { const DetailedStatus: React.FC = ({ status, - onToggleHidden, onOpenCompareHistoryModal, onToggleMediaVisibility, showMedia, @@ -93,23 +92,29 @@ const DetailedStatus: React.FC = ({ }) } > - {(isUnderReview || isSensitive) ? ( + {(isUnderReview || isSensitive) && ( - ) : null} - - - - - - {quote} + )} + + + + + {(quote || actualStatus.media_attachments.size > 0) && ( + + + + {quote} + + )} + diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index 311af3b64..e9bb14425 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -1,6 +1,5 @@ .media-gallery { box-sizing: border-box; - margin-top: 8px; overflow: hidden; border-radius: 10px; position: relative; diff --git a/app/styles/components/reply-mentions.scss b/app/styles/components/reply-mentions.scss index 39b70a585..e767e5a03 100644 --- a/app/styles/components/reply-mentions.scss +++ b/app/styles/components/reply-mentions.scss @@ -10,7 +10,6 @@ .detailed-status { .reply-mentions { display: block; - margin: 4px 0 0 0; span { cursor: pointer; diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index a8c8e4561..4a2c57d3e 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -14,11 +14,6 @@ opacity: 1; animation: fade 150ms linear; - .video-player, - .audio-player { - margin-top: 8px; - } - &.light { .display-name { strong { diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss index ada5b26f5..b4e87e9b6 100644 --- a/app/styles/components/video-player.scss +++ b/app/styles/components/video-player.scss @@ -7,7 +7,6 @@ flex-direction: column; height: 100%; justify-content: center; - margin-top: 8px; position: relative; text-align: center; z-index: 100;