Remove append-bottom-8 CSS class

This removes the append-bottom-8 CSS
class and replaces it for gl-mb-3
utility class from GitLab-UI

app/assets/javascripts/diffs/components/commit_item.vue

@@ -144,7 +144,7 @@ export default {
 
         <pre
           v-if="commit.description_html"
-          class="commit-row-description js-toggle-content append-bottom-8"
+          class="commit-row-description js-toggle-content gl-mb-3"
           v-html="commit.description_html"
         ></pre>
       </div>

app/assets/javascripts/diffs/components/tree_list.vue

@@ -64,7 +64,7 @@ export default {
 
 <template>
   <div class="tree-list-holder d-flex flex-column">
-    <div class="append-bottom-8 position-relative tree-list-search d-flex">
+    <div class="gl-mb-3 position-relative tree-list-search d-flex">
       <div class="flex-fill d-flex">
         <icon name="search" class="position-absolute tree-list-icon" />
         <label for="diff-tree-search" class="sr-only">{{ $options.searchPlaceholder }}</label>

app/assets/javascripts/releases/components/release_block_assets.vue

@@ -155,7 +155,7 @@ export default {
       </b>
 
       <ul v-if="assets.links.length" class="pl-0 mb-0 gl-mt-3 list-unstyled js-assets-list">
-        <li v-for="link in assets.links" :key="link.name" class="append-bottom-8">
+        <li v-for="link in assets.links" :key="link.name" class="gl-mb-3">
           <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.directAssetUrl">
             <icon name="package" class="align-middle append-right-4 align-text-bottom" />
             {{ link.name }}

app/assets/javascripts/repository/components/last_commit.vue

@@ -149,7 +149,7 @@ export default {
           <pre
             v-if="commit.description"
             :class="{ 'd-block': showDescription }"
-            class="commit-row-description append-bottom-8"
+            class="commit-row-description gl-mb-3"
             >{{ commit.description }}</pre
           >
         </div>

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

@@ -261,7 +261,7 @@ export default {
             </li>
           </template>
           <li v-else class="dropdown-menu-empty-item">
-            <div class="append-right-default prepend-left-default gl-mt-3 append-bottom-8">
+            <div class="append-right-default prepend-left-default gl-mt-3 gl-mb-3">
               <template v-if="loading">
                 {{ __('Loading...') }}
               </template>

app/assets/stylesheets/framework/common.scss

@@ -423,7 +423,6 @@ img.emoji {
 .prepend-right-32 { margin-right: 32px; }
 .append-bottom-4 { margin-bottom: $gl-padding-4; }
 .append-bottom-5 { margin-bottom: 5px; }
-.append-bottom-8 { margin-bottom: $grid-size; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }
 .append-bottom-20 { margin-bottom: 20px; }

app/views/projects/_home_panel.html.haml

@@ -4,7 +4,7 @@
 - emails_disabled = @project.emails_disabled?
 
 .project-home-panel{ class: [("empty-project" if empty_repo), ("js-show-on-project-root" if vue_file_list_enabled?)] }
-  .row.append-bottom-8
+  .row.gl-mb-3
     .home-panel-title-row.col-md-12.col-lg-6.d-flex
       .avatar-container.rect-avatar.s64.home-panel-avatar.append-right-default.float-none
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64)

app/views/projects/commits/_commit.html.haml

@@ -41,7 +41,7 @@
       = render_if_exists 'projects/commits/project_namespace', show_project_name: show_project_name, project: project
 
       - if commit.description?
-        %pre.commit-row-description.js-toggle-content.append-bottom-8
+        %pre.commit-row-description.js-toggle-content.gl-mb-3
           = preserve(markdown_field(commit, :description))
 
     .commit-actions.flex-row

app/views/projects/empty.html.haml

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

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

@@ -30,7 +30,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="d-flex justify-content-between bold prepend-top-10 append-bottom-8">
+    <div class="d-flex justify-content-between bold prepend-top-10 gl-mb-3">
       <div class="js-selected-plan">
         {{ sprintf($options.i18n.selectedPlanText, { selectedPlanText }) }}
         <span v-if="usersPresent" class="js-number-of-users">{{

ee/app/assets/javascripts/vue_shared/metrics_reports/grouped_metrics_reports_app.vue

@@ -94,7 +94,7 @@ export default {
           status="none"
           :status-icon-size="24"
           :component="$options.componentNames.MetricsReportsIssueBody"
-          class="gl-ml-2 prepend-top-4 append-bottom-8"
+          class="gl-ml-2 prepend-top-4 gl-mb-3"
         />
       </smart-virtual-list>
     </div>