Fixed the UI to be more obvious.

Refactored the code to not have so many dependencies.
Also uses camelCase now.
Closes #16988

app/assets/javascripts/subscription.js.coffee

@@ -2,20 +2,31 @@ class @Subscription
   constructor: (container) ->
     $container = $(container)
     @url = $container.attr('data-url')
-    @subscribe_button = $container.find('.js-subscribe-button')
-    @subscription_status = $container.find('.subscription-status')
-    @subscribe_button.unbind('click').click(@toggleSubscription)
-  toggleSubscription: (event) =>
-    btn = $(event.currentTarget)
-    action = btn.find('span').text()
-    current_status = @subscription_status.attr('data-status')
-    btn.addClass('disabled')
+    @subscribeButton = $container.find('.js-subscribe-button')
+    @subscribeButton.off('click').click(@toggleSubscription)
+    @subscribedHTML = '<i class="fa fa-volume-up"></i> Unsubscribe'
+    @unsubscribedHTML = '<i class="fa fa-volume-off"></i> Subscribe'
+  toggleSubscription: (e) =>
+    btn = $(e.currentTarget)
+    subscribed = @subscribeButton.attr('data-subscribed')?
+    btn
+      .addClass('disabled')
+      .prop('disabled','disabled')
     $.post @url, =>
-      btn.removeClass('disabled')
-      status = if current_status == 'subscribed' then 'unsubscribed' else 'subscribed'
-      @subscription_status.attr('data-status', status)
-      action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe'
-      btn.find('span').text(action)
-      @subscription_status.find('>div').toggleClass('hidden')
+      subscribed = not subscribed
+      btn
+        .removeClass('disabled')
+        .prop('disabled', false);
+      if subscribed
+        @subscribeButton.attr('data-subscribed',true)
+        btn.html(@subscribedHTML)
+        btn.closest('div').find('.negation').hide()
+        return
+      else
+        @subscribeButton.removeAttr('data-subscribed', subscribed)
+        btn.html(@unsubscribedHTML)
+        btn.closest('div').find('.negation').show()
+        return
+    return

app/views/shared/issuable/_sidebar.html.haml

@@ -147,14 +147,13 @@
             = icon('rss')
           .title.hide-collapsed
             Notifications
-          - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
-          %button.btn.btn-block.btn-gray.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
-            %span= subscribed ? 'Unsubscribe' : 'Subscribe'
-          .subscription-status.hide-collapsed{data: {status: subscribtion_status}}
-            .unsubscribed{class: ( 'hidden' if subscribed )}
-              You're not receiving notifications from this thread.
-            .subscribed{class: ( 'hidden' unless subscribed )}
-              You're receiving notifications because you're subscribed to this thread.
+          %button.btn.btn-block.btn-gray.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button", data: { subscribed: subscribed } }
+            = icon(subscribed ? 'volume-up' : 'volume-off')
+            = subscribed ? 'Unsubscribe' : 'Subscribe'
+          .subscription-status.hide-collapsed
+            You are 
+            %span.negation{ style: ("display:none;" if subscribed) } not 
+            subscribed
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference