Merge branch 'jivanvl-replace-append-right-10' into 'master'

Replace append-right-10 class

See merge request gitlab-org/gitlab!36373

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

@@ -233,7 +233,7 @@ export default {
 </script>
 
 <template>
-  <div class="boards-switcher js-boards-selector append-right-10">
+  <div class="boards-switcher js-boards-selector gl-mr-3">
     <span class="boards-selector-wrapper js-boards-selector-wrapper">
       <gl-dropdown
         data-qa-selector="boards_dropdown"

app/assets/javascripts/jobs/components/manual_variables_form.vue

@@ -112,7 +112,7 @@ export default {
       <div v-for="variable in variables" :key="variable.id" class="gl-responsive-table-row">
         <div class="table-section section-50">
           <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div>
-          <div class="table-mobile-content append-right-10">
+          <div class="table-mobile-content gl-mr-3">
             <input
               :ref="`${$options.inputTypes.key}-${variable.id}`"
               v-model="variable.key"
@@ -124,7 +124,7 @@ export default {
 
         <div class="table-section section-50">
           <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Value') }}</div>
-          <div class="table-mobile-content append-right-10">
+          <div class="table-mobile-content gl-mr-3">
             <input
               :ref="`${$options.inputTypes.value}-${variable.id}`"
               v-model="variable.secret_value"
@@ -149,7 +149,7 @@ export default {
       <div class="gl-responsive-table-row">
         <div class="table-section section-50">
           <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div>
-          <div class="table-mobile-content append-right-10">
+          <div class="table-mobile-content gl-mr-3">
             <input
               ref="inputKey"
               v-model="key"
@@ -161,7 +161,7 @@ export default {
 
         <div class="table-section section-50">
           <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Value') }}</div>
-          <div class="table-mobile-content append-right-10">
+          <div class="table-mobile-content gl-mr-3">
             <input
               ref="inputSecretValue"
               v-model="secretValue"

app/assets/javascripts/notes/components/comment_form.vue

@@ -419,7 +419,7 @@ export default {
             </gl-alert>
             <div class="note-form-actions">
               <div
-                class="btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
+                class="btn-group gl-mr-3 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
               >
                 <button
                   :disabled="isSubmitButtonDisabled"

app/assets/javascripts/notes/components/note_form.vue

@@ -410,7 +410,7 @@ export default {
           </button>
           <button
             v-if="discussion.resolvable"
-            class="btn btn-nr btn-default append-right-10 js-comment-resolve-button"
+            class="btn btn-nr btn-default gl-mr-3 js-comment-resolve-button"
             @click.prevent="handleUpdate(true)"
           >
             {{ resolveButtonTitle }}

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

@@ -56,7 +56,7 @@ export default {
       v-gl-tooltip
       category="primary"
       variant="default"
-      class="append-right-10 js-edit-button ml-2 pb-2"
+      class="gl-mr-3 js-edit-button ml-2 pb-2"
       :title="__('Edit this release')"
       :href="editLink"
     >

app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue

@@ -62,7 +62,7 @@ export default {
 
 <template>
   <div class="sidebar-item-warning-message-actions">
-    <button type="button" class="btn btn-default append-right-10" @click="closeForm">
+    <button type="button" class="btn btn-default gl-mr-3" @click="closeForm">
       {{ __('Cancel') }}
     </button>
     <button

app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue

@@ -41,7 +41,7 @@ export default {
 
 <template>
   <div class="sidebar-item-warning-message-actions">
-    <button type="button" class="btn btn-default append-right-10" @click="closeForm">
+    <button type="button" class="btn btn-default gl-mr-3" @click="closeForm">
       {{ __('Cancel') }}
     </button>
 

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue

@@ -87,7 +87,7 @@ export default {
     <status-icon status="success" />
     <div class="media-body">
       <h4 class="d-flex align-items-start">
-        <span class="append-right-10">
+        <span class="gl-mr-3">
           <span class="js-status-text-before-author">{{ statusTextBeforeAuthor }}</span>
           <mr-widget-author :author="mr.setToAutoMergeBy" />
           <span class="js-status-text-after-author">{{ statusTextAfterAuthor }}</span>
@@ -113,9 +113,7 @@ export default {
           {{ s__('mrWidget|The source branch will be deleted') }}
         </p>
         <p v-else class="d-flex align-items-start">
-          <span class="append-right-10">{{
-            s__('mrWidget|The source branch will not be deleted')
-          }}</span>
+          <span class="gl-mr-3">{{ s__('mrWidget|The source branch will not be deleted') }}</span>
           <a
             v-if="canRemoveSourceBranch"
             :disabled="isRemovingSourceBranch"

app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue

@@ -56,7 +56,7 @@ export default {
     @click="onClick"
   >
     <icon
-      class="prepend-left-10 append-right-10 flex-shrink-0 position-top-0 js-selected-icon"
+      class="prepend-left-10 gl-mr-3 flex-shrink-0 position-top-0 js-selected-icon"
       :class="{ 'js-selected visible': selected, 'js-unselected invisible': !selected }"
       name="mobile-issue-close"
     />

app/assets/stylesheets/framework/common.scss

@@ -404,7 +404,6 @@ img.emoji {
 .prepend-left-15 { margin-left: 15px; }
 .prepend-left-20 { margin-left: 20px; }
 .prepend-left-64 { margin-left: 64px; }
-.append-right-10 { margin-right: 10px; }
 .append-right-15 { margin-right: 15px; }
 .append-right-20 { margin-right: 20px; }
 .append-bottom-10 { margin-bottom: 10px; }

app/views/ci/group_variables/_index.html.haml

@@ -6,8 +6,8 @@
       = render 'ci/group_variables/variable_header'
       - variables.each do |variable|
         .group-variable-row.d-flex.w-100.border-bottom.pt-2.pb-2
-          .table-section.section-40.append-right-10.key
+          .table-section.section-40.gl-mr-3.key
             = variable.key
-          .table-section.section-40.append-right-10
+          .table-section.section-40.gl-mr-3
             %a.group-origin-link{ href: group_settings_ci_cd_path(variable.group) }
               = variable.group.name

app/views/ci/group_variables/_variable_header.html.haml

 .group-variable-keys.d-flex.w-100.align-items-center.pb-2.border-bottom
-  .bold.table-section.section-40.append-right-10
+  .bold.table-section.section-40.gl-mr-3
     = s_('Key')
-  .bold.table-section.section-40.append-right-10
+  .bold.table-section.section-40.gl-mr-3
     = s_('Origin')

app/views/ci/variables/_environment_scope_header.html.haml

-.bold.table-section.section-15.append-right-10
+.bold.table-section.section-15.gl-mr-3
   = s_('CiVariables|Scope')

app/views/ci/variables/_variable_header.html.haml

@@ -2,11 +2,11 @@
 
 %li.ci-variable-row.m-0.d-none.d-sm-block
   .d-flex.w-100.align-items-center.pb-2
-    .bold.table-section.section-15.append-right-10
+    .bold.table-section.section-15.gl-mr-3
       = s_('CiVariables|Type')
-    .bold.table-section.section-15.append-right-10
+    .bold.table-section.section-15.gl-mr-3
       = s_('CiVariables|Key')
-    .bold.table-section.section-15.append-right-10
+    .bold.table-section.section-15.gl-mr-3
       = s_('CiVariables|Value')
     - unless only_key_value
       .bold.table-section.section-20

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

 - is_current_session = active_session.current?(session)
 
 %li.list-group-item
-  .float-left.append-right-10{ data: { toggle: 'tooltip' }, title: active_session.human_device_type }
+  .float-left.gl-mr-3{ data: { toggle: 'tooltip' }, title: active_session.human_device_type }
     = active_session_device_type_icon(active_session)
 
   .description.float-left

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

 %li.key-list-item
-  .float-left.append-right-10
+  .float-left.gl-mr-3
     = icon 'key', class: "settings-list-icon d-none d-sm-block"
   .key-list-item-info
     - key.emails_with_verified_status.map do |email, verified|

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

 %li.d-flex.align-items-center.key-list-item
-  .append-right-10
+  .gl-mr-3
     - if key.valid?
       - if key.expired?
         %span.d-inline-block.has-tooltip{ title: s_('Profiles|Your key has expired') }
@@ -17,10 +17,10 @@
       = key.fingerprint
 
     .key-list-item-dates.d-flex.align-items-start.justify-content-between
-      %span.last-used-at.append-right-10
+      %span.last-used-at.gl-mr-3
         = s_('Profiles|Last used:')
         = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : _('Never')
-      %span.expires.append-right-10
+      %span.expires.gl-mr-3
         = s_('Profiles|Expires:')
         = key.expires_at ? key.expires_at.to_date : _('Never')
       %span.key-created-at

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

@@ -30,6 +30,6 @@
         = 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' }
       .gl-mt-3.gl-mb-3
-        = f.submit _('Save password'), class: "btn btn-success append-right-10", data: { qa_selector: 'save_password_button' }
+        = f.submit _('Save password'), class: "btn btn-success gl-mr-3", data: { qa_selector: 'save_password_button' }
         - unless @user.password_automatically_set?
           = link_to _('I forgot my password'), reset_profile_password_path, method: :put

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

@@ -9,5 +9,5 @@
         %span.monospace= code
 
 .d-flex
-  = link_to _('Proceed'), profile_account_path, class: 'btn btn-success append-right-10', data: { qa_selector: 'proceed_button' }
+  = link_to _('Proceed'), profile_account_path, class: 'btn btn-success gl-mr-3', data: { qa_selector: 'proceed_button' }
   = link_to _('Download codes'), "data:text/plain;charset=utf-8,#{CGI.escape(@codes.join("\n"))}", download: "gitlab-recovery-codes.txt", class: 'btn btn-default'

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

@@ -19,7 +19,7 @@
           = link_to _('Disable two-factor authentication'), profile_two_factor_auth_path,
                 method: :delete,
                 data: { confirm: _('Are you sure? This will invalidate your registered applications and U2F devices.') },
-                class: 'btn btn-danger append-right-10'
+                class: 'btn btn-danger gl-mr-3'
           = form_tag codes_profile_two_factor_auth_path, {style: 'display: inline-block', method: :post} do |f|
             = submit_tag _('Regenerate recovery codes'), class: 'btn'
 

app/views/projects/blob/_editor.html.haml

@@ -8,13 +8,13 @@
       = sprite_icon('fork', size: 12)
       = ref
     - if current_action?(:edit) || current_action?(:update)
-      %span.pull-left.append-right-10
+      %span.pull-left.gl-mr-3
       = text_field_tag 'file_path', (params[:file_path] || @path),
         class: 'form-control new-file-path js-file-path-name-input'
       = render 'template_selectors'
 
     - if current_action?(:new) || current_action?(:create)
-      %span.pull-left.append-right-10
+      %span.pull-left.gl-mr-3
         \/
       = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
         required: true, class: 'form-control new-file-name js-file-path-name-input', value: params[:file_name] || (should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : '')

app/views/projects/commit/_commit_box.html.haml

@@ -22,10 +22,10 @@
 
   .header-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
-      %span.btn.disabled.btn-grouped.d-none.d-sm-block.append-right-10.has-tooltip{ title: n_("%d comment on this commit", "%d comments on this commit", @notes_count) % @notes_count }
+      %span.btn.disabled.btn-grouped.d-none.d-sm-block.gl-mr-3.has-tooltip{ title: n_("%d comment on this commit", "%d comments on this commit", @notes_count) % @notes_count }
         = sprite_icon('comment')
         = @notes_count
-    = link_to project_tree_path(@project, @commit), class: "btn btn-default append-right-10 d-none d-sm-none d-md-inline" do
+    = link_to project_tree_path(@project, @commit), class: "btn btn-default gl-mr-3 d-none d-sm-none d-md-inline" do
       #{ _('Browse files') }
     .dropdown.inline
       %a.btn.btn-default.dropdown-toggle.qa-options-button.d-md-inline{ data: { toggle: "dropdown" } }

app/views/projects/issues/_nav_btns.html.haml

@@ -14,7 +14,7 @@
       = render 'projects/issues/import_csv/button'
 
   - if @can_bulk_update
-    = button_tag _("Edit issues"), class: "btn btn-default append-right-10 js-bulk-update-toggle"
+    = button_tag _("Edit issues"), class: "btn btn-default gl-mr-3 js-bulk-update-toggle"
   - if show_new_issue_link?(@project)
     = link_to _("New issue"), new_project_issue_path(@project,
                                                   issue: { assignee_id: finder.assignee.try(:id),

app/views/projects/merge_requests/_discussion.html.haml

@@ -5,7 +5,7 @@
     - if @merge_request.reopenable?
       = link_to 'Reopen merge request', merge_request_path(@merge_request, merge_request: { state_event: :reopen }), method: :put, class: "btn btn-nr btn-comment btn-reopen reopen-mr-link js-note-target-close js-note-target-reopen", title: "Reopen merge request", data: { original_text: "Reopen merge request", alternative_text: "Comment & reopen merge request"}
     %comment-and-resolve-btn{ "inline-template" => true }
-      %button.btn.btn-nr.btn-default.append-right-10.js-comment-resolve-button{ "v-if" => "showButton", type: "submit", data: { project_path: "#{project_path(@merge_request.project)}" } }
+      %button.btn.btn-nr.btn-default.gl-mr-3.js-comment-resolve-button{ "v-if" => "showButton", type: "submit", data: { project_path: "#{project_path(@merge_request.project)}" } }
         {{ buttonText }}
 
 #notes= render "shared/notes/notes_with_form", :autocomplete => true

app/views/projects/merge_requests/_nav_btns.html.haml

 - if @can_bulk_update
-  = button_tag "Edit merge requests", class: "btn append-right-10 js-bulk-update-toggle"
+  = button_tag "Edit merge requests", class: "btn gl-mr-3 js-bulk-update-toggle"
 - if merge_project
   = link_to new_merge_request_path, class: "btn btn-success", title: "New merge request" do
     New merge request

app/views/projects/mirrors/_ssh_host_keys.html.haml

@@ -3,7 +3,7 @@
 - verified_at = mirror.ssh_known_hosts_verified_at
 
 .form-group.js-ssh-host-keys-section{ class: ('collapse' unless mirror.ssh_mirror_url?) }
-  %button.btn.btn-inverted.btn-secondary.inline.js-detect-host-keys.append-right-10{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
+  %button.btn.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
     .js-spinner.d-none.spinner.mr-1
     = _('Detect host keys')
   .fingerprint-ssh-info.js-fingerprint-ssh-info.prepend-top-10.append-bottom-10{ class: ('collapse' unless mirror.ssh_mirror_url?) }

app/views/projects/no_repo.html.haml

@@ -15,7 +15,7 @@
   = link_to project_repository_path(@project), method: :post, class: 'btn btn-primary' do
     #{ _('Create empty repository') }
 
-  %strong.prepend-left-10.append-right-10 or
+  %strong.prepend-left-10.gl-mr-3 or
 
   = link_to new_project_import_path(@project), class: 'btn' do
     #{ _('Import repository') }

app/views/projects/project_templates/_built_in_templates.html.haml

 - Gitlab::ProjectTemplate.all.each do |template|
   .template-option.d-flex.align-items-center{ data: { qa_selector: 'template_option_row' } }
-    .logo.append-right-10.px-1
+    .logo.gl-mr-3.px-1
       = image_tag template.logo, size: 32, class: "btn-template-icon icon-#{template.name}"
     .description
       %strong
@@ -9,7 +9,7 @@
       .text-muted
         = template.description
     .controls.d-flex.align-items-center
-      %a.btn.btn-default.append-right-10{ href: template.preview, rel: 'noopener noreferrer', target: '_blank', data: { track_label: "template_preview", track_property: template.name, track_event: "click_button", track_value: "" } }
+      %a.btn.btn-default.gl-mr-3{ href: template.preview, rel: 'noopener noreferrer', target: '_blank', data: { track_label: "template_preview", track_property: template.name, track_event: "click_button", track_value: "" } }
         = _("Preview")
       %label.btn.btn-success.template-button.choose-template.gl-mb-0{ for: template.name }
         %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name, data: { track_label: "template_use", track_property: template.name, track_event: "click_button", track_value: "" } }

app/views/projects/project_templates/_project_fields_form.html.haml

@@ -5,7 +5,7 @@
     .input-group.template-input-group
       .input-group-prepend
         .input-group-text
-          .selected-icon.append-right-10
+          .selected-icon.gl-mr-3
           .selected-template
       .input-group-append
         %button.btn.btn-default.change-template{ type: "button" }

app/views/sent_notifications/unsubscribe.html.haml

@@ -15,5 +15,5 @@
 
 %p
   = link_to _('Unsubscribe'), unsubscribe_sent_notification_path(@sent_notification, force: true),
-            class: 'btn btn-primary append-right-10'
-  = link_to _('Cancel'), new_user_session_path, class: 'btn append-right-10'
+            class: 'btn btn-primary gl-mr-3'
+  = link_to _('Cancel'), new_user_session_path, class: 'btn gl-mr-3'

app/views/shared/groups/_dropdown.html.haml

@@ -8,7 +8,7 @@
   - else
     - default_sort_by = sort_value_recently_created
 
-.dropdown.inline.js-group-filter-dropdown-wrap.append-right-10
+.dropdown.inline.js-group-filter-dropdown-wrap.gl-mr-3
   %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
     %span.dropdown-label
       = options_hash[default_sort_by]

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

@@ -69,7 +69,7 @@
         = link_to 'Delete', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable], params: { destroy_confirm: true }), data: { confirm: "#{issuable.human_class_name} will be removed! Are you sure?" }, method: :delete, class: 'btn btn-danger btn-grouped'
       = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), class: 'btn btn-grouped btn-cancel'
 
-  %span.append-right-10
+  %span.gl-mr-3
     - if issuable.new_record?
       = form.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'btn btn-success qa-issuable-create-button'
     - else

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
+  .banner-body.prepend-left-10.gl-mr-3
     %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'

app/views/shared/notes/_comment_button.html.haml

 - noteable_name = @note.noteable.human_class_name
 
-.float-left.btn-group.append-right-10.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
+.float-left.btn-group.gl-mr-3.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
   %input.btn.btn-nr.btn-success.js-comment-button.js-comment-submit-button{ type: 'submit', value: _('Comment'), data: { qa_selector: 'comment_button' } }
 
   - if @note.can_be_discussion_note?

app/views/shared/projects/_project.html.haml

@@ -39,11 +39,11 @@
                 %span.project-name<
                   = project.name
 
-          %span.metadata-info.visibility-icon.append-right-10.gl-mt-3.text-secondary.has-tooltip{ data: { container: 'body', placement: 'top' }, title: visibility_icon_description(project) }
+          %span.metadata-info.visibility-icon.gl-mr-3.gl-mt-3.text-secondary.has-tooltip{ data: { container: 'body', placement: 'top' }, title: visibility_icon_description(project) }
             = visibility_level_icon(project.visibility_level, fw: true)
 
           - if explore_projects_tab? && project_license_name(project)
-            %span.metadata-info.d-inline-flex.align-items-center.append-right-10.gl-mt-3
+            %span.metadata-info.d-inline-flex.align-items-center.gl-mr-3.gl-mt-3
               = sprite_icon('scale', size: 14, css_class: 'gl-mr-2')
               = project_license_name(project)
 

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

@@ -36,7 +36,7 @@ export default {
   <div class="card-header">
     <div class="row">
       <div class="col-md-8 clearfix">
-        <span class="d-flex align-items-center float-left append-right-10">
+        <span class="d-flex align-items-center float-left gl-mr-3">
           <strong>{{ node.name }}</strong>
           <gl-loading-icon
             v-if="nodeDetailsLoading || node.nodeActionActive"

ee/app/views/admin/licenses/_upload_buy_license.html.haml

 = link_to _('Buy License'), ::EE::SUBSCRIPTIONS_PLANS_URL, target: '_blank', rel: 'noopener noreferrer nofollow', class: 'btn btn-success btn-inverted float-right btn-buy-license'
-= link_to _('Upload New License'), new_admin_license_path, class: 'btn float-right btn-upload-license append-right-10', data: { qa_selector: 'license_upload_link' }
+= link_to _('Upload New License'), new_admin_license_path, class: 'btn float-right btn-upload-license gl-mr-3', data: { qa_selector: 'license_upload_link' }

ee/app/views/shared/issuable/_bulk_update_button.html.haml

 - type = local_assigns.fetch(:type)
 
-= button_tag _("Edit %{issuable}") % {issuable: type.to_s.humanize(capitalize: false)}, class: 'btn btn-default append-right-10 js-bulk-update-toggle'
+= button_tag _("Edit %{issuable}") % {issuable: type.to_s.humanize(capitalize: false)}, class: 'btn btn-default gl-mr-3 js-bulk-update-toggle'

ee/app/views/users/_custom_project_templates.html.haml

@@ -11,7 +11,7 @@
           .text-muted
             = template.description
         .controls.d-flex.align-items-baseline
-          %a.btn.btn-default.append-right-10{ href: project_path(template), rel: 'noopener noreferrer', target: '_blank' }
+          %a.btn.btn-default.gl-mr-3{ href: project_path(template), rel: 'noopener noreferrer', target: '_blank' }
             = _('Preview')
           %label.btn.btn-success.custom-template-button.choose-template.gl-mb-0{ for: template.name }
             %input{ type: "radio", autocomplete: "off", name: "project[template_project_id]", id: template.name, value: template.id, data: { template_name: template.name } }

ee/app/views/users/_custom_project_templates_from_groups.html.haml

@@ -4,7 +4,7 @@
       .template-group-options.js-template-group-options{ class: ('expanded border-top-0' if groups_with_project_templates.first == group) }
         .template-header.d-flex.align-items-center
           .template-subgroup.d-flex.flex-fill.align-items-center
-            .template-options-icon-container.d-flex.justify-content-center.align-items-center.append-right-10
+            .template-options-icon-container.d-flex.justify-content-center.align-items-center.gl-mr-3
               = sprite_icon('angle-down', css_class: 's16 options-expanded-icon')
               = sprite_icon('angle-right', css_class: 's16 options-collapsed-icon')
             .avatar-container.s40
@@ -30,7 +30,7 @@
               .text-muted
                 = project.description
             .controls.d-flex.align-items-baseline
-              %a.btn.btn-default.append-right-10{ href: project_path(project), rel: 'noopener noreferrer', target: '_blank' }
+              %a.btn.btn-default.gl-mr-3{ href: project_path(project), rel: 'noopener noreferrer', target: '_blank' }
                 = _('Preview')
               %label.btn.btn-success.custom-template-button.choose-template.gl-mb-0{ for: project.name }
                 %input{ type: "radio", autocomplete: "off", name: "project[template_project_id]", id: project.name, value: project.id, data: { subgroup_id: project.namespace_id, template_name: project.name, parent_group_id: namespace_id || group.parent_id } }