1 files changed, 42 insertions, 23 deletions
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index 7226076a8fc..d69d100a26c 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -1,12 +1,22 @@
 <script>
-  /* eslint-disable vue/require-default-prop */
-  import { __ } from '../../../locale';
+  import { __ } from '~/locale';
+  import icon from '~/vue_shared/components/icon.vue';
+  import toggleButton from '~/vue_shared/components/toggle_button.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
   import eventHub from '../../event_hub';
-  import loadingButton from '../../../vue_shared/components/loading_button.vue';
+
+  const ICON_ON = 'notifications';
+  const ICON_OFF = 'notifications-off';
+  const LABEL_ON = __('Notifications on');
+  const LABEL_OFF = __('Notifications off');
 
   export default {
+    directives: {
+      tooltip,
+    },
     components: {
-      loadingButton,
+      icon,
+      toggleButton,
     },
     props: {
       loading: {
@@ -17,22 +27,23 @@
       subscribed: {
         type: Boolean,
         required: false,
+        default: null,
       },
       id: {
         type: Number,
         required: false,
+        default: null,
       },
     },
     computed: {
-      buttonLabel() {
-        let label;
-        if (this.subscribed === false) {
-          label = __('Subscribe');
-        } else if (this.subscribed === true) {
-          label = __('Unsubscribe');
-        }
-
-        return label;
+      showLoadingState() {
+        return this.subscribed === null;
+      },
+      notificationIcon() {
+        return this.subscribed ? ICON_ON : ICON_OFF;
+      },
+      notificationTooltip() {
+        return this.subscribed ? LABEL_ON : LABEL_OFF;
       },
     },
     methods: {
@@ -46,21 +57,29 @@
 <template>
   <div>
     <div class="sidebar-collapsed-icon">
-      <i
-        class="fa fa-rss"
-        aria-hidden="true"
+      <span
+        v-tooltip
+        :title="notificationTooltip"
+        data-container="body"
+        data-placement="left"
       >
-      </i>
+        <icon
+          :name="notificationIcon"
+          :size="16"
+          aria-hidden="true"
+          class="sidebar-item-icon is-active"
+        />
+      </span>
     </div>
     <span class="issuable-header-text hide-collapsed pull-left">
       {{ __('Notifications') }}
     </span>
-    <loading-button
-      ref="loadingButton"
-      class="btn btn-default pull-right hide-collapsed js-issuable-subscribe-button"
-      :loading="loading"
-      :label="buttonLabel"
-      @click="toggleSubscription"
+    <toggle-button
+      ref="toggleButton"
+      class="pull-right hide-collapsed js-issuable-subscribe-button"
+      :is-loading="showLoadingState"
+      :value="subscribed"
+      @change="toggleSubscription"
     />
   </div>
 </template>