Change layout of posts in web UI (#19423)

app/javascript/mastodon/components/account.js

@@ -136,7 +136,7 @@ class Account extends ImmutablePureComponent {
       <div className='account'>
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+            <div className='account__avatar-wrapper'><Avatar account={account} size={46} /></div>
             {mute_expires_at}
             <DisplayName account={account} />
           </Permalink>

app/javascript/mastodon/components/status.js

@@ -386,6 +386,15 @@ class Status extends ImmutablePureComponent {
 
       account = status.get('account');
       status  = status.get('reblog');
+    } else if (showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
+      const display_name_html = { __html: status.getIn(['account', 'display_name_html']) };
+
+      prepend = (
+        <div className='status__prepend'>
+          <div className='status__prepend-icon-wrapper'><Icon id='reply' className='status__prepend-icon' fixedWidth /></div>
+          <FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
+        </div>
+      );
     }
 
     if (pictureInPicture.get('inUse')) {
@@ -481,7 +490,7 @@ class Status extends ImmutablePureComponent {
     }
 
     if (account === undefined || account === null) {
-      statusAvatar = <Avatar account={status.get('account')} size={48} />;
+      statusAvatar = <Avatar account={status.get('account')} size={46} />;
     } else {
       statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
     }
@@ -501,8 +510,6 @@ class Status extends ImmutablePureComponent {
           {prepend}
 
           <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='status__expand' onClick={this.handleClick} role='presentation' />
-
             <div className='status__info'>
               <a onClick={this.handleClick} href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
                 <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
@@ -522,7 +529,6 @@ class Status extends ImmutablePureComponent {
               status={status}
               onClick={this.handleClick}
               expanded={!status.get('hidden')}
-              showThread={showThread}
               onExpandedToggle={this.handleExpandedToggle}
               onTranslate={this.handleTranslate}
               collapsable

app/javascript/mastodon/components/status_action_bar.js

@@ -246,8 +246,9 @@ class StatusActionBar extends ImmutablePureComponent {
 
   render () {
     const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
+    const { signedIn } = this.context.identity;
 
-    const anonymousAccess    = !me;
+    const anonymousAccess    = !signedIn;
     const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
     const pinnableStatus     = ['public', 'unlisted', 'private'].includes(status.get('visibility'));
     const mutingConversation = status.get('muted');
@@ -350,24 +351,25 @@ class StatusActionBar extends ImmutablePureComponent {
     }
 
     const shareButton = ('share' in navigator) && publicStatus && (
-      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
+      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
     );
 
     const filterButton = this.props.onFilter && (
-      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
+      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
     );
 
     return (
       <div className='status__action-bar'>
-        <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
+        <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
-        <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
-        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 
         {shareButton}
 
         {filterButton}
 
-        <div className='status__action-bar-dropdown'>
+        <div className='status__action-bar__dropdown'>
           <DropdownMenuContainer
             scrollKey={scrollKey}
             disabled={anonymousAccess}

app/javascript/mastodon/components/status_content.js

@@ -58,7 +58,6 @@ class StatusContent extends React.PureComponent {
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
     expanded: PropTypes.bool,
-    showThread: PropTypes.bool,
     onExpandedToggle: PropTypes.func,
     onTranslate: PropTypes.func,
     onClick: PropTypes.func,
@@ -214,7 +213,6 @@ class StatusContent extends React.PureComponent {
 
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
     const renderReadMore = this.props.onClick && status.get('collapsed');
-    const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
     const renderTranslate = translationEnabled && this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && status.get('language') !== null && intl.locale !== status.get('language');
 
     const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') };
@@ -226,12 +224,6 @@ class StatusContent extends React.PureComponent {
       'status__content--collapsed': renderReadMore,
     });
 
-    const showThreadButton = renderViewThread && (
-      <button className='status__content__read-more-button' onClick={this.props.onClick}>
-        <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
-      </button>
-    );
-
     const readMoreButton = renderReadMore && (
       <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
         <FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth />
@@ -275,7 +267,6 @@ class StatusContent extends React.PureComponent {
 
           {!hidden && poll}
           {!hidden && translateButton}
-          {showThreadButton}
         </div>
       );
     } else if (this.props.onClick) {
@@ -286,7 +277,6 @@ class StatusContent extends React.PureComponent {
 
             {poll}
             {translateButton}
-            {showThreadButton}
           </div>
 
           {readMoreButton}
@@ -299,7 +289,6 @@ class StatusContent extends React.PureComponent {
 
           {poll}
           {translateButton}
-          {showThreadButton}
         </div>
       );
     }

app/javascript/mastodon/features/account/components/featured_tags.js

@@ -41,7 +41,7 @@ class FeaturedTags extends ImmutablePureComponent {
             name={featuredTag.get('name')}
             href={featuredTag.get('url')}
             to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`}
-            uses={featuredTag.get('statuses_count')}
+            uses={featuredTag.get('statuses_count') * 1}
             withGraph={false}
             description={((featuredTag.get('statuses_count') * 1) > 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)}
           />

app/javascript/mastodon/features/account/components/header.js

@@ -326,25 +326,26 @@ class Header extends ImmutablePureComponent {
           {!(suspended || hidden) && (
             <div className='account__header__extra'>
               <div className='account__header__bio'>
-                {fields.size > 0 && (
-                  <div className='account__header__fields'>
-                    {fields.map((pair, i) => (
-                      <dl key={i}>
-                        <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
-
-                        <dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
-                          {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
-                        </dd>
-                      </dl>
-                    ))}
-                  </div>
-                )}
-
                 {(account.get('id') !== me && signedIn) && <AccountNoteContainer account={account} />}
 
                 {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content translate' dangerouslySetInnerHTML={content} />}
 
-                <div className='account__header__joined'><FormattedMessage id='account.joined' defaultMessage='Joined {date}' values={{ date: intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' }) }} /></div>
+                <div className='account__header__fields'>
+                  <dl>
+                    <dt><FormattedMessage id='account.joined_short' defaultMessage='Joined' /></dt>
+                    <dd>{intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' })}</dd>
+                  </dl>
+
+                  {fields.map((pair, i) => (
+                    <dl key={i}>
+                      <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
+
+                      <dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
+                        {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
+                      </dd>
+                    </dl>
+                  ))}
+                </div>
               </div>
 
               <div className='account__header__extra__links'>

app/javascript/mastodon/features/compose/components/action_bar.js

@@ -56,7 +56,7 @@ class ActionBar extends React.PureComponent {
     return (
       <div className='compose__action-bar'>
         <div className='compose__action-bar-dropdown'>
-          <DropdownMenuContainer items={menu} icon='chevron-down' size={16} direction='right' />
+          <DropdownMenuContainer items={menu} icon='ellipsis-v' size={18} direction='right' />
         </div>
       </div>
     );

app/javascript/mastodon/features/compose/components/navigation_bar.js

@@ -21,7 +21,7 @@ export default class NavigationBar extends ImmutablePureComponent {
       <div className='navigation-bar'>
         <Permalink href={this.props.account.get('url')} to={`/@${this.props.account.get('acct')}`}>
           <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
-          <Avatar account={this.props.account} size={48} />
+          <Avatar account={this.props.account} size={46} />
         </Permalink>
 
         <div className='navigation-bar__profile'>

app/javascript/mastodon/features/status/components/action_bar.js

@@ -287,9 +287,10 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
-        {shareButton}
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
+        {shareButton}
+
         <div className='detailed-status__action-bar-dropdown'>
           <DropdownMenuContainer size={18} icon='ellipsis-h' disabled={!signedIn} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
         </div>

app/javascript/mastodon/features/status/components/detailed_status.js

@@ -262,7 +262,7 @@ class DetailedStatus extends ImmutablePureComponent {
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })}>
           <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
-            <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
+            <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div>
             <DisplayName account={status.get('account')} localDomain={this.props.domain} />
           </a>
 

app/javascript/mastodon/features/ui/components/actions_modal.js

@@ -2,10 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import StatusContent from '../../../components/status_content';
-import Avatar from '../../../components/avatar';
-import RelativeTimestamp from '../../../components/relative_timestamp';
-import DisplayName from '../../../components/display_name';
 import IconButton from '../../../components/icon_button';
 import classNames from 'classnames';
 
@@ -38,32 +34,8 @@ export default class ActionsModal extends ImmutablePureComponent {
   }
 
   render () {
-    const status = this.props.status && (
-      <div className='status light'>
-        <div className='boost-modal__status-header'>
-          <div className='boost-modal__status-time'>
-            <a href={this.props.status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
-              <RelativeTimestamp timestamp={this.props.status.get('created_at')} />
-            </a>
-          </div>
-
-          <a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'>
-            <div className='status__avatar'>
-              <Avatar account={this.props.status.get('account')} size={48} />
-            </div>
-
-            <DisplayName account={this.props.status.get('account')} />
-          </a>
-        </div>
-
-        <StatusContent status={this.props.status} />
-      </div>
-    );
-
     return (
       <div className='modal-root__modal actions-modal'>
-        {status}
-
         <ul className={classNames({ 'with-status': !!status })}>
           {this.props.actions.map(this.renderAction)}
         </ul>

app/javascript/mastodon/features/ui/components/boost_modal.js

@@ -97,12 +97,11 @@ class BoostModal extends ImmutablePureComponent {
       <div className='modal-root__modal boost-modal'>
         <div className='boost-modal__container'>
           <div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
-            <div className='boost-modal__status-header'>
+            <div className='status__info'>
-              <div className='boost-modal__status-time'>
+              <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
-                <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
+                <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
-                  <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
+                <RelativeTimestamp timestamp={status.get('created_at')} />
-                  <RelativeTimestamp timestamp={status.get('created_at')} /></a>
+              </a>
-              </div>
 
               <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
                 <div className='status__avatar'>

app/javascript/styles/mastodon/components.scss

@@ -367,7 +367,7 @@
 }
 
 .compose-form {
-  padding: 10px;
+  padding: 15px;
 
   &__sensitive-button {
     padding: 10px;
@@ -714,7 +714,7 @@
 
     .compose-form__publish-button-wrapper {
       overflow: hidden;
-      padding-top: 10px;
+      padding-top: 15px;
     }
   }
 }
@@ -808,7 +808,7 @@
 .reply-indicator__content {
   position: relative;
   font-size: 15px;
-  line-height: 20px;
+  line-height: 22px;
   word-wrap: break-word;
   font-weight: 400;
   overflow: hidden;
@@ -955,12 +955,12 @@
 .status__content__read-more-button {
   display: block;
   font-size: 15px;
-  line-height: 20px;
+  line-height: 22px;
   color: $highlight-text-color;
   border: 0;
   background: transparent;
   padding: 0;
-  padding-top: 8px;
+  padding-top: 16px;
   text-decoration: none;
 
   &:hover,
@@ -972,7 +972,7 @@
 .translate-button {
   margin-top: 16px;
   font-size: 15px;
-  line-height: 20px;
+  line-height: 22px;
   display: flex;
   justify-content: space-between;
   color: $dark-text-color;
@@ -1022,11 +1022,6 @@
   }
 }
 
-.status__prepend-icon-wrapper {
-  left: -26px;
-  position: absolute;
-}
-
 .focusable {
   &:focus {
     outline: 0;
@@ -1040,19 +1035,11 @@
 }
 
 .status {
-  padding: 8px 10px;
+  padding: 16px;
-  padding-left: 68px;
-  position: relative;
   min-height: 54px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: auto;
 
-  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
-    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
-    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
-    padding-right: 26px; // 10px + 16px
-  }
-
   @keyframes fade {
     0% { opacity: 0; }
     100% { opacity: 1; }
@@ -1061,9 +1048,11 @@
   opacity: 1;
   animation: fade 150ms linear;
 
+  .media-gallery,
   .video-player,
-  .audio-player {
+  .audio-player,
-    margin-top: 8px;
+  .attachment-list {
+    margin-top: 16px;
   }
 
   &.light {
@@ -1091,7 +1080,7 @@
         color: $highlight-text-color;
       }
 
-      a.status__content__spoiler-link {
+      &__spoiler-link {
         color: $primary-text-color;
         background: $ui-primary-color;
 
@@ -1104,7 +1093,16 @@
   }
 }
 
-.status__relative-time,
+.status__relative-time {
+  display: block;
+  font-size: 15px;
+  line-height: 22px;
+  height: 40px;
+  order: 2;
+  flex: 0 0 auto;
+  color: $dark-text-color;
+}
+
 .notification__relative_time {
   color: $dark-text-color;
   float: right;
@@ -1121,13 +1119,36 @@
 }
 
 .status__info .status__display-name {
-  display: block;
   max-width: 100%;
-  padding-right: 25px;
+  display: flex;
+  font-size: 15px;
+  line-height: 22px;
+  align-items: center;
+  gap: 10px;
+  overflow: hidden;
+
+  .display-name {
+    bdi {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__account {
+      white-space: nowrap;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 }
 
 .status__info {
   font-size: 15px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
 }
 
 .status-check-box__status {
@@ -1166,12 +1187,14 @@
 }
 
 .status__prepend {
-  margin-left: 68px;
+  padding: 16px;
+  padding-bottom: 0;
+  display: flex;
+  gap: 10px;
+  font-size: 15px;
+  line-height: 22px;
+  font-weight: 500;
   color: $dark-text-color;
-  padding: 8px 0;
-  padding-bottom: 2px;
-  font-size: 14px;
-  position: relative;
 
   .status__display-name strong {
     color: $dark-text-color;
@@ -1185,22 +1208,11 @@
 }
 
 .status__action-bar {
-  align-items: center;
   display: flex;
-  margin-top: 8px;
+  justify-content: space-between;
-}
+  align-items: center;
-
+  gap: 18px;
-.status__action-bar-button {
+  margin-top: 16px;
-  margin-right: 18px;
-
-  &.icon-button--with-counter {
-    margin-right: 14px;
-  }
-}
-
-.status__action-bar-dropdown {
-  height: 23.15px;
-  width: 23.15px;
 }
 
 .detailed-status__action-bar-dropdown {
@@ -1213,7 +1225,7 @@
 
 .detailed-status {
   background: lighten($ui-base-color, 4%);
-  padding: 14px 10px;
+  padding: 16px;
 
   &--flex {
     display: flex;
@@ -1243,14 +1255,15 @@
     }
   }
 
+  .media-gallery,
   .video-player,
   .audio-player {
-    margin-top: 8px;
+    margin-top: 16px;
   }
 }
 
 .detailed-status__meta {
-  margin-top: 15px;
+  margin-top: 16px;
   color: $dark-text-color;
   font-size: 14px;
   line-height: 18px;
@@ -1312,7 +1325,7 @@
 }
 
 .account {
-  padding: 10px;
+  padding: 16px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
 
   &.compact {
@@ -1326,7 +1339,9 @@
 
   .account__display-name {
     flex: 1 1 auto;
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 10px;
     color: $darker-text-color;
     overflow: hidden;
     text-decoration: none;
@@ -1359,12 +1374,7 @@
 
 .account__wrapper {
   display: flex;
-}
+  gap: 10px;
-
-.account__avatar-wrapper {
-  float: left;
-  margin-left: 12px;
-  margin-right: 12px;
 }
 
 .account__avatar {
@@ -1372,9 +1382,6 @@
 
   display: block;
   position: relative;
-  width: 36px;
-  height: 36px;
-  background-size: 36px 36px;
 
   &-inline {
     display: inline-block;
@@ -1414,7 +1421,7 @@ a .account__avatar {
 }
 
 .account__avatar-overlay {
-  @include avatar-size(48px);
+  @include avatar-size(46px);
 
   position: relative;
 
@@ -1615,10 +1622,13 @@ a.account__display-name {
 }
 
 .detailed-status__display-name {
-  color: $secondary-text-color;
+  color: $darker-text-color;
-  display: block;
+  display: flex;
-  line-height: 24px;
+  align-items: center;
-  margin-bottom: 15px;
+  gap: 10px;
+  font-size: 15px;
+  line-height: 22px;
+  margin-bottom: 16px;
   overflow: hidden;
 
   strong,
@@ -1629,31 +1639,13 @@ a.account__display-name {
   }
 
   strong {
-    font-size: 16px;
     color: $primary-text-color;
   }
 }
 
-.detailed-status__display-avatar {
-  float: left;
-  margin-right: 10px;
-}
-
 .status__avatar {
-  height: 48px;
+  width: 46px;
-  left: 10px;
+  height: 46px;
-  position: absolute;
-  top: 10px;
-  width: 48px;
-}
-
-.status__expand {
-  width: 68px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  cursor: pointer;
 }
 
 .muted {
@@ -1684,40 +1676,52 @@ a.account__display-name {
 }
 
 .notification__report {
-  padding: 8px 10px;
+  padding: 16px;
-  padding-left: 68px;
-  position: relative;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
-  min-height: 54px;
+  display: flex;
+  gap: 10px;
+
+  &__avatar {
+    flex: 0 0 auto;
+  }
 
   &__details {
+    flex: 1 1 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: $darker-text-color;
+    gap: 10px;
     font-size: 15px;
     line-height: 22px;
+    white-space: nowrap;
+    overflow: hidden;
+
+    & > div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
     strong {
       font-weight: 500;
     }
   }
 
-  &__avatar {
+  &__actions {
-    position: absolute;
+    flex: 0 0 auto;
-    left: 10px;
-    top: 10px;
   }
 }
 
 .notification__message {
-  margin: 0 10px 0 68px;
+  padding: 16px;
-  padding: 8px 0 0;
+  padding-bottom: 0;
   cursor: default;
   color: $darker-text-color;
   font-size: 15px;
   line-height: 22px;
-  position: relative;
+  font-weight: 500;
+  display: flex;
+  gap: 10px;
 
   .fa {
     color: $highlight-text-color;
@@ -1731,9 +1735,6 @@ a.account__display-name {
 }
 
 .notification__favourite-icon-wrapper {
-  left: -26px;
-  position: absolute;
-
   .star-icon {
     color: $gold-star;
   }
@@ -1767,15 +1768,10 @@ a.account__display-name {
   text-decoration: none;
 
   &:hover {
-    color: $primary-text-color;
     text-decoration: underline;
   }
 }
 
-.notification__relative_time {
-  float: right;
-}
-
 .display-name {
   display: block;
   max-width: 100%;
@@ -1788,10 +1784,6 @@ a.account__display-name {
   font-weight: 500;
 }
 
-.display-name__account {
-  font-size: 14px;
-}
-
 .status__relative-time,
 .detailed-status__datetime {
   &:hover {
@@ -1860,11 +1852,12 @@ a.account__display-name {
 }
 
 .navigation-bar {
-  padding: 10px;
+  padding: 15px;
   display: flex;
   align-items: center;
   flex-shrink: 0;
   cursor: default;
+  gap: 10px;
   color: $darker-text-color;
 
   strong {
@@ -1899,9 +1892,7 @@ a.account__display-name {
 
 .navigation-bar__profile {
   flex: 1 1 auto;
-  margin-left: 8px;
   line-height: 20px;
-  margin-top: -1px;
   overflow: hidden;
 }
 
@@ -2466,101 +2457,6 @@ $ui-header-height: 55px;
     padding: 10px 0;
     padding-top: 0;
   }
-
-  .detailed-status {
-    padding: 15px;
-
-    .media-gallery,
-    .video-player,
-    .audio-player {
-      margin-top: 15px;
-    }
-  }
-
-  .account__header__bar {
-    padding: 5px 10px;
-  }
-
-  .navigation-bar,
-  .compose-form {
-    padding: 15px;
-  }
-
-  .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
-    padding-top: 15px;
-  }
-
-  .notification__report {
-    padding: 15px 15px 15px (48px + 15px * 2);
-    min-height: 48px + 2px;
-
-    &__avatar {
-      left: 15px;
-      top: 17px;
-    }
-  }
-
-  .status {
-    padding: 15px 15px 15px (48px + 15px * 2);
-    min-height: 48px + 2px;
-
-    &__avatar {
-      left: 15px;
-      top: 17px;
-    }
-
-    &__content {
-      padding-top: 5px;
-    }
-
-    &__prepend {
-      margin-left: 48px + 15px * 2;
-      padding-top: 15px;
-    }
-
-    &__prepend-icon-wrapper {
-      left: -32px;
-    }
-
-    .media-gallery,
-    &__action-bar,
-    .video-player,
-    .audio-player {
-      margin-top: 10px;
-    }
-  }
-
-  .account {
-    padding: 15px 10px;
-
-    &__header__bio {
-      margin: 0 -10px;
-    }
-  }
-
-  .notification {
-    &__message {
-      margin-left: 48px + 15px * 2;
-      padding-top: 15px;
-    }
-
-    &__favourite-icon-wrapper {
-      left: -32px;
-    }
-
-    .status {
-      padding-top: 8px;
-    }
-
-    .account {
-      padding-top: 8px;
-    }
-
-    .account__avatar-wrapper {
-      margin-left: 17px;
-      margin-right: 15px;
-    }
-  }
 }
 
 @media screen and (min-width: $no-gap-breakpoint) {
@@ -2805,10 +2701,7 @@ $ui-header-height: 55px;
   }
 
   .navigation-bar {
-    padding-top: 20px;
-    padding-bottom: 20px;
     flex: 0 1 48px;
-    min-height: 20px;
   }
 
   .compose-form {
@@ -5303,24 +5196,6 @@ a.status-card.compact:hover {
   width: 480px;
   position: relative;
   flex-direction: column;
-
-  .status__display-name {
-    display: block;
-    max-width: 100%;
-    padding-right: 25px;
-  }
-
-  .status__avatar {
-    height: 28px;
-    left: 10px;
-    position: absolute;
-    top: 10px;
-    width: 48px;
-  }
-
-  .status__content__spoiler-link {
-    color: lighten($secondary-text-color, 8%);
-  }
 }
 
 .actions-modal {
@@ -5352,9 +5227,9 @@ a.status-card.compact:hover {
 .block-modal__action-bar {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   background: $ui-secondary-color;
-  padding: 10px;
+  padding: 15px;
-  line-height: 36px;
 
   & > div {
     flex: 1 1 auto;
@@ -5368,15 +5243,6 @@ a.status-card.compact:hover {
   }
 }
 
-.boost-modal__status-header {
-  font-size: 15px;
-}
-
-.boost-modal__status-time {
-  float: right;
-  font-size: 14px;
-}
-
 .mute-modal,
 .block-modal {
   line-height: 24px;
@@ -5988,7 +5854,7 @@ a.status-card.compact:hover {
   font-size: 14px;
   border: 1px solid lighten($ui-base-color, 8%);
   border-radius: 4px;
-  margin-top: 14px;
+  margin-top: 16px;
   overflow: hidden;
 
   &__icon {
@@ -6034,7 +5900,6 @@ a.status-card.compact:hover {
 
   &.compact {
     border: 0;
-    margin-top: 4px;
 
     .attachment-list__list {
       padding: 0;
@@ -7177,6 +7042,7 @@ noscript {
 
 .account__header {
   overflow: hidden;
+  background: lighten($ui-base-color, 4%);
 
   &.inactive {
     opacity: 0.5;
@@ -7210,8 +7076,7 @@ noscript {
 
   &__bar {
     position: relative;
-    background: lighten($ui-base-color, 4%);
+    padding: 0 20px;
-    padding: 5px;
     border-bottom: 1px solid lighten($ui-base-color, 12%);
 
     .avatar {
@@ -7230,8 +7095,8 @@ noscript {
   &__tabs {
     display: flex;
     align-items: flex-start;
-    padding: 7px 10px;
     margin-top: -55px;
+    padding-top: 10px;
 
     &__buttons {
       display: flex;
@@ -7249,7 +7114,8 @@ noscript {
     }
 
     &__name {
-      padding: 5px 10px;
+      margin-top: 16px;
+      margin-bottom: 16px;
 
       .account-role {
         vertical-align: top;
@@ -7261,17 +7127,17 @@ noscript {
       }
 
       h1 {
-        font-size: 16px;
+        font-size: 17px;
-        line-height: 24px;
+        line-height: 22px;
         color: $primary-text-color;
-        font-weight: 500;
+        font-weight: 700;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
 
         small {
           display: block;
-          font-size: 14px;
+          font-size: 15px;
           color: $darker-text-color;
           font-weight: 400;
           overflow: hidden;
@@ -7286,34 +7152,41 @@ noscript {
   }
 
   &__bio {
-    overflow: hidden;
-    margin: 0 -5px;
-
     .account__header__content {
-      padding: 20px 15px;
-      padding-bottom: 5px;
       color: $primary-text-color;
-
-      .columns-area--mobile & {
-        padding-left: 20px;
-        padding-right: 20px;
-      }
-    }
-
-    .account__header__joined {
-      font-size: 14px;
-      padding: 5px 15px;
-      color: $darker-text-color;
-
-      .columns-area--mobile & {
-        padding-left: 20px;
-        padding-right: 20px;
-      }
     }
 
     .account__header__fields {
       margin: 0;
-      border-top: 1px solid lighten($ui-base-color, 12%);
+      margin-top: 16px;
+      border-radius: 4px;
+      background: darken($ui-base-color, 4%);
+      border: 0;
+
+      dl {
+        display: block;
+        padding: 11px 16px;
+        border-bottom-color: lighten($ui-base-color, 4%);
+      }
+
+      dd,
+      dt {
+        font-size: 13px;
+        line-height: 18px;
+        padding: 0;
+        text-align: initial;
+      }
+
+      dt {
+        width: auto;
+        background: transparent;
+        text-transform: uppercase;
+        color: $dark-text-color;
+      }
+
+      dd {
+        color: $darker-text-color;
+      }
 
       a {
         color: lighten($ui-highlight-color, 8%);
@@ -7330,12 +7203,14 @@ noscript {
   }
 
   &__extra {
-    margin-top: 4px;
+    margin-top: 16px;
 
     &__links {
       font-size: 14px;
       color: $darker-text-color;
-      padding: 10px 0;
+      margin: 0 -10px;
+      padding-top: 16px;
+      padding-bottom: 10px;
 
       a {
         display: inline-block;
@@ -7353,17 +7228,10 @@ noscript {
   }
 
   &__account-note {
-    padding: 15px;
-    padding-bottom: 10px;
     color: $primary-text-color;
     font-size: 14px;
     font-weight: 400;
-    border-bottom: 1px solid lighten($ui-base-color, 12%);
+    margin-bottom: 10px;
-
-    .columns-area--mobile & {
-      padding-left: 20px;
-      padding-right: 20px;
-    }
 
     label {
       display: block;