Refactor spacing of statuses

app/soapbox/components/quoted-status.tsx

@@ -1,15 +1,17 @@
 import classNames from 'clsx';
-import React, { useState } from 'react';
+import React, { MouseEventHandler, useState } from 'react';
-import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
+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';
@@ -37,7 +39,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
 
   const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
 
-  const handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  const handleExpandClick: MouseEventHandler<HTMLDivElement> = (e) => {
     if (!status) return;
     const account = status.account as AccountEntity;
 
@@ -58,57 +60,6 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ 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 (
-          <div className='reply-mentions'>
-            <FormattedMessage
-              id='reply_mentions.reply'
-              defaultMessage='Replying to {accounts}'
-              values={{
-                accounts: `@${account.username}`,
-              }}
-            />
-          </div>
-        );
-      } else {
-        return (
-          <div className='reply-mentions'>
-            <FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
-          </div>
-        );
-      }
-    }
-
-    const accounts = to.slice(0, 2).map(account => <>@{account.username}</>).toArray();
-
-    if (to.size > 2) {
-      accounts.push(
-        <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />,
-      );
-    }
-
-    return (
-      <div className='reply-mentions'>
-        <FormattedMessage
-          id='reply_mentions.reply'
-          defaultMessage='Replying to {accounts}'
-          values={{
-            accounts: <FormattedList type='conjunction' value={accounts} />,
-          }}
-        />
-      </div>
-    );
-  };
-
   if (!status) {
     return null;
   }
@@ -128,7 +79,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   return (
     <OutlineBox
       data-testid='quoted-status'
-      className={classNames('cursor-pointer relative', {
+      className={classNames('cursor-pointer', {
         'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
       })}
     >
@@ -145,16 +96,13 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
           withLinkToProfile={!compose}
         />
 
-        {renderReplyMentions()}
+        <StatusReplyMentions status={status} hoverable={false} />
 
-        <Text
+        <Stack className={classNames('relative', {
-          className='break-words status__content status__content--quote'
+          'min-h-[220px]': status.hidden,
-          size='sm'
+        })}
-          dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+        >
-        />
+          {(status.hidden) && (
-
-        <Stack>
-          {status.hidden && (
             <SensitiveContentOverlay
               status={status}
               visible={showMedia}
@@ -162,12 +110,21 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
             />
           )}
 
-          <StatusMedia
+          <Stack space={4}>
-            status={status}
+            <StatusContent
-            muted={compose}
+              status={status}
-            showMedia={showMedia}
+              collapsable
-            onToggleVisibility={handleToggleMediaVisibility}
+            />
-          />
+
+            {(status.media_attachments.size > 0) && (
+              <StatusMedia
+                status={status}
+                muted={compose}
+                showMedia={showMedia}
+                onToggleVisibility={handleToggleMediaVisibility}
+              />
+            )}
+          </Stack>
         </Stack>
       </Stack>
     </OutlineBox>

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 */

app/soapbox/components/status.tsx

@@ -65,7 +65,6 @@ const Status: React.FC<IStatus> = (props) => {
     hidden,
     featured,
     unread,
-    group,
     hideActionBar,
     variant = 'rounded',
     withDismiss,
@@ -349,6 +348,8 @@ const Status: React.FC<IStatus> = (props) => {
           </div>
 
           <div className='status__content-wrapper'>
+            <StatusReplyMentions status={actualStatus} hoverable={hoverable} />
+
             <Stack
               className={
                 classNames('relative', {
@@ -364,32 +365,27 @@ const Status: React.FC<IStatus> = (props) => {
                 />
               )}
 
-              {!group && actualStatus.group && (
+              <Stack space={4}>
-                <div className='status__meta'>
+                <StatusContent
-                  Posted in <NavLink to={`/groups/${actualStatus.getIn(['group', 'id'])}`}>{String(actualStatus.getIn(['group', 'title']))}</NavLink>
+                  status={actualStatus}
-                </div>
+                  onClick={handleClick}
-              )}
+                  collapsable
+                />
 
-              <StatusReplyMentions
+                {(quote || actualStatus.media_attachments.size > 0) && (
-                status={actualStatus}
+                  <Stack space={4}>
-                hoverable={hoverable}
+                    <StatusMedia
-              />
+                      status={actualStatus}
+                      muted={muted}
+                      onClick={handleClick}
+                      showMedia={showMedia}
+                      onToggleVisibility={handleToggleMediaVisibility}
+                    />
 
-              <StatusContent
+                    {quote}
-                status={actualStatus}
+                  </Stack>
-                onClick={handleClick}
+                )}
-                collapsable
+              </Stack>
-              />
-
-              <StatusMedia
-                status={actualStatus}
-                muted={muted}
-                onClick={handleClick}
-                showMedia={showMedia}
-                onToggleVisibility={handleToggleMediaVisibility}
-              />
-
-              {quote}
             </Stack>
 
             {!hideActionBar && (

app/soapbox/features/status/components/detailed-status.tsx

@@ -100,15 +100,21 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             />
           )}
 
-          <StatusContent status={actualStatus} />
+          <Stack space={4}>
+            <StatusContent status={actualStatus} />
 
-          <StatusMedia
+            {(quote || actualStatus.media_attachments.size > 0) && (
-            status={actualStatus}
+              <Stack space={4}>
-            showMedia={showMedia}
+                <StatusMedia
-            onToggleVisibility={onToggleMediaVisibility}
+                  status={actualStatus}
-          />
+                  showMedia={showMedia}
+                  onToggleVisibility={onToggleMediaVisibility}
+                />
 
-          {quote}
+                {quote}
+              </Stack>
+            )}
+          </Stack>
         </Stack>
 
         <HStack justifyContent='between' alignItems='center' className='py-2' wrap>

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;

app/styles/components/reply-mentions.scss

@@ -10,7 +10,6 @@
 .detailed-status {
   .reply-mentions {
     display: block;
-    margin: 4px 0 0 0;
 
     span {
       cursor: pointer;

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 {

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;