Change the repost to be alongside emoji reacts

app/soapbox/features/status/components/detailed_status.js

@@ -5,8 +5,8 @@ import Avatar from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import StatusContent from '../../../components/status_content';
 import MediaGallery from '../../../components/media_gallery';
-import { Link, NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
-import { FormattedDate, FormattedNumber } from 'react-intl';
+import { FormattedDate } from 'react-intl';
 import Card from './card';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Video from '../../video';
@@ -91,8 +91,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
     }
 
     let media           = '';
-    let reblogLink = '';
+    let statusTypeIcon = '';
-    let reblogIcon = 'retweet';
 
     if (this.props.measureHeight) {
       outerStyle.height = `${this.state.height}px`;
@@ -151,31 +150,9 @@ export default class DetailedStatus extends ImmutablePureComponent {
     }
 
     if (status.get('visibility') === 'direct') {
-      reblogIcon = 'envelope';
+      statusTypeIcon = <Icon id='envelope' />;
     } else if (status.get('visibility') === 'private') {
-      reblogIcon = 'lock';
+      statusTypeIcon = <Icon id='lock' />;
-    }
-
-    if (status.get('visibility') === 'private') {
-      reblogLink = <Icon id={reblogIcon} />;
-    } else if (this.context.router) {
-      reblogLink = (
-        <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>
-          <Icon id={reblogIcon} />
-          <span className='detailed-status__reblogs'>
-            <FormattedNumber value={status.get('reblogs_count')} />
-          </span>
-        </Link>
-      );
-    } else {
-      reblogLink = (
-        <a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
-          <Icon id={reblogIcon} />
-          <span className='detailed-status__reblogs'>
-            <FormattedNumber value={status.get('reblogs_count')} />
-          </span>
-        </a>
-      );
     }
 
     return (
@@ -199,7 +176,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
           <div className='detailed-status__meta'>
             <StatusInteractionBar status={status} />
             <div>
-              {reblogLink} · <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
+              {statusTypeIcon}<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
                 <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
               </a>
             </div>

app/soapbox/features/status/components/status_interaction_bar.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedNumber } from 'react-intl';
 import emojify from 'soapbox/features/emoji/emoji';
 import { reduceEmoji } from 'soapbox/utils/emoji_reacts';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
+import { Link } from 'react-router-dom';
+import Icon from 'soapbox/components/icon';
 
 export class StatusInteractionBar extends React.Component {
 
@@ -20,11 +23,28 @@ export class StatusInteractionBar extends React.Component {
     ).reverse();
   }
 
+  getRepost = () => {
+    const { status } = this.props;
+    if (status.get('reblogs_count')) {
+      return (
+        <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='reblogs'>
+          <Icon id='retweet' />
+          <span className='reblogs__count'>
+            <FormattedNumber value={status.get('reblogs_count')} />
+          </span>
+        </Link>
+      );
+    }
+
+    return '';
+  }
+
   render() {
     const emojiReacts = this.getNormalizedReacts();
     const count = emojiReacts.reduce((acc, cur) => (
       acc + cur.get('count')
     ), 0);
+    const repost = this.getRepost();
 
     const EmojiReactsContainer = () => (
       <div className='emoji-reacts-container'>
@@ -48,6 +68,7 @@ export class StatusInteractionBar extends React.Component {
     return (
       <div className='status-interaction-bar'>
         {count > 0 && <EmojiReactsContainer />}
+        {repost}
       </div>
     );
   }

app/styles/components/detailed-status.scss

@@ -50,6 +50,11 @@
   font-size: 14px;
   line-height: 18px;
   display: flex;
+
+  .fa-envelope,
+  .fa-lock {
+    margin-right: 0.4em;
+  }
 }
 
 .detailed-status__action-bar {
@@ -67,12 +72,21 @@
   font-size: 13px;
 }
 
-.detailed-status__favorites,
+.reblogs {
-.detailed-status__reblogs {
+  color: var(--highlight-text-color);
-  display: inline-block;
+  text-decoration: none;
-  font-weight: 500;
+  vertical-align: middle;
-  font-size: 12px;
+  display: inline-flex;
-  margin-left: 6px;
+
+  i {
+    font-size: 20px;
+    margin-right: 0.2em;
+  }
+
+  &__count {
+    font-weight: bold;
+    font-size: 12px;
+  }
 }
 
 .detailed-status__button {

app/styles/components/emoji-reacts.scss

@@ -31,7 +31,7 @@
 
 .emoji-reacts-container {
   display: inline-flex;
-  margin-right: auto;
+  margin-right: 0.4em;
 
   &:hover {
     .emoji-react {