Replace fa-check icon in custom notifications

app/assets/javascripts/notifications_form.js

@@ -22,12 +22,8 @@ export default class NotificationsForm {
 
   // eslint-disable-next-line class-methods-use-this
   showCheckboxLoadingSpinner($parent) {
-    $parent
-      .addClass('is-loading')
-      .find('.custom-notification-event-loading')
-      .removeClass('fa-check')
-      .addClass('spinner align-middle')
-      .removeClass('is-done');
+    $parent.find('.is-loading').removeClass('gl-display-none');
+    $parent.find('.is-done').addClass('gl-display-none');
   }
 
   saveEvent($checkbox, $parent) {
@@ -39,14 +35,11 @@ export default class NotificationsForm {
       .then(({ data }) => {
         $checkbox.enable();
         if (data.saved) {
-          $parent
-            .find('.custom-notification-event-loading')
-            .toggleClass('spinner fa-check is-done align-middle');
+          $parent.find('.is-loading').addClass('gl-display-none');
+          $parent.find('.is-done').removeClass('gl-display-none');
+
           setTimeout(() => {
-            $parent
-              .removeClass('is-loading')
-              .find('.custom-notification-event-loading')
-              .toggleClass('spinner fa-check is-done align-middle');
+            $parent.find('.is-done').addClass('gl-display-none');
           }, 2000);
         }
       })

app/assets/stylesheets/pages/projects.scss

@@ -993,23 +993,6 @@ pre.light-well {
   }
 }
 
-.custom-notifications-form {
-  .is-loading {
-    .custom-notification-event-loading {
-      display: inline-block;
-    }
-  }
-}
-
-.custom-notification-event-loading {
-  display: none;
-  margin-left: 5px;
-
-  &.is-done {
-    color: $green-600;
-  }
-}
-
 .project-refs-form .dropdown-menu,
 .dropdown-menu-projects {
   width: 300px;

app/views/shared/notifications/_custom_notifications.html.haml

@@ -30,4 +30,5 @@
                       %label.form-check-label{ for: field_id }
                         %strong
                           = notification_event_name(event)
-                          .fa.custom-notification-event-loading.spinner
+                          %span.spinner.is-loading.gl-vertical-align-middle.gl-display-none
+                          = sprite_icon('check', css_class: 'is-done gl-display-none gl-vertical-align-middle gl-text-green-600')

changelogs/unreleased/mw-replace-fa-icons-custom-notifications.yml

+---
+title: Replace fa-check icon in custom notifications
+merge_request: 47288
+author:
+type: changed