Improve Pending Status design

app/soapbox/components/account.tsx

@@ -5,7 +5,7 @@ import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import ActionButton from 'soapbox/features/ui/components/action_button';
 import { useAppSelector, useOnScreen } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
+import { getAcct, getDomain } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
 import RelativeTimestamp from './relative_timestamp';
@@ -128,6 +128,9 @@ const Account = ({
 
   const LinkEl: any = showProfileHoverCard ? Link : 'div';
 
+  const favicon = account.pleroma.get('favicon');
+  const domain = getDomain(account);
+
   return (
     <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
@@ -171,6 +174,12 @@ const Account = ({
             <HStack alignItems='center' space={1} style={style}>
               <Text theme='muted' size='sm' truncate>@{username}</Text>
 
+              {favicon && (
+                <Link to={`/timeline/${domain}`} className='w-4 h-4'>
+                  <img src={favicon} alt='' title={domain} className='w-full max-h-full' />
+                </Link>
+              )}
+
               {(timestamp) ? (
                 <>
                   <Text tag='span' theme='muted' size='sm'>&middot;</Text>

app/soapbox/components/status_list.js

@@ -134,19 +134,15 @@ export default class StatusList extends ImmutablePureComponent {
     const idempotencyKey = statusId.replace(/^末pending-/, '');
 
     return (
-      <div className='material-status' key={statusId}>
+      <PendingStatus
-        <div className='material-status__status focusable'>
+        key={statusId}
-          <PendingStatus
+        idempotencyKey={idempotencyKey}
-            key={statusId}
+        onMoveUp={this.handleMoveUp}
-            idempotencyKey={idempotencyKey}
+        onMoveDown={this.handleMoveDown}
-            onMoveUp={this.handleMoveUp}
+        contextType={timelineId}
-            onMoveDown={this.handleMoveDown}
+        group={group}
-            contextType={timelineId}
+        withGroupAdmin={withGroupAdmin}
-            group={group}
+      />
-            withGroupAdmin={withGroupAdmin}
-          />
-        </div>
-      </div>
     );
   }
 

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

@@ -3,11 +3,9 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage, injectIntl, WrappedComponentProps as IntlProps } from 'react-intl';
 import { FormattedDate } from 'react-intl';
-import { Link } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
-import { getDomain } from 'soapbox/utils/accounts';
 
 import MediaGallery from '../../../components/media_gallery';
 import StatusContent from '../../../components/status_content';
@@ -110,9 +108,6 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
 
     const outerStyle: React.CSSProperties = { boxSizing: 'border-box' };
     const { compact } = this.props;
-    const favicon = account.getIn(['pleroma', 'favicon']);
-    const domain = getDomain(account);
-
 
     let media = null;
     let statusTypeIcon = null;
@@ -244,14 +239,6 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
             <StatusInteractionBar status={status} />
 
             <div className='detailed-status__timestamp'>
-              {typeof favicon === 'string' && (
-                <div className='status__favicon'>
-                  <Link to={`/timeline/${domain}`}>
-                    <img src={favicon} alt='' title={domain} />
-                  </Link>
-                </div>
-              )}
-
               {statusTypeIcon}
 
               <a href={status.url} target='_blank' rel='noopener' className='hover:underline'>

app/soapbox/features/ui/components/pending_status.js

@@ -3,17 +3,14 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
-import { Link, NavLink } from 'react-router-dom';
 
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display_name';
-import RelativeTimestamp from 'soapbox/components/relative_timestamp';
 import StatusContent from 'soapbox/components/status_content';
 import StatusReplyMentions from 'soapbox/components/status_reply_mentions';
+import { HStack } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
 import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder_media_gallery';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
-import { getDomain } from 'soapbox/utils/accounts';
 
 import { buildStatus } from '../util/pending_status_builder';
 
@@ -56,50 +53,36 @@ class PendingStatus extends ImmutablePureComponent {
     if (!status) return null;
     if (!status.get('account')) return null;
 
-    const favicon = status.getIn(['account', 'pleroma', 'favicon']);
-    const domain = getDomain(status.get('account'));
-
     return (
-      <div className={classNames('pending-status', className)}>
+      <div className={classNames('opacity-50', className)}>
-        <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id') })} tabIndex={this.props.muted ? null : 0}>
+        <div className={classNames('status', { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}>
-          <div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}>
+          <div className={classNames('status__wrapper', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id') })} tabIndex={this.props.muted ? null : 0}>
-            <div className='status__expand' role='presentation' />
+            <div className='mb-4'>
-            <div className='status__info'>
+              <HStack justifyContent='between' alignItems='start'>
-              <span className='status__relative-time'>
+                <AccountContainer
-                <RelativeTimestamp timestamp={status.get('created_at')} />
+                  key={String(status.getIn(['account', 'id']))}
-              </span>
+                  id={String(status.getIn(['account', 'id']))}
-
+                  timestamp={status.created_at}
-              {favicon &&
+                  timestampUrl={status.get('created_at')}
-                <div className='status__favicon'>
+                  hideActions
-                  <Link to={`/timeline/${domain}`}>
+                />
-                    <img src={favicon} alt='' title={domain} />
+              </HStack>
-                  </Link>
-                </div>}
-
-              <div className='status__profile'>
-                <div className='status__avatar'>
-                  <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
-                    <Avatar account={status.get('account')} size={48} />
-                  </NavLink>
-                </div>
-                <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
-                  <DisplayName account={status.get('account')} />
-                </NavLink>
-              </div>
             </div>
 
-            <StatusReplyMentions status={status} />
+            <div className='status__content-wrapper'>
+              <StatusReplyMentions status={status} />
 
-            <StatusContent
+              <StatusContent
-              status={status}
+                status={status}
-              expanded
+                expanded
-              collapsable
+                collapsable
-            />
+              />
 
-            {this.renderMedia()}
+              {this.renderMedia()}
-            {status.get('poll') && <PollPreview poll={status.get('poll')} />}
+              {status.get('poll') && <PollPreview poll={status.get('poll')} />}
 
-            {status.get('quote') && <QuotedStatus statusId={status.get('quote')} />}
+              {status.get('quote') && <QuotedStatus statusId={status.get('quote')} />}
+            </div>
 
             {/* TODO */}
             {/* <PlaceholderActionBar /> */}

app/styles/components/detailed-status.scss

@@ -71,8 +71,7 @@
     }
   }
 
-  .svg-icon,
+  .svg-icon {
-  .status__favicon {
     margin-right: 5px;
   }
 }

app/styles/components/status.scss

@@ -656,7 +656,3 @@ a.status-card {
     bottom: 0;
   }
 }
-
-.pending-status {
-  opacity: 0.5;
-}