Refactor scss; add toggle button to issue board sidebar (still needs fixing)

4 files changed, 13 insertions, 17 deletions

diff --git a/app/assets/javascripts/subscription.js b/app/assets/javascripts/subscription.js
index bc68d67615c..646e1abf326 100644
--- a/app/assets/javascripts/subscription.js
+++ b/app/assets/javascripts/subscription.js
@@ -26,6 +26,14 @@
       $.post(toggleActionUrl, () => {
         button.classList.remove('disabled');
 
+        if (isSubscribed) {
+          toggleButton.addClass('unsubscribed')
+          toggleButton.removeClass('subscribed')
+        } else {
+          toggleButton.addClass('subscribed')
+          toggleButton.removeClass('unsubscribed')
+        }
+
         // hack to allow this to work with the issue boards Vue object
         if (document.querySelector('html').classList.contains('issue-boards-page')) {
           gl.issueBoards.boardStoreIssueSet(
@@ -34,13 +42,6 @@
           );
         } else {
           buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe';
-          if (isSubscribed) {
-            toggleButton.addClass('unsubscribed')
-            toggleButton.removeClass('subscribed')
-          } else {
-            toggleButton.addClass('subscribed')
-            toggleButton.removeClass('unsubscribed')
-          }
         }
       });
     }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index d79ae47f589..f3051912892 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -98,7 +98,7 @@
   }
 
   .issuable-header-text {
-    margin-top: 7px;
+    margin-top: 3px;
   }
 
   .block {
@@ -119,10 +119,6 @@
       border: none;
     }
 
-    span {
-      display: inline-block;
-    }
-
     .select2-container span {
       margin-top: 0;
     }
diff --git a/app/views/projects/boards/components/sidebar/_notifications.html.haml b/app/views/projects/boards/components/sidebar/_notifications.html.haml
index a08c7f2af09..0b891cf79d2 100644
--- a/app/views/projects/boards/components/sidebar/_notifications.html.haml
+++ b/app/views/projects/boards/components/sidebar/_notifications.html.haml
@@ -2,6 +2,6 @@
   .block.light.subscription{ ":data-url" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '/toggle_subscription'" }
     %span.issuable-header-text.hide-collapsed.pull-left
       Notifications
-    %button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
-      %span
+    %button.btn.toggle-button.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
+      %span.subscription-label
         {{issue.subscribed ? 'Unsubscribe' : 'Subscribe'}}
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 2576bb4e2a0..d37f995caca 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -123,9 +123,8 @@
             = icon('rss', 'aria-hidden': 'true')
           %span.issuable-header-text.hide-collapsed.pull-left
             Notifications
-          .toggle-button-container
-            %button.btn.toggle-button.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" , class: (subscribed ? "subscribed" : "unsubscribed") }
-              %span= subscribed ? 'Unsubscribe' : 'Subscribe'
+          %button.btn.toggle-button.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" , class: (subscribed ? "subscribed" : "unsubscribed") }
+            %span.subscription-label= subscribed ? 'Unsubscribe' : 'Subscribe'
 
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference