Remove prepend-top-0 css rule

This removes the prepend-top-0 rule and
replaces usage accross GitLab with GitLab-UI
gl-mt-0 utility class instead

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -147,7 +147,7 @@ export default {
 <template>
   <div>
     <div class="d-flex board-card-header" dir="auto">
-      <h4 class="board-card-title append-bottom-0 prepend-top-0">
+      <h4 class="board-card-title append-bottom-0 gl-mt-0">
         <icon
           v-if="issue.blocked"
           v-gl-tooltip

app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue

@@ -66,7 +66,7 @@ export default {
 </script>
 <template>
   <div class="row my-3">
-    <h4 class="prepend-top-0 col-lg-8 offset-lg-2">{{ titleText }}</h4>
+    <h4 class="gl-mt-0 col-lg-8 offset-lg-2">{{ titleText }}</h4>
     <form ref="form" class="col-lg-8 offset-lg-2" :action="customMetricsPath" method="post">
       <custom-metrics-form-fields
         :form-operation="formOperation"

app/assets/javascripts/snippets/components/snippet_title.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 <template>
   <div class="snippet-header limited-header-width">
-    <h2 class="snippet-title prepend-top-0 mb-3" data-qa-selector="snippet_title">
+    <h2 class="snippet-title gl-mt-0 mb-3" data-qa-selector="snippet_title">
       {{ snippet.title }}
     </h2>
 

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-0 { margin-top: 0; }
 .prepend-top-2 { margin-top: 2px; }
 .prepend-top-4 { margin-top: $gl-padding-4; }
 .prepend-top-5 { margin-top: 5px; }

app/views/admin/appearances/_form.html.haml

@@ -6,7 +6,7 @@
 
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 Navigation bar
+      %h4.gl-mt-0 Navigation bar
 
     .col-lg-8
       .form-group
@@ -25,7 +25,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 Favicon
+      %h4.gl-mt-0 Favicon
 
     .col-lg-8
       .form-group
@@ -49,7 +49,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 Sign in/Sign up pages
+      %h4.gl-mt-0 Sign in/Sign up pages
 
     .col-lg-8
       .form-group
@@ -77,7 +77,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 New project pages
+      %h4.gl-mt-0 New project pages
 
     .col-lg-8
       .form-group
@@ -90,7 +90,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0 Profile image guideline
+      %h4.gl-mt-0 Profile image guideline
 
     .col-lg-8
       .form-group

app/views/admin/appearances/_system_header_footer_form.html.haml

@@ -3,7 +3,7 @@
 %hr
 .row
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('System header and footer')
 
   .col-lg-8

app/views/admin/hook_logs/_index.html.haml

 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       Recent Deliveries
     %p When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.
   .col-lg-9

app/views/clusters/clusters/_sidebar.html.haml

-%h4.prepend-top-0
+%h4.gl-mt-0
   = s_('ClusterIntegration|Add a Kubernetes cluster integration')
 %p
   = clusterable.sidebar_text

app/views/devise/confirmations/almost_there.haml

 .well-confirmation.text-center.append-bottom-20
-  %h1.prepend-top-0
+  %h1.gl-mt-0
     Almost there...
   %p.lead.append-bottom-20
     Please check your email to confirm your account

app/views/doorkeeper/applications/index.html.haml

@@ -3,7 +3,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       - if user_oauth_applications?
@@ -12,7 +12,7 @@
         = _("Manage applications that you've authorized to use your account.")
   .col-lg-8
     - if user_oauth_applications?
-      %h5.prepend-top-0
+      %h5.gl-mt-0
         = _('Add new application')
       = render 'form', application: @application
       %hr

app/views/import/phabricator/new.html.haml

@@ -11,7 +11,7 @@
 = form_tag import_phabricator_path, class: 'new_project', method: :post do
   = render 'import/shared/new_project_form'
 
-  %h4.prepend-top-0= _('Enter in your Phabricator Server URL and personal access token below')
+  %h4.gl-mt-0= _('Enter in your Phabricator Server URL and personal access token below')
 
   .form-group.row
     = label_tag :phabricator_server_url, _('Phabricator Server URL'), class: 'col-form-label col-md-2'

app/views/layouts/terms.html.haml

@@ -5,7 +5,7 @@
 
   %body{ data: { page: body_data_page } }
     .layout-page.terms{ class: page_class }
-      .content-wrapper.prepend-top-0
+      .content-wrapper.gl-mt-0
         .mobile-overlay
         .alert-wrapper
           = render "layouts/broadcast"

app/views/profiles/_event_table.html.haml

-%h5.prepend-top-0
+%h5.gl-mt-0
   = _('History of authentications')
 
 %ul.content-list

app/views/profiles/accounts/show.html.haml

@@ -7,7 +7,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('Profiles|Two-Factor Authentication')
     %p
       = s_("Profiles|Increase your account's security by enabling Two-Factor Authentication (2FA)")
@@ -24,7 +24,7 @@
 - if display_providers_on_profile?
   .row.prepend-top-default
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_('Profiles|Social sign-in')
       %p
         = s_('Profiles|Activate signin with one of the following services')
@@ -34,7 +34,7 @@
 - if current_user.can_change_username?
   .row.prepend-top-default
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0.warning-title
+      %h4.gl-mt-0.warning-title
         = s_('Profiles|Change username')
       %p
         = s_('Profiles|Changing your username can have unintended side effects.')
@@ -47,7 +47,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0.danger-title
+    %h4.gl-mt-0.danger-title
       = s_('Profiles|Delete account')
   .col-lg-8
     - if current_user.can_be_removed? && can?(current_user, :destroy_user, current_user)

app/views/profiles/active_sessions/index.html.haml

@@ -3,7 +3,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('This is a list of devices that have logged into your account. Revoke any sessions that you do not recognize.')

app/views/profiles/audit_log.html.haml

@@ -3,7 +3,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('This is a security log of important events involving your account.')

app/views/profiles/chat_names/index.html.haml

@@ -3,7 +3,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('You can see your chat accounts.')

app/views/profiles/emails/index.html.haml

@@ -3,12 +3,12 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('Control emails linked to your account')
   .col-lg-8
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('Add email address')
     = form_for 'email', url: profile_emails_path do |f|
       .form-group
@@ -17,7 +17,7 @@
       .prepend-top-default
         = f.submit _('Add email address'), class: 'btn btn-success', data: { qa_selector: 'add_email_address_button' }
     %hr
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('Linked emails (%{email_count})') % { email_count: @emails.load.size + 1 }
     .account-well.append-bottom-default
       %ul

app/views/profiles/gpg_keys/index.html.haml

@@ -3,12 +3,12 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('GPG keys allow you to verify signed commits.')
   .col-lg-8
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = _('Add a GPG key')
     %p.profile-settings-content
       - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/repository/gpg_signed_commits/index.md') }

app/views/profiles/keys/index.html.haml

@@ -3,12 +3,12 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('SSH keys allow you to establish a secure connection between your computer and GitLab.')
   .col-lg-8
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = _('Add an SSH key')
     %p.profile-settings-content
       - generate_link_url = help_page_path("ssh/README", anchor: 'generating-a-new-ssh-key-pair')

app/views/profiles/notifications/show.html.haml

@@ -11,14 +11,14 @@
   = hidden_field_tag :notification_type, 'global'
   .row.prepend-top-default
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = page_title
       %p
         = _('You can specify notification level per group or per project.')
       %p
         = _('By default, all projects and groups will use the global notifications setting.')
     .col-lg-8
-      %h5.prepend-top-0
+      %h5.gl-mt-0
         = _('Global notification settings')
 
       = form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications prepend-top-default' } do |f|

app/views/profiles/passwords/edit.html.haml

@@ -4,12 +4,12 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('After a successful password update, you will be redirected to the login page where you can log in with your new password.')
   .col-lg-8
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       - if @user.password_automatically_set
         = _('Change your password')
       - else

app/views/profiles/personal_access_tokens/index.html.haml

@@ -6,7 +6,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = s_('AccessTokens|You can generate a personal access token for each application you use that needs access to the GitLab API.')
@@ -35,7 +35,7 @@
 %hr
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('AccessTokens|Feed token')
     %p
       = s_('AccessTokens|Your feed token is used to authenticate you when your RSS reader loads a personalized RSS feed or when your calendar application loads a personalized calendar, and is included in those feed URLs.')
@@ -53,7 +53,7 @@
   %hr
   .row.prepend-top-default
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_('AccessTokens|Incoming email token')
       %p
         = s_('AccessTokens|Your incoming email token is used to authenticate you when you create a new issue by email, and is included in your personal project-specific email addresses.')
@@ -71,7 +71,7 @@
   %hr
   .row.prepend-top-default
     .col-lg-4
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_('AccessTokens|Static object token')
       %p
         = s_('AccessTokens|Your static object token is used to authenticate you when repository static objects (e.g. archives, blobs, ...) are being served from an external storage.')

app/views/profiles/preferences/_sourcegraph.html.haml

@@ -5,7 +5,7 @@
   %hr
 
 .col-lg-4.profile-settings-sidebar
-  %h4.prepend-top-0
+  %h4.gl-mt-0
     = s_('Preferences|Integrations')
   %p
     = s_('Preferences|Customize integrations with third party services.')

app/views/profiles/preferences/show.html.haml

@@ -3,7 +3,7 @@
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
   .col-lg-4.application-theme
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('Preferences|Navigation theme')
     %p
       = s_('Preferences|Customize the appearance of the application header and navigation sidebar.')
@@ -18,7 +18,7 @@
     %hr
 
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('Preferences|Syntax highlighting theme')
     %p
       = s_('Preferences|This setting allows you to customize the appearance of the syntax.')
@@ -35,7 +35,7 @@
     %hr
 
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('Preferences|Behavior')
     %p
       = s_('Preferences|This setting allows you to customize the behavior of the system layout and default views.')
@@ -83,7 +83,7 @@
     %hr
 
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('Localization')
     %p
       = _('Customize language and region related settings.')
@@ -104,7 +104,7 @@
     .col-sm-12
       %hr
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0= s_('Preferences|Time preferences')
+      %h4.gl-mt-0= s_('Preferences|Time preferences')
       %p= s_('Preferences|These settings will update how dates and times are displayed for you.')
     .col-lg-8
       .form-group

app/views/profiles/show.html.haml

@@ -7,7 +7,7 @@
 
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_("Profiles|Public Avatar")
       %p
         - if @user.avatar?
@@ -27,7 +27,7 @@
       .clearfix.avatar-image.append-bottom-default
         = 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.prepend-top-0= s_("Profiles|Upload new avatar")
+      %h5.gl-mt-0= s_("Profiles|Upload new avatar")
       .prepend-top-5.append-bottom-10
         %button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
         %span.avatar-file-name.prepend-left-default.js-avatar-filename= s_("Profiles|No file chosen")
@@ -40,7 +40,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0= s_("Profiles|Current status")
+      %h4.gl-mt-0= s_("Profiles|Current status")
       %p= s_("Profiles|This emoji and message will appear on your profile and throughout the interface.")
     .col-lg-8
       = f.fields_for :status, @user.status do |status_form|
@@ -71,7 +71,7 @@
     %hr
     .row.user-time-preferences
       .col-lg-4.profile-settings-sidebar
-        %h4.prepend-top-0= s_("Profiles|Time settings")
+        %h4.gl-mt-0= s_("Profiles|Time settings")
         %p= s_("Profiles|You can set your current timezone here")
       .col-lg-8
         -# TODO: might need an entry in user/profile.md to describe some of these settings
@@ -83,7 +83,7 @@
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = s_("Profiles|Main settings")
       %p
         = s_("Profiles|This information will appear on your profile")

app/views/profiles/two_factor_auths/show.html.haml

@@ -5,7 +5,7 @@
 .js-two-factor-auth{ 'data-two-factor-skippable' => "#{two_factor_skippable?}", 'data-two_factor_skip_url' => skip_profile_two_factor_auth_path }
   .row.prepend-top-default
     .col-lg-4
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = _('Register Two-Factor Authenticator')
       %p
         = _('Use an one time password authenticator on your mobile device or computer to enable two-factor authentication (2FA).')
@@ -33,13 +33,13 @@
             = raw @qr_code
           .col-md-8
             .account-well
-              %p.prepend-top-0.append-bottom-0
+              %p.gl-mt-0.append-bottom-0
                 = _("Can't scan the code?")
-              %p.prepend-top-0.append-bottom-0
+              %p.gl-mt-0.append-bottom-0
                 = _('To add the entry manually, provide the following details to the application on your phone.')
-              %p.prepend-top-0.append-bottom-0
+              %p.gl-mt-0.append-bottom-0
                 = _('Account: %{account}') % { account: @account_string }
-              %p.prepend-top-0.append-bottom-0
+              %p.gl-mt-0.append-bottom-0
                 = _('Key: %{key}') %{ key: current_user.otp_secret.scan(/.{4}/).join(' ') }
               %p.two-factor-new-manual-content
                 = _('Time based: Yes')
@@ -57,7 +57,7 @@
 
   .row.prepend-top-default
     .col-lg-4
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = _('Register Universal Two-Factor (U2F) Device')
       %p
         = _('Use a hardware device to add the second factor of authentication.')

app/views/projects/cleanup/_show.html.haml

@@ -14,9 +14,9 @@
   .settings-content
     - url = cleanup_namespace_project_settings_repository_path(@project.namespace, @project)
     = form_for @project, url: url, method: :post, authenticity_token: true, html: { class: 'js-requires-input' } do |f|
-      %fieldset.prepend-top-0.append-bottom-10
+      %fieldset.gl-mt-0.append-bottom-10
         .append-bottom-10
-          %h5.prepend-top-0
+          %h5.gl-mt-0
             = _("Upload object map")
           %button.btn.btn-default.js-choose-file{ type: "button" }
             = _("Choose a file")

app/views/projects/empty.html.haml

@@ -6,7 +6,7 @@
 %div{ class: [("limit-container-width" unless fluid_layout)] }
   = render "home_panel"
 
-  %h4.prepend-top-0.append-bottom-8
+  %h4.gl-mt-0.append-bottom-8
     = _('The repository for this project is empty')
 
   - if @project.can_current_user_push_code?

app/views/projects/environments/_form.html.haml

 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _("Environments")
     %p
       - link_to_read_more = link_to(_("Read more about environments"), help_page_path("ci/environments"))

app/views/projects/forks/new.html.haml

@@ -2,14 +2,14 @@
 
 .row.prepend-top-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _("Fork project")
     %p
       = _("A fork is a copy of a project.<br />Forking a repository allows you to make changes without affecting the original project.").html_safe
   .col-lg-9
     - if @namespaces.present?
       .fork-thumbnail-container.js-fork-content
-        %h5.prepend-top-0.append-bottom-0.prepend-left-default.append-right-default
+        %h5.gl-mt-0.append-bottom-0.prepend-left-default.append-right-default
           = _("Select a namespace to fork the project")
         - @namespaces.each do |namespace|
           = render 'fork_button', namespace: namespace

app/views/projects/hook_logs/_index.html.haml

 .row.prepend-top-32.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       Recent Deliveries
     %p When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.
   .col-lg-9

app/views/projects/hook_logs/show.html.haml

@@ -4,7 +4,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       Request details
   .col-lg-9
     = link_to 'Resend Request', @hook_log.present.retry_path, method: :post, class: "btn btn-default float-right prepend-left-10"

app/views/projects/new.html.haml

@@ -9,7 +9,7 @@
     = render 'projects/errors'
   .row
     .col-lg-3.profile-settings-sidebar
-      %h4.prepend-top-0
+      %h4.gl-mt-0
         = _('New project')
       %p
         - among_other_things_link = link_to _('among other things'), help_page_path("user/project/index.md", anchor: "projects-features"), target: '_blank'

app/views/projects/protected_branches/show.html.haml

@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0.ref-name
+    %h4.gl-mt-0.ref-name
       = @protected_ref.name
 
   .col-lg-9

app/views/projects/protected_tags/show.html.haml

@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0.ref-name
+    %h4.gl-mt-0.ref-name
       = @protected_ref.name
 
   .col-lg-9.edit_protected_tag

app/views/projects/services/_form.html.haml

 .row.prepend-top-default.append-bottom-default
   .col-lg-4
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = @service.title
       - [true, false].each do |value|
         - hide_class = 'd-none' if @service.operating? != value

app/views/projects/services/prometheus/_show.html.haml

 .row
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = s_('PrometheusService|Metrics')
 
 .row.append-bottom-default.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring

app/views/projects/settings/access_tokens/index.html.haml

@@ -6,7 +6,7 @@
 
 .row.prepend-top-default
   .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = page_title
     %p
       = _('You can generate an access token scoped to this project for each application to use the GitLab API.')

app/views/projects/settings/ci_cd/_form.html.haml

@@ -4,7 +4,7 @@
       = form_errors(@project)
       %fieldset.builds-feature
         .form-group
-          %h5.prepend-top-0
+          %h5.gl-mt-0
             = _("Git strategy for pipelines")
           %p
             = _("Choose between <code>clone</code> or <code>fetch</code> to get the recent application code").html_safe

app/views/projects/triggers/edit.html.haml

@@ -2,6 +2,6 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-12
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       Update trigger
     = render "form", btn_text: "Save trigger"

app/views/shared/access_tokens/_created_container.html.haml

 .created-personal-access-token-container
-  %h5.prepend-top-0
+  %h5.gl-mt-0
     = _('Your new %{type}') % { type: type }
   .form-group
     .input-group

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

 - title = local_assigns.fetch(:title, _('Add a %{type}') % { type: type })
 - prefix = local_assigns.fetch(:prefix, :personal_access_token)
 
-%h5.prepend-top-0
+%h5.gl-mt-0
   = title
 %p.profile-settings-content
   = _("Enter the name of your application, and we'll return a unique %{type}.") % { type: type }

app/views/shared/deploy_keys/_index.html.haml

@@ -7,7 +7,7 @@
     %p
       = _('Deploy keys allow read-only or read-write (if enabled) access to your repository. Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.')
   .settings-content
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = _('Create a new deploy key for this project')
     = render @deploy_keys.form_partial_path
     %hr

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

@@ -10,7 +10,7 @@
   .settings-content
     - if @new_deploy_token.persisted?
       = render 'shared/deploy_tokens/new_deploy_token', deploy_token: @new_deploy_token
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = s_('DeployTokens|Add a deploy token')
     = render 'shared/deploy_tokens/form', group_or_project: group_or_project, token: @new_deploy_token, presenter: @deploy_tokens
     %hr

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

 .qa-created-deploy-token-section.created-deploy-token-container.info-well
   .well-segment
-    %h5.prepend-top-0
+    %h5.gl-mt-0
       = s_('DeployTokens|Your New Deploy Token')
 
     .form-group

app/views/shared/file_hooks/_index.html.haml

@@ -2,7 +2,7 @@
 
 .row.prepend-top-default
   .col-lg-4
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       = _('File Hooks')
     %p
       = _('File hooks are similar to system hooks but are executed as files instead of sending data to a URL.')

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

 .banner-callout.compact.milestone-deprecation-message.js-milestone-deprecation-message.prepend-top-20
   .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg'
   .banner-body.prepend-left-10.append-right-10
-    %h5.banner-title.prepend-top-0= _('This page will be removed in a future release.')
+    %h5.banner-title.gl-mt-0= _('This page will be removed in a future release.')
     %p.milestone-banner-text= _('Use group milestones to manage issues from multiple projects in the same milestone.')
     = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn btn-link js-popover-link text-align-left milestone-banner-link'
     .milestone-banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank'

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

@@ -16,7 +16,7 @@
             = hidden_field_tag("hide_label", true) if hide_label
             .row
               .col-lg-4
-                %h4.prepend-top-0= _('Notification events')
+                %h4.gl-mt-0= _('Notification events')
                 %p
                   - notification_link = link_to _('notification emails'), help_page_path('user/profile/notifications'), target: '_blank'
                   - paragraph = _('Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}.') % { notification_link: notification_link.html_safe }
@@ -26,7 +26,7 @@
                   - next if notification_event_disabled?(event)
                   - field_id = "#{notifications_menu_identifier("modal", notification_setting)}_notification_setting[#{event}]"
                   .form-group
-                    .form-check{ class: ("prepend-top-0" if index == 0) }
+                    .form-check{ class: ("gl-mt-0" if index == 0) }
                       = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event form-check-input", checked: notification_setting.public_send(event))
                       %label.form-check-label{ for: field_id }
                         %strong

app/views/shared/snippets/_header.html.haml

@@ -17,7 +17,7 @@
       = render "snippets/actions"
 
 .snippet-header.limited-header-width
-  %h2.snippet-title.prepend-top-0.mb-3{ data: { qa_selector: 'snippet_title' } }
+  %h2.snippet-title.gl-mt-0.mb-3{ data: { qa_selector: 'snippet_title' } }
     = markdown_field(@snippet, :title)
 
   - if @snippet.description.present?

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

-%h4.prepend-top-0
+%h4.gl-mt-0
   = page_title
 %p
   - link = link_to(hook.pluralized_name, help_page_path(hook.help_path))

ee/app/assets/javascripts/subscriptions/new/components/checkout/step_header.vue

@@ -26,6 +26,6 @@ export default {
       :aria-label="title"
       name="check-circle"
     />
-    <h5 class="prepend-top-0 append-bottom-default">{{ title }}</h5>
+    <h5 class="gl-mt-0 append-bottom-default">{{ title }}</h5>
   </div>
 </template>

ee/app/views/namespaces/_shared_runners_minutes_setting_reset.html.haml

 - css_class = local_assigns.fetch(:css_class, '')
-.bs-callout.clearfix.prepend-top-0{ class: css_class }
+.bs-callout.clearfix.gl-mt-0{ class: css_class }
   %h4= s_("SharedRunnersMinutesSettings|Reset used pipeline minutes")
   %p= s_("SharedRunnersMinutesSettings|By resetting the pipeline minutes for this namespace, the currently used minutes will be set to zero.")
 

ee/app/views/projects/settings/slacks/edit.html.haml

@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.gl-mt-0
       Edit project alias
 
     %p You can use this alias in your Slack commands