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;