diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index e3e5fabec..a31d826be 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/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 { FormattedDate, FormattedNumber } from 'react-intl';
+import { NavLink } from 'react-router-dom';
+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 reblogIcon = 'retweet';
+ let statusTypeIcon = '';
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 = ;
} else if (status.get('visibility') === 'private') {
- reblogIcon = 'lock';
- }
-
- if (status.get('visibility') === 'private') {
- reblogLink = ;
- } else if (this.context.router) {
- reblogLink = (
-
-
-
-
-
-
- );
- } else {
- reblogLink = (
-
-
-
-
-
-
- );
+ statusTypeIcon = ;
}
return (
@@ -199,7 +176,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
diff --git a/app/soapbox/features/status/components/status_interaction_bar.js b/app/soapbox/features/status/components/status_interaction_bar.js
index 1ee5de211..4572fdb7f 100644
--- a/app/soapbox/features/status/components/status_interaction_bar.js
+++ b/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 (
+
+
+
+
+
+
+ );
+ }
+
+ return '';
+ }
+
render() {
const emojiReacts = this.getNormalizedReacts();
const count = emojiReacts.reduce((acc, cur) => (
acc + cur.get('count')
), 0);
+ const repost = this.getRepost();
const EmojiReactsContainer = () => (
@@ -48,6 +68,7 @@ export class StatusInteractionBar extends React.Component {
return (
{count > 0 && }
+ {repost}
);
}
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index fd1f98302..f973c7f99 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -50,6 +50,10 @@
font-size: 14px;
line-height: 18px;
display: flex;
+
+ i {
+ margin-right: 0.4em;
+ }
}
.detailed-status__action-bar {
@@ -67,12 +71,21 @@
font-size: 13px;
}
-.detailed-status__favorites,
-.detailed-status__reblogs {
- display: inline-block;
- font-weight: 500;
- font-size: 12px;
- margin-left: 6px;
+.reblogs {
+ color: var(--highlight-text-color);
+ text-decoration: none;
+ vertical-align: middle;
+ display: inline-flex;
+
+ i {
+ font-size: 20px;
+ margin-right: 0.2em;
+ }
+
+ &__count {
+ font-weight: bold;
+ font-size: 12px;
+ }
}
.detailed-status__button {
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index 7ce5731f8..aa7c80b11 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/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 {