From 6ac0c615fe0f78d2fe582144d5cbb62271014f22 Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Mon, 10 Aug 2020 12:23:59 -0500
Subject: [PATCH] fixes #278, large awaiting approval button

---
 .../profile_hover_card/profile_hover_card_container.js |  2 +-
 app/soapbox/features/ui/components/action_button.js    | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
index 8cd4e94e6..d4f706212 100644
--- a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
+++ b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
@@ -63,7 +63,7 @@ class ProfileHoverCardContainer extends ImmutablePureComponent {
             <span className='relationship-tag'>
               <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
             </span>}
-          <div className='profile-hover-card__action-button'><ActionButton account={account} /></div>
+          <div className='profile-hover-card__action-button'><ActionButton account={account} small /></div>
           <UserPanel className='profile-hover-card__user' accountId={accountId} />
           {badges.length > 0 &&
             <div className='profile-hover-card__badges'>
diff --git a/app/soapbox/features/ui/components/action_button.js b/app/soapbox/features/ui/components/action_button.js
index e1c88d232..b0b114ee6 100644
--- a/app/soapbox/features/ui/components/action_button.js
+++ b/app/soapbox/features/ui/components/action_button.js
@@ -17,6 +17,7 @@ const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   follow: { id: 'account.follow', defaultMessage: '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}' },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
 });
@@ -55,8 +56,13 @@ class ActionButton extends ImmutablePureComponent {
     onFollow: PropTypes.func.isRequired,
     onBlock: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    small: PropTypes.bool,
   };
 
+  static defaultProps = {
+    small: false,
+  }
+
   componentDidMount() {
     window.addEventListener('resize', this.handleResize, { passive: true });
   }
@@ -74,7 +80,7 @@ class ActionButton extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, intl, me } = this.props;
+    const { account, intl, me, small } = this.props;
     let actionBtn = null;
 
     if (!account || !me) return actionBtn;
@@ -83,7 +89,7 @@ class ActionButton extends ImmutablePureComponent {
       if (!account.get('relationship')) { // Wait until the relationship is loaded
         //
       } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
+        actionBtn = <Button className='logo-button' text={small ? intl.formatMessage(messages.requested_small) : intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
       } else if (!account.getIn(['relationship', 'blocking'])) {
         actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />;
       } else if (account.getIn(['relationship', 'blocking'])) {