EmbeddedStatus: add SiteLogo

app/soapbox/components/status.tsx

@@ -49,6 +49,7 @@ export interface IStatus {
   hoverable?: boolean,
   variant?: 'default' | 'rounded',
   withDismiss?: boolean,
+  accountAction?: React.ReactElement,
 }
 
 const Status: React.FC<IStatus> = (props) => {
@@ -68,6 +69,7 @@ const Status: React.FC<IStatus> = (props) => {
     variant = 'rounded',
     withDismiss,
   } = props;
+
   const intl = useIntl();
   const history = useHistory();
   const dispatch = useAppDispatch();
@@ -295,6 +297,8 @@ const Status: React.FC<IStatus> = (props) => {
 
   const statusUrl = `/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`;
 
+  const accountAction = props.accountAction || reblogElement;
+
   return (
     <HotKeys handlers={handlers} data-testid='status'>
       <div
@@ -335,8 +339,8 @@ const Status: React.FC<IStatus> = (props) => {
               id={String(actualStatus.getIn(['account', 'id']))}
               timestamp={actualStatus.created_at}
               timestampUrl={statusUrl}
-              action={reblogElement}
-              hideActions={!reblogElement}
+              action={accountAction}
+              hideActions={!accountAction}
               showEdit={!!actualStatus.edited_at}
               showProfileHoverCard={hoverable}
               withLinkToProfile={hoverable}

app/soapbox/features/embedded-status/index.tsx

@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import { fetchStatus } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing_indicator';
+import SiteLogo from 'soapbox/components/site-logo';
 import Status from 'soapbox/components/status';
 import { Spinner } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
@@ -43,11 +44,17 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
     }, '*');
   }, [status, loading]);
 
+  const logo = (
+    <div className='flex align-middle justify-center ml-4'>
+      <SiteLogo className='h-10' />
+    </div>
+  );
+
   const renderInner = () => {
     if (loading) {
       return <Spinner />;
     } else if (status) {
-      return <Status status={status} variant='default' />;
+      return <Status status={status} accountAction={logo} variant='default' />;
     } else {
       return <MissingIndicator nested />;
     }