Replace append-top-5 class

This replaces the append-top-5 css
class for the gl-mt-2 utility class
from GitLab-UI

app/assets/javascripts/ide/components/ide_review.vue

@@ -53,7 +53,7 @@ export default {
           @click="updateViewer"
         />
       </div>
-      <div class="prepend-top-5 ide-review-sub-header">
+      <div class="gl-mt-2 ide-review-sub-header">
         <template v-if="showLatestChangesText">
           {{ __('Latest changes') }}
         </template>

app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue

@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
+  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
     <div ref="accessibility-issue-description" class="report-block-list-issue-description-text">
       <div
         v-if="isNew"

app/assets/javascripts/reports/components/test_issue_body.vue

@@ -25,7 +25,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
+  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
     <div class="report-block-list-issue-description-text" data-testid="test-issue-body-description">
       <button
         type="button"

app/assets/javascripts/vue_shared/components/file_finder/item.vue

@@ -88,7 +88,7 @@ export default {
         >
         </span>
       </strong>
-      <span class="diff-changed-file-path prepend-top-5">
+      <span class="diff-changed-file-path gl-mt-2">
         <span
           v-for="(char, charIndex) in pathWithEllipsis.split('')"
           :key="charIndex + char"

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-5 { margin-top: 5px; }
 .prepend-top-10 { margin-top: 10px; }
 .prepend-top-15 { margin-top: 15px; }
 .prepend-top-20 { margin-top: 20px; }

app/views/admin/application_settings/_account_and_limit.html.haml

@@ -54,7 +54,7 @@
           = _('Newly registered users will by default be external')
       .prepend-top-10
         = _('Internal users')
-      = f.text_field :user_default_internal_regex, placeholder: _('Regex pattern'), class: 'form-control prepend-top-5'
+      = f.text_field :user_default_internal_regex, placeholder: _('Regex pattern'), class: 'form-control gl-mt-2'
       .help-block
         = _('Specify an e-mail address regex pattern to identify default internal users.')
         = link_to _('More information'), help_page_path('user/permissions', anchor: 'setting-new-users-to-external'),

app/views/groups/labels/index.html.haml

@@ -8,7 +8,7 @@
   #promote-label-modal
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
-  .labels-container.prepend-top-5
+  .labels-container.gl-mt-2
     - if @labels.any?
       .text-muted
         = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuable_types.to_sentence }

app/views/profiles/show.html.haml

@@ -29,7 +29,7 @@
         = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
           = image_tag avatar_icon_for_user(@user, 160), alt: '', class: 'avatar s160'
       %h5.gl-mt-0= s_("Profiles|Upload new avatar")
-      .prepend-top-5.append-bottom-10
+      .gl-mt-2.append-bottom-10
         %button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
         %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen")
         = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'

app/views/projects/diffs/_stats.html.haml

@@ -30,7 +30,7 @@
                 - else
                   %strong.diff-changed-blank-file-name
                     = s_('Diffs|No file name available')
-                %span.diff-changed-file-path.prepend-top-5= diff_file_path_text(diff_file)
+                %span.diff-changed-file-path.gl-mt-2= diff_file_path_text(diff_file)
               %span.diff-changed-stats
                 %span.cgreen<
                   +#{diff_file.added_lines}

app/views/projects/snippets/_actions.html.haml

@@ -14,7 +14,7 @@
     = link_to _('Submit as spam'), mark_as_spam_project_snippet_path(@project, @snippet), method: :post, class: 'btn btn-grouped btn-spam', title: _('Submit as spam')
 - if can?(current_user, :create_snippet, @project) || can?(current_user, :update_snippet, @snippet)
   .d-block.d-sm-none.dropdown
-    %button.btn.btn-default.btn-block.gl-mb-0.prepend-top-5{ data: { toggle: "dropdown" } }
+    %button.btn.btn-default.btn-block.gl-mb-0.gl-mt-2{ data: { toggle: "dropdown" } }
       = _('Options')
       = icon('caret-down')
     .dropdown-menu.dropdown-menu-full-width

app/views/shared/deploy_tokens/_new_deploy_token.html.haml

@@ -8,11 +8,11 @@
         = text_field_tag 'deploy-token-user', deploy_token.username, readonly: true, class: 'deploy-token-field form-control js-select-on-focus qa-deploy-token-user'
         .input-group-append
           = clipboard_button(text: deploy_token.username, title: s_('DeployTokens|Copy username'), placement: 'left')
-      %span.deploy-token-help-block.prepend-top-5.text-success= s_("DeployTokens|Use this username as a login.")
+      %span.deploy-token-help-block.gl-mt-2.text-success= s_("DeployTokens|Use this username as a login.")
 
     .form-group
       .input-group
         = text_field_tag 'deploy-token', deploy_token.token, readonly: true, class: 'deploy-token-field form-control js-select-on-focus qa-deploy-token'
         .input-group-append
           = clipboard_button(text: deploy_token.token, title: s_('DeployTokens|Copy deploy token'), placement: 'left')
-      %span.deploy-token-help-block.prepend-top-5.text-danger= s_("DeployTokens|Use this token as a password. Make sure you save it - you won't be able to access it again.")
+      %span.deploy-token-help-block.gl-mt-2.text-danger= s_("DeployTokens|Use this token as a password. Make sure you save it - you won't be able to access it again.")

app/views/shared/issuable/form/_contribution.html.haml

@@ -11,7 +11,7 @@
   %label.col-form-label.col-sm-2
     = _('Contribution')
   .col-sm-10
-    .form-check.prepend-top-5
+    .form-check.gl-mt-2
       = form.check_box :allow_collaboration, disabled: !issuable.can_allow_collaboration?(current_user), class: 'form-check-input'
       = form.label :allow_collaboration, class: 'form-check-label' do
         = _('Allow commits from members who can merge to the target branch.')

app/views/shared/milestones/_form_dates.html.haml

@@ -4,10 +4,10 @@
       = f.label :start_date, _('Start Date')
     .col-sm-10
       = f.text_field :start_date, class: "datepicker form-control", data: { qa_selector: "start_date_field" }, placeholder: _('Select start date'), autocomplete: 'off'
-      %a.inline.float-right.prepend-top-5.js-clear-start-date{ href: "#" }= _('Clear start date')
+      %a.inline.float-right.gl-mt-2.js-clear-start-date{ href: "#" }= _('Clear start date')
   .form-group.row
     .col-form-label.col-sm-2
       = f.label :due_date, _('Due Date')
     .col-sm-10
       = f.text_field :due_date, class: "datepicker form-control", data: { qa_selector: "due_date_field" }, placeholder: _('Select due date'), autocomplete: 'off'
-      %a.inline.float-right.prepend-top-5.js-clear-due-date{ href: "#" }= _('Clear due date')
+      %a.inline.float-right.gl-mt-2.js-clear-due-date{ href: "#" }= _('Clear due date')

app/views/shared/web_hooks/_hook.html.haml

@@ -10,7 +10,7 @@
           = _('SSL Verification:')
           = hook.enable_ssl_verification ? _('enabled') : _('disabled')
 
-    .col-md-4.col-lg-5.text-right-md.prepend-top-5
+    .col-md-4.col-lg-5.text-right-md.gl-mt-2
       %span>= render 'shared/web_hooks/test_button', hook: hook, button_class: 'btn-sm gl-mr-3'
       %span>= link_to _('Edit'), edit_hook_path(hook), class: 'btn btn-sm gl-mr-3'
       = link_to _('Delete'), destroy_hook_path(hook), data: { confirm: _('Are you sure?') }, method: :delete, class: 'btn btn-sm'

app/views/shared/wikis/_form.html.haml

@@ -20,7 +20,7 @@
     .col-sm-12= f.label :title, class: 'control-label-full-width'
     .col-sm-12
       = f.text_field :title, class: 'form-control qa-wiki-title-textbox', value: @page.title, required: true, autofocus: !@page.persisted?, placeholder: s_('Wiki|Page title')
-      %span.d-inline-block.mw-100.prepend-top-5
+      %span.d-inline-block.mw-100.gl-mt-2
         = icon('lightbulb-o')
         - if @page.persisted?
           = s_("WikiEditPageTip|Tip: You can move this page by adding the path to the beginning of the title.")

app/views/snippets/_actions.html.haml

@@ -13,7 +13,7 @@
   - if @snippet.submittable_as_spam_by?(current_user)
     = link_to _('Submit as spam'), mark_as_spam_snippet_path(@snippet), method: :post, class: 'btn btn-grouped btn-spam', title: _('Submit as spam')
 .d-block.d-sm-none.dropdown
-  %button.btn.btn-default.btn-block.gl-mb-0.prepend-top-5{ data: { toggle: "dropdown" } }
+  %button.btn.btn-default.btn-block.gl-mb-0.gl-mt-2{ data: { toggle: "dropdown" } }
     = _("Options")
     = icon('caret-down')
   .dropdown-menu.dropdown-menu-full-width

ee/app/assets/javascripts/billings/components/subscription_table_row.vue

@@ -66,7 +66,7 @@ export default {
       >
         <span class="property-label"> {{ col.label }} </span>
         <popover v-if="col.popover" :options="getPopoverOptions(col)" />
-        <p class="property-value prepend-top-5 gl-mb-0" :class="[col.colClass ? col.colClass : '']">
+        <p class="property-value gl-mt-2 gl-mb-0" :class="[col.colClass ? col.colClass : '']">
           {{ getDisplayValue(col) }}
         </p>
       </div>

ee/app/assets/javascripts/related_issues/components/related_issues_list.vue

@@ -106,7 +106,7 @@ export default {
       :class="{ 'sortable-container': canReorder }"
     >
       <div v-if="isFetching" class="related-issues-loading-icon qa-related-issues-loading-icon">
-        <gl-loading-icon ref="loadingIcon" label="Fetching linked issues" class="prepend-top-5" />
+        <gl-loading-icon ref="loadingIcon" label="Fetching linked issues" class="gl-mt-2" />
       </div>
       <ul ref="list" :class="{ 'content-list': !canReorder }" class="related-items-list">
         <li

ee/app/assets/javascripts/subscriptions/new/components/order_summary.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 <template>
-  <div class="order-summary d-flex flex-column flex-grow-1 prepend-top-5 mt-lg-5">
+  <div class="order-summary d-flex flex-column flex-grow-1 gl-mt-2 mt-lg-5">
     <div class="d-lg-none">
       <div @click="toggleCollapse">
         <h4 class="d-flex justify-content-between gl-font-lg" :class="{ 'gl-mb-7': !collapsed }">

ee/app/assets/javascripts/vue_merge_request_widget/components/codequality_issue_body.vue

@@ -30,7 +30,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
+  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
     <div class="report-block-list-issue-description-text">
       <template v-if="isStatusSuccess">{{ s__('ciReport|Fixed:') }}</template>
 

ee/app/assets/javascripts/vue_merge_request_widget/components/performance_issue_body.vue

@@ -43,7 +43,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
+  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
     <div class="report-block-list-issue-description-text">
       <template v-if="issueScore">
         {{ issue.name }}: <strong>{{ issueScore }}</strong>

ee/app/assets/javascripts/vue_shared/security_reports/components/security_issue_body.vue

@@ -34,7 +34,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
+  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
     <div class="report-block-list-issue-description-text">
       <severity-badge v-if="issue.severity" class="d-inline-block" :severity="issue.severity" />
       <modal-open-name :issue="issue" :status="status" />

ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue

@@ -249,7 +249,7 @@ export default {
             <div class="report-block-list-icon append-right-5 failed">
               <icon :size="32" name="status_failed_borderless" />
             </div>
-            <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
+            <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
               <div class="report-block-list-issue-description-text">
                 {{ instance.method }}
               </div>

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_details_spec.js.snap

@@ -211,7 +211,7 @@ key2: value2"
           </div>
            
           <div
-            class="report-block-list-issue-description prepend-top-5 gl-mb-2"
+            class="report-block-list-issue-description gl-mt-2 gl-mb-2"
           >
             <div
               class="report-block-list-issue-description-text"