Remove the prepend-top-2 CSS class

This removes the prepend-top-2 utility CSS class
and replaces it for the gl-mt-2 gitlab-UI CSS
class

app/assets/javascripts/groups/components/group_item.vue

@@ -150,7 +150,7 @@ export default {
           class="metadata align-items-md-center d-flex flex-grow-1 flex-shrink-0 flex-wrap justify-content-md-between"
         >
           <item-actions v-if="isGroup" :group="group" :parent-group="parentGroup" />
-          <item-stats :item="group" class="group-stats prepend-top-2 d-none d-md-flex" />
+          <item-stats :item="group" class="group-stats gl-mt-2 d-none d-md-flex" />
         </div>
       </div>
     </div>

app/assets/stylesheets/framework/common.scss

@@ -396,7 +396,6 @@ img.emoji {
   🚨 Do not use these classes — they are deprecated and being removed. 🚨
   See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
 **/
-.prepend-top-2 { margin-top: 2px; }
 .prepend-top-4 { margin-top: $gl-padding-4; }
 .prepend-top-5 { margin-top: 5px; }
 .prepend-top-8 { margin-top: $grid-size; }

app/helpers/active_sessions_helper.rb

@@ -20,6 +20,6 @@ module ActiveSessionsHelper
         'monitor-o'
       end
 
-    sprite_icon(icon_name, size: 16, css_class: 'prepend-top-2')
+    sprite_icon(icon_name, size: 16, css_class: 'gl-mt-2')
   end
 end

app/views/admin/users/_user_detail.html.haml

@@ -3,7 +3,7 @@
     = image_tag avatar_icon_for_user(user), class: 'avatar s32 d-none d-md-flex', alt: _('Avatar for %{name}') % { name: sanitize_name(user.name) }
     .row-main-content
       .row-title.str-truncated-100
-        = image_tag avatar_icon_for_user(user), class: 'avatar s16 d-xs-flex d-md-none mr-1 prepend-top-2', alt: _('Avatar for %{name}') % { name: sanitize_name(user.name) }
+        = image_tag avatar_icon_for_user(user), class: 'avatar s16 d-xs-flex d-md-none mr-1 gl-mt-2', alt: _('Avatar for %{name}') % { name: sanitize_name(user.name) }
         = link_to user.name, admin_user_path(user), class: 'text-plain js-user-link', data: { user_id: user.id, qa_selector: 'username_link' }
 
       = render_if_exists 'admin/users/user_listing_note', user: user

app/views/layouts/header/_current_user_dropdown.html.haml

@@ -6,7 +6,7 @@
       = current_user.name
     = current_user.to_reference
     - if current_user.status
-      .user-status.d-flex.align-items-center.prepend-top-2.has-tooltip{ title: current_user.status.message_html, data: { html: 'true', placement: 'bottom' } }
+      .user-status.d-flex.align-items-center.gl-mt-2.has-tooltip{ title: current_user.status.message_html, data: { html: 'true', placement: 'bottom' } }
         %span.user-status-emoji.d-flex.align-items-center
           = emoji_icon current_user.status.emoji
         %span.user-status-message.str-truncated

ee/app/assets/javascripts/feature_flags/components/feature_flags_table.vue

@@ -185,7 +185,7 @@ export default {
               v-for="scope in featureFlag.scopes"
               :key="scope.id"
               v-gl-tooltip.hover="scopeTooltipText(scope)"
-              class="badge append-right-8 prepend-top-2"
+              class="badge append-right-8 gl-mt-2"
               :class="{
                 'badge-active': scope.active,
                 'badge-inactive': !scope.active,

ee/app/views/shared/credentials_inventory/users/_user_detail.html.haml

@@ -3,7 +3,7 @@
     = user_avatar_without_link(user: user, size: 32, css_class: 'avatar s32 d-none d-md-flex')
     .row-main-content
       .row-title.str-truncated-100
-        = user_avatar_without_link(user: user, size: 16, css_class: 'avatar s16 d-xs-flex d-md-none mr-1 prepend-top-2')
+        = user_avatar_without_link(user: user, size: 16, css_class: 'avatar s16 d-xs-flex d-md-none mr-1 gl-mt-2')
         = link_to user.name, user_detail_path(user), class: 'text-plain js-user-link', data: { user_id: user.id, qa_selector: 'username_link' }
 
       .row-second-line.str-truncated-100