From 5e3d859b572ee3a83b91425956a7cd4c099a7325 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 27 Jun 2021 12:46:00 -0500
Subject: [PATCH] Subscriptions: move subscribe button to top-right corner of
 banner

---
 .../features/account/components/header.js     |  5 +-
 .../ui/components/subscription_button.js      | 22 ++++++---
 app/styles/components/account-header.scss     | 49 ++++++++++---------
 3 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index fa9708bdb..aac0186c4 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -279,6 +279,10 @@ class Header extends ImmutablePureComponent {
             {info}
           </div>
 
+          <div className='account__header__subscribe'>
+            <SubscriptionButton account={account} />
+          </div>
+
           <StillImage src={account.get('header')} alt='' className='parallax' />
         </div>
 
@@ -335,7 +339,6 @@ class Header extends ImmutablePureComponent {
             }
 
             <div className='account__header__extra__buttons'>
-              <SubscriptionButton account={account} />
               <ActionButton account={account} />
               {me && account.get('id') !== me && account.getIn(['pleroma', 'accepts_chat_messages'], false) === true &&
                 <Button className='button-alternative-2' onClick={this.props.onChat}>
diff --git a/app/soapbox/features/ui/components/subscription_button.js b/app/soapbox/features/ui/components/subscription_button.js
index 053ed0f52..ae9471b4f 100644
--- a/app/soapbox/features/ui/components/subscription_button.js
+++ b/app/soapbox/features/ui/components/subscription_button.js
@@ -14,6 +14,7 @@ import {
 const messages = defineMessages({
   subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to notifications from @{name}' },
   unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe to notifications from @{name}' },
+  subscribed: { id: 'account.subscribed', defaultMessage: 'Subscribed' },
 });
 
 const mapStateToProps = state => {
@@ -48,16 +49,23 @@ class SubscriptionButton extends ImmutablePureComponent {
   render() {
     const { account, intl } = this.props;
     const subscribing = account.getIn(['relationship', 'subscribing']);
+    const following = account.getIn(['relationship', 'following']);
+    const requested = account.getIn(['relationship', 'requested']);
 
-    let subscriptionButton = '';
-
-    if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) {
-      subscriptionButton = (<Button className={classNames('subscription-button', subscribing && 'button-active')} style={{ padding: 0, lineHeight: '18px' }} title={intl.formatMessage(account.getIn(['relationship', 'subscribing']) ? messages.unsubscribe : messages.subscribe, { name: account.get('username') })} onClick={this.handleSubscriptionToggle}>
-        <Icon id={account.getIn(['relationship', 'subscribing']) ? 'bell-ringing' : 'bell'} style={{ margin: 0, fontSize: 18 }} />
-      </Button>);
+    if (requested || following) {
+      return (
+        <Button
+          className={classNames('subscription-button', subscribing && 'button-active')}
+          title={intl.formatMessage(subscribing ? messages.unsubscribe : messages.subscribe, { name: account.get('username') })}
+          onClick={this.handleSubscriptionToggle}
+        >
+          <Icon id={subscribing ? 'bell-ringing' : 'bell'} />
+          {subscribing && intl.formatMessage(messages.subscribed)}
+        </Button>
+      );
     }
 
-    return subscriptionButton;
+    return null;
   }
 
 }
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index ec0b6f2e4..55386987a 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -15,6 +15,31 @@
     z-index: 1;
   }
 
+  &__subscribe {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1;
+
+    .subscription-button {
+      color: var(--primary-text-color);
+      margin-bottom: 4px;
+      display: block;
+      vertical-align: top;
+      background-color: var(--background-color);
+      text-transform: uppercase;
+      font-size: 13px;
+      font-weight: 500;
+      padding: 4px;
+      border-radius: 4px;
+      opacity: 0.7;
+
+      &:not(.button-active) i.fa {
+        margin: 0;
+      }
+    }
+  }
+
   &__image {
     overflow: hidden;
     height: 350px;
@@ -150,30 +175,6 @@
 
       .button { margin-right: 10px; }
 
-      .subscription-button {
-        padding: 0;
-        height: 36px;
-        line-height: 36px;
-        width: 36px;
-        margin-right: 10px;
-        font-size: 20px;
-        text-align: center;
-        border: 1px solid var(--brand-color);
-        background: transparent;
-        color: var(--primary-text-color);
-
-        &:hover,
-        &.active {
-          border-color: $error-red;
-          background: $error-red;
-          color: #fff;
-        }
-
-        @media (max-width: 430px) {
-          display: none;
-        }
-      }
-
       .button-active {
         border-color: #008000;
         background: #008000;