diff --git a/app/soapbox/components/profile_hover_card.js b/app/soapbox/components/profile_hover_card.js index c9d1024e7..879bf92e3 100644 --- a/app/soapbox/components/profile_hover_card.js +++ b/app/soapbox/components/profile_hover_card.js @@ -52,6 +52,7 @@ export const ProfileHoverCard = ({ visible }) => { const [popperElement, setPopperElement] = useState(null); + const me = useSelector(state => state.get('me')); const accountId = useSelector(state => state.getIn(['profile_hover_card', 'accountId'])); const account = useSelector(state => accountId && getAccount(state, accountId)); const targetRef = useSelector(state => state.getIn(['profile_hover_card', 'ref', 'current'])); @@ -65,7 +66,7 @@ export const ProfileHoverCard = ({ visible }) => { if (!account) return null; const accountBio = { __html: account.get('note_emojified') }; - const followedBy = account.getIn(['relationship', 'followed_by']); + const followedBy = me !== account.get('id') && account.getIn(['relationship', 'followed_by']); return (
diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js index 4e04aa276..05975ed8f 100644 --- a/app/soapbox/features/directory/components/account_card.js +++ b/app/soapbox/features/directory/components/account_card.js @@ -2,6 +2,7 @@ import React from 'react'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; +import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types'; import { connect } from 'react-redux'; import classNames from 'classnames'; import { makeGetAccount } from 'soapbox/selectors'; @@ -18,6 +19,7 @@ const makeMapStateToProps = () => { const getAccount = makeGetAccount(); const mapStateToProps = (state, { id }) => ({ + me: state.get('me'), account: getAccount(state, id), autoPlayGif: getSettings(state).get('autoPlayGif'), }); @@ -30,15 +32,24 @@ export default @injectIntl class AccountCard extends ImmutablePureComponent { static propTypes = { + me: SoapboxPropTypes.me, account: ImmutablePropTypes.map.isRequired, autoPlayGif: PropTypes.bool, }; render() { - const { account, autoPlayGif } = this.props; + const { account, autoPlayGif, me } = this.props; + + const followedBy = me !== account.get('id') && account.getIn(['relationship', 'followed_by']); return (
+ {followedBy && +
+ + + +
}
diff --git a/app/styles/components/directory.scss b/app/styles/components/directory.scss index 80fe759cb..62f6c7172 100644 --- a/app/styles/components/directory.scss +++ b/app/styles/components/directory.scss @@ -39,6 +39,13 @@ overflow: hidden; position: relative; + &__info { + z-index: 1; + position: absolute; + top: 10px; + left: 10px; + } + &__action-button { z-index: 1; position: absolute;