Remove prepend-top-default CSS class

This removes the prepend-top-default CSS class and replaces it for the gl-mt-3 utility class from GitLab-UI

Remove prepend-top-default CSS class
This removes the prepend-top-default CSS class and replaces it for the gl-mt-3 utility class from GitLab-UI
5eb4fd19 · Jose Vargas · 39694dce · 5eb4fd19 · 5eb4fd19 · 5eb4fd19
Commit 5eb4fd19 authored Jun 24, 2020 by Jose Vargas
166 changed files
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -441,7 +441,7 @@ export default {
        :prev-page="prevPage"
        :next-page="nextPage"
        align="center"
-        class="gl-pagination prepend-top-default"
+        class="gl-pagination gl-mt-3"
        @input="handlePageChange"
      />
    </div>

--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -164,7 +164,7 @@ export default {
 <template>
  <form
    :class="{ 'was-validated': wasValidated }"
-    class="prepend-top-default gl-mb-3 needs-validation"
+    class="gl-mt-3 gl-mb-3 needs-validation"
    novalidate
    @submit.prevent.stop="onSubmit"
  >

--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -96,7 +96,7 @@ export default {
            <preview-item :draft="draft" :is-last="isLast(index)" />
          </li>
        </ul>
-        <gl-loading-icon v-else size="lg" class="prepend-top-default gl-mb-3" />
+        <gl-loading-icon v-else size="lg" class="gl-mt-3 gl-mb-3" />
      </div>
      <div class="dropdown-footer">
        <publish-button

--- a/app/assets/javascripts/blob/notebook/notebook_viewer.vue
+++ b/app/assets/javascripts/blob/notebook/notebook_viewer.vue
@@ -62,7 +62,7 @@ export default {
 </script>

 <template>
-  <div class="js-notebook-viewer-mounted container-fluid md prepend-top-default gl-mb-3">
+  <div class="js-notebook-viewer-mounted container-fluid md gl-mt-3 gl-mb-3">
    <div v-if="loading && !error" class="text-center loading">
      <gl-loading-icon class="mt-5" size="lg" />
    </div>

--- a/app/assets/javascripts/blob/pdf/pdf_viewer.vue
+++ b/app/assets/javascripts/blob/pdf/pdf_viewer.vue
@@ -34,7 +34,7 @@ export default {
 </script>

 <template>
-  <div class="js-pdf-viewer container-fluid md prepend-top-default gl-mb-3">
+  <div class="js-pdf-viewer container-fluid md gl-mt-3 gl-mb-3">
    <div v-if="loading && !error" class="text-center loading">
      <gl-loading-icon class="mt-5" size="lg" />
    </div>

--- a/app/assets/javascripts/blob/sketch/index.js
+++ b/app/assets/javascripts/blob/sketch/index.js
@@ -56,7 +56,7 @@ export default class SketchLoader {
  error() {
    const errorMsg = document.createElement('p');

-    errorMsg.className = 'prepend-top-default gl-mb-3 text-center';
+    errorMsg.className = 'gl-mt-3 gl-mb-3 text-center';
    errorMsg.textContent = __(`
      Cannot show preview. For previews on sketch files, they must have the file format
      introduced by Sketch version 43 and above.

--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -67,12 +67,7 @@ export default {

 <template>
  <div class="environments-container">
-    <gl-loading-icon
-      v-if="isLoading"
-      size="md"
-      class="prepend-top-default"
-      label="Loading environments"
-    />
+    <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" label="Loading environments" />

    <slot name="emptyState"></slot>


--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -49,7 +49,7 @@ export default {
      <pagination-links
        :change="change"
        :page-info="pageInfo"
-        class="d-flex justify-content-center prepend-top-default"
+        class="d-flex justify-content-center gl-mt-3"
      />
    </template>
  </div>

--- a/app/assets/javascripts/ide/components/jobs/list.vue
+++ b/app/assets/javascripts/ide/components/jobs/list.vue
@@ -26,7 +26,7 @@ export default {

 <template>
  <div>
-    <gl-loading-icon v-if="loading && !stages.length" size="lg" class="prepend-top-default" />
+    <gl-loading-icon v-if="loading && !stages.length" size="lg" class="gl-mt-3" />
    <template v-else>
      <stage
        v-for="stage in stages"

--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -56,7 +56,7 @@ export default {
 </script>

 <template>
-  <div class="ide-stage card prepend-top-default">
+  <div class="ide-stage card gl-mt-3">
    <div
      ref="cardHeader"
      :class="{

--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -154,10 +154,7 @@ export default {
          data-qa-selector="file_name_field"
          :placeholder="placeholder"
        />
-        <ul
-          v-if="isCreatingNewFile"
-          class="file-templates prepend-top-default list-inline qa-template-list"
-        >
+        <ul v-if="isCreatingNewFile" class="file-templates gl-mt-3 list-inline qa-template-list">
          <li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item">
            <button
              type="button"

--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -59,7 +59,7 @@ export default {

 <template>
  <div class="ide-pipeline">
-    <gl-loading-icon v-if="showLoadingIcon" size="lg" class="prepend-top-default" />
+    <gl-loading-icon v-if="showLoadingIcon" size="lg" class="gl-mt-3" />
    <template v-else-if="hasLoadedPipeline">
      <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
        <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" />

--- a/app/assets/javascripts/ide/components/terminal/empty_state.vue
+++ b/app/assets/javascripts/ide/components/terminal/empty_state.vue
@@ -43,7 +43,7 @@ export default {
  <div class="text-center p-3">
    <div v-if="illustrationPath" class="svg-content svg-130"><img :src="illustrationPath" /></div>
    <h4>{{ __('Web Terminal') }}</h4>
-    <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" />
    <template v-else>
      <p>{{ __('Run tests against your code live using the Web Terminal') }}</p>
      <p>

--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -63,7 +63,7 @@ export default {
 </script>

 <template>
-  <div class="prepend-top-default gl-mb-3 clearfix">
+  <div class="gl-mt-3 gl-mb-3 clearfix">
    <button
      :class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
      :disabled="formState.updateLoading || !isSubmitEnabled"

--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -274,7 +274,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default gl-mb-3 js-environment-container">
+  <div class="gl-mt-3 gl-mb-3 js-environment-container">
    <div class="environment-information">
      <ci-icon :status="iconStatus" />
      <p class="inline gl-mb-0" v-html="environment"></p>

--- a/app/assets/javascripts/jobs/components/erased_block.vue
+++ b/app/assets/javascripts/jobs/components/erased_block.vue
@@ -27,7 +27,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default js-build-erased">
+  <div class="gl-mt-3 js-build-erased">
    <div class="erased alert alert-warning">
      <template v-if="isErasedByUser">
        {{ s__('Job|Job has been erased by') }}

--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -270,7 +270,7 @@ export default {
        <div
          v-if="job.archived"
          ref="sticky"
-          class="js-archived-job prepend-top-default archived-job"
+          class="js-archived-job gl-mt-3 archived-job"
          :class="{ 'sticky-top border-bottom-0': hasTrace }"
        >
          <icon name="lock" class="align-text-bottom" />
@@ -280,7 +280,7 @@ export default {
        <div
          v-if="hasTrace"
          class="build-trace-container position-relative"
-          :class="{ 'prepend-top-default': !job.archived }"
+          :class="{ 'gl-mt-3': !job.archived }"
        >
          <log-top-bar
            :class="{

--- a/app/assets/javascripts/jobs/components/manual_variables_form.vue
+++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue
@@ -172,7 +172,7 @@ export default {
        </div>
      </div>
    </div>
-    <div class="d-flex prepend-top-default justify-content-center">
+    <div class="d-flex gl-mt-3 justify-content-center">
      <p class="text-muted" v-html="helpText"></p>
    </div>
    <div class="d-flex justify-content-center">

--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -108,7 +108,7 @@ export default {
      />
    </ci-header>

-    <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default gl-mb-3" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3 gl-mb-3" />

    <gl-modal
      :modal-id="$options.DELETE_MODAL_ID"

--- a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
@@ -45,7 +45,7 @@ export default {

 <template>
  <div v-if="isLoading">
-    <gl-loading-icon size="lg" class="prepend-top-default js-loading-spinner" />
+    <gl-loading-icon size="lg" class="gl-mt-3 js-loading-spinner" />
  </div>

  <div
@@ -73,7 +73,7 @@ export default {
  </div>

  <div v-else>
-    <div class="row prepend-top-default">
+    <div class="row gl-mt-3">
      <div class="col-12">
        <p class="js-no-tests-to-show">{{ s__('TestReports|There are no tests to show.') }}</p>
      </div>

--- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
@@ -36,7 +36,7 @@ export default {

 <template>
  <div>
-    <div class="row prepend-top-default">
+    <div class="row gl-mt-3">
      <div class="col-12">
        <h4>{{ heading }}</h4>
      </div>

--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
@@ -40,7 +40,7 @@ export default {

 <template>
  <div>
-    <div class="row prepend-top-default">
+    <div class="row gl-mt-3">
      <div class="col-12">
        <h4>{{ heading }}</h4>
      </div>

--- a/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue
@@ -28,7 +28,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default">
+  <div class="gl-mt-3">
    <p>
      <slot></slot>
    </p>

--- a/app/assets/javascripts/releases/components/app_show.vue
+++ b/app/assets/javascripts/releases/components/app_show.vue
@@ -21,7 +21,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default">
+  <div class="gl-mt-3">
    <gl-skeleton-loading v-if="isFetchingRelease" />

    <release-block v-else-if="!fetchError" :release="release" />

--- a/app/assets/javascripts/releases/components/evidence_block.vue
+++ b/app/assets/javascripts/releases/components/evidence_block.vue
@@ -59,7 +59,7 @@ export default {

 <template>
  <div>
-    <div class="card-text prepend-top-default">
+    <div class="card-text gl-mt-3">
      <b>{{ __('Evidence collection') }}</b>
    </div>
    <div v-for="(evidence, index) in evidences" :key="evidenceTitle(index)" class="mb-2">

--- a/app/assets/javascripts/releases/components/release_block.vue
+++ b/app/assets/javascripts/releases/components/release_block.vue
@@ -108,7 +108,7 @@ export default {
      <release-block-assets v-if="shouldRenderAssets" :assets="assets" />
      <evidence-block v-if="hasEvidence && shouldShowEvidence" :release="release" />

-      <div ref="gfm-content" class="card-text prepend-top-default">
+      <div ref="gfm-content" class="card-text gl-mt-3">
        <div class="md" v-html="release.descriptionHtml"></div>
      </div>
    </div>

--- a/app/assets/javascripts/releases/components/release_block_assets.vue
+++ b/app/assets/javascripts/releases/components/release_block_assets.vue
@@ -96,7 +96,7 @@ export default {
 </script>

 <template>
-  <div class="card-text prepend-top-default">
+  <div class="card-text gl-mt-3">
    <template v-if="glFeatures.releaseAssetLinkType">
      <gl-button
        data-testid="accordion-button"

--- a/app/assets/javascripts/serverless/components/functions.vue
+++ b/app/assets/javascripts/serverless/components/functions.vue
@@ -75,7 +75,7 @@ export default {

 <template>
  <section id="serverless-functions" class="flex-grow">
-    <gl-loading-icon v-if="checkingInstalled" size="lg" class="prepend-top-default gl-mb-3" />
+    <gl-loading-icon v-if="checkingInstalled" size="lg" class="gl-mt-3 gl-mb-3" />

    <div v-else-if="isInstalled">
      <div v-if="hasFunctionData">
@@ -91,11 +91,7 @@ export default {
            </ul>
          </div>
        </template>
-        <gl-loading-icon
-          v-if="isLoading"
-          size="lg"
-          class="prepend-top-default gl-mb-3 js-functions-loader"
-        />
+        <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3 gl-mb-3 js-functions-loader" />
      </div>
      <div v-else class="empty-state js-empty-state">
        <div class="text-content">

--- a/app/assets/javascripts/vue_merge_request_widget/components/loading.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/loading.vue
@@ -9,7 +9,7 @@ export default {
 </script>

 <template>
-  <div class="prepend-top-default">
+  <div class="gl-mt-3">
    <div class="mr-widget-heading p-3">
      <gl-skeleton-loader :width="577" :height="12">
        <rect width="86" height="12" rx="2" />

--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -365,7 +365,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="mr" class="mr-state-widget prepend-top-default">
+  <div v-if="mr" class="mr-state-widget gl-mt-3">
    <mr-widget-header :mr="mr" />
    <mr-widget-suggest-pipeline
      v-if="shouldSuggestPipelines"

--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -231,7 +231,7 @@ export default {
 <template>
  <div
    ref="gl-form"
-    :class="{ 'prepend-top-default gl-mb-3': addSpacingClasses }"
+    :class="{ 'gl-mt-3 gl-mb-3': addSpacingClasses }"
    class="js-vue-markdown-field md-area position-relative"
  >
    <markdown-header

--- a/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue
+++ b/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue
@@ -64,7 +64,7 @@ export default {
 <template>
  <gl-pagination
    v-if="showPagination"
-    class="justify-content-center prepend-top-default"
+    class="justify-content-center gl-mt-3"
    v-bind="$attrs"
    :value="pageInfo.page"
    :per-page="pageInfo.perPage"

--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -399,7 +399,6 @@ img.emoji {
 .prepend-top-5 { margin-top: 5px; }
 .prepend-top-10 { margin-top: 10px; }
 .prepend-top-15 { margin-top: 15px; }
-.prepend-top-default { margin-top: $gl-padding !important; }
 .prepend-top-16 { margin-top: 16px; }
 .prepend-top-20 { margin-top: 20px; }
 .prepend-left-5 { margin-left: 5px; }

--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -565,7 +565,7 @@ module ProjectsHelper
  end

  def project_child_container_class(view_path)
-    view_path == "projects/issues/issues" ? "prepend-top-default" : "project-show-#{view_path}"
+    view_path == "projects/issues/issues" ? "gl-mt-3" : "project-show-#{view_path}"
  end

  def project_issues(project)

--- a/app/views/admin/appearances/_form.html.haml
+++ b/app/views/admin/appearances/_form.html.haml
 - parsed_with_gfm = "Content parsed with #{link_to('GitLab Flavored Markdown', help_page_path('user/markdown'), target: '_blank')}.".html_safe

-= form_for @appearance, url: admin_appearances_path, html: { class: 'prepend-top-default' } do |f|
+= form_for @appearance, url: admin_appearances_path, html: { class: 'gl-mt-3' } do |f|
  = form_errors(@appearance)


@@ -100,7 +100,7 @@
          .hint
            = parsed_with_gfm

-      .prepend-top-default.gl-mb-3
+      .gl-mt-3.gl-mb-3
        = f.submit 'Update appearance settings', class: 'btn btn-success'
        - if @appearance.persisted? || @appearance.updated_at
          .mt-4

--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -10,7 +10,7 @@
      dismissible: true.to_s } }
      = notice[:message].html_safe

-.admin-dashboard.prepend-top-default
+.admin-dashboard.gl-mt-3
  .row
    .col-sm-4
      .info-well.dark-well

--- a/app/views/admin/groups/index.html.haml
+++ b/app/views/admin/groups/index.html.haml
 - page_title _("Groups")

 .top-area
-  .prepend-top-default.gl-mb-3
+  .gl-mt-3.gl-mb-3
    = form_tag admin_groups_path, method: :get, class: 'js-search-form' do |f|
      = hidden_field_tag :sort, @sort
      .search-holder

--- a/app/views/admin/hook_logs/_index.html.haml
+++ b/app/views/admin/hook_logs/_index.html.haml
-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
  .col-lg-3
    %h4.gl-mt-0
      Recent Deliveries

--- a/app/views/admin/hooks/_form.html.haml
+++ b/app/views/admin/hooks/_form.html.haml
@@ -16,7 +16,7 @@
        System hook will be triggered on set of events like creating project
        or adding ssh key. But you can also enable extra triggers like Push events.

-    .prepend-top-default
+    .gl-mt-3
      = form.check_box :repository_update_events, class: 'float-left'
      .prepend-left-20
        = form.label :repository_update_events, class: 'list-label' do

--- a/app/views/admin/hooks/edit.html.haml
+++ b/app/views/admin/hooks/edit.html.haml
 - add_to_breadcrumbs @hook.pluralized_name, admin_hooks_path
 - page_title _('Edit System Hook')

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-3
    = render 'shared/web_hooks/title_and_docs', hook: @hook


--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
 - page_title @hook.pluralized_name

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4
    = render 'shared/web_hooks/title_and_docs', hook: @hook


--- a/app/views/admin/impersonation_tokens/index.html.haml
+++ b/app/views/admin/impersonation_tokens/index.html.haml
@@ -6,7 +6,7 @@

 = render 'admin/users/head'

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-12
    - if @new_impersonation_token
      = render 'shared/access_tokens/created_container',

--- a/app/views/admin/requests_profiles/index.html.haml
+++ b/app/views/admin/requests_profiles/index.html.haml
@@ -9,7 +9,7 @@
  to profile the request

 - if @profiles.present?
-  .prepend-top-default
+  .gl-mt-3
    - @profiles.each do |path, profiles|
      .card.card-small
        .card-header

--- a/app/views/admin/sessions/new.html.haml
+++ b/app/views/admin/sessions/new.html.haml
@@ -15,7 +15,7 @@

        -# Show a message if none of the mechanisms above are enabled
        - if !allow_admin_mode_password_authentication_for_web? && !ldap_sign_in_enabled? && !omniauth_enabled?
-          .prepend-top-default.center
+          .gl-mt-3.center
            = _('No authentication methods configured.')

        - if omniauth_enabled? && button_based_providers_enabled?

--- a/app/views/admin/system_info/show.html.haml
+++ b/app/views/admin/system_info/show.html.haml
 - page_title _('System Info')

-.prepend-top-default
+.gl-mt-3
 .row
  .col-sm
    .bg-light.light-well
@@ -11,7 +11,7 @@
        - else
          = icon('warning', class: 'text-warning')
          = _('Unable to collect CPU info')
-    .bg-light.light-well.prepend-top-default
+    .bg-light.light-well.gl-mt-3
      %h4= _('Memory Usage')
      .data
        - if @memory
@@ -19,7 +19,7 @@
        - else
          = icon('warning', class: 'text-warning')
          = _('Unable to collect memory info')
-    .bg-light.light-well.prepend-top-default
+    .bg-light.light-well.gl-mt-3
      %h4= _('Uptime')
      .data
        %h2= distance_of_time_in_words_to_now(Rails.application.config.booted_at)

--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
 - link = link_to(s_('ClusterIntegration|sign up'), 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
-.bs-callout.gcp-signup-offer.alert.alert-block.alert-dismissable.prepend-top-default.gl-mb-3{ role: 'alert', data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }
+.bs-callout.gcp-signup-offer.alert.alert-block.alert-dismissable.gl-mt-3.gl-mb-3{ role: 'alert', data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }
  %button.close.js-close{ type: "button" }  &times;
  .gcp-signup-offer--content
    .gcp-signup-offer--icon.gl-mr-3

--- a/app/views/clusters/clusters/new.html.haml
+++ b/app/views/clusters/clusters/new.html.haml
@@ -6,7 +6,7 @@

 = render_gcp_signup_offer

-.row.prepend-top-default
+.row.gl-mt-3
  .col-md-3
    = render 'sidebar'
  .col-md-9.js-toggle-container

--- a/app/views/doorkeeper/applications/_form.html.haml
+++ b/app/views/doorkeeper/applications/_form.html.haml
@@ -25,5 +25,5 @@
    = f.label :scopes, class: 'label-bold'
    = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes

-  .prepend-top-default
+  .gl-mt-3
    = f.submit _('Save application'), class: "btn btn-success"
--- a/app/views/doorkeeper/applications/index.html.haml
+++ b/app/views/doorkeeper/applications/index.html.haml
 - page_title _("Applications")
 - @content_class = "limit-container-width" unless fluid_layout

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = page_title

--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -27,7 +27,7 @@
          - new_project_label = _("New project")
          - new_subgroup_label = _("New subgroup")
          - if can_create_projects and can_create_subgroups
-            .btn-group.new-project-subgroup.droplab-dropdown.home-panel-action-button.prepend-top-default.js-new-project-subgroup.qa-new-project-or-subgroup-dropdown{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
+            .btn-group.new-project-subgroup.droplab-dropdown.home-panel-action-button.gl-mt-3.js-new-project-subgroup.qa-new-project-or-subgroup-dropdown{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
              %input.btn.btn-success.dropdown-primary.js-new-group-child.qa-new-in-group-button{ type: "button", value: new_project_label, data: { action: "new-project" } }
              %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle.qa-new-project-or-subgroup-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown", 'display' => 'static' } }
                = sprite_icon("chevron-down", css_class: "icon dropdown-btn-icon")
@@ -48,9 +48,9 @@
                        %strong= new_subgroup_label
                        %span= s_("GroupsTree|Create a subgroup in this group.")
          - elsif can_create_projects
-            = link_to new_project_label, new_project_path(namespace_id: @group.id), class: "btn btn-success prepend-top-default"
+            = link_to new_project_label, new_project_path(namespace_id: @group.id), class: "btn btn-success gl-mt-3"
          - elsif can_create_subgroups
-            = link_to new_subgroup_label, new_group_path(parent_id: @group.id), class: "btn btn-success prepend-top-default"
+            = link_to new_subgroup_label, new_group_path(parent_id: @group.id), class: "btn btn-success gl-mt-3"

  - if @group.description.present?
    .group-home-desc.mt-1

--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -4,7 +4,7 @@
 - pending_active = params[:search_invited].present?
 - total_count = @members.count + @group.shared_with_group_links.count

-.project-members-page.prepend-top-default
+.project-members-page.gl-mt-3
  %h4
    = _("Group members")
  %hr

--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -4,7 +4,7 @@
 - header_title  _("Groups"), dashboard_groups_path
 - active_tab = local_assigns.fetch(:active_tab, 'create')

-.group-edit-container.prepend-top-default
+.group-edit-container.gl-mt-3
  .row
    .col-lg-3.group-settings-sidebar
      %h4.prepend-top-0

--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
 - breadcrumb_title _("Projects")
 - page_title _("Projects")

-.card.prepend-top-default
+.card.gl-mt-3
  .card-header
    %strong= @group.name
    projects:

--- a/app/views/groups/settings/_general.html.haml
+++ b/app/views/groups/settings/_general.html.haml
@@ -19,7 +19,7 @@

  = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :group

-  .form-group.prepend-top-default.append-bottom-20
+  .form-group.gl-mt-3.append-bottom-20
    .avatar-container.rect-avatar.s90
      = group_icon(@group, alt: '', class: 'avatar group-avatar s90')
    = f.label :avatar, _('Group avatar'), class: 'label-bold d-block'

--- a/app/views/groups/settings/_permissions.html.haml
+++ b/app/views/groups/settings/_permissions.html.haml
@@ -40,4 +40,4 @@
    = render_if_exists 'groups/personal_access_token_expiration_policy', f: f, group: @group
    = render_if_exists 'groups/member_lock_setting', f: f, group: @group

-  = f.submit _('Save changes'), class: 'btn btn-success prepend-top-default js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }
+  = f.submit _('Save changes'), class: 'btn btn-success gl-mt-3 js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }
--- a/app/views/groups/settings/ci_cd/_form.html.haml
+++ b/app/views/groups/settings/ci_cd/_form.html.haml
-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-12
    = form_for group, url: group_settings_ci_cd_path(group, anchor: 'js-general-pipeline-settings') do |f|
      = form_errors(group)

--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
 %div
 - if Gitlab::CurrentSettings.help_page_text.present?
-  .prepend-top-default.md
+  .gl-mt-3.md
    = markdown_field(Gitlab::CurrentSettings.current_application_settings, :help_page_text)
  %hr

@@ -28,7 +28,7 @@
 %p= link_to 'Check the current instance configuration ', help_instance_configuration_url
 %hr

-.row.prepend-top-default
+.row.gl-mt-3
  .col-md-8
    .documentation-index.md
      = markdown(@help_index)

--- a/app/views/help/show.html.haml
+++ b/app/views/help/show.html.haml
 - page_title @path.split("/").reverse.map(&:humanize)
 - @content_class = "limit-container-width" unless fluid_layout

-.documentation.md.prepend-top-default
+.documentation.md.gl-mt-3
  = markdown @markdown
--- a/app/views/instance_statistics/dev_ops_score/_callout.html.haml
+++ b/app/views/instance_statistics/dev_ops_score/_callout.html.haml
-.prepend-top-default
+.gl-mt-3
 .user-callout{ data: { uid: 'dev_ops_score_intro_callout_dismissed' } }
  .bordered-box.landing.content-block
    %button.btn.btn-default.close.js-close-callout{ type: 'button',

--- a/app/views/instance_statistics/dev_ops_score/index.html.haml
+++ b/app/views/instance_statistics/dev_ops_score/index.html.haml
@@ -5,7 +5,7 @@
  - if usage_ping_enabled && show_callout?('dev_ops_score_intro_callout_dismissed')
    = render 'callout'

-  .prepend-top-default
+  .gl-mt-3
  - if !usage_ping_enabled
    = render 'disabled'
  - elsif @metric.blank?

--- a/app/views/kaminari/gitlab/_paginator.html.haml
+++ b/app/views/kaminari/gitlab/_paginator.html.haml
@@ -6,7 +6,7 @@
 -#    remote:        data-remote
 -#    paginator:     the paginator that renders the pagination tags inside
 = paginator.render do
-  .gl-pagination.prepend-top-default
+  .gl-pagination.gl-mt-3
    %ul.pagination.justify-content-center
      = prev_page_tag
      - each_page do |page|

--- a/app/views/kaminari/gitlab/_without_count.html.haml
+++ b/app/views/kaminari/gitlab/_without_count.html.haml
-.gl-pagination.prepend-top-default
+.gl-pagination.gl-mt-3
  %ul.pagination.justify-content-center
    - if previous_path
      %li.page-item.prev

--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -5,7 +5,7 @@
  .alert.alert-info
    = s_('Profiles|Some options are unavailable for LDAP accounts')

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = s_('Profiles|Two-Factor Authentication')
@@ -22,7 +22,7 @@

 %hr
 - if display_providers_on_profile?
-  .row.prepend-top-default
+  .row.gl-mt-3
    .col-lg-4.profile-settings-sidebar
      %h4.gl-mt-0
        = s_('Profiles|Social sign-in')
@@ -32,7 +32,7 @@
      = render 'providers', providers: button_based_providers, group_saml_identities: local_assigns[:group_saml_identities]
  %hr
 - if current_user.can_change_username?
-  .row.prepend-top-default
+  .row.gl-mt-3
    .col-lg-4.profile-settings-sidebar
      %h4.gl-mt-0.warning-title
        = s_('Profiles|Change username')
@@ -45,7 +45,7 @@
      #update-username{ data: data }
  %hr

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0.danger-title
      = s_('Profiles|Delete account')

--- a/app/views/profiles/active_sessions/index.html.haml
+++ b/app/views/profiles/active_sessions/index.html.haml
 - page_title _('Active Sessions')
 - @content_class = "limit-container-width" unless fluid_layout

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = page_title

--- a/app/views/profiles/audit_log.html.haml
+++ b/app/views/profiles/audit_log.html.haml
 - page_title _('Authentication log')
 - @content_class = "limit-container-width" unless fluid_layout

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = page_title

--- a/app/views/profiles/chat_names/index.html.haml
+++ b/app/views/profiles/chat_names/index.html.haml
 - page_title _('Chat')
 - @content_class = "limit-container-width" unless fluid_layout

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = page_title

--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
 - page_title _('Emails')
 - @content_class = "limit-container-width" unless fluid_layout

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = page_title
@@ -14,7 +14,7 @@
      .form-group
        = f.label :email, _('Email'), class: 'label-bold'
        = f.text_field :email, class: 'form-control', data: { qa_selector: 'email_address_field' }
-      .prepend-top-default
+      .gl-mt-3
        = f.submit _('Add email address'), class: 'btn btn-success', data: { qa_selector: 'add_email_address_button' }
    %hr
    %h4.gl-mt-0

--- a/app/views/profiles/gpg_keys/_form.html.haml
+++ b/app/views/profiles/gpg_keys/_form.html.haml
@@ -6,5 +6,5 @@
      = f.label :key, s_('Profiles|Key'), class: 'label-bold'
      = f.text_area :key, class: "form-control", rows: 8, required: true, placeholder: _("Don't paste the private part of the GPG key. Paste the public part which begins with '-----BEGIN PGP PUBLIC KEY BLOCK-----'.")

-    .prepend-top-default
+    .gl-mt-3
      = f.submit s_('Profiles|Add key'), class: "btn btn-success"
--- a/app/views/profiles/gpg_keys/index.html.haml
+++ b/app/views/profiles/gpg_keys/index.html.haml
 - page_title _('GPG Keys')
 - @content_class = "limit-container-width" unless fluid_layout

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = page_title

--- a/app/views/profiles/keys/_form.html.haml
+++ b/app/views/profiles/keys/_form.html.haml
@@ -23,5 +23,5 @@

      %button.btn.btn-success.js-add-ssh-key-validation-confirm-submit= _("Yes, add it")

-    .prepend-top-default
+    .gl-mt-3
      = f.submit s_('Profiles|Add key'), class: "btn btn-success js-add-ssh-key-validation-original-submit qa-add-key-button"
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
 - is_admin = defined?(admin) ? true : false
-.row.prepend-top-default
+.row.gl-mt-3
  .col-md-4
    .card
      .card-header

--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
 - page_title _('SSH Keys')
 - @content_class = "limit-container-width" unless fluid_layout

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = page_title

--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -9,7 +9,7 @@
          %li= msg

  = hidden_field_tag :notification_type, 'global'
-  .row.prepend-top-default
+  .row.gl-mt-3
    .col-lg-4.profile-settings-sidebar
      %h4.gl-mt-0
        = page_title
@@ -21,7 +21,7 @@
      %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|
+      = form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications gl-mt-3' } do |f|
        = render_if_exists 'profiles/notifications/email_settings', form: f

      = label_tag :global_notification_level, "Global notification level", class: "label-bold"

--- a/app/views/profiles/passwords/edit.html.haml
+++ b/app/views/profiles/passwords/edit.html.haml
@@ -2,7 +2,7 @@
 - page_title _('Password')
 - @content_class = "limit-container-width" unless fluid_layout

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = page_title
@@ -29,7 +29,7 @@
      .form-group
        = f.label :password_confirmation, _('Password confirmation'), class: 'label-bold'
        = f.password_field :password_confirmation, required: true, class: 'form-control', data: { qa_selector: 'confirm_password_field' }
-      .prepend-top-default.gl-mb-3
+      .gl-mt-3.gl-mb-3
        = f.submit _('Save password'), class: "btn btn-success append-right-10", data: { qa_selector: 'save_password_button' }
        - unless @user.password_automatically_set?
          = link_to _('I forgot my password'), reset_profile_password_path, method: :put
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -4,7 +4,7 @@
 - type_plural = _('personal access tokens')
 - @content_class = 'limit-container-width' unless fluid_layout

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = page_title
@@ -33,7 +33,7 @@
        revoke_route_helper: ->(token) { revoke_profile_personal_access_token_path(token) }

 %hr
-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4.profile-settings-sidebar
    %h4.gl-mt-0
      = s_('AccessTokens|Feed token')
@@ -51,7 +51,7 @@

 - if incoming_email_token_enabled?
  %hr
-  .row.prepend-top-default
+  .row.gl-mt-3
    .col-lg-4.profile-settings-sidebar
      %h4.gl-mt-0
        = s_('AccessTokens|Incoming email token')
@@ -69,7 +69,7 @@

 - if static_objects_external_storage_enabled?
  %hr
-  .row.prepend-top-default
+  .row.gl-mt-3
    .col-lg-4
      %h4.gl-mt-0
        = s_('AccessTokens|Static object token')

--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
 - page_title _('Preferences')
 - @content_class = "limit-container-width" unless fluid_layout

-= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
+= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row gl-mt-3 js-preferences-form' } do |f|
  .col-lg-4.application-theme
    %h4.gl-mt-0
      = s_('Preferences|Navigation theme')

--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -3,7 +3,7 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - gravatar_link = link_to Gitlab.config.gravatar.host, 'https://' + Gitlab.config.gravatar.host

-= bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user prepend-top-default js-quick-submit gl-show-field-errors' }, authenticity_token: true do |f|
+= bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user gl-mt-3 js-quick-submit gl-show-field-errors' }, authenticity_token: true do |f|
  = form_errors(@user)

  .row
@@ -118,7 +118,7 @@
      = f.check_box :include_private_contributions, label: s_('Profiles|Include private contributions on my profile'), wrapper_class: 'mb-2', inline: true
      .help-block
        = s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")
-      .prepend-top-default.gl-mb-3
+      .gl-mt-3.gl-mb-3
        = f.submit s_("Profiles|Update profile settings"), class: 'btn btn-success'
        = link_to _("Cancel"), user_path(current_user), class: 'btn btn-cancel'


--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -3,7 +3,7 @@
 - @content_class = "limit-container-width" unless fluid_layout

 .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
+  .row.gl-mt-3
    .col-lg-4
      %h4.gl-mt-0
        = _('Register Two-Factor Authenticator')
@@ -50,12 +50,12 @@
          .form-group
            = label_tag :pin_code, _('Pin code'), class: "label-bold"
            = text_field_tag :pin_code, nil, class: "form-control", required: true
-          .prepend-top-default
+          .gl-mt-3
            = submit_tag _('Register with two-factor app'), class: 'btn btn-success'

  %hr

-  .row.prepend-top-default
+  .row.gl-mt-3
    .col-lg-4
      %h4.gl-mt-0
        = _('Register Universal Two-Factor (U2F) Device')

--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
 - if @wiki_home.present?
  %div{ class: container_class }
-    .md.prepend-top-default.gl-mb-3
+    .md.gl-mt-3.gl-mb-3
      = render_wiki_content(@wiki_home)
 - else
  - can_create_wiki = can?(current_user, :create_wiki, @project)

--- a/app/views/projects/blob/viewers/_loading.html.haml
+++ b/app/views/projects/blob/viewers/_loading.html.haml
-.text-center.prepend-top-default.gl-mb-3
+.text-center.gl-mt-3.gl-mb-3
  = icon('spinner spin 2x', 'aria-hidden' => 'true', 'aria-label' => 'Loading content…', class: 'qa-spinner')
--- a/app/views/projects/blob/viewers/_sketch.html.haml
+++ b/app/views/projects/blob/viewers/_sketch.html.haml
 .file-content#js-sketch-viewer{ data: { endpoint: blob_raw_path } }
-  .js-loading-icon.text-center.prepend-top-default.gl-mb-3.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
+  .js-loading-icon.text-center.gl-mt-3.gl-mb-3.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
    = icon('spinner spin 2x', 'aria-hidden' => 'true');
--- a/app/views/projects/blob/viewers/_stl.html.haml
+++ b/app/views/projects/blob/viewers/_stl.html.haml
 .file-content.is-stl-loading
  .text-center#js-stl-viewer{ data: { endpoint: blob_raw_path } }
-    = icon('spinner spin 2x', class: 'prepend-top-default gl-mb-3', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
-  .text-center.prepend-top-default.gl-mb-3.stl-controls
+    = icon('spinner spin 2x', class: 'gl-mt-3 gl-mb-3', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
+  .text-center.gl-mt-3.gl-mb-3.stl-controls
    .btn-group
      %button.btn.btn-default.btn-sm.js-material-changer{ data: { type: 'wireframe' } }
        Wireframe

--- a/app/views/projects/environments/_form.html.haml
+++ b/app/views/projects/environments/_form.html.haml
-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
  .col-lg-3
    %h4.gl-mt-0
      = _("Environments")

--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -23,5 +23,5 @@
              = _('There are no matching files')
            %p.text-secondary
              = _('Try using a different search term to find the file you are looking for.')
-      .text-center.prepend-top-default.loading
+      .text-center.gl-mt-3.loading
        .spinner.spinner-md
--- a/app/views/projects/forks/_fork_button.html.haml
+++ b/app/views/projects/forks/_fork_button.html.haml
@@ -2,17 +2,17 @@
 - can_create_project = current_user.can?(:create_projects, namespace)

 - if forked_project = namespace.find_fork_of(@project)
-  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.gl-mb-3.forked
+  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.gl-mt-3.gl-mb-3.forked
    = link_to project_path(forked_project) do
      - if /no_((\w*)_)*avatar/.match(avatar)
        = group_icon(namespace, class: "avatar rect-avatar s100 identicon mx-auto")
      - else
        .avatar-container.s100.mx-auto
          = image_tag(avatar, class: "avatar s100")
-      %h5.prepend-top-default
+      %h5.gl-mt-3
        = namespace.human_name
 - else
-  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.prepend-top-default.gl-mb-3{ class: ("disabled" unless can_create_project) }
+  .bordered-box.fork-thumbnail.text-center.prepend-left-default.append-right-default.gl-mt-3.gl-mb-3{ class: ("disabled" unless can_create_project) }
    = link_to project_forks_path(@project, namespace_key: namespace.id),
        method: "POST",
        class: ("disabled has-tooltip" unless can_create_project),
@@ -22,5 +22,5 @@
      - else
        .avatar-container.s100.mx-auto
          = image_tag(avatar, class: "avatar s100")
-      %h5.prepend-top-default{ data: { qa_selector: 'fork_namespace_content', qa_name: namespace.human_name } }
+      %h5.gl-mt-3{ data: { qa_selector: 'fork_namespace_content', qa_name: namespace.human_name } }
        = namespace.human_name
--- a/app/views/projects/forks/new.html.haml
+++ b/app/views/projects/forks/new.html.haml
 - page_title _("Fork project")

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-3
    %h4.gl-mt-0
      = _("Fork project")
@@ -16,6 +16,6 @@
    - else
      %strong
        = _("No available namespaces to fork the project.")
-      %p.prepend-top-default
+      %p.gl-mt-3
        = _("You must have permission to create a project in a namespace before forking.")

--- a/app/views/projects/hook_logs/show.html.haml
+++ b/app/views/projects/hook_logs/show.html.haml
@@ -2,7 +2,7 @@
 - add_to_breadcrumbs _('Webhook Settings'), namespace_project_hooks_path
 - page_title _('Webhook Logs')

-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
  .col-lg-3
    %h4.gl-mt-0
      Request details

--- a/app/views/projects/hooks/edit.html.haml
+++ b/app/views/projects/hooks/edit.html.haml
@@ -2,7 +2,7 @@
 - add_to_breadcrumbs _('Webhook Settings'), namespace_project_hooks_path
 - page_title _('Webhook')

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-3
    = render 'shared/web_hooks/title_and_docs', hook: @hook


--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/index.html.haml
@@ -2,7 +2,7 @@
 - breadcrumb_title _('Webhook Settings')
 - page_title _('Webhooks')

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-4
    = render 'shared/web_hooks/title_and_docs', hook: @hook


--- a/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
+++ b/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
@@ -3,7 +3,7 @@
  - `assets/javascripts/diffs/components/commit_widget.vue`
 -#-----------------------------------------------------------------
 - if @commit
-  .info-well.d-none.d-sm-block.prepend-top-default
+  .info-well.d-none.d-sm-block.gl-mt-3
    .well-segment
      %ul.blob-commit-info
        = render 'projects/commits/commit', commit: @commit, merge_request: @merge_request, view_details: true
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -9,10 +9,10 @@
 = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project

 - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count.zero?
-  .alert.alert-success.prepend-top-default
+  .alert.alert-success.gl-mt-3
    %span= _('Assign some issues to this milestone.')
 - elsif @milestone.complete? && @milestone.active?
-  .alert.alert-success.prepend-top-default
+  .alert.alert-success.gl-mt-3
    %span= _('All issues for this milestone are closed. You may close this milestone now.')

 = render 'shared/milestones/tabs', milestone: @milestone

--- a/app/views/projects/mirrors/_instructions.html.haml
+++ b/app/views/projects/mirrors/_instructions.html.haml
-.account-well.prepend-top-default.gl-mb-3
+.account-well.gl-mt-3.gl-mb-3
  %ul
    %li
      = _('The repository must be accessible over <code>http://</code>,

--- a/app/views/projects/mirrors/_ssh_host_keys.html.haml
+++ b/app/views/projects/mirrors/_ssh_host_keys.html.haml
@@ -28,6 +28,6 @@
        = _('Input host keys manually')
      %span.label-hide
        = _('Hide host keys manual input')
-  .js-ssh-known-hosts.collapse.prepend-top-default
+  .js-ssh-known-hosts.collapse.gl-mt-3
    = f.label :ssh_known_hosts, _('SSH host keys'), class: 'label-bold'
    = f.text_area :ssh_known_hosts, class: 'form-control known-hosts js-known-hosts', rows: '10'
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -16,5 +16,5 @@

    - if @commit
      .network-graph{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
-        .text-center.prepend-top-default
+        .text-center.gl-mt-3
          .spinner.spinner-md
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -4,7 +4,7 @@
 - header_title  _("Projects"), dashboard_projects_path
 - active_tab = local_assigns.fetch(:active_tab, 'blank')

-.project-edit-container.prepend-top-default
+.project-edit-container.gl-mt-3
  .project-edit-errors
    = render 'projects/errors'


--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
 - page_title _("Members")
 - can_admin_project_members = can?(current_user, :admin_project_member, @project)

-.row.prepend-top-default
+.row.gl-mt-3
  .col-lg-12
    - if project_can_be_shared?
      %h4

--- a/app/views/projects/protected_branches/show.html.haml
+++ b/app/views/projects/protected_branches/show.html.haml
 - page_title @protected_ref.name, _("Protected Branches")

-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
  .col-lg-3
    %h4.gl-mt-0.ref-name
      = @protected_ref.name

--- a/app/views/projects/protected_tags/show.html.haml
+++ b/app/views/projects/protected_tags/show.html.haml
 - page_title @protected_ref.name, _("Protected Tags")

-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
  .col-lg-3
    %h4.gl-mt-0.ref-name
      = @protected_ref.name

--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
-.row.prepend-top-default.gl-mb-3
+.row.gl-mt-3.gl-mb-3
  .col-lg-4
    %h4.gl-mt-0
      = @service.title

--- a/app/views/projects/services/prometheus/_configuration_banner.html.haml
+++ b/app/views/projects/services/prometheus/_configuration_banner.html.haml
@@ -12,14 +12,14 @@
          .svg-container
            = image_tag 'illustrations/monitoring/getting_started.svg'
        .col-sm-10
-          %p.text-success.prepend-top-default
+          %p.text-success.gl-mt-3
            = s_('PrometheusService|Prometheus is being automatically managed on your clusters')
          = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'btn'
      - else
        .col-sm-2
          = image_tag 'illustrations/monitoring/loading.svg'
        .col-sm-10
-          %p.prepend-top-default
+          %p.gl-mt-3
            = s_('PrometheusService|Automatically deploy and configure Prometheus on your clusters to monitor your project’s environments')
          = link_to s_('PrometheusService|Install Prometheus on clusters'), project_clusters_path(project), class: 'btn btn-success'


--- a/app/views/projects/settings/_general.html.haml
+++ b/app/views/projects/settings/_general.html.haml
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
--- a/app/views/projects/settings/integrations/show.html.haml
+++ b/app/views/projects/settings/integrations/show.html.haml
--- a/app/views/projects/settings/operations/_configuration_banner.html.haml
+++ b/app/views/projects/settings/operations/_configuration_banner.html.haml
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
--- a/app/views/projects/tags/releases/edit.html.haml
+++ b/app/views/projects/tags/releases/edit.html.haml
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
--- a/app/views/projects/triggers/edit.html.haml
+++ b/app/views/projects/triggers/edit.html.haml
--- a/app/views/search/show.html.haml
+++ b/app/views/search/show.html.haml
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
--- a/app/views/shared/dashboard/_no_filter_selected.html.haml
+++ b/app/views/shared/dashboard/_no_filter_selected.html.haml
--- a/app/views/shared/deploy_tokens/_form.html.haml
+++ b/app/views/shared/deploy_tokens/_form.html.haml
--- a/app/views/shared/file_hooks/_index.html.haml
+++ b/app/views/shared/file_hooks/_index.html.haml
--- a/app/views/shared/members/_requests.html.haml
+++ b/app/views/shared/members/_requests.html.haml
--- a/app/views/shared/milestones/_issues_tab.html.haml
+++ b/app/views/shared/milestones/_issues_tab.html.haml
--- a/app/views/shared/milestones/_merge_requests_tab.haml
+++ b/app/views/shared/milestones/_merge_requests_tab.haml
--- a/app/views/shared/milestones/_tab_loading.html.haml
+++ b/app/views/shared/milestones/_tab_loading.html.haml
--- a/app/views/shared/milestones/_top.html.haml
+++ b/app/views/shared/milestones/_top.html.haml
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
--- a/app/views/shared/notifications/_new_button.html.haml
+++ b/app/views/shared/notifications/_new_button.html.haml
--- a/app/views/shared/runners/_runner_description.html.haml
+++ b/app/views/shared/runners/_runner_description.html.haml
--- a/app/views/shared/web_hooks/_index.html.haml
+++ b/app/views/shared/web_hooks/_index.html.haml
--- a/app/views/shared/wikis/_form.html.haml
+++ b/app/views/shared/wikis/_form.html.haml
--- a/app/views/shared/wikis/show.html.haml
+++ b/app/views/shared/wikis/show.html.haml
--- a/app/views/sherlock/file_samples/show.html.haml
+++ b/app/views/sherlock/file_samples/show.html.haml
--- a/app/views/sherlock/queries/_backtrace.html.haml
+++ b/app/views/sherlock/queries/_backtrace.html.haml
--- a/app/views/sherlock/queries/_general.html.haml
+++ b/app/views/sherlock/queries/_general.html.haml
--- a/app/views/sherlock/transactions/_general.html.haml
+++ b/app/views/sherlock/transactions/_general.html.haml
--- a/app/views/snippets/new.html.haml
+++ b/app/views/snippets/new.html.haml
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
--- a/ee/app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue
+++ b/ee/app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue
--- a/ee/app/assets/javascripts/analytics/productivity_analytics/components/mr_table.vue
+++ b/ee/app/assets/javascripts/analytics/productivity_analytics/components/mr_table.vue
--- a/ee/app/assets/javascripts/billings/components/subscription_table.vue
+++ b/ee/app/assets/javascripts/billings/components/subscription_table.vue
--- a/ee/app/assets/javascripts/codequality_report/codequality_report.vue
+++ b/ee/app/assets/javascripts/codequality_report/codequality_report.vue
--- a/ee/app/assets/javascripts/dependencies/components/paginated_dependencies_table.vue
+++ b/ee/app/assets/javascripts/dependencies/components/paginated_dependencies_table.vue
--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue
--- a/ee/app/assets/javascripts/feature_flags/components/form.vue
+++ b/ee/app/assets/javascripts/feature_flags/components/form.vue
--- a/ee/app/assets/javascripts/insights/components/insights.vue
+++ b/ee/app/assets/javascripts/insights/components/insights.vue
--- a/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue
+++ b/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue
--- a/ee/app/assets/javascripts/packages/details/components/maven_installation.vue
+++ b/ee/app/assets/javascripts/packages/details/components/maven_installation.vue
--- a/ee/app/assets/javascripts/packages/details/components/npm_installation.vue
+++ b/ee/app/assets/javascripts/packages/details/components/npm_installation.vue
--- a/ee/app/assets/javascripts/packages/details/components/pypi_installation.vue
+++ b/ee/app/assets/javascripts/packages/details/components/pypi_installation.vue
--- a/ee/app/assets/javascripts/pages/groups/saml_providers/saml_members/index.vue
+++ b/ee/app/assets/javascripts/pages/groups/saml_providers/saml_members/index.vue
--- a/ee/app/assets/javascripts/requirements/components/requirements_root.vue
+++ b/ee/app/assets/javascripts/requirements/components/requirements_root.vue
--- a/ee/app/assets/javascripts/security_dashboard/components/project_security_dashboard.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/project_security_dashboard.vue
--- a/ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue
--- a/ee/app/assets/javascripts/subscriptions/new/components/order_summary/summary_details.vue
+++ b/ee/app/assets/javascripts/subscriptions/new/components/order_summary/summary_details.vue
--- a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
--- a/ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue
+++ b/ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue
--- a/ee/app/views/admin/licenses/_breakdown.html.haml
+++ b/ee/app/views/admin/licenses/_breakdown.html.haml
--- a/ee/app/views/groups/hooks/edit.html.haml
+++ b/ee/app/views/groups/hooks/edit.html.haml
--- a/ee/app/views/groups/hooks/index.html.haml
+++ b/ee/app/views/groups/hooks/index.html.haml
--- a/ee/app/views/groups/packages/_legacy_package_list.haml
+++ b/ee/app/views/groups/packages/_legacy_package_list.haml
--- a/ee/app/views/groups/saml_providers/_form.html.haml
+++ b/ee/app/views/groups/saml_providers/_form.html.haml
--- a/ee/app/views/groups/saml_providers/_scim_token.html.haml
+++ b/ee/app/views/groups/saml_providers/_scim_token.html.haml
--- a/ee/app/views/groups/saml_providers/show.html.haml
+++ b/ee/app/views/groups/saml_providers/show.html.haml
--- a/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
+++ b/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
--- a/ee/app/views/projects/commits/_mirror_status.html.haml
+++ b/ee/app/views/projects/commits/_mirror_status.html.haml
--- a/ee/app/views/projects/packages/packages/_legacy_package_list.html.haml
+++ b/ee/app/views/projects/packages/packages/_legacy_package_list.html.haml
--- a/ee/app/views/projects/settings/slacks/edit.html.haml
+++ b/ee/app/views/projects/settings/slacks/edit.html.haml
--- a/ee/app/views/projects/settings/subscriptions/_index.html.haml
+++ b/ee/app/views/projects/settings/subscriptions/_index.html.haml
--- a/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap
+++ b/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap
--- a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
+++ b/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap