From 870f78e413272a227e33aa30079e69ff360f3b92 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 3 May 2022 08:24:34 -0400
Subject: [PATCH 1/3] Add unmute action to ActionButton

---
 .../features/ui/components/action_button.js   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/components/action_button.js b/app/soapbox/features/ui/components/action_button.js
index 926134c39..37562454c 100644
--- a/app/soapbox/features/ui/components/action_button.js
+++ b/app/soapbox/features/ui/components/action_button.js
@@ -10,6 +10,8 @@ import {
   unfollowAccount,
   blockAccount,
   unblockAccount,
+  muteAccount,
+  unmuteAccount,
 } from 'soapbox/actions/accounts';
 import { openModal } from 'soapbox/actions/modals';
 import Icon from 'soapbox/components/icon';
@@ -23,6 +25,7 @@ const messages = defineMessages({
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
   requested_small: { id: 'account.requested_small', defaultMessage: 'Awaiting approval' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
+  unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
   blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
 });
@@ -54,6 +57,14 @@ const mapDispatchToProps = (dispatch) => ({
     }
   },
 
+  onMute(account) {
+    if (account.getIn(['relationship', 'muting'])) {
+      dispatch(unmuteAccount(account.get('id')));
+    } else {
+      dispatch(muteAccount(account.get('id')));
+    }
+  },
+
   onOpenUnauthorizedModal(account) {
     dispatch(openModal('UNAUTHORIZED', {
       action: 'FOLLOW',
@@ -97,6 +108,10 @@ class ActionButton extends ImmutablePureComponent {
     this.props.onBlock(this.props.account);
   }
 
+  handleMute = () => {
+    this.props.onMute(this.props.account);
+  }
+
   handleRemoteFollow = () => {
     this.props.onOpenUnauthorizedModal(this.props.account);
   }
@@ -133,7 +148,7 @@ class ActionButton extends ImmutablePureComponent {
       } else if (account.getIn(['relationship', 'requested'])) {
         // Awaiting acceptance
         return <Button size='sm' theme='secondary' text={small ? intl.formatMessage(messages.requested_small) : intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
-      } else if (!account.getIn(['relationship', 'blocking'])) {
+      } else if (!account.getIn(['relationship', 'blocking']) && !account.getIn(['relationship', 'muting'])) {
         // Follow & Unfollow
         return (<Button
           size='sm'
@@ -151,6 +166,9 @@ class ActionButton extends ImmutablePureComponent {
       } else if (account.getIn(['relationship', 'blocking'])) {
         // Unblock
         return <Button theme='danger' size='sm' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
+      } else if (account.getIn(['relationship', 'muting'])) {
+        // Unmute
+        return <Button theme='danger' size='sm' text={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />;
       }
     } else {
       // Edit profile

From 8dc7cc8794b74d770dd94a075d261a9b19a44f0a Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 3 May 2022 09:27:15 -0400
Subject: [PATCH 2/3] Convert ActionButton to TSX

---
 app/soapbox/components/account.tsx            |   2 +-
 app/soapbox/components/profile_hover_card.tsx |   2 +-
 .../features/account/components/header.js     |   2 +-
 .../directory/components/account_card.js      |   4 +-
 .../components/account.tsx                    |   2 +-
 .../features/ui/components/action-button.tsx  | 168 ++++++++++++++++
 .../features/ui/components/action_button.js   | 180 ------------------
 app/styles/components/buttons.scss            |  12 --
 8 files changed, 174 insertions(+), 198 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/action-button.tsx
 delete mode 100644 app/soapbox/features/ui/components/action_button.js

diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 36f8c1b26..8c626b3e7 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -3,7 +3,7 @@ import { Link, useHistory } from 'react-router-dom';
 
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import VerificationBadge from 'soapbox/components/verification_badge';
-import ActionButton from 'soapbox/features/ui/components/action_button';
+import ActionButton from 'soapbox/features/ui/components/action-button';
 import { useAppSelector, useOnScreen } from 'soapbox/hooks';
 import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
diff --git a/app/soapbox/components/profile_hover_card.tsx b/app/soapbox/components/profile_hover_card.tsx
index 4474d8d21..8511839fb 100644
--- a/app/soapbox/components/profile_hover_card.tsx
+++ b/app/soapbox/components/profile_hover_card.tsx
@@ -10,7 +10,7 @@ import {
   updateProfileHoverCard,
 } from 'soapbox/actions/profile_hover_card';
 import Badge from 'soapbox/components/badge';
-import ActionButton from 'soapbox/features/ui/components/action_button';
+import ActionButton from 'soapbox/features/ui/components/action-button';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { UserPanel } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 1db5b1dd3..c070c003a 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -16,7 +16,7 @@ import Badge from 'soapbox/components/badge';
 import StillImage from 'soapbox/components/still_image';
 import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import ActionButton from 'soapbox/features/ui/components/action_button';
+import ActionButton from 'soapbox/features/ui/components/action-button';
 import {
   isLocal,
   isRemote,
diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js
index 83a48b256..0acab06d5 100644
--- a/app/soapbox/features/directory/components/account_card.js
+++ b/app/soapbox/features/directory/components/account_card.js
@@ -12,7 +12,7 @@ import DisplayName from 'soapbox/components/display_name';
 import Permalink from 'soapbox/components/permalink';
 import RelativeTimestamp from 'soapbox/components/relative_timestamp';
 import { Text } from 'soapbox/components/ui';
-import ActionButton from 'soapbox/features/ui/components/action_button';
+import ActionButton from 'soapbox/features/ui/components/action-button';
 import { makeGetAccount } from 'soapbox/selectors';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
@@ -82,4 +82,4 @@ class AccountCard extends ImmutablePureComponent {
     );
   }
 
-}
\ No newline at end of file
+}
diff --git a/app/soapbox/features/follow_recommendations/components/account.tsx b/app/soapbox/features/follow_recommendations/components/account.tsx
index 8ba56b497..6ba90ecd2 100644
--- a/app/soapbox/features/follow_recommendations/components/account.tsx
+++ b/app/soapbox/features/follow_recommendations/components/account.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
 import Permalink from 'soapbox/components/permalink';
-import ActionButton from 'soapbox/features/ui/components/action_button';
+import ActionButton from 'soapbox/features/ui/components/action-button';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx
new file mode 100644
index 000000000..c86283d9f
--- /dev/null
+++ b/app/soapbox/features/ui/components/action-button.tsx
@@ -0,0 +1,168 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import {
+  followAccount,
+  unfollowAccount,
+  blockAccount,
+  unblockAccount,
+  muteAccount,
+  unmuteAccount,
+} from 'soapbox/actions/accounts';
+import { openModal } from 'soapbox/actions/modals';
+import { Button } from 'soapbox/components/ui';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
+
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  remote_follow: { id: 'account.remote_follow', defaultMessage: 'Remote follow' },
+  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
+  requested_small: { id: 'account.requested_small', defaultMessage: 'Awaiting approval' },
+  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
+  unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+  blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
+});
+
+interface IAccount {
+  account: AccountEntity
+  small?: boolean
+}
+
+const ActionButton = ({ account, small }: IAccount) => {
+  const dispatch = useDispatch();
+  const features = useFeatures();
+  const intl = useIntl();
+
+  const me = useAppSelector((state) => state.me);
+
+  const handleFollow = () => {
+    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
+      dispatch(unfollowAccount(account.get('id')));
+    } else {
+      dispatch(followAccount(account.get('id')));
+    }
+  };
+
+  const handleBlock = () => {
+    if (account.getIn(['relationship', 'blocking'])) {
+      dispatch(unblockAccount(account.get('id')));
+    } else {
+      dispatch(blockAccount(account.get('id')));
+    }
+  };
+
+  const handleMute = () => {
+    if (account.getIn(['relationship', 'muting'])) {
+      dispatch(unmuteAccount(account.get('id')));
+    } else {
+      dispatch(muteAccount(account.get('id')));
+    }
+  };
+
+  const handleRemoteFollow = () => {
+    dispatch(openModal('UNAUTHORIZED', {
+      action: 'FOLLOW',
+      account: account.get('id'),
+      ap_id: account.get('url'),
+    }));
+  };
+
+  const empty = <></>;
+
+  if (!me) {
+    // Remote follow
+    if (features.remoteInteractionsAPI) {
+      return (
+        <Button
+          onClick={handleRemoteFollow}
+          icon={require('@tabler/icons/icons/plus.svg')}
+          text={intl.formatMessage(messages.follow)}
+        />
+      );
+    }
+
+    return (
+      <form method='POST' action='/main/ostatus'>
+        <input type='hidden' name='nickname' value={account.get('acct')} />
+        <input type='hidden' name='profile' value='' />
+        <Button text={intl.formatMessage(messages.remote_follow)} type='submit' />
+      </form>
+    );
+  }
+
+  if (me !== account.get('id')) {
+    const isFollowing = account.getIn(['relationship', 'following']);
+    const blockedBy = account.getIn(['relationship', 'blocked_by']) as boolean;
+
+    if (!account.get('relationship')) {
+      // Wait until the relationship is loaded
+      return empty;
+    } else if (account.getIn(['relationship', 'requested'])) {
+      // Awaiting acceptance
+      return (
+        <Button
+          size='sm'
+          theme='secondary'
+          text={small ? intl.formatMessage(messages.requested_small) : intl.formatMessage(messages.requested)}
+          onClick={handleFollow}
+        />
+      );
+    } else if (!account.getIn(['relationship', 'blocking']) && !account.getIn(['relationship', 'muting'])) {
+      // Follow & Unfollow
+      return (
+        <Button
+          size='sm'
+          disabled={blockedBy}
+          theme={isFollowing ? 'secondary' : 'primary'}
+          icon={blockedBy ? require('@tabler/icons/icons/ban.svg') : (!isFollowing && require('@tabler/icons/icons/plus.svg'))}
+          onClick={handleFollow}
+        >
+          {isFollowing ? (
+            intl.formatMessage(messages.unfollow)
+          ) : (
+            intl.formatMessage(blockedBy ? messages.blocked : messages.follow)
+          )}
+        </Button>
+      );
+    } else if (account.getIn(['relationship', 'blocking'])) {
+      // Unblock
+      return (
+        <Button
+          theme='danger'
+          size='sm'
+          text={intl.formatMessage(messages.unblock, { name: account.get('username') })}
+          onClick={handleBlock}
+        />
+      );
+    } else if (account.getIn(['relationship', 'muting'])) {
+      // Unmute
+      return (
+        <Button
+          theme='danger'
+          size='sm'
+          text={intl.formatMessage(messages.unmute, { name: account.get('username') })}
+          onClick={handleMute}
+        />
+      );
+    }
+  } else {
+    // Edit profile
+    return (
+      <Button
+        theme='secondary'
+        size='sm'
+        text={intl.formatMessage(messages.edit_profile)}
+        to='/settings/profile'
+      />
+    );
+  }
+
+  return empty;
+};
+
+export default ActionButton;
diff --git a/app/soapbox/features/ui/components/action_button.js b/app/soapbox/features/ui/components/action_button.js
deleted file mode 100644
index 37562454c..000000000
--- a/app/soapbox/features/ui/components/action_button.js
+++ /dev/null
@@ -1,180 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import {
-  followAccount,
-  unfollowAccount,
-  blockAccount,
-  unblockAccount,
-  muteAccount,
-  unmuteAccount,
-} from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modals';
-import Icon from 'soapbox/components/icon';
-import { Button } from 'soapbox/components/ui';
-import { getFeatures } from 'soapbox/utils/features';
-
-const messages = defineMessages({
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  remote_follow: { id: 'account.remote_follow', defaultMessage: 'Remote follow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
-  requested_small: { id: 'account.requested_small', defaultMessage: 'Awaiting approval' },
-  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
-  unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
-  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
-  blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
-});
-
-const mapStateToProps = state => {
-  const me = state.get('me');
-  const instance = state.get('instance');
-
-  return {
-    me,
-    features: getFeatures(instance),
-  };
-};
-
-const mapDispatchToProps = (dispatch) => ({
-  onFollow(account) {
-    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(unfollowAccount(account.get('id')));
-    } else {
-      dispatch(followAccount(account.get('id')));
-    }
-  },
-
-  onBlock(account) {
-    if (account.getIn(['relationship', 'blocking'])) {
-      dispatch(unblockAccount(account.get('id')));
-    } else {
-      dispatch(blockAccount(account.get('id')));
-    }
-  },
-
-  onMute(account) {
-    if (account.getIn(['relationship', 'muting'])) {
-      dispatch(unmuteAccount(account.get('id')));
-    } else {
-      dispatch(muteAccount(account.get('id')));
-    }
-  },
-
-  onOpenUnauthorizedModal(account) {
-    dispatch(openModal('UNAUTHORIZED', {
-      action: 'FOLLOW',
-      account: account.get('id'),
-      ap_id: account.get('url'),
-    }));
-  },
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class ActionButton extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    onFollow: PropTypes.func.isRequired,
-    onBlock: PropTypes.func.isRequired,
-    onOpenUnauthorizedModal: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    small: PropTypes.bool,
-    features: PropTypes.object.isRequired,
-  };
-
-  static defaultProps = {
-    small: false,
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.handleResize, { passive: true });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  handleFollow = () => {
-    this.props.onFollow(this.props.account);
-  }
-
-  handleBlock = () => {
-    this.props.onBlock(this.props.account);
-  }
-
-  handleMute = () => {
-    this.props.onMute(this.props.account);
-  }
-
-  handleRemoteFollow = () => {
-    this.props.onOpenUnauthorizedModal(this.props.account);
-  }
-
-  render() {
-    const { account, intl, me, small, features } = this.props;
-    const empty = <></>;
-
-    if (!me) {
-      // Remote follow
-      if (features.remoteInteractionsAPI) {
-        return (<Button
-          className='button--follow'
-          onClick={this.handleRemoteFollow}
-        >
-          {intl.formatMessage(messages.follow)}
-          <Icon src={require('@tabler/icons/icons/plus.svg')} />
-        </Button>);
-      }
-
-      return (<form method='POST' action='/main/ostatus'>
-        <input type='hidden' name='nickname' value={account.get('acct')} />
-        <input type='hidden' name='profile' value='' />
-        <Button className='logo-button' text={intl.formatMessage(messages.remote_follow)} click='submit' />
-      </form>);
-    }
-
-    if (me !== account.get('id')) {
-      const isFollowing = account.getIn(['relationship', 'following']);
-      const blockedBy = account.getIn(['relationship', 'blocked_by']);
-
-      if (!account.get('relationship')) { // Wait until the relationship is loaded
-        return empty;
-      } else if (account.getIn(['relationship', 'requested'])) {
-        // Awaiting acceptance
-        return <Button size='sm' theme='secondary' text={small ? intl.formatMessage(messages.requested_small) : intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
-      } else if (!account.getIn(['relationship', 'blocking']) && !account.getIn(['relationship', 'muting'])) {
-        // Follow & Unfollow
-        return (<Button
-          size='sm'
-          disabled={blockedBy}
-          theme={isFollowing ? 'secondary' : 'primary'}
-          icon={blockedBy ? require('@tabler/icons/icons/ban.svg') : (!isFollowing && require('@tabler/icons/icons/plus.svg'))}
-          onClick={this.handleFollow}
-        >
-          {isFollowing ? (
-            intl.formatMessage(messages.unfollow)
-          ) : (
-            intl.formatMessage(blockedBy ? messages.blocked : messages.follow)
-          )}
-        </Button>);
-      } else if (account.getIn(['relationship', 'blocking'])) {
-        // Unblock
-        return <Button theme='danger' size='sm' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
-      } else if (account.getIn(['relationship', 'muting'])) {
-        // Unmute
-        return <Button theme='danger' size='sm' text={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />;
-      }
-    } else {
-      // Edit profile
-      return <Button theme='secondary' size='sm' text={intl.formatMessage(messages.edit_profile)} to='/settings/profile' />;
-    }
-    return empty;
-  }
-
-}
diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss
index f095682e6..dc5bce4f4 100644
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -114,18 +114,6 @@ a.button {
   }
 }
 
-.button--follow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .svg-icon {
-    margin: 0 0 0 6px;
-    width: 20px;
-    height: 20px;
-  }
-}
-
 .button--welcome {
   .emojione {
     margin: -1px 6px 0 -4px;

From c758c5c2f91233dbc22e4f8db0994199af40e2bd Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 3 May 2022 13:22:06 -0400
Subject: [PATCH 3/3] Support 'actionType' prop in ActionButton

---
 app/soapbox/components/account.tsx            |  5 +-
 app/soapbox/features/blocks/index.tsx         |  2 +-
 app/soapbox/features/mutes/index.tsx          |  2 +-
 .../features/ui/components/action-button.tsx  | 61 ++++++++++++++-----
 4 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 8c626b3e7..f47d66bfe 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -46,6 +46,8 @@ interface IAccount {
   actionAlignment?: 'center' | 'top',
   actionIcon?: string,
   actionTitle?: string,
+  /** Override other actions for specificity like mute/unmute.  */
+  actionType?: 'muting' | 'blocking',
   avatarSize?: number,
   hidden?: boolean,
   hideActions?: boolean,
@@ -60,6 +62,7 @@ interface IAccount {
 
 const Account = ({
   account,
+  actionType,
   action,
   actionIcon,
   actionTitle,
@@ -111,7 +114,7 @@ const Account = ({
     }
 
     if (account.id !== me) {
-      return <ActionButton account={account} />;
+      return <ActionButton account={account} actionType={actionType} />;
     }
 
     return null;
diff --git a/app/soapbox/features/blocks/index.tsx b/app/soapbox/features/blocks/index.tsx
index 90e41bf65..8b56fc262 100644
--- a/app/soapbox/features/blocks/index.tsx
+++ b/app/soapbox/features/blocks/index.tsx
@@ -48,7 +48,7 @@ const Blocks: React.FC = () => {
         itemClassName='pb-4'
       >
         {accountIds.map((id: string) =>
-          <AccountContainer key={id} id={id} />,
+          <AccountContainer key={id} id={id} actionType='blocking' />,
         )}
       </ScrollableList>
     </Column>
diff --git a/app/soapbox/features/mutes/index.tsx b/app/soapbox/features/mutes/index.tsx
index 06bf89e21..adaa390e9 100644
--- a/app/soapbox/features/mutes/index.tsx
+++ b/app/soapbox/features/mutes/index.tsx
@@ -48,7 +48,7 @@ const Mutes: React.FC = () => {
         itemClassName='pb-4'
       >
         {accountIds.map((id: string) =>
-          <AccountContainer key={id} id={id} />,
+          <AccountContainer key={id} id={id} actionType='muting' />,
         )}
       </ScrollableList>
     </Column>
diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx
index c86283d9f..e79c22567 100644
--- a/app/soapbox/features/ui/components/action-button.tsx
+++ b/app/soapbox/features/ui/components/action-button.tsx
@@ -17,23 +17,26 @@ import { useAppSelector, useFeatures } from 'soapbox/hooks';
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
+  blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
   remote_follow: { id: 'account.remote_follow', defaultMessage: 'Remote follow' },
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
   requested_small: { id: 'account.requested_small', defaultMessage: 'Awaiting approval' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
-  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
-  blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
 });
 
-interface IAccount {
+interface iActionButton {
   account: AccountEntity
+  actionType?: 'muting' | 'blocking'
   small?: boolean
 }
 
-const ActionButton = ({ account, small }: IAccount) => {
+const ActionButton = ({ account, actionType, small }: iActionButton) => {
   const dispatch = useDispatch();
   const features = useFeatures();
   const intl = useIntl();
@@ -72,6 +75,36 @@ const ActionButton = ({ account, small }: IAccount) => {
     }));
   };
 
+  const mutingAction = () => {
+    const isMuted = account.getIn(['relationship', 'muting']);
+    const messageKey = isMuted ? messages.unmute : messages.mute;
+    const text = intl.formatMessage(messageKey, { name: account.get('username') });
+
+    return (
+      <Button
+        theme={isMuted ? 'danger' : 'secondary'}
+        size='sm'
+        text={text}
+        onClick={handleMute}
+      />
+    );
+  };
+
+  const blockingAction = () => {
+    const isBlocked = account.getIn(['relationship', 'blocking']);
+    const messageKey = isBlocked ? messages.unblock : messages.block;
+    const text = intl.formatMessage(messageKey, { name: account.get('username') });
+
+    return (
+      <Button
+        theme={isBlocked ? 'danger' : 'secondary'}
+        size='sm'
+        text={text}
+        onClick={handleBlock}
+      />
+    );
+  };
+
   const empty = <></>;
 
   if (!me) {
@@ -99,6 +132,14 @@ const ActionButton = ({ account, small }: IAccount) => {
     const isFollowing = account.getIn(['relationship', 'following']);
     const blockedBy = account.getIn(['relationship', 'blocked_by']) as boolean;
 
+    if (actionType) {
+      if (actionType === 'muting') {
+        return mutingAction();
+      } else if (actionType === 'blocking') {
+        return blockingAction();
+      }
+    }
+
     if (!account.get('relationship')) {
       // Wait until the relationship is loaded
       return empty;
@@ -139,16 +180,6 @@ const ActionButton = ({ account, small }: IAccount) => {
           onClick={handleBlock}
         />
       );
-    } else if (account.getIn(['relationship', 'muting'])) {
-      // Unmute
-      return (
-        <Button
-          theme='danger'
-          size='sm'
-          text={intl.formatMessage(messages.unmute, { name: account.get('username') })}
-          onClick={handleMute}
-        />
-      );
     }
   } else {
     // Edit profile