Subscriptions: move subscribe button to top-right corner of banner

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}>

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;
   }
 
 }

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;