AccountHeader: refactor Follow button, remove Message button in favor of a menu item

This is better on mobile and simpler to newcomers
This commit is contained in:
Alex Gleason
2021-10-02 15:39:12 -05:00
parent 5f7a201f08
commit d3908f107a
3 changed files with 24 additions and 11 deletions

View File

@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import Icon from 'soapbox/components/icon';
import Button from 'soapbox/components/button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import classNames from 'classnames';
@ -103,12 +104,14 @@ class ActionButton extends ImmutablePureComponent {
// Follow & Unfollow
return (<Button
disabled={account.getIn(['relationship', 'blocked_by'])}
className={classNames('logo-button', {
className={classNames('follow-button', {
'button--destructive': account.getIn(['relationship', 'following']),
})}
text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)}
onClick={this.handleFollow}
/>);
>
{intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)}
<Icon src={account.getIn(['relationship', 'following']) ? require('@tabler/icons/icons/minus.svg') : require('@tabler/icons/icons/plus.svg')} />
</Button>);
} else if (account.getIn(['relationship', 'blocking'])) {
// Unblock
return <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;