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 {
- {reblogLink} ยท + {statusTypeIcon}
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 {