Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

135 files changed, 546 insertions, 686 deletions

diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index c47ca81c431..db0f13843dd 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -1,15 +1,14 @@
 - is_project_overview = local_assigns.fetch(:is_project_overview, false)
 
-%div{ class: container_class }
-  .nav-block.d-none.d-sm-flex.activities.gl-static
-    = render 'shared/event_filter'
-    .controls.gl-display-flex
-      = link_to project_path(@project, rss_url_options), title: s_("ProjectActivityRSS|Subscribe"), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-flex has-tooltip' do
-        = sprite_icon('rss', css_class: 'qa-rss-icon gl-icon')
-      - if is_project_overview && can?(current_user, :download_code, @project)
-        .project-clone-holder.d-none.d-md-inline-flex.gl-ml-2
-          = render "projects/buttons/clone", dropdown_class: 'dropdown-menu-right'
+.nav-block.d-none.d-sm-flex.activities.gl-static
+  = render 'shared/event_filter'
+  .controls.gl-display-flex
+    = link_to project_path(@project, rss_url_options), title: s_("ProjectActivityRSS|Subscribe"), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-flex has-tooltip' do
+      = sprite_icon('rss', css_class: 'qa-rss-icon gl-icon')
+    - if is_project_overview && can?(current_user, :download_code, @project)
+      .project-clone-holder.d-none.d-md-inline-flex.gl-ml-2
+        = render "projects/buttons/clone", dropdown_class: 'dropdown-menu-right'
 
-  .content_list.project-activity{ :"data-href" => activity_project_path(@project) }
-  .loading
-    .spinner.spinner-md
+.content_list.project-activity{ :"data-href" => activity_project_path(@project) }
+.loading
+  .spinner.spinner-md
diff --git a/app/views/projects/_export.html.haml b/app/views/projects/_export.html.haml
index 86dfcda6d1b..eb4630b84d5 100644
--- a/app/views/projects/_export.html.haml
+++ b/app/views/projects/_export.html.haml
@@ -4,27 +4,25 @@
 
 .sub-section{ data: { qa_selector: 'export_project_content' } }
   %h4= _('Export project')
-  %p= _('Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.')
-
-  .bs-callout.bs-callout-info
-    %p.gl-mb-0
-      %p= _('The following items will be exported:')
-      %ul
-        - project_export_descriptions.each do |desc|
-          %li= desc
-      %p= _('The following items will NOT be exported:')
-      %ul
-        %li= _('Job logs and artifacts')
-        %li= _('Container registry images')
-        %li= _('CI variables')
-        %li= _('Webhooks')
-        %li= _('Any encrypted tokens')
-  %p= _('Once the exported file is ready, you will receive a notification email with a download link, or you can download it from this page.')
+  - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/import_export') }
+  %p= _('Export this project with all its related data in order to move it to a new GitLab instance. When the exported file is ready, you can download it from this page or from the download link in the email notification you will receive. You can then import it when creating a new project. %{link_start}Learn more.%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+  %p.gl-mb-0
+    %p= _('The following items will be exported:')
+    %ul
+      - project_export_descriptions.each do |desc|
+        %li= desc
+    %p= _('The following items will NOT be exported:')
+    %ul
+      %li= _('Job logs and artifacts')
+      %li= _('Container registry images')
+      %li= _('CI variables')
+      %li= _('Webhooks')
+      %li= _('Any encrypted tokens')
   - if project.export_status == :finished
     = link_to _('Download export'), download_export_project_path(project),
-            rel: 'nofollow', download: '', method: :get, class: "btn btn-default", data: { qa_selector: 'download_export_link' }
+            rel: 'nofollow', download: '', method: :get, class: "btn gl-button btn-default", data: { qa_selector: 'download_export_link' }
     = link_to _('Generate new export'), generate_new_export_project_path(project),
-            method: :post, class: "btn btn-default"
+            method: :post, class: "btn gl-button btn-default"
   - else
     = link_to _('Export project'), export_project_path(project),
-          method: :post, class: "btn btn-default", data: { qa_selector: 'export_project_link' }
+          method: :post, class: "btn gl-button btn-default", data: { qa_selector: 'export_project_link' }
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 88dcc74a465..30d885964b5 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -11,7 +11,7 @@
     = render 'projects/tree/tree_header', tree: @tree
 
   #js-last-commit
-    .info-well.gl-display-none.gl-display-sm-flex.project-last-commit
+    .info-well.gl-display-none.gl-sm-display-flex.project-last-commit
       .gl-spinner-container.m-auto
         = loading_icon(size: 'md', color: 'dark', css_class: 'align-text-bottom')
 
diff --git a/app/views/projects/_find_file_link.html.haml b/app/views/projects/_find_file_link.html.haml
index c3b4a61c28a..a4bf72edf12 100644
--- a/app/views/projects/_find_file_link.html.haml
+++ b/app/views/projects/_find_file_link.html.haml
@@ -1,2 +1,2 @@
-= link_to project_find_file_path(@project, @ref), class: 'gl-button btn shortcuts-find-file', rel: 'nofollow' do
+= link_to project_find_file_path(@project, @ref), class: 'gl-button btn btn-default shortcuts-find-file', rel: 'nofollow' do
   = _('Find file')
diff --git a/app/views/projects/_fork_suggestion.html.haml b/app/views/projects/_fork_suggestion.html.haml
index 9e6ff4a5d7a..59c9c279a39 100644
--- a/app/views/projects/_fork_suggestion.html.haml
+++ b/app/views/projects/_fork_suggestion.html.haml
@@ -1,11 +1,10 @@
-- if current_user
-  .js-file-fork-suggestion-section.file-fork-suggestion.hidden
-    %span.file-fork-suggestion-note
-      You're not allowed to
-      %span.js-file-fork-suggestion-section-action
-        edit
-      files in this project directly. Please fork this project,
-      make your changes there, and submit a merge request.
-    = link_to 'Fork', nil, method: :post, class: 'js-fork-suggestion-button gl-button btn btn-grouped btn-inverted btn-success'
-    %button.js-cancel-fork-suggestion-button.gl-button.btn.btn-grouped{ type: 'button' }
-      Cancel
+.js-file-fork-suggestion-section.file-fork-suggestion.hidden
+  %span.file-fork-suggestion-note
+    You're not allowed to
+    %span.js-file-fork-suggestion-section-action
+      edit
+    files in this project directly. Please fork this project,
+    make your changes there, and submit a merge request.
+  = link_to 'Fork', nil, method: :post, class: 'js-fork-suggestion-button gl-button btn btn-grouped btn-inverted btn-success'
+  %button.js-cancel-fork-suggestion-button.gl-button.btn.btn-grouped{ type: 'button' }
+    Cancel
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 3e1d08e646e..0d3049cd9a2 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -3,7 +3,7 @@
 - max_project_topic_length = 15
 - emails_disabled = @project.emails_disabled?
 
-= render_if_exists 'projects/invite_members_modal', project: @project
+= render 'projects/invite_members_modal', project: @project
 
 .project-home-panel.js-show-on-project-root.gl-my-5{ class: [("empty-project" if empty_repo)] }
   .row.gl-mb-3
@@ -46,7 +46,11 @@
     .project-repo-buttons.col-md-12.col-lg-6.d-inline-flex.flex-wrap.justify-content-lg-end
       - if current_user
         .d-inline-flex
-          = render 'shared/notifications/new_button', notification_setting: @notification_setting, btn_class: 'btn-xs', dropdown_container_class: 'gl-mr-3', emails_disabled: emails_disabled
+          - if Feature.enabled?(:vue_notification_dropdown, @project, default_enabled: :yaml)
+            - if @notification_setting
+              .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id, container_class: 'gl-mr-3 gl-mt-5 gl-vertical-align-top' } }
+          - else
+            = render 'shared/notifications/new_button', notification_setting: @notification_setting, btn_class: 'btn-xs', dropdown_container_class: 'gl-mr-3', emails_disabled: emails_disabled
 
       .count-buttons.d-inline-flex
         = render 'projects/buttons/star'
@@ -65,7 +69,7 @@
       .home-panel-description.text-break
         .home-panel-description-markdown.read-more-container{ itemprop: 'description' }
           = markdown_field(@project, :description)
-        %button.btn.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
+        %button.btn.gl-button.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
           = _("Read more")
 
     - if @project.forked?
diff --git a/app/views/projects/_import_project_pane.html.haml b/app/views/projects/_import_project_pane.html.haml
index 27d75591d3e..e6ded3ad912 100644
--- a/app/views/projects/_import_project_pane.html.haml
+++ b/app/views/projects/_import_project_pane.html.haml
@@ -8,7 +8,7 @@
     .import-buttons
       - if gitlab_project_import_enabled?
         .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
-          = link_to new_import_gitlab_project_path, class: 'gl-button btn-default btn btn_import_gitlab_project project-submit', **tracking_attrs(track_label, 'click_button', 'gitlab_export') do
+          = link_to new_import_gitlab_project_path, class: 'gl-button btn-default btn btn_import_gitlab_project', **tracking_attrs(track_label, 'click_button', 'gitlab_export') do
             .gl-button-icon
               = sprite_icon('tanuki')
             = _("GitLab export")
diff --git a/app/views/projects/_invite_members_link.html.haml b/app/views/projects/_invite_members_link.html.haml
new file mode 100644
index 00000000000..95cfc75d955
--- /dev/null
+++ b/app/views/projects/_invite_members_link.html.haml
@@ -0,0 +1,4 @@
+- return unless can_invite_members_for_project?(@project)
+
+%li
+  .js-invite-members-trigger{ data: { icon: 'plus', classes: 'gl-text-decoration-none! gl-shadow-none!', display_text: _('Invite team members') } }
diff --git a/app/views/projects/_invite_members_modal.html.haml b/app/views/projects/_invite_members_modal.html.haml
index e8f61336882..b1bba5b59ca 100644
--- a/app/views/projects/_invite_members_modal.html.haml
+++ b/app/views/projects/_invite_members_modal.html.haml
@@ -1,4 +1,4 @@
-- if invite_members_allowed?(project.group)
+- if can_invite_members_for_project?(project)
   .js-invite-members-modal{ data: { id: project.id,
     name: project.name,
     is_project: 'true',
diff --git a/app/views/projects/_invite_members_side_nav_link.html.haml b/app/views/projects/_invite_members_side_nav_link.html.haml
deleted file mode 100644
index 15e0b75cf57..00000000000
--- a/app/views/projects/_invite_members_side_nav_link.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-- if invite_members_allowed?(project.group) && body_data_page == 'projects:show'
-  %li
-    .js-invite-members-trigger{ data: { icon: 'plus', display_text: _('Invite team members') } }
diff --git a/app/views/projects/_issuable_by_email.html.haml b/app/views/projects/_issuable_by_email.html.haml
deleted file mode 100644
index c11ee765cca..00000000000
--- a/app/views/projects/_issuable_by_email.html.haml
+++ /dev/null
@@ -1,49 +0,0 @@
-- name = issuable_type == 'issue' ? 'issue' : 'merge request'
-
-.issuable-footer.text-center
-  %button.issuable-email-modal-btn{ type: "button", data: { toggle: "modal", target: "#issuable-email-modal" } }
-    Email a new #{name} to this project
-
-#issuable-email-modal.modal.fade{ tabindex: "-1", role: "dialog" }
-  .modal-dialog{ role: "document" }
-    .modal-content
-      .modal-header
-        %h4.modal-title
-          Create new #{name} by email
-        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
-          %span{ "aria-hidden": true } &times;
-      .modal-body
-        %p
-          You can create a new #{name} inside this project by sending an email to the following email address:
-        .email-modal-input-group.input-group
-          = text_field_tag :issuable_email, email, class: "monospace js-select-on-focus form-control", readonly: true
-          .input-group-append
-            = clipboard_button(target: '#issuable_email', class: 'btn btn-clipboard input-group-text btn-transparent d-none d-sm-block')
-
-            - if issuable_type == 'issue'
-              - enter_title_text = _('Enter the issue title')
-              - enter_description_text = _('Enter the issue description')
-            - else
-              - enter_title_text = _('Enter the merge request title')
-              - enter_description_text = _('Enter the merge request description')
-            = mail_to email, class: 'btn btn-clipboard btn-transparent',
-              subject: enter_title_text,
-              body: enter_description_text,
-              title: _('Send email'),
-              data: { toggle: 'tooltip', placement: 'bottom' } do
-              = sprite_icon('mail')
-
-        %p
-          = render 'by_email_description'
-        %p
-          This is a private email address
-          %span<
-            = link_to help_page_path('development/emails', anchor: 'email-namespace'), target: '_blank', rel: 'noopener', aria: { label: 'Learn more about incoming email addresses' } do
-              = sprite_icon('question-o')
-
-          generated just for you.
-
-          Anyone who gets ahold of it can create issues or merge requests as if they were you.
-          You should
-          = link_to 'reset it', new_issuable_address_project_path(@project, issuable_type: issuable_type), class: 'incoming-email-token-reset'
-          if that ever happens.
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 3b66fdbdf1a..afe42b334ba 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -15,5 +15,5 @@
 
       - if can?(current_user, :create_merge_request_in, event.project.default_merge_request_target)
         .flex-right
-          = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn btn-info btn-sm qa-create-merge-request" do
+          = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn gl-button btn-info btn-sm qa-create-merge-request" do
             #{ _('Create merge request') }
diff --git a/app/views/projects/_merge_request_merge_checks_settings.html.haml b/app/views/projects/_merge_request_merge_checks_settings.html.haml
index 7a5997bbcfd..b099eb6800e 100644
--- a/app/views/projects/_merge_request_merge_checks_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_checks_settings.html.haml
@@ -24,3 +24,4 @@
     = form.check_box :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-input', data: { qa_selector: 'allow_merge_if_all_discussions_are_resolved_checkbox' }
     = form.label :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-label' do
       = s_('ProjectSettings|All discussions must be resolved')
+  = render_if_exists 'projects/merge_request_merge_checks_jira_enforcement', form: form, project: @project
diff --git a/app/views/projects/_merge_request_merge_options_settings.html.haml b/app/views/projects/_merge_request_merge_options_settings.html.haml
index 8951f2ed22f..80dabeceeb0 100644
--- a/app/views/projects/_merge_request_merge_options_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_options_settings.html.haml
@@ -1,6 +1,6 @@
 - form = local_assigns.fetch(:form)
 
-.form-group
+.form-group#project-merge-options{ data: { project_full_path: @project.full_path } }
   %b= s_('ProjectSettings|Merge options')
   %p.text-secondary= s_('ProjectSettings|Additional merge request capabilities that influence how and when merges will be performed')
   = render_if_exists 'projects/merge_pipelines_settings', form: form
diff --git a/app/views/projects/_merge_request_merge_suggestions_settings.html.haml b/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
index 258cf86ab05..31a85a204be 100644
--- a/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
@@ -9,7 +9,7 @@
       anchor: 'configure-the-commit-message-for-applied-suggestions'),
       target: '_blank'
   .mb-2
-    = form.text_field :suggestion_commit_message, class: 'form-control mb-2', placeholder: Gitlab::Suggestions::CommitMessage::DEFAULT_SUGGESTION_COMMIT_MESSAGE
+    = form.text_field :suggestion_commit_message, class: 'form-control gl-form-input mb-2', placeholder: Gitlab::Suggestions::CommitMessage::DEFAULT_SUGGESTION_COMMIT_MESSAGE
     %p.form-text.text-muted
       = s_('ProjectSettings|The variables GitLab supports:')
       - Gitlab::Suggestions::CommitMessage::PLACEHOLDERS.keys.each do |placeholder|
diff --git a/app/views/projects/_merge_request_settings.html.haml b/app/views/projects/_merge_request_settings.html.haml
index e69972e8163..a54eb2dddac 100644
--- a/app/views/projects/_merge_request_settings.html.haml
+++ b/app/views/projects/_merge_request_settings.html.haml
@@ -4,8 +4,7 @@
 
 = render 'projects/merge_request_merge_options_settings', project: @project, form: form
 
-- if Feature.enabled?(:squash_options, @project, default_enabled: true)
-  = render 'projects/merge_request_squash_options_settings', form: form
+= render 'projects/merge_request_squash_options_settings', form: form
 
 = render 'projects/merge_request_merge_checks_settings', project: @project, form: form
 
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index ee35f734e3e..41992ee5ea9 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -54,12 +54,13 @@
   .form-group.row.initialize-with-readme-setting
     %div{ :class => "col-sm-12" }
       .form-check
-        = check_box_tag 'project[initialize_with_readme]', '1', false, class: 'form-check-input qa-initialize-with-readme-checkbox', data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "init_with_readme", track_value: "" }
+        - experiment(:new_project_readme, actor: current_user) do |e|
+          = check_box_tag 'project[initialize_with_readme]', '1', e.run, class: 'form-check-input qa-initialize-with-readme-checkbox', data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "init_with_readme", track_value: "" }
         = label_tag 'project[initialize_with_readme]', class: 'form-check-label' do
           .option-title
             %strong= s_('ProjectsNew|Initialize repository with a README')
           .option-description
             = s_('ProjectsNew|Allows you to immediately clone this project’s repository. Skip this if you plan to push up an existing repository.')
 
-= f.submit _('Create project'), class: "btn btn-success project-submit", data: { track_label: "#{track_label}", track_event: "click_button", track_property: "create_project", track_value: "" }
-= link_to _('Cancel'), dashboard_projects_path, class: 'btn btn-cancel', data: { track_label: "#{track_label}", track_event: "click_button", track_property: "cancel", track_value: "" }
+= f.submit _('Create project'), class: "btn gl-button btn-success", data: { track_label: "#{track_label}", track_event: "click_button", track_property: "create_project", track_value: "" }
+= link_to _('Cancel'), dashboard_projects_path, class: 'btn gl-button btn-default btn-cancel', data: { track_label: "#{track_label}", track_event: "click_button", track_property: "cancel", track_value: "" }
diff --git a/app/views/projects/_new_project_push_tip.html.haml b/app/views/projects/_new_project_push_tip.html.haml
index e008130436c..a63b4bed9de 100644
--- a/app/views/projects/_new_project_push_tip.html.haml
+++ b/app/views/projects/_new_project_push_tip.html.haml
@@ -8,4 +8,4 @@
     %span.input-group-append
       = clipboard_button(text: push_to_create_project_command, title: _("Copy command"), class: 'input-group-text', placement: "right")
   %p
-    = link_to("What does this command do?", help_page_path("gitlab-basics/create-project", anchor: "push-to-create-a-new-project"), target: "_blank")
+    = link_to("What does this command do?", help_page_path("user/project/working_with_projects", anchor: "push-to-create-a-new-project"), target: "_blank")
diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml
index d1ff52548cd..949397755ba 100644
--- a/app/views/projects/_project_templates.html.haml
+++ b/app/views/projects/_project_templates.html.haml
@@ -1,15 +1,15 @@
 - f ||= local_assigns[:f]
 
-.project-templates-buttons.col-sm-12
+.project-templates-buttons
   %ul.nav-tabs.nav-links.nav.scrolling-tabs
     %li.built-in-tab
       %a.nav-link.active{ href: "#built-in", data: { toggle: 'tab'} }
         = _('Built-in')
-        %span.badge.badge-pill= Gitlab::SampleDataTemplate.all.count + Gitlab::ProjectTemplate.all.count
+        %span.badge.badge-pill= Gitlab::ProjectTemplate.all.count + Gitlab::SampleDataTemplate.all.count
 
 .tab-content
   .project-templates-buttons.import-buttons.tab-pane.active#built-in
-    = render partial: 'projects/project_templates/template', collection: Gitlab::SampleDataTemplate.all + Gitlab::ProjectTemplate.all
+    = render partial: 'projects/project_templates/template', collection: Gitlab::ProjectTemplate.all + Gitlab::SampleDataTemplate.all
 
 .project-fields-form
   = render 'projects/project_templates/project_fields_form'
diff --git a/app/views/projects/_remove.html.haml b/app/views/projects/_remove.html.haml
index c246c45d0f7..e991a9b0ec7 100644
--- a/app/views/projects/_remove.html.haml
+++ b/app/views/projects/_remove.html.haml
@@ -3,7 +3,8 @@
 .sub-section
   %h4.danger-title= _('Delete project')
   %p
-    %strong= _('Deleting the project will delete its repository and all related resources including issues, merge requests etc.')
+    %strong= _('Deleting the project will delete its repository and all related resources including issues, merge requests, etc.')
+    = link_to _('Learn more.'), help_page_path('user/project/settings/index', anchor: 'removing-a-fork-relationship'), target: '_blank', rel: 'noopener noreferrer'
   %p
     %strong= _('Deleted projects cannot be restored!')
   #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: project.path } }
diff --git a/app/views/projects/_remove_fork.html.haml b/app/views/projects/_remove_fork.html.haml
index 2a7453902a8..8fa21966683 100644
--- a/app/views/projects/_remove_fork.html.haml
+++ b/app/views/projects/_remove_fork.html.haml
@@ -7,4 +7,5 @@
   = form_for @project, url: remove_fork_project_path(@project), method: :delete, remote: true, html: { class: 'transfer-project' } do |f|
     %p
       %strong= _('Once removed, the fork relationship cannot be restored. This project will no longer be able to receive or send merge requests to the source project or other forks.')
+      = link_to _('Learn more.'), help_page_path('user/project/settings/index', anchor: 'removing-a-fork-relationship'), target: '_blank', rel: 'noopener noreferrer'
     = button_to _('Remove fork relationship'), '#', class: "gl-button btn btn-danger js-confirm-danger", data: { "confirm-danger-message" => remove_fork_project_warning_message(@project) }
diff --git a/app/views/projects/_service_desk_settings.html.haml b/app/views/projects/_service_desk_settings.html.haml
index 153235c37d2..0998cd480d3 100644
--- a/app/views/projects/_service_desk_settings.html.haml
+++ b/app/views/projects/_service_desk_settings.html.haml
@@ -2,7 +2,7 @@
 %section.settings.js-service-desk-setting-wrapper.no-animate#js-service-desk{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Service Desk')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.js-settings-toggle
       = expanded ? _('Collapse') : _('Expand')
     - link_start = "<a href='#{help_page_path('user/project/service_desk')}' target='_blank' rel='noopener noreferrer'>".html_safe
     %p= _('Enable and disable Service Desk. Some additional configuration might be required. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/projects/_stat_anchor_list.html.haml b/app/views/projects/_stat_anchor_list.html.haml
index 8a93d93a538..13ff8abe499 100644
--- a/app/views/projects/_stat_anchor_list.html.haml
+++ b/app/views/projects/_stat_anchor_list.html.haml
@@ -6,4 +6,4 @@
   - anchors.each do |anchor|
     %li.nav-item
       = link_to_if(anchor.link, anchor.label, anchor.link, stat_anchor_attrs(anchor)) do
-        .stat-text.d-flex.align-items-center{ class: ('btn btn-default disabled' if project_buttons) }= anchor.label
+        .stat-text.d-flex.align-items-center{ class: ('btn gl-button btn-default disabled' if project_buttons) }= anchor.label
diff --git a/app/views/projects/_transfer.html.haml b/app/views/projects/_transfer.html.haml
index eb7feb7bd3b..ee717c2deca 100644
--- a/app/views/projects/_transfer.html.haml
+++ b/app/views/projects/_transfer.html.haml
@@ -4,13 +4,14 @@
   %h4.danger-title= _('Transfer project')
   = form_for @project, url: transfer_project_path(@project), method: :put, remote: true, html: { class: 'js-project-transfer-form' } do |f|
     .form-group
-      = label_tag :new_namespace_id, nil, class: 'label-bold' do
-        %span= _('Select a new namespace')
-      .form-group
-        = select_tag :new_namespace_id, namespaces_options(nil), include_blank: true, class: 'select2'
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'transferring-an-existing-project-into-another-namespace') }
+      %p= _("Transfer your project into another namespace. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
       %ul
         %li= _("Be careful. Changing the project's namespace can have unintended side effects.")
         %li= _('You can only transfer the project to namespaces you manage.')
         %li= _('You will need to update your local repositories to point to the new location.')
         %li= _('Project visibility level will be changed to match namespace rules when transferring to a group.')
+      = label_tag :new_namespace_id, _('Select a new namespace'), class: 'gl-font-weight-bold'
+      .form-group
+        = select_tag :new_namespace_id, namespaces_options(nil), include_blank: true, class: 'select2'
     = f.submit 'Transfer project', class: "gl-button btn btn-danger js-confirm-danger qa-transfer-button", data: { "confirm-danger-message" => transfer_project_message(@project) }
diff --git a/app/views/projects/_visibility_modal.html.haml b/app/views/projects/_visibility_modal.html.haml
index 182164d2175..990ac9fefb9 100644
--- a/app/views/projects/_visibility_modal.html.haml
+++ b/app/views/projects/_visibility_modal.html.haml
@@ -24,6 +24,6 @@
         .form-group
           = text_field_tag 'confirm_path_input', '', class: 'form-control js-confirm-danger-input qa-confirm-input'
         .form-actions
-          %button.btn.btn-default.gl-mr-4{ type: "button", "data-dismiss": "modal" }
+          %button.btn.gl-button.btn-default.gl-mr-4{ type: "button", "data-dismiss": "modal" }
             = _('Cancel')
-          = submit_tag _('Reduce project visibility'), class: "btn btn-danger js-confirm-danger-submit qa-confirm-button", disabled: true
+          = submit_tag _('Reduce project visibility'), class: "btn gl-button btn-danger js-confirm-danger-submit qa-confirm-button", disabled: true
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index 991c95153da..2669c4c0042 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -14,4 +14,4 @@
       - if can_create_wiki
         %p
           = _("Add a homepage to your wiki that contains information about your project and GitLab will display it here instead of this message.")
-        = link_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', class: "btn btn-primary"
+        = link_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', class: "btn gl-button btn-primary"
diff --git a/app/views/projects/artifacts/_artifact.html.haml b/app/views/projects/artifacts/_artifact.html.haml
index 233a41a37b5..229de2f759c 100644
--- a/app/views/projects/artifacts/_artifact.html.haml
+++ b/app/views/projects/artifacts/_artifact.html.haml
@@ -50,12 +50,12 @@
     .table-action-buttons
       .btn-group
         - if can?(current_user, :read_build, @project)
-          = link_to download_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', download: '', title: _('Download artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Download artifacts') }, class: 'gl-button btn btn-build has-tooltip ml-0' do
-            = sprite_icon('download')
+          = link_to download_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', download: '', title: _('Download artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Download artifacts') }, class: 'gl-button btn btn-default btn-icon has-tooltip' do
+            = sprite_icon('download', css_class: 'gl-icon')
 
-          = link_to browse_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', title: _('Browse artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Browse artifacts') }, class: 'gl-button btn btn-build has-tooltip' do
-            = sprite_icon('folder-open')
+          = link_to browse_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', title: _('Browse artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Browse artifacts') }, class: 'gl-button btn btn-default btn-icon has-tooltip' do
+            = sprite_icon('folder-open', css_class: 'gl-icon')
 
         - if can?(current_user, :destroy_artifacts, @project)
-          = link_to project_artifact_path(@project, artifact), data: { placement: 'top', container: 'body', confirm: _('Are you sure you want to delete these artifacts?') }, method: :delete, title: _('Delete artifacts'), ref: 'tooltip', aria: { label: _('Delete artifacts') }, class: 'gl-button btn btn-danger has-tooltip' do
-            = sprite_icon('remove')
+          = link_to project_artifact_path(@project, artifact), data: { placement: 'top', container: 'body', confirm: _('Are you sure you want to delete these artifacts?') }, method: :delete, title: _('Delete artifacts'), ref: 'tooltip', aria: { label: _('Delete artifacts') }, class: 'gl-button btn btn-danger btn-icon has-tooltip' do
+            = sprite_icon('remove', css_class: 'gl-icon')
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index 710417f90e3..e666bb237bd 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -23,13 +23,13 @@
     - if blob.readable_text?
       - if blame
         = link_to 'Normal view', project_blob_path(@project, @id),
-            class: 'gl-button btn'
+            class: 'gl-button btn btn-default'
       - else
         = link_to 'Blame', project_blame_path(@project, @id),
-            class: 'gl-button btn js-blob-blame-link' unless blob.empty?
+            class: 'gl-button btn btn-default js-blob-blame-link' unless blob.empty?
 
     = link_to 'History', project_commits_path(@project, @id),
-        class: 'gl-button btn'
+        class: 'gl-button btn btn-default'
 
     = link_to 'Permalink', project_blob_path(@project,
-        tree_join(@commit.sha, @path)), class: 'gl-button btn js-data-file-blob-permalink-url'
+        tree_join(@commit.sha, @path)), class: 'gl-button btn btn-default js-data-file-blob-permalink-url'
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index b0317d84cdc..7d3a0c4a026 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -10,14 +10,14 @@
     - if current_action?(:edit) || current_action?(:update)
       %span.float-left.gl-mr-3
       = text_field_tag 'file_path', (params[:file_path] || @path),
-        class: 'form-control new-file-path js-file-path-name-input'
+        class: 'form-control gl-form-input new-file-path js-file-path-name-input'
       = render 'template_selectors'
 
     - if current_action?(:new) || current_action?(:create)
       %span.float-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' : '')
+        required: true, class: 'form-control gl-form-input new-file-name js-file-path-name-input', value: params[:file_name] || (should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : '')
       = render 'template_selectors'
       - if should_suggest_gitlab_ci_yml?
         .js-suggest-gitlab-ci-yml{ data: { target: '#gitlab-ci-yml-selector',
@@ -36,8 +36,6 @@
         %span.soft-wrap
           = custom_icon('icon_soft_wrap')
           Soft wrap
-      .encoding-selector
-        = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2', tabindex: '-1'
 
   .file-editor.code
     .js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }<
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
index 6d01206a128..a7f13989ca7 100644
--- a/app/views/projects/blob/_header.html.haml
+++ b/app/views/projects/blob/_header.html.haml
@@ -2,23 +2,23 @@
 .js-file-title.file-title-flex-parent
   = render 'projects/blob/header_content', blob: blob
 
-  .file-actions.gl-display-flex.gl-flex-fill-1.gl-align-self-start.gl-md-justify-content-end<
+  .file-actions.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-md-justify-content-end<
     = render 'projects/blob/viewer_switcher', blob: blob unless blame
     - if Feature.enabled?(:consolidated_edit_button, @project)
       = render 'shared/web_ide_button', blob: blob
     - else
       = edit_blob_button(@project, @ref, @path, blob: blob)
       = ide_edit_button(@project, @ref, @path, blob: blob)
-    .btn-group.ml-2{ role: "group" }>
+    .btn-group{ role: "group", class: ("gl-ml-3" if current_user) }>
       = render_if_exists 'projects/blob/header_file_locks_link'
       - if current_user
         = replace_blob_link(@project, @ref, @path, blob: blob)
         = delete_blob_link(@project, @ref, @path, blob: blob)
-    .btn-group.ml-2{ role: "group" }
+    .btn-group.gl-ml-3{ role: "group" }
       = copy_blob_source_button(blob) unless blame
       = open_raw_blob_button(blob)
       = download_blob_button(blob)
       = view_on_environment_button(@commit.sha, @path, @environment) if @environment
 
-= render 'projects/fork_suggestion'
+= render_fork_suggestion
 = render_if_exists 'projects/blob/header_file_locks', project: @project, path: @path
diff --git a/app/views/projects/blob/_viewer_switcher.html.haml b/app/views/projects/blob/_viewer_switcher.html.haml
index c6b13deaece..043b8629289 100644
--- a/app/views/projects/blob/_viewer_switcher.html.haml
+++ b/app/views/projects/blob/_viewer_switcher.html.haml
@@ -2,11 +2,11 @@
   - simple_viewer = blob.simple_viewer
   - rich_viewer = blob.rich_viewer
 
-  .btn-group.js-blob-viewer-switcher.ml-2{ role: "group" }>
+  .btn-group.js-blob-viewer-switcher.gl-ml-3{ role: "group" }>
     - simple_label = "Display #{simple_viewer.switcher_title}"
-    %button.btn.gl-button.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
+    %button.btn.gl-button.btn-default.btn-icon.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
       = sprite_icon(simple_viewer.switcher_icon)
 
     - rich_label = "Display #{rich_viewer.switcher_title}"
-    %button.btn.gl-button.btn-default.btn-sm.js-blob-viewer-switch-btn.gl-mr-3.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
+    %button.btn.gl-button.btn-default.btn-icon.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
       = sprite_icon(rich_viewer.switcher_icon)
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index dc4172e2f09..fcf073e1e09 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -8,13 +8,13 @@
       = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name gl-ml-3 qa-branch-name' do
         = branch.name
       - if branch.name == @repository.root_ref
-        %span.badge.badge-primary.gl-ml-2 default
+        %span.badge.gl-badge.sm.badge-pill.badge-primary.gl-ml-2 default
       - elsif merged
-        %span.badge.badge-info.has-tooltip.gl-ml-2{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
+        %span.badge.gl-badge.sm.badge-pill.badge-info.has-tooltip.gl-ml-2{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
           = s_('Branches|merged')
 
       - if protected_branch?(@project, branch)
-        %span.badge.badge-success.gl-ml-2
+        %span.badge.gl-badge.sm.badge-pill.badge-success.gl-ml-2
           = s_('Branches|protected')
 
       = render_if_exists 'projects/branches/diverged_from_upstream', branch: branch
@@ -50,10 +50,10 @@
 
     - if can?(current_user, :push_code, @project)
       - if branch.name == @project.repository.root_ref
-        %button{ class: "gl-button btn btn-danger remove-row has-tooltip disabled",
-          disabled: true,
-          title: s_('Branches|The default branch cannot be deleted') }
-          = sprite_icon("remove")
+        - delete_default_branch_tooltip = s_('Branches|The default branch cannot be deleted')
+        %span.has-tooltip{ title: delete_default_branch_tooltip }
+          %button{ class: "gl-button btn btn-danger remove-row disabled", disabled: true, 'aria-label' => delete_default_branch_tooltip }
+            = sprite_icon("remove")
       - elsif protected_branch?(@project, branch)
         - if can?(current_user, :push_to_delete_protected_branch, @project)
           %button{ class: "gl-button btn btn-danger remove-row has-tooltip",
@@ -65,10 +65,10 @@
               is_merged: ("true" if merged) } }
             = sprite_icon("remove")
         - else
-          %button{ class: "gl-button btn btn-danger remove-row has-tooltip disabled",
-            disabled: true,
-            title: s_('Branches|Only a project maintainer or owner can delete a protected branch') }
-            = sprite_icon("remove")
+          - delete_protected_branch_tooltip = s_('Branches|Only a project maintainer or owner can delete a protected branch')
+          %span.has-tooltip{ title: delete_protected_branch_tooltip }
+            %button{ class: "gl-button btn btn-danger remove-row  disabled", disabled: true, 'aria-label' => delete_protected_branch_tooltip }
+              = sprite_icon("remove")
       - else
         = link_to project_branch_path(@project, branch.name),
           class: "gl-button btn btn-danger remove-row qa-remove-btn js-ajax-loading-spinner has-tooltip",
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 46cce59f67a..beccf458138 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -60,7 +60,10 @@
   %ul.content-list.all-branches
     - @branches.each do |branch|
       = render "projects/branches/branch", branch: branch, merged: @merged_branch_names.include?(branch.name), commit_status: @branch_pipeline_statuses[branch.name], show_commit_status: @branch_pipeline_statuses.any?
-  = paginate @branches, theme: 'gitlab'
+  - if Feature.enabled?(:branches_pagination_without_count, @project, default_enabled: true)
+    = render('kaminari/gitlab/without_count', previous_path: @prev_path, next_path: @next_path)
+  - else
+    = paginate @branches, theme: 'gitlab'
 - else
   .nothing-here-block
     = s_('Branches|No branches to show')
diff --git a/app/views/projects/buttons/_clone.html.haml b/app/views/projects/buttons/_clone.html.haml
index 938dfc69500..0ec47744fc9 100644
--- a/app/views/projects/buttons/_clone.html.haml
+++ b/app/views/projects/buttons/_clone.html.haml
@@ -6,9 +6,9 @@
     %span.gl-mr-2.js-clone-dropdown-label
       = _('Clone')
     = sprite_icon("chevron-down", css_class: "icon")
-  %ul.p-3.dropdown-menu.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown.qa-clone-options{ class: dropdown_class }
+  %ul.dropdown-menu.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown.qa-clone-options{ class: dropdown_class }
     - if ssh_enabled?
-      %li
+      %li{ class: 'gl-px-4!' }
         %label.label-bold
           = _('Clone with SSH')
         .input-group
@@ -17,7 +17,7 @@
             = clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
             = render_if_exists 'projects/buttons/geo'
     - if http_enabled?
-      %li.pt-2
+      %li.pt-2{ class: 'gl-px-4!' }
         %label.label-bold
           = _('Clone with %{http_label}') % { http_label: gitlab_config.protocol.upcase }
         .input-group
@@ -25,4 +25,15 @@
           .input-group-append
             = clipboard_button(target: '#http_project_clone', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
             = render_if_exists 'projects/buttons/geo'
+      %li.divider.mt-2
+      %li.pt-2.gl-new-dropdown-item
+        %label.label-bold{ class: 'gl-px-4!' }
+          = _('Open in your IDE')
+        %a.dropdown-item.open-with-link{ href: 'vscode://vscode.git/clone?url=' + CGI.escape(project.http_url_to_repo) }
+          .gl-new-dropdown-item-text-wrapper
+            = _('Visual Studio Code')
+        - if show_xcode_link?(@project)
+          %a.dropdown-item.open-with-link{ href: xcode_uri_to_repo(@project) }
+            .gl-new-dropdown-item-text-wrapper
+              = _("Xcode")
     = render_if_exists 'projects/buttons/kerberos_clone_field'
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 0fcbf2ca1eb..3071e5ea5f8 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -3,7 +3,7 @@
 - if !project.empty_repo? && can?(current_user, :download_code, project)
   - archive_prefix = "#{project.path}-#{ref.tr('/', '-')}"
   .project-action-button.dropdown.inline>
-    %button.gl-button.btn.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }
+    %button.gl-button.btn.btn-default.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }
       = sprite_icon('download')
       %span.sr-only=  _('Select Archive Format')
       = sprite_icon("chevron-down")
diff --git a/app/views/projects/buttons/_download_links.html.haml b/app/views/projects/buttons/_download_links.html.haml
index c997df578c0..f6084cfcde8 100644
--- a/app/views/projects/buttons/_download_links.html.haml
+++ b/app/views/projects/buttons/_download_links.html.haml
@@ -1,4 +1,4 @@
 .btn-group.ml-0.w-100
   - Gitlab::Workhorse::ARCHIVE_FORMATS.each_with_index do |fmt, index|
     - archive_path = project_archive_path(project, id: tree_join(ref, archive_prefix), path: path, format: fmt)
-    = link_to fmt, external_storage_url_or_path(archive_path), rel: 'nofollow', download: '', class: "gl-button btn btn-xs #{"btn-primary" if index == 0}"
+    = link_to fmt, external_storage_url_or_path(archive_path), rel: 'nofollow', download: '', class: "gl-button btn btn-sm #{index == 0 ? "btn-confirm" : "btn-default"}"
diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml
index dbe0bf35b98..fad168da71e 100644
--- a/app/views/projects/buttons/_fork.html.haml
+++ b/app/views/projects/buttons/_fork.html.haml
@@ -7,11 +7,11 @@
           %span= s_('ProjectOverview|Fork')
       - else
         - can_create_fork = current_user.can?(:create_fork)
-        = link_to new_project_fork_path(@project),
-            class: "btn btn-default btn-xs has-tooltip count-badge-button d-flex align-items-center fork-btn #{'has-tooltip disabled' unless can_create_fork}",
-            title: (s_('ProjectOverview|You have reached your project limit') unless can_create_fork) do
-          = sprite_icon('fork', css_class: 'icon')
-          %span= s_('ProjectOverview|Fork')
+        - disabled_fork_tooltip = s_('ProjectOverview|You have reached your project limit')
+        %span.has-tooltip{ title: (disabled_fork_tooltip unless can_create_fork) }
+          = link_to new_project_fork_path(@project), class: "btn btn-default btn-xs count-badge-button d-flex align-items-center fork-btn #{' disabled' unless can_create_fork }", 'aria-label' => (disabled_fork_tooltip unless can_create_fork) do
+            = sprite_icon('fork', css_class: 'icon')
+            %span= s_('ProjectOverview|Fork')
       %span.fork-count.count-badge-count.d-flex.align-items-center
         = link_to project_forks_path(@project), title: n_(s_('ProjectOverview|Fork'), s_('ProjectOverview|Forks'), @project.forks_count), class: 'count' do
           = @project.forks_count
diff --git a/app/views/projects/buttons/_remove_tag.html.haml b/app/views/projects/buttons/_remove_tag.html.haml
index ae776e93203..68a9d715674 100644
--- a/app/views/projects/buttons/_remove_tag.html.haml
+++ b/app/views/projects/buttons/_remove_tag.html.haml
@@ -2,5 +2,5 @@
 - tag = local_assigns.fetch(:tag, nil)
 - return unless project && tag
 
-%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-danger remove-row has-tooltip gl-ml-3 #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
+%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-danger btn-icon remove-row has-tooltip gl-ml-3 #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
   = sprite_icon("remove")
diff --git a/app/views/projects/buttons/_xcode_link.html.haml b/app/views/projects/buttons/_xcode_link.html.haml
deleted file mode 100644
index e0f47f1ca3d..00000000000
--- a/app/views/projects/buttons/_xcode_link.html.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-%a.gl-button.btn.btn-default{ href: xcode_uri_to_repo(@project) }
-  = _("Open in Xcode")
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index 017c804ced0..0cc595de7be 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -98,35 +98,35 @@
 
   %td
     .gl-display-flex
-      - if can?(current_user, :read_job_artifacts, job) && job.artifacts?
-        = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: _('Download artifacts'), class: 'btn btn-build gl-button btn-icon btn-svg' do
-          = sprite_icon('download')
-      - if can?(current_user, :update_build, job)
-        - if job.active?
-          = link_to cancel_project_job_path(job.project, job, continue: { to: request.fullpath }), method: :post, title: _('Cancel'), class: 'btn gl-button btn-build' do
-            = sprite_icon('close')
-        - elsif job.scheduled?
-          .btn-group
-            .btn.gl-button.btn-default{ disabled: true }
-              = sprite_icon('planning')
+      .btn-group
+        - if can?(current_user, :read_job_artifacts, job) && job.artifacts?
+          = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: _('Download artifacts'), class: 'gl-button btn btn-default btn-icon' do
+            = sprite_icon('download', css_class: 'gl-icon')
+        - if can?(current_user, :update_build, job)
+          - if job.active?
+            = link_to cancel_project_job_path(job.project, job, continue: { to: request.fullpath }), method: :post, title: _('Cancel'), class: 'gl-button btn btn-default btn-icon' do
+              = sprite_icon('close', css_class: 'gl-icon')
+          - elsif job.scheduled?
+            .gl-button.btn.btn-default.btn-icon.disabled{ disabled: true }
+              = sprite_icon('planning', css_class: 'gl-icon')
               %time.js-remaining-time{ datetime: job.scheduled_at.utc.iso8601 }
                 = duration_in_numbers(job.execute_in)
             - confirmation_message = s_("DelayedJobs|Are you sure you want to run %{job_name} immediately? This job will run automatically after it's timer finishes.") % { job_name: job.name }
             = link_to play_project_job_path(job.project, job, return_to: request.original_url),
               method: :post,
               title: s_('DelayedJobs|Start now'),
-              class: 'btn gl-button btn-default btn-build has-tooltip',
+              class: 'gl-button btn btn-default btn-icon has-tooltip',
               data: { confirm: confirmation_message } do
-              = sprite_icon('play')
+              = sprite_icon('play', css_class: 'gl-icon')
             = link_to unschedule_project_job_path(job.project, job, return_to: request.original_url),
               method: :post,
               title: s_('DelayedJobs|Unschedule'),
-              class: 'btn gl-button btn-default btn-build has-tooltip' do
-              = sprite_icon('time-out')
-        - elsif allow_retry
-          - if job.playable? && !admin && can?(current_user, :update_build, job)
-            = link_to play_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Play'), class: 'btn gl-button btn-build' do
-              = custom_icon('icon_play')
-          - elsif job.retryable?
-            = link_to retry_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Retry'), class: 'btn btn-build gl-button btn-icon btn-default' do
-              = sprite_icon('repeat', css_class: 'gl-icon')
+              class: 'gl-button btn btn-default btn-icon has-tooltip' do
+              = sprite_icon('time-out', css_class: 'gl-icon')
+          - elsif allow_retry
+            - if job.playable? && !admin && can?(current_user, :update_build, job)
+              = link_to play_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Play'), class: 'gl-button btn btn-default btn-icon' do
+                = sprite_icon('play', css_class: 'gl-icon')
+            - elsif job.retryable?
+              = link_to retry_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Retry'), class: 'gl-button btn btn-default btn-icon' do
+                = sprite_icon('repeat', css_class: 'gl-icon')
diff --git a/app/views/projects/cleanup/_show.html.haml b/app/views/projects/cleanup/_show.html.haml
index 37ec63cc871..e693082461f 100644
--- a/app/views/projects/cleanup/_show.html.haml
+++ b/app/views/projects/cleanup/_show.html.haml
@@ -6,7 +6,10 @@
     %button.btn.js-settings-toggle
       = expanded ? _('Collapse') : _('Expand')
     %p
-      = _("Clean up after running %{filter_repo} on the repository" % { filter_repo: link_to_filter_repo }).html_safe
+      - link_url = 'https://github.com/newren/git-filter-repo'
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: link_url }
+      - link_end = '</a>'.html_safe
+      = _("Clean up after running %{link_start}git filter-repo%{link_end} on the repository.").html_safe % { link_start: link_start, link_end: link_end }
       = link_to sprite_icon('question-o'),
           help_page_path('user/project/repository/reducing_the_repo_size_using_git.md'),
           target: '_blank', rel: 'noopener noreferrer'
@@ -24,6 +27,6 @@
             = _("No file selected")
           = f.file_field :bfg_object_map, class: "hidden js-object-map-input", required: true
         .form-text.text-muted
-          = _("The maximum file size allowed is %{size}.") % { size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes) }
+          = _("The maximum file size is %{size}.") % { size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes) }
 
       = f.submit _('Start cleanup'), class: 'gl-button btn btn-success'
diff --git a/app/views/projects/commit/_change.html.haml b/app/views/projects/commit/_change.html.haml
index 69b20fbc6d0..bda8ec39e81 100644
--- a/app/views/projects/commit/_change.html.haml
+++ b/app/views/projects/commit/_change.html.haml
@@ -1,25 +1,24 @@
 - case type.to_s
 - when 'revert'
-  - label = s_('ChangeTypeAction|Revert')
-  - branch_label = s_('ChangeTypeActionLabel|Revert in branch')
   - revert_merge_request = _('Revert this merge request')
   - revert_commit = _('Revert this commit')
-  - description = s_('ChangeTypeAction|This will create a new commit in order to revert the existing changes.')
   - title = commit.merged_merge_request(current_user) ? revert_merge_request : revert_commit
 
-  - if defined?(pajamas)
-    .js-revert-commit-modal{ data: { title: title,
-      endpoint: revert_namespace_project_commit_path(commit, namespace_id: @project.namespace.full_path, project_id: @project),
-      branch: @project.default_branch,
-      push_code: can?(current_user, :push_code, @project).to_s,
-      branch_collaboration: @project.branch_allows_collaboration?(current_user, selected_branch).to_s,
-      existing_branch: ERB::Util.html_escape(selected_branch),
-      branches_endpoint: project_branches_path(@project) } }
-  - else
-    = render "projects/commit/commit_modal", title: title, type: type, commit: commit, branch_label: branch_label, description: description, label: label
+  .js-revert-commit-modal{ data: { title: title,
+    endpoint: revert_namespace_project_commit_path(commit, namespace_id: @project.namespace.full_path, project_id: @project),
+    branch: @project.default_branch,
+    push_code: can?(current_user, :push_code, @project).to_s,
+    branch_collaboration: @project.branch_allows_collaboration?(current_user, selected_branch).to_s,
+    existing_branch: ERB::Util.html_escape(selected_branch),
+    branches_endpoint: project_branches_path(@project) } }
 
 - when 'cherry-pick'
-  - label = s_('ChangeTypeAction|Cherry-pick')
-  - branch_label = s_('ChangeTypeActionLabel|Pick into branch')
   - title = commit.merged_merge_request(current_user) ? _('Cherry-pick this merge request') : _('Cherry-pick this commit')
-  = render "projects/commit/commit_modal", title: title, type: type, commit: commit, branch_label: branch_label, description: description, label: label
+
+  .js-cherry-pick-commit-modal{ data: { title: title,
+    endpoint: cherry_pick_namespace_project_commit_path(commit, namespace_id: @project.namespace.full_path, project_id: @project),
+    branch: @project.default_branch,
+    push_code: can?(current_user, :push_code, @project).to_s,
+    branch_collaboration: @project.branch_allows_collaboration?(current_user, selected_branch).to_s,
+    existing_branch: ERB::Util.html_escape(selected_branch),
+    branches_endpoint: project_branches_path(@project) } }
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index e8d524daced..53b9fd733ec 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -22,13 +22,13 @@
 
   .header-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
-      %span.btn.disabled.gl-button.btn-icon.d-none.d-sm-inline.gl-mr-3.has-tooltip{ title: n_("%d comment on this commit", "%d comments on this commit", @notes_count) % @notes_count }
+      %span.btn.gl-button.btn-default.disabled.gl-button.btn-icon.d-none.d-sm-inline.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 gl-button gl-mr-3 d-none d-md-inline" do
+    = link_to project_tree_path(@project, @commit), class: "btn gl-button btn-default gl-mr-3 d-none d-md-inline" do
       #{ _('Browse files') }
     .dropdown.inline
-      %a.btn.gl-button.dropdown-toggle.qa-options-button.d-md-inline{ data: { toggle: "dropdown" } }
+      %a.btn.gl-button.btn-default.dropdown-toggle.qa-options-button.d-md-inline{ data: { toggle: "dropdown" } }
         %span= _('Options')
         = sprite_icon('chevron-down', css_class: 'gl-text-gray-500')
       %ul.dropdown-menu.dropdown-menu-right
@@ -37,10 +37,10 @@
             #{ _('Browse Files') }
         - if can_collaborate && !@commit.has_been_reverted?(current_user)
           %li.clearfix
-            = revert_commit_link(@commit, project_commit_path(@project, @commit.id), pajamas: true)
+            = revert_commit_link
         - if can_collaborate
           %li.clearfix
-            = cherry_pick_commit_link(@commit, project_commit_path(@project, @commit.id), has_tooltip: false)
+            = cherry_pick_commit_link
         - if can?(current_user, :push_code, @project)
           %li.clearfix
             = link_to s_('CreateTag|Tag'), new_project_tag_path(@project, ref: @commit)
@@ -48,8 +48,8 @@
         %li.dropdown-header
           #{ _('Download') }
         - unless @commit.parents.length > 1
-          %li= link_to s_('DownloadCommit|Email Patches'), project_commit_path(@project, @commit, format: :patch), class: "qa-email-patches"
-        %li= link_to s_('DownloadCommit|Plain Diff'), project_commit_path(@project, @commit, format: :diff), class: "qa-plain-diff"
+          %li= link_to s_('DownloadCommit|Email Patches'), project_commit_path(@project, @commit, format: :patch), class: "qa-email-patches", rel: 'nofollow', download: ''
+        %li= link_to s_('DownloadCommit|Plain Diff'), project_commit_path(@project, @commit, format: :diff), class: "qa-plain-diff", rel: 'nofollow', download: ''
 
 .commit-box{ data: { project_path: project_path(@project) } }
   %h3.commit-title
diff --git a/app/views/projects/commit/_commit_modal.html.haml b/app/views/projects/commit/_commit_modal.html.haml
deleted file mode 100644
index a82d77fdc91..00000000000
--- a/app/views/projects/commit/_commit_modal.html.haml
+++ /dev/null
@@ -1,26 +0,0 @@
-.modal{ id: "modal-#{type}-commit", tabindex: -1 }
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h3.page-title= title
-        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
-          %span{ "aria-hidden": true } &times;
-      .modal-body
-        - if description
-          %p= description
-        = form_tag [type.underscore, @project, commit], method: :post, remote: false, class: "js-#{type}-form js-requires-input" do
-          .form-group.branch
-            = label_tag 'start_branch', branch_label, class: 'label-bold'
-
-            = hidden_field_tag :start_branch, @project.default_branch, id: 'start_branch'
-            = dropdown_tag(@project.default_branch, options: { title: s_("BranchSwitcherTitle|Switch branch"), filter: true, placeholder: s_("BranchSwitcherPlaceholder|Search branches"), toggle_class: 'js-project-refs-dropdown dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "start_branch", selected: @project.default_branch, start_branch: @project.default_branch, refs_url: project_branches_path(@project), submit_form_on_click: false } })
-
-            - if can?(current_user, :push_code, @project)
-              = render 'shared/new_merge_request_checkbox'
-            - else
-              = hidden_field_tag 'create_merge_request', 1, id: nil
-          .form-actions
-            = submit_tag label, class: 'gl-button btn btn-success'
-            = link_to _("Cancel"), '#', class: "gl-button btn btn-cancel", "data-dismiss" => "modal"
-
-            = render 'shared/projects/edit_information'
diff --git a/app/views/projects/commit/_signature_badge.html.haml b/app/views/projects/commit/_signature_badge.html.haml
index 8004a5facd7..7c896cd71ef 100644
--- a/app/views/projects/commit/_signature_badge.html.haml
+++ b/app/views/projects/commit/_signature_badge.html.haml
@@ -28,7 +28,7 @@
     = _('GPG Key ID:')
     %span.monospace= signature.gpg_key_primary_keyid
 
-    = link_to(_('Learn more about signing commits'), help_page_path('user/project/repository/gpg_signed_commits/index.md'), class: 'gpg-popover-help-link')
+    = link_to(_('Learn more about signing commits'), help_page_path('user/project/repository/gpg_signed_commits/index.md'), class: 'gpg-popover-help-link gl-display-block')
 
 %a{ role: 'button', tabindex: 0, class: css_classes, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } }
   = label
diff --git a/app/views/projects/commit/pipelines.html.haml b/app/views/projects/commit/pipelines.html.haml
index 0dbd6e53212..cd49dd899a0 100644
--- a/app/views/projects/commit/pipelines.html.haml
+++ b/app/views/projects/commit/pipelines.html.haml
@@ -4,3 +4,7 @@
 = render 'commit_box'
 = render 'ci_menu'
 = render 'projects/commit/pipelines_list', endpoint: pipelines_project_commit_path(@project, @commit.id)
+
+- if can_collaborate_with_project?(@project)
+  = render "projects/commit/change", type: 'revert', commit: @commit
+  = render "projects/commit/change", type: 'cherry-pick', commit: @commit
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index e7b2e757ce4..5652b503a6d 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -12,10 +12,10 @@
 .container-fluid{ class: [limited_container_width, container_class] }
   = render "commit_box"
   = render "ci_menu"
-  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-commit"
+  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-commit", paginate_diffs: true
 
   .limited-width-notes
     = render "shared/notes/notes_with_form", :autocomplete => true
     - if can_collaborate_with_project?(@project)
-      = render "projects/commit/change", type: 'revert', commit: @commit, pajamas: true
-      = render "projects/commit/change", type: 'cherry-pick', commit: @commit, title: @commit.title
+      = render "projects/commit/change", type: 'revert', commit: @commit
+      = render "projects/commit/change", type: 'cherry-pick', commit: @commit
diff --git a/app/views/projects/commits/_commit.atom.builder b/app/views/projects/commits/_commit.atom.builder
index 640b5ecf99e..8a27649af50 100644
--- a/app/views/projects/commits/_commit.atom.builder
+++ b/app/views/projects/commits/_commit.atom.builder
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 xml.entry do
   xml.id      project_commit_url(@project, id: commit.id)
   xml.link    href: project_commit_url(@project, id: commit.id)
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 179b0c5efbd..c708efe7c7b 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -32,7 +32,7 @@
         &middot;
         = commit.short_id
       - if commit.description? && collapsible
-        %button.text-expander.js-toggle-button
+        %button.gl-button.btn.btn-default.button-ellipsis-horizontal.btn-sm.gl-ml-2.text-expander.js-toggle-button
           = sprite_icon('ellipsis_h', size: 12)
 
       .committer
diff --git a/app/views/projects/commits/show.atom.builder b/app/views/projects/commits/show.atom.builder
index a9b77631474..a4db3c47f59 100644
--- a/app/views/projects/commits/show.atom.builder
+++ b/app/views/projects/commits/show.atom.builder
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 xml.title   "#{@project.name}:#{@ref} commits"
 xml.link    href: project_commits_url(@project, @ref, rss_url_options), rel: "self", type: "application/atom+xml"
 xml.link    href: project_commits_url(@project, @ref), rel: "alternate", type: "text/html"
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index a14f75259ec..802df664241 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -24,9 +24,9 @@
 
         .control
           = form_tag(project_commits_path(@project, @id), method: :get, class: 'commits-search-form js-signature-container', data: { 'signatures-path' => namespace_project_signatures_path }) do
-            = search_field_tag :search, params[:search], { placeholder: _('Search by message'), id: 'commits-search', class: 'form-control gl-form-input input-short gl-mt-3 gl-sm-mt-0 gl-min-w-full gl-inset-border-1-gray-200!', spellcheck: false }
+            = search_field_tag :search, params[:search], { placeholder: _('Search by message'), id: 'commits-search', class: 'form-control gl-form-input input-short gl-mt-3 gl-sm-mt-0 gl-min-w-full', spellcheck: false }
         .control.d-none.d-md-block
-          = link_to project_commits_path(@project, @ref, rss_url_options), title: _("Commits feed"), class: 'btn gl-button btn-svg' do
+          = link_to project_commits_path(@project, @ref, rss_url_options), title: _("Commits feed"), class: 'btn gl-button btn-default btn-icon' do
             = sprite_icon('rss', css_class: 'qa-rss-icon')
 
   = render_if_exists 'projects/commits/mirror_status'
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 0c0530110c5..17134613b17 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -1,7 +1,4 @@
 = form_tag project_compare_index_path(@project), method: :post, class: 'form-inline js-requires-input js-signature-container', data: { 'signatures-path' => signatures_namespace_project_compare_index_path } do
-  - if params[:to] && params[:from]
-    .compare-switch-container
-      = link_to sprite_icon('substitute'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn gl-button btn-white', title: 'Swap revisions'
   .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
     .input-group.inline-input-group
       %span.input-group-prepend
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index e45ea209e8c..3f9aa24a569 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -13,4 +13,8 @@
   = html_escape(_("Changes are shown as if the %{b_open}source%{b_close} revision was being merged into the %{b_open}target%{b_close} revision.")) % { b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
 
 .prepend-top-20
-  = render "form"
+  #js-compare-selector{ data: { project_compare_index_path: project_compare_index_path(@project),
+    refs_project_path: refs_project_path(@project),
+    params_from: params[:from], params_to: params[:to],
+    project_merge_request_path: @merge_request.present? ? project_merge_request_path(@project, @merge_request) : '',
+    create_mr_path: create_mr_button? ? create_mr_path : '' } }
diff --git a/app/views/projects/default_branch/_show.html.haml b/app/views/projects/default_branch/_show.html.haml
index a1c7f5027c5..0c7649e93d7 100644
--- a/app/views/projects/default_branch/_show.html.haml
+++ b/app/views/projects/default_branch/_show.html.haml
@@ -2,11 +2,11 @@
 
 %section.settings.no-animate#default-branch-settings{ class: ('expanded' if expanded) }
   .settings-header
-    %h4= _('Default Branch')
+    %h4= _('Default branch')
     %button.btn.js-settings-toggle
       = expanded ? _('Collapse') : _('Expand')
     %p
-      = _('Select the branch you want to set as the default for this project. All merge requests and commits will automatically be made against this branch unless you specify a different one.')
+      = _('Set the default branch for this project. All merge requests and commits are made against this branch unless you specify a different one.')
 
   .settings-content
     = form_for @project, remote: true, html: { multipart: true, anchor: 'default-branch-settings' }, authenticity_token: true do |f|
@@ -16,7 +16,7 @@
             = _('A default branch cannot be chosen for an empty project.')
         - else
           .form-group
-            = f.label :default_branch, "Default Branch", class: 'label-bold'
+            = f.label :default_branch, "Default branch", class: 'label-bold'
             = f.select(:default_branch, @project.repository.branch_names, {}, {class: 'select2 select-wide'})
 
         .form-group
@@ -25,7 +25,7 @@
             = f.label :autoclose_referenced_issues, class: 'form-check-label' do
               %strong= _("Auto-close referenced issues on default branch")
             .form-text.text-muted
-              = _("Issues referenced by merge requests and commits within the default branch will be closed automatically")
+              = _("When merge requests and commits in the default branch close, any issues they reference also close.")
               = link_to sprite_icon('question-o'), help_page_path('user/project/issues/managing_issues.md', anchor: 'disabling-automatic-issue-closing'), target: '_blank'
 
       = f.submit _('Save changes'), class: "gl-button btn btn-success"
diff --git a/app/views/projects/deployments/_rollback.haml b/app/views/projects/deployments/_rollback.haml
index c5e884473ff..78972a5b7b9 100644
--- a/app/views/projects/deployments/_rollback.haml
+++ b/app/views/projects/deployments/_rollback.haml
@@ -1,8 +1,8 @@
 - if deployment.deployable && can?(current_user, :create_deployment, deployment)
   - tooltip = deployment.last? ? s_('Environments|Re-deploy to environment') : s_('Environments|Rollback environment')
-  = button_tag class: 'btn gl-button btn-default btn-build has-tooltip', type: 'button', data: { toggle: 'modal', target: "#confirm-rollback-modal-#{deployment.id}" }, title: tooltip do
+  = button_tag class: 'gl-button btn btn-default btn-icon has-tooltip', type: 'button', data: { toggle: 'modal', target: "#confirm-rollback-modal-#{deployment.id}" }, title: tooltip do
     - if deployment.last?
-      = sprite_icon('repeat')
+      = sprite_icon('repeat', css_class: 'gl-icon')
     - else
-      = sprite_icon('redo')
+      = sprite_icon('redo', css_class: 'gl-icon')
   = render 'projects/deployments/confirm_rollback_modal', deployment: deployment
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 8364311796f..2f533b5848d 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -1,9 +1,10 @@
 - environment = local_assigns.fetch(:environment, nil)
 - show_whitespace_toggle = local_assigns.fetch(:show_whitespace_toggle, true)
 - can_create_note = !@diff_notes_disabled && can?(current_user, :create_note, diffs.project)
-- diff_files = diffs.diff_files
 - diff_page_context = local_assigns.fetch(:diff_page_context, nil)
 - load_diff_files_async = Feature.enabled?(:async_commit_diff_files, @project) && diff_page_context == "is-commit"
+- paginate_diffs = local_assigns.fetch(:paginate_diffs, false) && !load_diff_files_async && Feature.enabled?(:paginate_commit_view, @project, type: :development)
+- diff_files = conditionally_paginate_diff_files(diffs, paginate: paginate_diffs)
 
 .content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed
   .files-changed-inner
@@ -27,7 +28,6 @@
 - if render_overflow_warning?(diffs)
   = render 'projects/diffs/warning', diff_files: diffs
 
-
 .files{ data: { can_create_note: can_create_note } }
   - if load_diff_files_async
     - url = url_for(safe_params.merge(action: 'diff_files'))
@@ -36,3 +36,6 @@
         %span.spinner.spinner-md
   - else
     = render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment, diff_page_context: diff_page_context }
+
+    - if paginate_diffs
+      = paginate(diff_files, theme: "gitlab")
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 18da238d445..4b198717790 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -16,7 +16,7 @@
     - unless diff_file.submodule?
       .file-actions.d-none.d-sm-block
         - if diff_file.blob&.readable_text?
-          = link_to '#', class: 'js-toggle-diff-comments gl-button btn active has-tooltip', title: _("Toggle comments for this file"), disabled: @diff_notes_disabled do
+          = link_to '#', class: 'js-toggle-diff-comments btn gl-button active has-tooltip', title: _("Toggle comments for this file"), disabled: @diff_notes_disabled do
             = sprite_icon('comment')
           \
           - if editable_diff?(diff_file)
@@ -30,6 +30,6 @@
         = view_file_button(diff_file.content_sha, diff_file.file_path, project)
         = view_on_environment_button(diff_file.content_sha, diff_file.file_path, environment) if environment
 
-  = render 'projects/fork_suggestion'
+  = render_fork_suggestion
 
   = render 'projects/diffs/content', diff_file: diff_file
diff --git a/app/views/projects/diffs/viewers/_collapsed.html.haml b/app/views/projects/diffs/viewers/_collapsed.html.haml
index 94dcda38bd6..02f499144c0 100644
--- a/app/views/projects/diffs/viewers/_collapsed.html.haml
+++ b/app/views/projects/diffs/viewers/_collapsed.html.haml
@@ -1,5 +1,3 @@
-- diff_file = viewer.diff_file
-- url = url_for(safe_params.merge(action: :diff_for_path, old_path: diff_file.old_path, new_path: diff_file.new_path, file_identifier: diff_file.file_identifier))
-.nothing-here-block.diff-collapsed{ data: { diff_for_path: url } }
+.nothing-here-block.diff-collapsed{ data: { diff_for_path: collapsed_diff_url(viewer.diff_file) } }
   = _("This diff is collapsed.")
   %button.click-to-expand.btn.btn-link= _("Click to expand it.")
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index cde8a5f69dd..c26017ccb79 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -3,20 +3,20 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = expanded_by_default?
 
-= render "shared/search_settings"
+- enable_search_settings
 
 %section.settings.general-settings.no-animate.expanded#js-general-settings
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, topics, avatar')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= _('Collapse')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= _('Collapse')
     %p= _('Update your project name, topics, description, and avatar.')
   .settings-content= render 'projects/settings/general'
 
 %section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded), data: { qa_selector: 'visibility_features_permissions_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Visibility, project features, permissions')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
-    %p= _('Choose visibility level, enable/disable project features (issues, repository, wiki, snippets) and set permissions.')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %p= _('Choose visibility level, enable/disable project features and their permissions, disable email notifications, and show default award emoji.')
 
   .settings-content
     = form_for @project, remote: true, html: { multipart: true, class: "sharing-permissions-form" }, authenticity_token: true do |f|
@@ -25,12 +25,12 @@
       .js-project-permissions-form
       - if show_visibility_confirm_modal?(@project)
         = render "visibility_modal"
-      = f.submit _('Save changes'), class: "btn btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
+      = f.submit _('Save changes'), class: "btn gl-button btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
 
 %section.qa-merge-request-settings.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Merge requests')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
     = render_if_exists 'projects/merge_request_settings_description_text'
 
   .settings-content
@@ -39,7 +39,7 @@
     = form_for @project, remote: true, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
       = render 'projects/merge_request_settings', form: f
-      = f.submit _('Save changes'), class: "btn btn-succes qa-save-merge-request-changes rspec-save-merge-request-changes"
+      = f.submit _('Save changes'), class: "btn gl-button btn-success qa-save-merge-request-changes rspec-save-merge-request-changes"
 
 = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
 
@@ -48,7 +48,8 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('ProjectSettings|Badges')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
     %p
       = s_('ProjectSettings|Customize this project\'s badges.')
       = link_to s_('ProjectSettings|What are badges?'), help_page_path('user/project/badges')
@@ -62,15 +63,17 @@
 %section.qa-advanced-settings.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
     %p= _('Housekeeping, export, path, transfer, remove, archive.')
 
   .settings-content
     .sub-section
       %h4= _('Housekeeping')
-      %p= _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
+      %p
+        = _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
+        = link_to _('Learn more.'), help_page_path('administration/housekeeping'), target: '_blank', rel: 'noopener noreferrer'
       = link_to _('Run housekeeping'), housekeeping_project_path(@project),
-        method: :post, class: "btn btn-default"
+        method: :post, class: "btn gl-button btn-default"
 
     = render 'export', project: @project
 
@@ -80,6 +83,13 @@
       = render 'projects/errors'
       = form_for @project do |f|
         .form-group
+          - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'renaming-a-repository') }
+          %p= _("A project’s repository name defines its URL (the one you use to access the project via a browser) and its place on the file disk where GitLab is installed. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+          %ul
+            %li= _("Be careful. Renaming a project's repository can have unintended side effects.")
+            %li= _('You will need to update your local repositories to point to the new location.')
+            - if @project.deployment_platform.present?
+              %li= _('Your deployment services will be broken, you will need to manually fix the services after renaming.')
           = f.label :path, _('Path'), class: 'label-bold'
           .form-group
             .input-group
@@ -87,12 +97,7 @@
                 .input-group-text
                   #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
               = f.text_field :path, class: 'form-control qa-project-path-field h-auto'
-          %ul
-            %li= _("Be careful. Renaming a project's repository can have unintended side effects.")
-            %li= _('You will need to update your local repositories to point to the new location.')
-            - if @project.deployment_platform.present?
-              %li= _('Your deployment services will be broken, you will need to manually fix the services after renaming.')
-        = f.submit _('Change path'), class: "btn btn-warning qa-change-path-button"
+        = f.submit _('Change path'), class: "gl-button btn btn-warning qa-change-path-button"
 
     = render 'transfer', project: @project
 
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 2936eff45df..2c245c1a914 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -2,6 +2,9 @@
 - default_branch_name = @project.default_branch || "master"
 - @skip_current_level_breadcrumb = true
 
+= content_for :invite_members_sidebar do
+  = render partial: 'projects/invite_members_link'
+
 = render partial: 'flash_messages', locals: { project: @project }
 
 = render "home_panel"
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 067c987e721..5da9c25b780 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -6,5 +6,4 @@
   "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
   "new-environment-path" => new_project_environment_path(@project),
   "help-page-path" => help_page_path("ci/environments/index.md"),
-  "deploy-boards-help-path" => help_page_path("user/project/deploy_boards", anchor: "enabling-deploy-boards"),
   "project-path" => @project.full_path } }
diff --git a/app/views/projects/forks/new.html.haml b/app/views/projects/forks/new.html.haml
index 45d314a1088..ccef28a2cf3 100644
--- a/app/views/projects/forks/new.html.haml
+++ b/app/views/projects/forks/new.html.haml
@@ -14,5 +14,5 @@
         %h5.gl-mt-0.gl-mb-0.gl-ml-3.gl-mr-3
           = _("Select a namespace to fork the project")
         = render 'fork_button', namespace: @own_namespace
-    #fork-groups-mount-element{ data: { endpoint: new_project_fork_path(@project, format: :json), can_create_project: current_user.can_create_project?.to_s } }
+    #fork-groups-mount-element{ data: { endpoint: new_project_fork_path(@project, format: :json) } }
 
diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml
index a92b02701c5..40280e0787f 100644
--- a/app/views/projects/graphs/charts.html.haml
+++ b/app/views/projects/graphs/charts.html.haml
@@ -22,10 +22,10 @@
           #{@daily_coverage_options[:base_params][:start_date].strftime('%b %d')}
         - end_date = capture do
           #{@daily_coverage_options[:base_params][:end_date].strftime('%b %d')}
-        = (_("Code coverage statistics for master %{start_date} - %{end_date}") % {start_date: start_date, end_date: end_date})
+        = (_("Code coverage statistics for %{ref} %{start_date} - %{end_date}") % { ref: "<strong>#{h @ref}</strong>", start_date: start_date, end_date: end_date }).html_safe
       - download_path = capture do
         #{@daily_coverage_options[:download_path]}
-      %a.btn.gl-button.btn-sm{ href: "#{download_path}?#{@daily_coverage_options[:base_params].to_query}" }
+      %a.btn.gl-button.btn-default.btn-sm{ href: "#{download_path}?#{@daily_coverage_options[:base_params].to_query}" }
         %small
           = _("Download raw data (.csv)")
     #js-code-coverage-chart{ data: { graph_endpoint: "#{@daily_coverage_options[:graph_api_path]}?#{@daily_coverage_options[:base_params].to_query}" } }
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index c7508ef4d47..c62d4a35973 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -3,6 +3,6 @@
 .sub-header-block.bg-gray-light.gl-p-5
   .tree-ref-holder.inline.vertical-align-middle
     = render 'shared/ref_switcher', destination: 'graphs'
-  = link_to s_('Commits|History'), project_commits_path(@project, current_ref), class: 'btn gl-button'
+  = link_to s_('Commits|History'), project_commits_path(@project, current_ref), class: 'btn gl-button btn-default'
 
 .js-contributors-graph{ class: container_class, 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json),'data-project-branch': current_ref }
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 008340a3fe7..d299d2846c6 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -47,17 +47,17 @@
             .form-group
               %label{ for: 'new-branch-name' }
                 = _('Branch name')
-              %input#new-branch-name.js-branch-name.form-control{ type: 'text', placeholder: "#{@issue.to_branch_name}", value: "#{@issue.to_branch_name}" }
+              %input#new-branch-name.js-branch-name.form-control.gl-form-input{ type: 'text', placeholder: "#{@issue.to_branch_name}", value: "#{@issue.to_branch_name}" }
               %span.js-branch-message.form-text
 
             .form-group
               %label{ for: 'source-name' }
                 = _('Source (branch or tag)')
-              %input#source-name.js-ref.ref.form-control{ type: 'text', placeholder: "#{@project.default_branch}", value: "#{@project.default_branch}", data: { value: "#{@project.default_branch}" } }
+              %input#source-name.js-ref.ref.form-control.gl-form-input{ type: 'text', placeholder: "#{@project.default_branch}", value: "#{@project.default_branch}", data: { value: "#{@project.default_branch}" } }
               %span.js-ref-message.form-text.text-muted
 
             .form-group
-              %button.btn.btn-success.js-create-target{ type: 'button', data: { action: 'create-mr' } }
+              %button.btn.gl-button.btn-success.js-create-target{ type: 'button', data: { action: 'create-mr' } }
                 = create_mr_text
 
             - if can_create_confidential_merge_request?
diff --git a/app/views/projects/issues/import_csv/_button.html.haml b/app/views/projects/issues/import_csv/_button.html.haml
index e60460687a9..229eb0654a8 100644
--- a/app/views/projects/issues/import_csv/_button.html.haml
+++ b/app/views/projects/issues/import_csv/_button.html.haml
@@ -2,7 +2,7 @@
 - can_edit = can?(current_user, :admin_project, @project)
 
 .dropdown.btn-group
-  %button.btn.gl-button.rounded-right.text-center{ class: ('has-tooltip' if type == :icon), title: (_('Import issues') if type == :icon),
+  %button.btn.gl-button.rounded-right.btn-default.btn-icon.text-center{ class: ('has-tooltip' if type == :icon), title: (_('Import issues') if type == :icon),
     data: { toggle: 'dropdown', qa_selector: 'import_issues_button' }, 'aria-label' => _('Import issues'), 'aria-haspopup' => 'true', 'aria-expanded' => 'false' }
     - if type == :icon
       = sprite_icon('import')
diff --git a/app/views/projects/issues/index.atom.builder b/app/views/projects/issues/index.atom.builder
index 6566866be82..4de9c0ed34b 100644
--- a/app/views/projects/issues/index.atom.builder
+++ b/app/views/projects/issues/index.atom.builder
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # rubocop: disable CodeReuse/ActiveRecord
 xml.title   "#{@project.name} issues"
 xml.link    href: url_for(safe_params), rel: "self", type: "application/atom+xml"
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 842b3432991..dd66e00b813 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -3,6 +3,7 @@
 - page_title _("Issues")
 - new_issue_email = @project.new_issuable_address(current_user, 'issue')
 - add_page_specific_style 'page_bundles/issues_list'
+- issuable_type = 'issue'
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
@@ -24,7 +25,8 @@
   .issues-holder
     = render 'issues'
     - if new_issue_email
-      = render 'projects/issuable_by_email', email: new_issue_email, issuable_type: 'issue'
+      .issuable-footer.text-center
+        .js-issueable-by-email{ data: { initial_email: new_issue_email, issuable_type: issuable_type, emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'), quick_actions_help_path: help_page_path('user/project/quick_actions'), markdown_help_path: help_page_path('user/markdown'), reset_path: new_issuable_address_project_path(@project, issuable_type: issuable_type) } }
 - else
   - new_project_issue_button_path = @project.archived? ? false : new_project_issue_path(@project)
   = render 'shared/empty_states/issues', new_project_issue_button_path: new_project_issue_button_path, show_import_button: true
diff --git a/app/views/projects/jobs/_table.html.haml b/app/views/projects/jobs/_table.html.haml
index b126b452dea..402f7ddb38d 100644
--- a/app/views/projects/jobs/_table.html.haml
+++ b/app/views/projects/jobs/_table.html.haml
@@ -1,7 +1,7 @@
 - admin = local_assigns.fetch(:admin, false)
 
 - if builds.blank?
-  - if experiment_enabled?(:jobs_empty_state)
+  - if @project
     .row.empty-state
       .col-12
         .svg-content.svg-250
@@ -12,7 +12,7 @@
             = s_('Jobs|Use jobs to automate your tasks')
           %p
             = s_('Jobs|Jobs are the building blocks of a GitLab CI/CD pipeline. Each job has a specific task, like testing code. To set up jobs in a CI/CD pipeline, add a CI/CD configuration file to your project.')
-          = link_to s_('Jobs|Create CI/CD configuration file'), help_page_path('ci/quick_start/README'), class: 'btn gl-button btn-info js-empty-state-button'
+          = link_to s_('Jobs|Create CI/CD configuration file'), @project.present(current_user: current_user).add_ci_yml_path, class: 'btn gl-button btn-info js-empty-state-button'
   - else
     .nothing-here-block= s_('Jobs|No jobs to show')
 - else
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index e14473708af..a0ec6002db7 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -7,9 +7,6 @@
 
   .nav-controls
     - if can?(current_user, :update_build, @project)
-      - if !@repository.gitlab_ci_yml && !experiment_enabled?(:jobs_empty_state)
-        = link_to s_('Pipelines|Get started with Pipelines'), help_page_path('ci/quick_start/README'), class: 'btn gl-button btn-info js-empty-state-button'
-
       = link_to project_ci_lint_path(@project), class: 'btn gl-button btn-default' do
         %span
           = _('CI Lint')
diff --git a/app/views/projects/learn_gitlab/index.html.haml b/app/views/projects/learn_gitlab/index.html.haml
new file mode 100644
index 00000000000..d5fdbc10eb4
--- /dev/null
+++ b/app/views/projects/learn_gitlab/index.html.haml
@@ -0,0 +1,4 @@
+- breadcrumb_title _("Learn GitLab")
+- page_title _("Learn GitLab")
+
+#js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json } }
diff --git a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
index 3a8629b3b6e..5fa8f908122 100644
--- a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
+++ b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
@@ -3,7 +3,7 @@
 - button_class = "btn gl-button #{!@merge_request.closed? && 'js-draft-toggle-button'}"
 - toggle_class = "btn gl-button dropdown-toggle"
 
-.float-left.btn-group.gl-ml-3.gl-display-none.gl-display-md-flex
+.float-left.btn-group.gl-ml-3.gl-display-none.gl-md-display-flex
   = link_to @merge_request.closed? ? reopen_issuable_path(@merge_request) : toggle_draft_merge_request_path(@merge_request), method: :put, class: "#{button_class} #{button_action_class}" do
     - if @merge_request.closed?
       = _('Reopen')
diff --git a/app/views/projects/merge_requests/_commits.html.haml b/app/views/projects/merge_requests/_commits.html.haml
index 178e57b08b3..ecf5df5d3b4 100644
--- a/app/views/projects/merge_requests/_commits.html.haml
+++ b/app/views/projects/merge_requests/_commits.html.haml
@@ -8,7 +8,7 @@
     - if @project&.context_commits_enabled? && can_update_merge_request
       %p
         = _('Push commits to the source branch or add previously merged commits to review them.')
-      %button.btn.btn-primary.add-review-item-modal-trigger{ type: "button", data: { commits_empty: 'true', context_commits_empty: 'true' } }
+      %button.btn.gl-button.btn-confirm.add-review-item-modal-trigger{ type: "button", data: { commits_empty: 'true', context_commits_empty: 'true' } }
         = _('Add previously merged commits')
 - else
   %ol#commits-list.list-unstyled
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 4711143c900..b1463693fb4 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -55,7 +55,7 @@
         - if merge_request.assignees.any?
           %li.gl-display-flex.gl-align-items-center
             = render 'shared/issuable/assignees', project: merge_request.project, issuable: merge_request
-        - if Feature.enabled?(:merge_request_reviewers, @project, default_enabled: true) && merge_request.reviewers.any?
+        - if merge_request.reviewers.any?
           %li.gl-display-flex.issuable-reviewers
             = render 'shared/issuable/reviewers', project: merge_request.project, issuable: merge_request
         = render 'projects/merge_requests/approvals_count', merge_request: merge_request
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 6a42f33db7d..61747fe2c8d 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -13,8 +13,8 @@
 .detail-page-header.border-bottom-0.pt-0.pb-0
   .detail-page-header-body
     .issuable-status-box.status-box.js-mr-status-box{ class: status_box_class(@merge_request), data: { state: @merge_request.state } }
-      = sprite_icon(state_icon_name, css_class: 'gl-display-block gl-display-sm-none!')
-      %span.gl-display-none.gl-display-sm-block
+      = sprite_icon(state_icon_name, css_class: 'gl-display-block gl-sm-display-none!')
+      %span.gl-display-none.gl-sm-display-block
         = state_human_name
 
     .issuable-meta
@@ -26,7 +26,7 @@
 
   .detail-page-header-actions.js-issuable-actions
     .clearfix.dropdown
-      %button.gl-button.btn.btn-default.float-left.gl-display-md-none.gl-w-full{ type: "button", data: { toggle: "dropdown" } }
+      %button.gl-button.btn.btn-default.float-left.gl-md-display-none.gl-w-full{ type: "button", data: { toggle: "dropdown" } }
         Options
         = sprite_icon('chevron-down', css_class: 'gl-text-gray-500')
       .dropdown-menu.dropdown-menu-right
@@ -45,9 +45,9 @@
             %li= link_to 'Report abuse', new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request))
 
       - if can_update_merge_request
-        = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "d-none d-md-block btn gl-button btn-grouped js-issuable-edit qa-edit-button"
+        = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "d-none d-md-block btn gl-button btn-default btn-grouped js-issuable-edit qa-edit-button"
 
       - if can_update_merge_request && !are_close_and_open_buttons_hidden
         = render 'projects/merge_requests/close_reopen_draft_report_toggle'
       - elsif !@merge_request.merged?
-        = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-display-md-block gl-button btn btn-warning-secondary float-right gl-ml-3', title: _('Report abuse')
+        = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-md-display-block gl-button btn btn-warning-secondary float-right gl-ml-3', title: _('Report abuse')
diff --git a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
index 15655e2b162..87356f33b1e 100644
--- a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
@@ -21,4 +21,4 @@
           %button.btn.gl-button.btn-success.js-submit-button{ type: "button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
             %span {{commitButtonText}}
         .col-6.text-right
-          = link_to "Cancel", project_merge_request_path(@merge_request.project, @merge_request), class: "gl-button btn btn-cancel"
+          = link_to "Cancel", project_merge_request_path(@merge_request.project, @merge_request), class: "gl-button btn btn-default"
diff --git a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
index 7294c5d321a..4ba5ec5795a 100644
--- a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
+++ b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
@@ -4,7 +4,7 @@
       .discard-changes-alert
         Are you sure you want to discard your changes?
         .discard-actions
-          %button.btn.btn-sm.btn-close{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
-          %button.btn.btn-sm{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
+          %button.btn.btn-sm.btn-danger-secondary.gl-button{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
+          %button.btn.btn-default.btn-sm.gl-button{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
     .editor-wrap{ ":class" => "classObject" }
       .editor{ "style" => "height: 350px", data: { 'editor-loading': true } }
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 36b1cf0796f..62a251c7015 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -1,6 +1,7 @@
 - @can_bulk_update = can?(current_user, :admin_merge_request, @project)
 - merge_project = merge_request_source_project_for_project(@project)
 - new_merge_request_path = project_new_merge_request_path(merge_project) if merge_project
+- issuable_type = 'merge_request'
 
 - page_title _("Merge Requests")
 - new_merge_request_email = @project.new_issuable_address(current_user, 'merge_request')
@@ -21,6 +22,7 @@
   .merge-requests-holder
     = render 'merge_requests'
     - if new_merge_request_email
-      = render 'projects/issuable_by_email', email: new_merge_request_email, issuable_type: 'merge_request'
+      .issuable-footer.text-center
+        .js-issueable-by-email{ data: { initial_email: new_merge_request_email, issuable_type: issuable_type, emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'), quick_actions_help_path: help_page_path('user/project/quick_actions'), markdown_help_path: help_page_path('user/markdown'), reset_path: new_issuable_address_project_path(@project, issuable_type: issuable_type) } }
 - else
   = render 'shared/empty_states/merge_requests', button_path: new_merge_request_path
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 849cfac825f..453a34d1e7a 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -56,10 +56,13 @@
               = render "projects/merge_requests/widget"
               = render "projects/merge_requests/awards_block"
               - if mr_action === "show"
-                - add_page_startup_api_call discussions_path(@merge_request)
+                - if Feature.enabled?(:paginated_notes, @project)
+                  - add_page_startup_api_call notes_url
+                - else
+                  - add_page_startup_api_call discussions_path(@merge_request)
                 - add_page_startup_api_call widget_project_json_merge_request_path(@project, @merge_request, format: :json)
                 - add_page_startup_api_call cached_widget_project_json_merge_request_path(@project, @merge_request, format: :json)
-              #js-vue-mr-discussions{ data: { notes_data: notes_data(@merge_request).to_json,
+              #js-vue-mr-discussions{ data: { notes_data: notes_data(@merge_request, Feature.enabled?(:paginated_notes, @project)).to_json,
                 noteable_data: serialize_issuable(@merge_request, serializer: 'noteable'),
                 noteable_type: 'MergeRequest',
                 target_type: 'merge_request',
@@ -75,7 +78,7 @@
       - if mr_action === "diffs"
         - add_page_startup_api_call @endpoint_metadata_url
       - params = request.query_parameters
-      - if Feature.enabled?(:default_merge_ref_for_diffs, @project)
+      - if Feature.enabled?(:default_merge_ref_for_diffs, @project, default_enabled: :yaml)
         - params = params.merge(diff_head: true)
       = render "projects/merge_requests/tabs/pane", name: "diffs", id: "js-diffs-app", class: "diffs", data: { "is-locked": @merge_request.discussion_locked?,
         endpoint: diffs_project_merge_request_path(@project, @merge_request, 'json', params),
@@ -100,8 +103,8 @@
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch
 
 - if @merge_request.can_be_reverted?(current_user)
-  = render "projects/commit/change", type: 'revert', commit: @merge_request.merge_commit, title: @merge_request.title
+  = render "projects/commit/change", type: 'revert', commit: @merge_request.merge_commit
 - if @merge_request.can_be_cherry_picked?
-  = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit, title: @merge_request.title
+  = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit
 
 #js-review-bar
diff --git a/app/views/projects/merge_requests/widget/_commit_change_content.html.haml b/app/views/projects/merge_requests/widget/_commit_change_content.html.haml
index ad0ce7bf501..572d9e7578c 100644
--- a/app/views/projects/merge_requests/widget/_commit_change_content.html.haml
+++ b/app/views/projects/merge_requests/widget/_commit_change_content.html.haml
@@ -1,4 +1,4 @@
 - if @merge_request.can_be_reverted?(current_user)
-  = render "projects/commit/change", type: 'revert', commit: @merge_request.merge_commit, title: @merge_request.title
+  = render "projects/commit/change", type: 'revert', commit: @merge_request.merge_commit
 - if @merge_request.can_be_cherry_picked?
-  = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit, title: @merge_request.title
+  = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index a21f519da0e..f6e4442d4fb 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -21,8 +21,8 @@
 
   .form-actions
     - if @milestone.new_record?
-      = f.submit _('Create milestone'), class: 'btn-success btn', data: { qa_selector: 'create_milestone_button' }
+      = f.submit _('Create milestone'), class: 'gl-button btn-success btn', data: { qa_selector: 'create_milestone_button' }
       = link_to _('Cancel'), project_milestones_path(@project), class: 'gl-button btn btn-cancel'
     - else
-      = f.submit _('Save changes'), class: 'btn-success btn'
+      = f.submit _('Save changes'), class: 'gl-button btn-success btn'
       = link_to _('Cancel'), project_milestone_path(@project, @milestone), class: 'gl-button btn btn-cancel'
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index b964c8b1a93..c0df986e1ca 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -11,15 +11,14 @@
       = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-success', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
         = _('New milestone')
 
-.milestones
-  #js-delete-milestone-modal
-  #promote-milestone-modal
+- if @milestones.blank?
+  = render 'shared/empty_states/milestones'
+- else
+  .milestones
+    #js-delete-milestone-modal
+    #promote-milestone-modal
 
-  %ul.content-list
-    = render @milestones
+    %ul.content-list
+      = render @milestones
 
-    - if @milestones.blank?
-      %li
-        .nothing-here-block= _('No milestones to show')
-
-  = paginate @milestones, theme: 'gitlab'
+    = paginate @milestones, theme: 'gitlab'
diff --git a/app/views/projects/mirrors/_authentication_method.html.haml b/app/views/projects/mirrors/_authentication_method.html.haml
index 88bd7da7fef..94f8703657b 100644
--- a/app/views/projects/mirrors/_authentication_method.html.haml
+++ b/app/views/projects/mirrors/_authentication_method.html.haml
@@ -6,11 +6,11 @@
   .select-wrapper
     = f.select :auth_method,
         options_for_select(auth_options, mirror.auth_method),
-        {}, { class: "form-control select-control js-mirror-auth-type qa-authentication-method" }
+        {}, { class: "form-control gl-form-input select-control js-mirror-auth-type qa-authentication-method" }
     = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")
     = f.hidden_field :auth_method, value: "password", class: "js-hidden-mirror-auth-type"
 
 .form-group
   .well-password-auth.collapse.js-well-password-auth
     = f.label :password, _("Password"), class: "label-bold"
-    = f.password_field :password, value: mirror.password, class: 'form-control qa-password', autocomplete: 'new-password'
+    = f.password_field :password, value: mirror.password, class: 'form-control gl-form-input qa-password', autocomplete: 'new-password'
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index 98d35845b31..d6ad6147e6e 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -21,7 +21,7 @@
 
             .form-group.has-feedback
               = label_tag :url, _('Git repository URL'), class: 'label-light'
-              = text_field_tag :url, nil, class: 'form-control js-mirror-url js-repo-url qa-mirror-repository-url-input', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password'
+              = text_field_tag :url, nil, class: 'form-control gl-form-input js-mirror-url js-repo-url qa-mirror-repository-url-input', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password'
 
             = render 'projects/mirrors/instructions'
 
diff --git a/app/views/projects/mirrors/_mirror_repos_form.html.haml b/app/views/projects/mirrors/_mirror_repos_form.html.haml
index 215d0a59d1b..dca01ebbe90 100644
--- a/app/views/projects/mirrors/_mirror_repos_form.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos_form.html.haml
@@ -1,7 +1,7 @@
 .form-group
   = label_tag :mirror_direction, _('Mirror direction'), class: 'label-light'
   .select-wrapper
-    = select_tag :mirror_direction, options_for_select([[_('Push'), 'push']]), class: 'form-control select-control js-mirror-direction qa-mirror-direction', disabled: true
+    = select_tag :mirror_direction, options_for_select([[_('Push'), 'push']]), class: 'form-control gl-form-input select-control js-mirror-direction qa-mirror-direction', disabled: true
     = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")
 
 = render partial: "projects/mirrors/mirror_repos_push", locals: { f: f }
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 30ba22ba53c..774fbc79430 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -1,12 +1,12 @@
 - breadcrumb_title _("Graph")
 - page_title _("Graph"), @ref
 = render "head"
-%div{ class: container_class }
+.gl-mt-5
   .project-network.gl-border-1.gl-border-solid.gl-border-gray-300
     .controls.gl-bg-gray-50.gl-p-2.gl-font-base.gl-text-gray-400.gl-border-b-1.gl-border-b-solid.gl-border-b-gray-300
       = form_tag project_network_path(@project, @id), method: :get, class: 'form-inline network-form' do |f|
-        = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: _("Git revision"), class: 'search-input form-control input-mx-250 search-sha'
-        = button_tag class: 'btn btn-success' do
+        = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: _("Git revision"), class: 'search-input form-control gl-form-input input-mx-250 search-sha gl-mr-2'
+        = button_tag class: 'btn gl-button btn-success btn-icon' do
           = sprite_icon('search')
         .inline.gl-ml-5
           .form-check.light
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 6af185696b0..45e7eae8c70 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -28,7 +28,7 @@
       %p
         %strong= _("Tip:")
         = _("You can also create a project from the command line.")
-        %a.push-new-project-tip{ data: { title: _("Push to create a project") }, href: help_page_path('gitlab-basics/create-project', anchor: 'push-to-create-a-new-project'), target: "_blank", rel: "noopener noreferrer" }
+        %a.push-new-project-tip{ data: { title: _("Push to create a project") }, href: help_page_path('user/project/working_with_projects', anchor: 'push-to-create-a-new-project'), target: "_blank", rel: "noopener noreferrer" }
           = _("Show command")
         %template.push-new-project-tip-template= render partial: "new_project_push_tip"
 
diff --git a/app/views/projects/no_repo.html.haml b/app/views/projects/no_repo.html.haml
index d7853c1b466..3c7afff57f6 100644
--- a/app/views/projects/no_repo.html.haml
+++ b/app/views/projects/no_repo.html.haml
@@ -12,17 +12,17 @@
   #{ _('This means you can not push code until you create an empty repository or import existing one.') }
 %hr
 
-= render_if_exists 'projects/invite_members_modal', project: @project
+= render 'projects/invite_members_modal', project: @project
 
 .no-repo-actions
-  = link_to project_repository_path(@project), method: :post, class: 'btn btn-primary' do
+  = link_to project_repository_path(@project), method: :post, class: 'btn gl-button btn-confirm' do
     #{ _('Create empty repository') }
 
   %strong.gl-ml-3.gl-mr-3 or
 
-  = link_to new_project_import_path(@project), class: 'btn' do
+  = link_to new_project_import_path(@project), class: 'btn gl-button btn-default' do
     #{ _('Import repository') }
 
 - if can? current_user, :remove_project, @project
   .prepend-top-20
-    = link_to _('Delete project'), project_path(@project), data: { confirm: remove_project_message(@project)}, method: :delete, class: "gl-button btn btn-danger btn-danger-secondary float-right"
+    = link_to _('Delete project'), project_path(@project), data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn gl-button btn-danger float-right"
diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml
index a785e36fad5..d11b61466e2 100644
--- a/app/views/projects/notes/_actions.html.haml
+++ b/app/views/projects/notes/_actions.html.haml
@@ -39,15 +39,15 @@
 - if can?(current_user, :award_emoji, note)
   - if note.emoji_awardable?
     .note-actions-item
-      = button_tag title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip btn btn-transparent", data: { position: 'right', container: 'body' } do
-        %span{ class: 'link-highlight award-control-icon-neutral' }= sprite_icon('slight-smile')
-        %span{ class: 'link-highlight award-control-icon-positive' }= sprite_icon('smiley')
-        %span{ class: 'link-highlight award-control-icon-super-positive' }= sprite_icon('smile')
+      = button_tag title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip btn gl-button btn-icon btn-default-tertiary btn-transparent", data: { position: 'right', container: 'body' } do
+        = sprite_icon('slight-smile', css_class: 'link-highlight award-control-icon-neutral gl-button-icon gl-icon gl-text-gray-400')
+        = sprite_icon('smiley', css_class: 'link-highlight award-control-icon-positive gl-button-icon gl-icon gl-left-3!')
+        = sprite_icon('smile', css_class: 'link-highlight award-control-icon-super-positive gl-button-icon gl-icon gl-left-3! ')
 
   - if note_editable
-    .note-actions-item
-      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn btn-transparent', data: { container: 'body', qa_selector: 'edit_comment_button' } do
+    .note-actions-item.gl-ml-0
+      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn gl-button btn-default-tertiary btn-transparent gl-px-2!', data: { container: 'body', qa_selector: 'edit_comment_button' } do
         %span.link-highlight
-          = custom_icon('icon_pencil')
+          = sprite_icon('pencil', css_class: 'gl-button-icon gl-icon gl-text-gray-400 s16')
 
   = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable
diff --git a/app/views/projects/notes/_more_actions_dropdown.html.haml b/app/views/projects/notes/_more_actions_dropdown.html.haml
index 8cf1b6b9294..c81a3683e90 100644
--- a/app/views/projects/notes/_more_actions_dropdown.html.haml
+++ b/app/views/projects/notes/_more_actions_dropdown.html.haml
@@ -1,10 +1,9 @@
 - is_current_user = current_user == note.author
 
 - if note_editable || !is_current_user
-  .dropdown.more-actions.note-actions-item
-    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn btn-transparent', data: { toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' } do
-      %span.icon
-        = custom_icon('ellipsis_v')
+  %div{ class: "dropdown more-actions note-actions-item gl-ml-0!" }
+    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn gl-button btn-default-tertiary btn-transparent gl-pl-2! gl-pr-0!', data: { toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' } do
+      = sprite_icon('ellipsis_v', css_class: 'gl-button-icon gl-icon gl-text-gray-400')
     %ul.dropdown-menu.more-actions-dropdown.dropdown-open-left
       %li
         = clipboard_button(text: noteable_note_url(note), title: _('Copy reference'), button_text: _('Copy link'), class: 'btn-clipboard', hide_tooltip: true, hide_button_icon: true)
diff --git a/app/views/projects/pages/_use.html.haml b/app/views/projects/pages/_use.html.haml
index e9ace8c72f1..ec3fc27dc20 100644
--- a/app/views/projects/pages/_use.html.haml
+++ b/app/views/projects/pages/_use.html.haml
@@ -4,7 +4,8 @@
       = s_('GitLabPages|Configure pages')
     .card-body
       %p.gl-mb-0
-        - link_start = "<a href='#{help_page_path('user/project/pages/index.md')}' target='_blank' rel='noopener noreferrer'>".html_safe
+        - docs_link_start = "<a href='#{help_page_path('user/project/pages/index.md')}' target='_blank' rel='noopener noreferrer'>".html_safe
+        - samples_link_start = "<a href='https://gitlab.com/pages' target='_blank' rel='noopener noreferrer'>".html_safe
+        - templates_link_start = "<a href='https://gitlab.com/gitlab-org/project-templates' target='_blank' rel='noopener noreferrer'>".html_safe
         - link_end = '</a>'.html_safe
-        = s_('GitLabPages|Learn how to upload your static site and have it served by GitLab by following the %{link_start}documentation on GitLab Pages%{link_end}.').html_safe % { link_start: link_start,
-            link_end: link_end }
+        = s_('GitLabPages|See the %{docs_link_start}GitLab Pages documentation%{link_end} to learn how to upload your static site and have GitLab serve it. You can also follow a %{samples_link_start}sample project%{link_end} or use a %{templates_link_start}GitLab CI template%{link_end}.').html_safe % { docs_link_start: docs_link_start, samples_link_start: samples_link_start, templates_link_start: templates_link_start, link_end: link_end }
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index ee0fe43e79c..8a369202555 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -39,5 +39,5 @@
         = f.check_box :active, required: false, value: @schedule.active?
         = f.label :active, _('Active'), class: 'gl-font-weight-normal'
   .footer-block.row-content-block
-    = f.submit _('Save pipeline schedule'), class: 'btn btn-success'
-    = link_to _('Cancel'), pipeline_schedules_path(@project), class: 'btn btn-cancel'
+    = f.submit _('Save pipeline schedule'), class: 'btn gl-button btn-success'
+    = link_to _('Cancel'), pipeline_schedules_path(@project), class: 'btn gl-button btn-default btn-cancel'
diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
index 45aaf2b64bf..e17c905e092 100644
--- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -27,14 +27,14 @@
     %td
       .float-right.btn-group
         - if can?(current_user, :play_pipeline_schedule, pipeline_schedule)
-          = link_to play_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('Play'), class: 'btn btn-svg gl-display-flex gl-align-items-center gl-justify-content-center' do
+          = link_to play_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('Play'), class: 'btn gl-button btn-default btn-svg' do
             = sprite_icon('play')
         - if can?(current_user, :take_ownership_pipeline_schedule, pipeline_schedule)
-          = link_to take_ownership_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('PipelineSchedules|Take ownership'), class: 'btn' do
+          = link_to take_ownership_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('PipelineSchedules|Take ownership'), class: 'btn gl-button btn-default' do
             = s_('PipelineSchedules|Take ownership')
         - if can?(current_user, :update_pipeline_schedule, pipeline_schedule)
-          = link_to edit_pipeline_schedule_path(pipeline_schedule), title: _('Edit'), class: 'btn gl-display-flex' do
+          = link_to edit_pipeline_schedule_path(pipeline_schedule), title: _('Edit'), class: 'btn gl-button btn-default' do
             = sprite_icon('pencil')
         - if can?(current_user, :admin_pipeline_schedule, pipeline_schedule)
-          = link_to pipeline_schedule_path(pipeline_schedule), title: _('Delete'), method: :delete, class: 'gl-button btn btn-danger', data: { confirm: _("Are you sure you want to delete this pipeline schedule?") } do
+          = link_to pipeline_schedule_path(pipeline_schedule), title: _('Delete'), method: :delete, class: 'btn gl-button btn-danger', data: { confirm: _("Are you sure you want to delete this pipeline schedule?") } do
             = sprite_icon('remove')
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
index 90417a852d5..558c12c04e4 100644
--- a/app/views/projects/pipeline_schedules/index.html.haml
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -9,7 +9,7 @@
 
   - if can?(current_user, :create_pipeline_schedule, @project)
     .nav-controls
-      = link_to new_project_pipeline_schedule_path(@project), class: 'btn btn-success' do
+      = link_to new_project_pipeline_schedule_path(@project), class: 'btn gl-button btn-success' do
         %span= _('New schedule')
 
 - if @schedules.present?
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index 77aa537dfdb..4a10f6aee1c 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -28,6 +28,9 @@
     - if @pipeline.latest?
       %span.js-pipeline-url-latest.badge.badge-pill.gl-badge.sm.badge-success.has-tooltip{ title: _("Latest pipeline for the most recent commit on this branch") }
         latest
+    - if @pipeline.merge_train_pipeline?
+      %span.js-pipeline-url-train.badge.badge-pill.gl-badge.sm.badge-info.has-tooltip{ title: _("This is a merge train pipeline") }
+        train
     - if @pipeline.has_yaml_errors?
       %span.js-pipeline-url-yaml.badge.badge-pill.gl-badge.sm.badge-danger.has-tooltip{ title: @pipeline.yaml_errors }
         yaml invalid
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
index b41c3f4fc27..904b3d6f483 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -1,15 +1,13 @@
 - return if pipeline_has_errors
-- dag_pipeline_tab_enabled = Feature.enabled?(:dag_pipeline_tab, @project, default_enabled: true)
 
 .tabs-holder
   %ul.pipelines-tabs.nav-links.no-top.no-bottom.mobile-separator.nav.nav-tabs
     %li.js-pipeline-tab-link
       = link_to project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-pipeline', action: 'pipelines', toggle: 'tab' }, class: 'pipeline-tab' do
         = _('Pipeline')
-    - if dag_pipeline_tab_enabled
-      %li.js-dag-tab-link
-        = link_to dag_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-dag', action: 'dag', toggle: 'tab' }, class: 'dag-tab' do
-          = _('Needs')
+    %li.js-dag-tab-link
+      = link_to dag_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-dag', action: 'dag', toggle: 'tab' }, class: 'dag-tab' do
+        = _('Needs')
     %li.js-builds-tab-link
       = link_to builds_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
         = _('Jobs')
@@ -69,7 +67,7 @@
                 = build.present.callout_failure_message
               %td.responsive-table-cell.build-actions
                 - if can?(current_user, :update_build, job) && job.retryable?
-                  = link_to retry_project_job_path(build.project, build, return_to: request.original_url), method: :post, title: _('Retry'), class: 'btn btn-build gl-button btn-icon btn-default' do
+                  = link_to retry_project_job_path(build.project, build, return_to: request.original_url), method: :post, title: _('Retry'), class: 'gl-button btn btn-default btn-icon' do
                     = sprite_icon('repeat', css_class: 'gl-icon')
             - if can?(current_user, :read_build, job)
               %tr.build-trace-row.responsive-table-border-end
@@ -79,11 +77,11 @@
                     %code.bash.js-build-output
                       = build_summary(build)
 
-  - if dag_pipeline_tab_enabled
-    #js-tab-dag.tab-pane
-      #js-pipeline-dag-vue{ data: { pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, empty_svg_path: image_path('illustrations/empty-state/empty-dag-md.svg'), about_dag_doc_path: help_page_path('ci/directed_acyclic_graph/index.md'), dag_doc_path: help_page_path('ci/yaml/README.md', anchor: 'needs')} }
+  #js-tab-dag.tab-pane
+    #js-pipeline-dag-vue{ data: { pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, empty_svg_path: image_path('illustrations/empty-state/empty-dag-md.svg'), about_dag_doc_path: help_page_path('ci/directed_acyclic_graph/index.md'), dag_doc_path: help_page_path('ci/yaml/README.md', anchor: 'needs')} }
 
   #js-tab-tests.tab-pane
     #js-pipeline-tests-detail{ data: { summary_endpoint: summary_project_pipeline_tests_path(@project, @pipeline, format: :json),
-      suite_endpoint: project_pipeline_test_path(@project, @pipeline, suite_name: ':suite_name', format: :json) } }
+      suite_endpoint: project_pipeline_test_path(@project, @pipeline, suite_name: 'suite', format: :json),
+      blob_path: project_blob_path(@project, @pipeline.sha) } }
   = render_if_exists "projects/pipelines/tabs_content", pipeline: @pipeline, project: @project
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index b3ad210aa47..b431ef202b3 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -6,7 +6,7 @@
 - add_page_specific_style 'page_bundles/reports'
 - add_page_specific_style 'page_bundles/ci_status'
 
-- if Feature.enabled?(:graphql_pipeline_details, @project)
+- if Feature.enabled?(:graphql_pipeline_details, @project, default_enabled: :yaml) || Feature.enabled?(:graphql_pipeline_details_users, @current_user, default_enabled: :yaml)
   - add_page_startup_graphql_call('pipelines/get_pipeline_details', { projectPath: @project.full_path, iid: @pipeline.iid })
 
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index cf39ac4dd56..beb435d268a 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -1,10 +1,11 @@
 - page_title _("Members")
 - group = @project.group
+- vue_project_members_list_enabled = Feature.enabled?(:vue_project_members_list, @project, default_enabled: :yaml)
 
 .js-remove-member-modal
 .row.gl-mt-3
   .col-lg-12
-    - if invite_members_allowed?(group)
+    - if can_invite_members_for_project?(@project)
       .row
         .col-md-12.col-lg-6.gl-display-flex
           .gl-flex-direction-column.gl-flex-wrap.align-items-baseline
@@ -19,7 +20,7 @@
         .col-md-12.col-lg-6
           .gl-display-flex.gl-flex-wrap.gl-lg-justify-content-end.gl-mx-n2.gl-mb-3
             .js-invite-members-trigger.gl-px-2.gl-sm-w-auto.gl-w-full.gl-mb-4{ data: { classes: 'btn btn-success gl-button gl-mt-3 gl-sm-w-auto gl-w-full', display_text: _('Invite members') } }
-        = render_if_exists 'projects/invite_members_modal', project: @project
+        = render 'projects/invite_members_modal', project: @project
 
     - else
       - if project_can_be_shared?
@@ -31,7 +32,7 @@
           %p
             = html_escape(_("Members can be added by project %{i_open}Maintainers%{i_close} or %{i_open}Owners%{i_close}")) % { i_open: '<i>'.html_safe, i_close: '</i>'.html_safe }
 
-    - if !invite_members_allowed?(group) && can_manage_project_members?(@project) && project_can_be_shared?
+    - if !can_invite_members_for_project?(@project) && can_manage_project_members?(@project) && project_can_be_shared?
       - if !membership_locked? && @project.allowed_to_share_with_group?
         %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
           %li.nav-tab{ role: 'presentation' }
@@ -74,24 +75,44 @@
             %span.badge.badge-pill= @requesters.count
     .tab-content
       #tab-members.tab-pane{ class: ('active' unless groups_tab_active?) }
-        = render 'projects/project_members/team', project: @project, group: group, members: @project_members, current_user_is_group_owner: current_user_is_group_owner?(@project)
+        - if vue_project_members_list_enabled
+          .js-project-members-list{ data: project_members_list_data_attributes(@project, @project_members) }
+            .loading
+              .spinner.spinner-md
+        - else
+          = render 'projects/project_members/team', project: @project, group: group, members: @project_members, current_user_is_group_owner: current_user_is_group_owner?(@project)
         = paginate @project_members, theme: "gitlab", params: { search_groups: nil }
       - if show_groups?(@group_links)
         #tab-groups.tab-pane{ class: ('active' if groups_tab_active?) }
-          = render 'projects/project_members/groups', group_links: @group_links
+          - if vue_project_members_list_enabled
+            .js-project-group-links-list{ data: project_group_links_list_data_attributes(@project, @group_links) }
+              .loading
+                .spinner.spinner-md
+          - else
+            = render 'projects/project_members/groups', group_links: @group_links
       - if show_invited_members?(@project, @invited_members)
         #tab-invited-members.tab-pane
-          .card.card-without-border
-            = render 'shared/members/tab_pane/header' do
-              = render 'shared/members/tab_pane/title' do
-                = html_escape(_('Members invited to %{strong_start}%{project_name}%{strong_end}')) % { project_name: @project.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-            %ul.content-list.members-list
-              = render partial: 'shared/members/member', collection: @invited_members, as: :member, locals: { membership_source: @project, group: group, current_user_is_group_owner: current_user_is_group_owner?(@project) }
+          - if vue_project_members_list_enabled
+            .js-project-invited-members-list{ data: project_members_list_data_attributes(@project, @invited_members) }
+              .loading
+                .spinner.spinner-md
+          - else
+            .card.card-without-border
+              = render 'shared/members/tab_pane/header' do
+                = render 'shared/members/tab_pane/title' do
+                  = html_escape(_('Members invited to %{strong_start}%{project_name}%{strong_end}')) % { project_name: @project.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
+              %ul.content-list.members-list
+                = render partial: 'shared/members/member', collection: @invited_members, as: :member, locals: { membership_source: @project, group: group, current_user_is_group_owner: current_user_is_group_owner?(@project) }
       - if show_access_requests?(@project, @requesters)
         #tab-access-requests.tab-pane
-          .card.card-without-border
-            = render 'shared/members/tab_pane/header' do
-              = render 'shared/members/tab_pane/title' do
-                = html_escape(_('Users requesting access to %{strong_start}%{project_name}%{strong_end}')) % { project_name: @project.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-            %ul.content-list.members-list
-              = render partial: 'shared/members/member', collection: @requesters, as: :member, locals: { membership_source: @project, group: group }
+          - if vue_project_members_list_enabled
+            .js-project-access-requests-list{ data: project_members_list_data_attributes(@project, @requesters) }
+              .loading
+                .spinner.spinner-md
+          - else
+            .card.card-without-border
+              = render 'shared/members/tab_pane/header' do
+                = render 'shared/members/tab_pane/title' do
+                  = html_escape(_('Users requesting access to %{strong_start}%{project_name}%{strong_end}')) % { project_name: @project.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
+              %ul.content-list.members-list
+                = render partial: 'shared/members/member', collection: @requesters, as: :member, locals: { membership_source: @project, group: group }
diff --git a/app/views/projects/protected_branches/_create_protected_branch.html.haml b/app/views/projects/protected_branches/_create_protected_branch.html.haml
index 33be875d9a6..20cd45be6da 100644
--- a/app/views/projects/protected_branches/_create_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_create_protected_branch.html.haml
@@ -1,5 +1,3 @@
-- select_mode_for_dropdown = Feature.enabled?(:deploy_keys_on_protected_branches, @project) ? 'js-multiselect' : ''
-
 - content_for :merge_access_levels do
   .merge_access_levels-container
     = dropdown_tag('Select',
@@ -9,7 +7,7 @@
 - content_for :push_access_levels do
   .push_access_levels-container
     = dropdown_tag('Select',
-                    options: { toggle_class: "js-allowed-to-push qa-allowed-to-push-select #{select_mode_for_dropdown} wide",
+                    options: { toggle_class: "js-allowed-to-push qa-allowed-to-push-select js-multiselect wide",
                     dropdown_class: 'dropdown-menu-selectable qa-allowed-to-push-dropdown rspec-allowed-to-push-dropdown capitalize-header',
                     data: { field_name: 'protected_branch[push_access_levels_attributes][0][access_level]', input_id: 'push_access_levels_attributes' }})
 
diff --git a/app/views/projects/protected_branches/shared/_index.html.haml b/app/views/projects/protected_branches/shared/_index.html.haml
index 66173c4759b..1d3e3fb11ae 100644
--- a/app/views/projects/protected_branches/shared/_index.html.haml
+++ b/app/views/projects/protected_branches/shared/_index.html.haml
@@ -3,7 +3,7 @@
 %section.settings.no-animate#js-protected-branches-settings{ class: ('expanded' if expanded), data: { qa_selector: 'protected_branches_settings_content' } }
   .settings-header
     %h4
-      Protected Branches
+      Protected branches
     %button.btn.js-settings-toggle.qa-expand-protected-branches{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
diff --git a/app/views/projects/protected_branches/shared/_protected_branch.html.haml b/app/views/projects/protected_branches/shared/_protected_branch.html.haml
index d62e9513d56..02ec778b97c 100644
--- a/app/views/projects/protected_branches/shared/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/shared/_protected_branch.html.haml
@@ -5,7 +5,7 @@
     %span.ref-name= protected_branch.name
 
     - if @project.root_ref?(protected_branch.name)
-      %span.badge.badge-info.d-inline default
+      %span.badge.gl-badge.badge-pill.badge-info.d-inline default
 
     %div
       - if protected_branch.wildcard?
@@ -20,4 +20,4 @@
 
   - if can_admin_project
     %td
-      = link_to 'Unprotect', [@project, protected_branch, { update_section: 'js-protected-branches-settings' }], disabled: local_assigns[:disabled], data: { confirm: 'Branch will be writable for developers. Are you sure?' }, method: :delete, class: "btn btn-warning"
+      = link_to 'Unprotect', [@project, protected_branch, { update_section: 'js-protected-branches-settings' }], disabled: local_assigns[:disabled], data: { confirm: 'Branch will be writable for developers. Are you sure?' }, method: :delete, class: "btn gl-button btn-warning"
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml
index 5734b7dc3c9..67eadd39ed6 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/shared/_index.html.haml
@@ -3,7 +3,7 @@
 %section.settings.no-animate#js-protected-tags-settings{ class: ('expanded' if expanded), data: { qa_selector: 'protected_tag_settings_content' } }
   .settings-header
     %h4
-      Protected Tags
+      Protected tags
     %button.btn.js-settings-toggle{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
diff --git a/app/views/projects/protected_tags/shared/_tags_list.html.haml b/app/views/projects/protected_tags/shared/_tags_list.html.haml
index a5a43072744..f3cf4013898 100644
--- a/app/views/projects/protected_tags/shared/_tags_list.html.haml
+++ b/app/views/projects/protected_tags/shared/_tags_list.html.haml
@@ -23,7 +23,6 @@
             %th
       %tbody
         %tr
-          %td.flash-container{ colspan: 4 }
         = yield
 
     = paginate @protected_tags, theme: 'gitlab'
diff --git a/app/views/projects/registry/repositories/index.html.haml b/app/views/projects/registry/repositories/index.html.haml
index 97bc366544f..a2009b96c0d 100644
--- a/app/views/projects/registry/repositories/index.html.haml
+++ b/app/views/projects/registry/repositories/index.html.haml
@@ -1,6 +1,6 @@
 - page_title _("Container Registry")
 - @content_class = "limit-container-width" unless fluid_layout
-- add_page_startup_graphql_call('container_registry/get_container_repositories', { fullPath: @project.full_path, first: 10, name: nil, isGroupPage: false} )
+- add_page_startup_graphql_call('container_registry/get_container_repositories', { fullPath: @project.full_path, first: 10, name: nil, isGroupPage: false, sort: nil} )
 
 %section
   #js-container-registry{ data: { endpoint: project_container_registry_index_path(@project),
@@ -19,4 +19,7 @@
     "project_path": @project.full_path,
     "gid_prefix": container_repository_gid_prefix,
     "is_admin": current_user&.admin.to_s,
-    character_error: @character_error.to_s } }
+    character_error: @character_error.to_s,
+    user_callouts_path: user_callouts_path,
+    user_callout_id: UserCalloutsHelper::UNFINISHED_TAG_CLEANUP_CALLOUT,
+    show_unfinished_tag_cleanup_callout: show_unfinished_tag_cleanup_callout?.to_s, } }
diff --git a/app/views/projects/runners/_group_runners.html.haml b/app/views/projects/runners/_group_runners.html.haml
index 9415516d6f6..6e46423cde0 100644
--- a/app/views/projects/runners/_group_runners.html.haml
+++ b/app/views/projects/runners/_group_runners.html.haml
@@ -13,10 +13,10 @@
     %br
     %br
     - if @project.group_runners_enabled?
-      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn btn-close', method: :post do
+      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-warning-secondary', method: :post do
         = _('Disable group runners')
     - else
-      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn btn-success btn-inverted', method: :post do
+      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-success btn-inverted', method: :post do
         = _('Enable group runners')
     &nbsp;
     = _('for this project')
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index 85bd0335b92..41159df1435 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -10,8 +10,8 @@
           = sprite_icon('lock')
 
       %small.edit-runner
-        = link_to edit_project_runner_path(@project, runner), class: 'btn btn-edit' do
-          = sprite_icon('pencil')
+        = link_to edit_project_runner_path(@project, runner), class: 'btn gl-button btn-edit' do
+          = sprite_icon('pencil', css_class: 'gl-my-2')
     - else
       %span.commit-sha
         = runner.short_sha
@@ -19,18 +19,18 @@
     .float-right
       - if @project_runners.include?(runner)
         - if runner.active?
-          = link_to _('Pause'), pause_project_runner_path(@project, runner), method: :post, class: 'btn btn-sm btn-danger', data: { confirm: _("Are you sure?") }
+          = link_to _('Pause'), pause_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-sm btn-danger', data: { confirm: _("Are you sure?") }
         - else
-          = link_to _('Resume'), resume_project_runner_path(@project, runner), method: :post, class: 'btn btn-success btn-sm'
+          = link_to _('Resume'), resume_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-success btn-sm'
         - if runner.belongs_to_one_project?
-          = link_to _('Remove runner'), project_runner_path(@project, runner), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn btn-danger btn-sm'
+          = link_to _('Remove runner'), project_runner_path(@project, runner), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn gl-button btn-danger btn-sm'
         - else
           - runner_project = @project.runner_projects.find_by(runner_id: runner) # rubocop: disable CodeReuse/ActiveRecord
-          = link_to _('Disable for this project'), project_runner_project_path(@project, runner_project), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn btn-danger btn-sm'
+          = link_to _('Disable for this project'), project_runner_project_path(@project, runner_project), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn gl-button btn-danger btn-sm'
       - elsif runner.project_type?
         = form_for [@project, @project.runner_projects.new] do |f|
           = f.hidden_field :runner_id, value: runner.id
-          = f.submit _('Enable for this project'), class: 'btn btn-sm'
+          = f.submit _('Enable for this project'), class: 'btn gl-button btn-sm'
   .float-right
     %small.light
       \##{runner.id}
diff --git a/app/views/projects/runners/_shared_runners.html.haml b/app/views/projects/runners/_shared_runners.html.haml
index fd8b4eb0d39..484d8f8a40c 100644
--- a/app/views/projects/runners/_shared_runners.html.haml
+++ b/app/views/projects/runners/_shared_runners.html.haml
@@ -9,10 +9,10 @@
         = _('Shared runners disabled on group level')
     - else
       - if @project.shared_runners_enabled?
-        = link_to toggle_shared_runners_project_runners_path(@project), class: 'btn btn-close', method: :post do
+        = link_to toggle_shared_runners_project_runners_path(@project), class: 'btn gl-button btn-warning-secondary', method: :post do
           = _('Disable shared runners')
       - else
-        = link_to toggle_shared_runners_project_runners_path(@project), class: 'btn btn-success', method: :post do
+        = link_to toggle_shared_runners_project_runners_path(@project), class: 'btn gl-button btn-success', method: :post do
           = _('Enable shared runners')
       &nbsp; for this project
 
diff --git a/app/views/projects/runners/_specific_runners.html.haml b/app/views/projects/runners/_specific_runners.html.haml
index 3e325b80efd..88895634990 100644
--- a/app/views/projects/runners/_specific_runners.html.haml
+++ b/app/views/projects/runners/_specific_runners.html.haml
@@ -9,9 +9,11 @@
                      clusters_path: project_clusters_path(@project) }
   %hr
   = render partial: 'ci/runner/how_to_setup_runner',
-           locals: { registration_token: @project.runners_token,
-                     type: 'specific',
-                     reset_token_url: reset_registration_token_namespace_project_settings_ci_cd_path }
+          locals: { registration_token: @project.runners_token,
+                    type: 'specific',
+                    reset_token_url: reset_registration_token_namespace_project_settings_ci_cd_path,
+                    project_path: @project.path_with_namespace,
+                    group_path: '' }
 
 %hr
 
diff --git a/app/views/projects/security/configuration/show.html.haml b/app/views/projects/security/configuration/show.html.haml
new file mode 100644
index 00000000000..fe47ce327c2
--- /dev/null
+++ b/app/views/projects/security/configuration/show.html.haml
@@ -0,0 +1,4 @@
+- breadcrumb_title _("Security Configuration")
+- page_title _("Security Configuration")
+
+#js-security-configuration-static{ data: {project_path: @project.full_path} }
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index 59b3afa476f..3c99b4c5e68 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -1,19 +1,14 @@
 - if lookup_context.template_exists?('top', "projects/services/#{@service.to_param}", true)
   = render "projects/services/#{@service.to_param}/top"
 
-.row.gl-mt-3.gl-mb-3
-  .col-lg-4
-    %h3.page-title.gl-mt-0
-      = @service.title
-      - if @service.operating?
-        = sprite_icon('check', css_class: 'gl-text-green-500')
+%h3.page-title
+  = @service.title
+  - if @service.operating?
+    = sprite_icon('check', css_class: 'gl-text-green-500')
 
-    - if @service.respond_to?(:detailed_description)
-      %p= @service.detailed_description
-  .col-lg-8
-    = form_for(@service, as: :service, url: scoped_integration_path(@service), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => test_project_service_path(@project, @service) } }) do |form|
-      = render 'shared/service_settings', form: form, integration: @service
-      %input{ id: 'services_redirect_to', type: 'hidden', name: 'redirect_to', value: request.referrer }
+= form_for(@service, as: :service, url: scoped_integration_path(@service), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => test_project_service_path(@project, @service) } }) do |form|
+  = render 'shared/service_settings', form: form, integration: @service
+  %input{ id: 'services_redirect_to', type: 'hidden', name: 'redirect_to', value: request.referrer }
 
 - if lookup_context.template_exists?('show', "projects/services/#{@service.to_param}", true)
   %hr
diff --git a/app/views/projects/services/prometheus/_top.html.haml b/app/views/projects/services/prometheus/_top.html.haml
index 0238a45b75f..db02ea85865 100644
--- a/app/views/projects/services/prometheus/_top.html.haml
+++ b/app/views/projects/services/prometheus/_top.html.haml
@@ -7,4 +7,4 @@
       .gl-alert-body
         = s_('AlertSettings|You can now set up alert endpoints for manually configured Prometheus instances in the Alerts section on the Operations settings page. Alert endpoint fields on this page have been deprecated.')
       .gl-alert-actions
-        = link_to _('Visit settings page'), project_settings_operations_path(@project, anchor: 'js-alert-management-settings'), class: 'btn gl-alert-action btn-info gl-button'
+        = link_to _('Visit settings page'), project_settings_operations_path(@project, anchor: 'js-alert-management-settings'), class: 'gl-button btn gl-alert-action btn-info'
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index 4133129fde2..4300ebb4852 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -7,12 +7,14 @@
     - else
       = _('Archive project')
   - if @project.archived?
-    %p= _("Unarchiving the project will restore people's ability to make changes to it. The repository can be committed to, and issues, comments, and other entities can be created. %{strong_start}Once active, this project shows up in the search and on the dashboard.%{strong_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
+    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'unarchiving-a-project') }
+    %p= _("Unarchiving the project will restore its members' ability to make changes to it. The repository can be committed to, and issues, comments, and other entities can be created. %{strong_start}Once active, this project shows up in the search and on the dashboard.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
     = link_to _('Unarchive project'), unarchive_project_path(@project),
         data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' },
-        method: :post, class: "btn btn-success"
+        method: :post, class: "gl-button btn btn-success"
   - else
-    %p= _("Archiving the project will make it entirely read only. It is hidden from the dashboard and doesn't show up in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
+    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'archiving-a-project') }
+    %p= _("Archiving the project will make it entirely read only. It is hidden from the dashboard and doesn't show up in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
     = link_to _('Archive project'), archive_project_path(@project),
       data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link' },
-      method: :post, class: "btn btn-warning"
+      method: :post, class: "gl-button btn btn-warning"
diff --git a/app/views/projects/settings/_general.html.haml b/app/views/projects/settings/_general.html.haml
index 5d5f1d54439..3b03e213983 100644
--- a/app/views/projects/settings/_general.html.haml
+++ b/app/views/projects/settings/_general.html.haml
@@ -7,17 +7,17 @@
       .form-group.col-md-5
         = f.label :name, class: 'label-bold', for: 'project_name_edit' do
           = _('Project name')
-        = f.text_field :name, class: 'form-control qa-project-name-field', id: "project_name_edit"
+        = f.text_field :name, class: 'form-control gl-form-input qa-project-name-field', id: "project_name_edit"
 
       .form-group.col-md-7
         = f.label :id, class: 'label-bold' do
           = _('Project ID')
-        = f.text_field :id, class: 'form-control w-auto', readonly: true
+        = f.text_field :id, class: 'form-control gl-form-input w-auto', readonly: true
 
     .row
       .form-group.col-md-9
         = f.label :tag_list, _('Topics (optional)'), class: 'label-bold'
-        = f.text_field :tag_list, value: @project.tag_list.join(', '), maxlength: 2000, class: "form-control"
+        = f.text_field :tag_list, value: @project.tag_list.join(', '), maxlength: 2000, class: "form-control gl-form-input"
         %p.form-text.text-muted= _('Separate topics with commas.')
 
     = render_if_exists 'compliance_management/compliance_framework/project_settings', f: f
@@ -25,14 +25,14 @@
     .row
       .form-group.col-md-9
         = f.label :description, _('Project description (optional)'), class: 'label-bold'
-        = f.text_area :description, class: 'form-control', rows: 3, maxlength: 250
+        = f.text_area :description, class: 'form-control gl-form-input', rows: 3, maxlength: 250
 
   .row= render_if_exists 'projects/classification_policy_settings', f: f
 
   = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :project
 
   .form-group.gl-mt-3.gl-mb-3
-    .avatar-container.s90
+    .avatar-container.rect-avatar.s90
       = project_icon(@project, alt: _('Project avatar'), class: 'avatar project-avatar s90')
     = f.label :avatar, _('Project avatar'), class: 'label-bold d-block'
     = render 'shared/choose_avatar_button', f: f
@@ -40,4 +40,4 @@
       %hr
       = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
 
-  = f.submit _('Save changes'), class: "btn btn-success mt-4 qa-save-naming-topics-avatar-button"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success gl-mt-6 qa-save-naming-topics-avatar-button"
diff --git a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
index 2e4542a033e..5f79dd3d4bb 100644
--- a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
@@ -54,4 +54,4 @@
                     = s_('CICD|Automatic deployment to staging, manual deployment to production')
                     = link_to sprite_icon('question-o'), help_page_path('topics/autodevops/customize.md', anchor: 'incremental-rollout-to-production'), target: '_blank'
 
-          = f.submit _('Save changes'), class: "btn btn-success gl-mt-5", data: { qa_selector: 'save_changes_button' }
+          = f.submit _('Save changes'), class: "btn gl-button btn-success gl-mt-5", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index d247e73a5b4..e0c4a3d624e 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -4,10 +4,46 @@
       = form_errors(@project)
       %fieldset.builds-feature
         .form-group
+          .form-check
+            = f.check_box :public_builds, { class: 'form-check-input' }
+            = f.label :public_builds, class: 'form-check-label' do
+              %strong= _("Public pipelines")
+            .form-text.text-muted
+              = _("Allow public access to pipelines and job details, including output logs and artifacts.")
+              = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'visibility-of-pipelines'), target: '_blank'
+
+        .form-group
+          .form-check
+            = f.check_box :auto_cancel_pending_pipelines, { class: 'form-check-input' }, 'enabled', 'disabled'
+            = f.label :auto_cancel_pending_pipelines, class: 'form-check-label' do
+              %strong= _("Auto-cancel redundant pipelines")
+            .form-text.text-muted
+              = _("New pipelines cause older pending pipelines on the same branch to be cancelled.")
+              = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'auto-cancel-redundant-pipelines'), target: '_blank'
+
+        .form-group
+          .form-check
+            = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
+              = form.check_box :forward_deployment_enabled, { class: 'form-check-input' }
+              = form.label :forward_deployment_enabled, class: 'form-check-label' do
+                %strong= _("Skip outdated deployment jobs")
+              .form-text.text-muted
+                = _("When a deployment job is successful, skip older deployment jobs that are still pending.")
+                = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'skip-outdated-deployment-jobs'), target: '_blank'
+
+        .form-group
+          = f.label :ci_config_path, _('CI/CD configuration file'), class: 'label-bold'
+          = f.text_field :ci_config_path, class: 'form-control', placeholder: '.gitlab-ci.yml'
+          %p.form-text.text-muted
+            = html_escape(_("The name of the CI/CD configuration file. A path relative to the root directory is optional (for example %{code_open}my/path/.myfile.yml%{code_close}).")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'custom-cicd-configuration-path'), target: '_blank'
+
+        %hr
+        .form-group
           %h5.gl-mt-0
-            = _("Git strategy for pipelines")
+            = _("Git strategy")
           %p
-            = html_escape(_("Choose between %{code_open}clone%{code_close} or %{code_open}fetch%{code_close} to get the recent application code")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+            = _("Choose which Git strategy to use when fetching the project.")
             = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'git-strategy'), target: '_blank'
           .form-check
             = f.radio_button :build_allow_git_fetch, 'false', { class: 'form-check-input' }
@@ -15,137 +51,50 @@
               %strong git clone
               %br
               %span
-                = _("Slower but makes sure the project workspace is pristine as it clones the repository from scratch for every job")
+                = _("For each job, clone the repository.")
           .form-check
             = f.radio_button :build_allow_git_fetch, 'true', { class: 'form-check-input' }
             = f.label :build_allow_git_fetch_true, class: 'form-check-label' do
               %strong git fetch
               %br
               %span
-                = _("Faster as it re-uses the project workspace (falling back to clone if it doesn't exist)")
+                = html_escape(_("For each job, re-use the project workspace. If the workspace doesn't exist, use %{code_open}git clone%{code_close}.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
 
-        %hr
         .form-group
           = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
             = form.label :default_git_depth, _('Git shallow clone'), class: 'label-bold'
-            = form.number_field :default_git_depth, { class: 'form-control', min: 0, max: 1000 }
+            = form.number_field :default_git_depth, { class: 'form-control gl-form-input', min: 0, max: 1000 }
             %p.form-text.text-muted
-              = _('The number of changes to be fetched from GitLab when cloning a repository. This can speed up Pipelines execution. Keep empty or set to 0 to disable shallow clone by default and make GitLab CI fetch all branches and tags each time.')
+              = html_escape(_('The number of changes to fetch from GitLab when cloning a repository. Lower values can speed up pipeline execution. Set to %{code_open}0%{code_close} or blank to fetch all branches and tags for each job')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+              = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'git-shallow-clone'), target: '_blank'
 
         %hr
         .form-group
           = f.label :build_timeout_human_readable, _('Timeout'), class: 'label-bold'
-          = f.text_field :build_timeout_human_readable, class: 'form-control'
+          = f.text_field :build_timeout_human_readable, class: 'form-control gl-form-input'
           %p.form-text.text-muted
-            = _('If any job surpasses this timeout threshold, it will be marked as failed. Human readable time input language is accepted like "1 hour". Values without specification represent seconds.')
+            = html_escape(_('Jobs fail if they run longer than the timeout time. Input value is in seconds by default. Human readable input is also accepted, for example %{code_open}1 hour%{code_close}.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
             = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'timeout'), target: '_blank'
 
         - if can?(current_user, :update_max_artifacts_size, @project)
-          %hr
           .form-group
-            = f.label :max_artifacts_size, _('Maximum artifacts size (MB)'), class: 'label-bold'
-            = f.number_field :max_artifacts_size, class: 'form-control'
+            = f.label :max_artifacts_size, _('Maximum artifacts size'), class: 'label-bold'
+            = f.number_field :max_artifacts_size, class: 'form-control gl-form-input'
             %p.form-text.text-muted
-              = _("Set the maximum file size for each job's artifacts")
+              = _("The maximum file size in megabytes for individual job artifacts.")
               = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank'
 
-        %hr
-        .form-group
-          = f.label :ci_config_path, _('Custom CI configuration path'), class: 'label-bold'
-          = f.text_field :ci_config_path, class: 'form-control', placeholder: '.gitlab-ci.yml'
-          %p.form-text.text-muted
-            = html_escape(_("The path to the CI configuration file. Defaults to %{code_open}.gitlab-ci.yml%{code_close}")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'custom-ci-configuration-path'), target: '_blank'
-
-        %hr
-        .form-group
-          .form-check
-            = f.check_box :public_builds, { class: 'form-check-input' }
-            = f.label :public_builds, class: 'form-check-label' do
-              %strong= _("Public pipelines")
-            .form-text.text-muted
-              = _("Allow public access to pipelines and job details, including output logs and artifacts")
-              = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'visibility-of-pipelines'), target: '_blank'
-            .bs-callout.bs-callout-info
-              %p #{_("If enabled")}:
-              %ul
-                %li
-                  = _("For public projects, anyone can view pipelines and access job details (output logs and artifacts)")
-                %li
-                  = _("For internal projects, any logged in user except external users can view pipelines and access job details (output logs and artifacts)")
-                %li
-                  = _("For private projects, any member (guest or higher) can view pipelines and access job details (output logs and artifacts)")
-              %p
-                = _("If disabled, the access level will depend on the user's permissions in the project.")
-
-        %hr
-        .form-group
-          .form-check
-            = f.check_box :auto_cancel_pending_pipelines, { class: 'form-check-input' }, 'enabled', 'disabled'
-            = f.label :auto_cancel_pending_pipelines, class: 'form-check-label' do
-              %strong= _("Auto-cancel redundant, pending pipelines")
-            .form-text.text-muted
-              = _("New pipelines will cancel older, pending pipelines on the same branch")
-              = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'auto-cancel-pending-pipelines'), target: '_blank'
-
-        .form-group
-          .form-check
-            = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
-              = form.check_box :forward_deployment_enabled, { class: 'form-check-input' }
-              = form.label :forward_deployment_enabled, class: 'form-check-label' do
-                %strong= _("Skip outdated deployment jobs")
-              .form-text.text-muted
-                = _("When a deployment job is successful, skip older deployment jobs that are still pending")
-                = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'skip-outdated-deployment-jobs'), target: '_blank'
-
-        %hr
         .form-group
           = f.label :build_coverage_regex, _("Test coverage parsing"), class: 'label-bold'
           .input-group
             %span.input-group-prepend
               .input-group-text /
-            = f.text_field :build_coverage_regex, class: 'form-control', placeholder: 'Regular expression', data: { qa_selector: 'build_coverage_regex_field' }
+            = f.text_field :build_coverage_regex, class: 'form-control gl-form-input', placeholder: 'Regular expression', data: { qa_selector: 'build_coverage_regex_field' }
             %span.input-group-append
               .input-group-text /
           %p.form-text.text-muted
-            = _("A regular expression that will be used to find the test coverage output in the job log. Leave blank to disable")
+            = html_escape(_('The regular expression used to find test coverage output in the job log. For example, use %{regex} for Simplecov (Ruby). Leave blank to disable.')) % { regex: '<code>\(\d+.\d+%\)</code>'.html_safe }
             = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'test-coverage-parsing'), target: '_blank'
-          .bs-callout.bs-callout-info
-            %p= _("Below are examples of regex for existing tools:")
-            %ul
-              %li
-                Simplecov (Ruby) -
-                %code \(\d+.\d+\%\) covered
-              %li
-                pytest-cov (Python) -
-                %code ^TOTAL.+?(\d+\%)$
-              %li
-                Scoverage (Scala) -
-                %code Statement coverage[A-Za-z\.*]\s*:\s*([^%]+)
-              %li
-                phpunit --coverage-text --colors=never (PHP) -
-                %code ^\s*Lines:\s*\d+.\d+\%
-              %li
-                gcovr (C/C++) -
-                %code ^TOTAL.*\s+(\d+\%)$
-              %li
-                tap --coverage-report=text-summary (NodeJS) -
-                %code ^Statements\s*:\s*([^%]+)
-              %li
-                nyc npm test (NodeJS) -
-                %code All files[^|]*\|[^|]*\s+([\d\.]+)
-              %li
-                excoveralls (Elixir) -
-                %code \[TOTAL\]\s+(\d+\.\d+)%
-              %li
-                mix test --cover (Elixir) -
-                %code \d+.\d+\%\s+\|\s+Total
-              %li
-                JaCoCo (Java/Kotlin)
-                %code Total.*?([0-9]{1,3})%
-              %li
-                go test -cover (Go)
-                %code coverage: \d+.\d+% of statements
 
         = f.submit _('Save changes'), class: "btn btn-success", data: { qa_selector: 'save_general_pipelines_changes_button' }
 
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 55b6cf372fb..ee49377595b 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -9,10 +9,10 @@
   .settings-header
     %h4
       = _("General pipelines")
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
-      = _("Customize your pipeline configuration, view your pipeline status and coverage report.")
+      = _("Customize your pipeline configuration and coverage report.")
   .settings-content
     = render 'form'
 
@@ -20,7 +20,7 @@
   .settings-header
     %h4
       = s_('CICD|Auto DevOps')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       - auto_devops_url = help_page_path('topics/autodevops/index')
@@ -37,11 +37,11 @@
   .settings-header
     %h4
       = _("Runners")
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _("Runners are processes that pick up and execute CI/CD jobs for GitLab.")
-      = link_to s_('How do I configure runners?'), help_page_path('ci/runners/README')
+      = link_to s_('How do I configure runners?'), help_page_path('ci/runners/README'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'projects/runners/index'
 
@@ -49,7 +49,7 @@
   .settings-header
     %h4
       = _("Artifacts")
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _("A job artifact is an archive of files and directories saved by a job when it finishes.")
@@ -66,10 +66,11 @@
   .settings-header
     %h4
       = _("Pipeline triggers")
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
-      = _("Triggers can force a specific branch or tag to get rebuilt with an API call. These tokens will impersonate their associated user including their access to projects and their project permissions.")
+      = _("Trigger a pipeline for a branch or tag by generating a trigger token and using it with an API call. The token impersonates a user's project access and permissions.")
+      = link_to _('Learn more.'), help_page_path('ci/triggers/README'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'projects/triggers/index'
 
@@ -78,11 +79,11 @@
     .settings-header
       %h4
         = _("Clean up image tags")
-      %button.btn.js-settings-toggle{ type: 'button' }
+      %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
       %p
         = _("Save space and find images in the Container Registry. Remove unneeded tags and keep only the ones you want.")
-        = link_to _('How does cleanup work?'), help_page_path('user/packages/container_registry/index', anchor: 'cleanup-policy', target: '_blank', rel: 'noopener noreferrer')
+        = link_to _('How does cleanup work?'), help_page_path('user/packages/container_registry/index', anchor: 'cleanup-policy'), target: '_blank', rel: 'noopener noreferrer'
     .settings-content
       = render 'projects/registry/settings/index'
 
@@ -93,16 +94,16 @@
     .settings-header
       %h4
         = _("Deploy freezes")
-      %button.btn.js-settings-toggle{ type: 'button' }
+      %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
       %p
         - freeze_period_docs = help_page_path('user/project/releases/index', anchor: 'prevent-unintentional-releases-by-setting-a-deploy-freeze')
         - freeze_period_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: freeze_period_docs }
-        = html_escape(s_('DeployFreeze|Specify times when deployments are not allowed for an environment. The %{filename} file must be updated to make deployment jobs aware of the %{freeze_period_link_start}freeze period%{freeze_period_link_end}.')) % { freeze_period_link_start: freeze_period_link_start, freeze_period_link_end: '</a>'.html_safe, filename: tag.code('gitlab-ci.yml') }
+        = html_escape(s_('DeployFreeze|Add a freeze period to prevent unintended releases during a period of time for a given environment. You must update the deployment jobs in %{filename} according to the deploy freezes added here. %{freeze_period_link_start}Learn more.%{freeze_period_link_end}')) % { freeze_period_link_start: freeze_period_link_start, freeze_period_link_end: '</a>'.html_safe, filename: tag.code('.gitlab-ci.yml') }
 
         - cron_syntax_url = 'https://crontab.guru/'
         - cron_syntax_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: cron_syntax_url }
-        = s_('DeployFreeze|You can specify deploy freezes using only %{cron_syntax_link_start}cron syntax%{cron_syntax_link_end}.').html_safe % { cron_syntax_link_start: cron_syntax_link_start, cron_syntax_link_end: "</a>".html_safe }
+        = s_('DeployFreeze|Specify deploy freezes using %{cron_syntax_link_start}cron syntax%{cron_syntax_link_end}.').html_safe % { cron_syntax_link_start: cron_syntax_link_start, cron_syntax_link_end: "</a>".html_safe }
 
     .settings-content
       = render 'ci/deploy_freeze/index'
diff --git a/app/views/projects/settings/integrations/show.html.haml b/app/views/projects/settings/integrations/show.html.haml
index 18c6cb31874..3f5fd765b11 100644
--- a/app/views/projects/settings/integrations/show.html.haml
+++ b/app/views/projects/settings/integrations/show.html.haml
@@ -10,7 +10,7 @@
     .gl-alert-body
       = _('Webhooks have moved. They can now be found under the Settings menu.')
     .gl-alert-actions
-      = link_to _('Go to Webhooks'), project_hooks_path(@project), class: 'btn gl-alert-action btn-info new-gl-button'
+      = link_to _('Go to Webhooks'), project_hooks_path(@project), class: 'gl-button btn gl-alert-action btn-info'
 
 %h4= _('Integrations')
 - integrations_link_start = '<a href="%{url}">'.html_safe % { url: help_page_url('user/project/integrations/overview') }
diff --git a/app/views/projects/settings/operations/_alert_management.html.haml b/app/views/projects/settings/operations/_alert_management.html.haml
index 46f45df00df..079812f7077 100644
--- a/app/views/projects/settings/operations/_alert_management.html.haml
+++ b/app/views/projects/settings/operations/_alert_management.html.haml
@@ -5,7 +5,7 @@
 
 %section.settings.no-animate#js-alert-management-settings{ class: ('expanded' if expanded) }
   .settings-header
-    %h3{ :class => "h4" }
+    %h4
       = _('Alerts')
     %button.btn.js-settings-toggle{ type: 'button' }
       = _('Expand')
diff --git a/app/views/projects/settings/operations/_error_tracking.html.haml b/app/views/projects/settings/operations/_error_tracking.html.haml
index 6ab8beff99f..fe302978da6 100644
--- a/app/views/projects/settings/operations/_error_tracking.html.haml
+++ b/app/views/projects/settings/operations/_error_tracking.html.haml
@@ -4,7 +4,7 @@
 
 %section.settings.no-animate.js-error-tracking-settings
   .settings-header
-    %h3{ :class => "h4" }
+    %h4
       = _('Error tracking')
     %button.btn.js-settings-toggle{ type: 'button' }
       = _('Expand')
diff --git a/app/views/projects/settings/operations/_tracing.html.haml b/app/views/projects/settings/operations/_tracing.html.haml
index f654c723e36..03970dfe0b9 100644
--- a/app/views/projects/settings/operations/_tracing.html.haml
+++ b/app/views/projects/settings/operations/_tracing.html.haml
@@ -3,7 +3,7 @@
 
 %section.settings.border-0.no-animate
   .settings-header{ :class => "border-top" }
-    %h3{ :class => "h4" }
+    %h4
       = _("Jaeger tracing")
     %button.btn.gl-button.js-settings-toggle{ type: 'button' }
       = _('Expand')
@@ -24,7 +24,7 @@
       .form-group
         = f.fields_for :tracing_setting_attributes, setting do |form|
           = form.label :external_url, _('Jaeger URL'), class: 'label-bold'
-          = form.url_field :external_url, class: 'form-control', placeholder: 'e.g. https://jaeger.mycompany.com'
+          = form.url_field :external_url, class: 'form-control gl-form-input', placeholder: 'e.g. https://jaeger.mycompany.com'
           %p.form-text.text-muted
             - jaeger_help_url = "https://www.jaegertracing.io/docs/1.7/getting-started/"
             - link_start_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: jaeger_help_url }
diff --git a/app/views/projects/show.atom.builder b/app/views/projects/show.atom.builder
index 39f8cb9a0e0..95b49aa0406 100644
--- a/app/views/projects/show.atom.builder
+++ b/app/views/projects/show.atom.builder
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 xml.title   "#{@project.name} activity"
 xml.link    href: project_url(@project, rss_url_options), rel: "self", type: "application/atom+xml"
 xml.link    href: project_url(@project), rel: "alternate", type: "text/html"
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 40faf91eadf..e1774c955bc 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -6,6 +6,9 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_path(@project, rss_url_options), title: "#{@project.name} activity")
 
+= content_for :invite_members_sidebar do
+  = render partial: 'projects/invite_members_link'
+
 = render partial: 'flash_messages', locals: { project: @project }
 
 = render "projects/last_push"
diff --git a/app/views/projects/tags/_tag.atom.builder b/app/views/projects/tags/_tag.atom.builder
index e4b2428d267..1d5b6832357 100644
--- a/app/views/projects/tags/_tag.atom.builder
+++ b/app/views/projects/tags/_tag.atom.builder
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 commit = @repository.commit(tag.dereferenced_target)
 release = @releases.find { |r| r.tag == tag.name }
 tag_url = project_tag_url(@project, tag.name)
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index 9d4e5d629f4..61b357831fd 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -41,6 +41,6 @@
     = render 'projects/buttons/download', project: @project, ref: tag.name, pipeline: @tags_pipelines[tag.name]
 
     - if can?(current_user, :admin_tag, @project)
-      = link_to edit_project_tag_release_path(@project, tag.name), class: 'btn btn-edit has-tooltip', title: s_('TagsPage|Edit release notes'), data: { container: "body" } do
+      = link_to edit_project_tag_release_path(@project, tag.name), class: 'btn gl-button btn-default btn-icon btn-edit has-tooltip', title: s_('TagsPage|Edit release notes'), data: { container: "body" } do
         = sprite_icon("pencil")
       = render 'projects/buttons/remove_tag', project: @project, tag: tag
diff --git a/app/views/projects/tags/index.atom.builder b/app/views/projects/tags/index.atom.builder
index b9b58b7beaa..68d51ebc89c 100644
--- a/app/views/projects/tags/index.atom.builder
+++ b/app/views/projects/tags/index.atom.builder
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 xml.title   "#{@project.name} tags"
 xml.link    href: project_tags_url(@project, @ref, rss_url_options), rel: 'self', type: 'application/atom+xml'
 xml.link    href: project_tags_url(@project, @ref), rel: 'alternate', type: 'text/html'
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 2fe5c5888f5..04d8c1f42bc 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -24,9 +24,9 @@
             %li
               = link_to title, filter_tags_path(sort: value), class: ("is-active" if @sort == value)
       - if can?(current_user, :admin_tag, @project)
-        = link_to new_project_tag_path(@project), class: 'btn btn-success new-tag-btn', data: { qa_selector: "new_tag_button" } do
+        = link_to new_project_tag_path(@project), class: 'btn gl-button btn-success', data: { qa_selector: "new_tag_button" } do
           = s_('TagsPage|New tag')
-      = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn btn-svg d-none d-sm-inline-block has-tooltip' do
+      = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-block has-tooltip' do
         = sprite_icon('rss', css_class: 'qa-rss-icon')
 
   = render_if_exists 'projects/commits/mirror_status'
diff --git a/app/views/projects/tags/releases/edit.html.haml b/app/views/projects/tags/releases/edit.html.haml
index 896dbe454e6..d82c89a3f9f 100644
--- a/app/views/projects/tags/releases/edit.html.haml
+++ b/app/views/projects/tags/releases/edit.html.haml
@@ -15,5 +15,5 @@
     = render 'shared/notes/hints'
   .error-alert
   .gl-mt-3
-    = f.submit 'Save changes', class: 'btn btn-success'
-    = link_to "Cancel", project_tag_path(@project, @tag.name), class: "btn btn-default btn-cancel"
+    = f.submit 'Save changes', class: 'btn gl-button btn-success'
+    = link_to "Cancel", project_tag_path(@project, @tag.name), class: "btn gl-button btn-default btn-cancel"
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index d726d2ab233..b3a75494ccc 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -42,13 +42,13 @@
     - if @tag.has_signature?
       = render partial: 'projects/commit/signature', object: @tag.signature
     - if can?(current_user, :admin_tag, @project)
-      = link_to edit_project_tag_release_path(@project, @tag.name), class: 'btn btn-icon btn-edit gl-button controls-item has-tooltip', title: s_('TagsPage|Edit release notes') do
+      = link_to edit_project_tag_release_path(@project, @tag.name), class: 'btn btn-icon btn-edit gl-button btn-default controls-item has-tooltip', title: s_('TagsPage|Edit release notes') do
         = sprite_icon("pencil", css_class: 'gl-icon')
-    = link_to project_tree_path(@project, @tag.name), class: 'btn btn-icon gl-button controls-item has-tooltip', title: s_('TagsPage|Browse files') do
+    = link_to project_tree_path(@project, @tag.name), class: 'btn btn-icon gl-button btn-default controls-item has-tooltip', title: s_('TagsPage|Browse files') do
       = sprite_icon('folder-open', css_class: 'gl-icon')
-    = link_to project_commits_path(@project, @tag.name), class: 'btn btn-icon gl-button controls-item has-tooltip', title: s_('TagsPage|Browse commits') do
+    = link_to project_commits_path(@project, @tag.name), class: 'btn btn-icon gl-button btn-default controls-item has-tooltip', title: s_('TagsPage|Browse commits') do
       = sprite_icon('history', css_class: 'gl-icon')
-    .btn-container.controls-item
+    .controls-item
       = render 'projects/buttons/download', project: @project, ref: @tag.name
     - if can?(current_user, :admin_tag, @project)
       .btn-container.controls-item-full
diff --git a/app/views/projects/tree/_readme.html.haml b/app/views/projects/tree/_readme.html.haml
deleted file mode 100644
index 6d2bdda8254..00000000000
--- a/app/views/projects/tree/_readme.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-- if readme.rich_viewer
-  %article.file-holder.readme-holder{ id: 'readme', class: [("limited-width-container" unless fluid_layout)] }
-    .js-file-title.file-title-flex-parent
-      .file-header-content
-        = blob_icon readme.mode, readme.name
-        = link_to project_blob_path(@project, tree_join(@ref, readme.path)) do
-          %strong
-            = readme.name
-
-    = render 'projects/blob/viewer', viewer: readme.rich_viewer, viewer_url: project_blob_path(@project, tree_join(@ref, readme.path), viewer: :rich, format: :json)
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
deleted file mode 100644
index a4427c6eedb..00000000000
--- a/app/views/projects/tree/_tree_content.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-.tree-content-holder.js-tree-content{ data: tree_content_data(@logs_path, @project, @path) }
-  .table-holder.bordered-box
-    %table.table#tree-slider{ class: "table_#{@hex_path} tree-table" }
-      %thead
-        %tr
-          %th= s_('ProjectFileTree|Name')
-          %th.d-none.d-sm-table-cell
-            .float-left= _('Last commit')
-          %th.text-right= _('Last update')
-      - if @path.present?
-        %tr.tree-item
-          %td.tree-item-file-name
-            = link_to "..", project_tree_path(@project, up_dir_path), class: 'gl-ml-3'
-          %td
-          %td.d-none.d-sm-table-cell
-
-      = render_tree(tree)
-
-  - if tree.readme
-    = render "projects/tree/readme", readme: tree.readme
-
-- if can_edit_tree?
-  = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
-  = render 'projects/blob/new_dir'
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index cd6e85d60ed..6d33fbb535e 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -11,11 +11,6 @@
 
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil
-
-    - if show_xcode_link?(@project)
-      .project-action-button.project-xcode<
-        = render "projects/buttons/xcode_link"
-
     = render 'projects/buttons/download', project: @project, ref: @ref
 
     .project-clone-holder.d-none.d-md-inline-block>
diff --git a/app/views/projects/tree/_tree_row.html.haml b/app/views/projects/tree/_tree_row.html.haml
deleted file mode 100644
index 04496914c02..00000000000
--- a/app/views/projects/tree/_tree_row.html.haml
+++ /dev/null
@@ -1,27 +0,0 @@
-- tree_row_name = tree_row.name
-- tree_row_type = tree_row.type
-
-%tr{ class: "tree-item file_#{hexdigest(tree_row_name)}" }
-  %td.tree-item-file-name
-    - if tree_row_type == :tree
-      = tree_icon('folder', tree_row.mode, tree_row.name)
-      - path = flatten_tree(@path, tree_row)
-      %a.str-truncated{ href: fast_project_tree_path(@project, tree_join(@id || @commit.id, path)), title: path }
-        %span= path
-
-    - elsif tree_row_type == :blob
-      = tree_icon('file', tree_row.mode, tree_row_name)
-      %a.str-truncated{ href: fast_project_blob_path(@project, tree_join(@id || @commit.id, tree_row_name)), title: tree_row_name }
-        %span= tree_row_name
-      - if @lfs_blob_ids.include?(tree_row.id)
-        %span.badge.label-lfs.gl-ml-2 LFS
-
-    - elsif tree_row_type == :commit
-      = tree_icon('archive', tree_row.mode, tree_row.name)
-      = submodule_link(tree_row, @ref)
-
-  %td.d-none.d-sm-table-cell.tree-commit
-  %td.tree-time-ago.text-right
-    %span.log_loading.hide
-      = loading_icon
-      Loading commit data...
diff --git a/app/views/projects/tree/_truncated_notice_tree_row.html.haml b/app/views/projects/tree/_truncated_notice_tree_row.html.haml
deleted file mode 100644
index a03e0a549ee..00000000000
--- a/app/views/projects/tree/_truncated_notice_tree_row.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-%tr.tree-truncated-warning
-  %td{ colspan: '3' }
-    = sprite_icon('warning-solid')
-    %span
-      Too many items to show. To preserve performance only
-      %strong #{number_with_delimiter(limit)} of #{number_with_delimiter(total)}
-      items are displayed.
diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml
index dec71cdb56a..1dbf8addb57 100644
--- a/app/views/projects/triggers/_form.html.haml
+++ b/app/views/projects/triggers/_form.html.haml
@@ -7,5 +7,5 @@
       %p.form-control-plaintext= @trigger.token
   .form-group
     = f.label :key, "Description", class: "label-bold"
-    = f.text_field :description, class: "form-control", required: true, title: 'Trigger description is required.', placeholder: "Trigger description"
+    = f.text_field :description, class: 'form-control gl-form-input', required: true, title: 'Trigger description is required.', placeholder: "Trigger description"
   = f.submit btn_text, class: "btn btn-success"
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index 4f39c839630..c7cb051e40d 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -2,7 +2,7 @@
   .col-lg-12
     .card
       .card-header
-        Manage your project's triggers
+        = s_("Manage your project's triggers")
       .card-body
         = render "projects/triggers/form", btn_text: "Add trigger"
         %hr
@@ -14,39 +14,33 @@
               %table.table
                 %thead
                   %th
-                    %strong Token
+                    %strong
+                    = s_("Token")
                   %th
-                    %strong Description
+                    %strong
+                    = s_("Description")
                   %th
-                    %strong Owner
+                    %strong
+                    = s_("Owner")
                   %th
-                    %strong Last used
+                    %strong
+                    = s_("Last used")
                   %th
                 = render partial: 'projects/triggers/trigger', collection: @triggers, as: :trigger
           - else
             %p.settings-message.text-center.gl-mb-3{ data: { testid: 'no_triggers_content' } }
-              No triggers have been created yet. Add one using the form above.
+              = s_("No triggers exist yet. Use the form above to create one.")
 
       .card-footer
 
         %p
-          In the following examples, you can see the exact API call you need to
-          make in order to rebuild a specific
-          %code ref
-          (branch or tag) with a trigger token.
-        %p
-          All you need to do is replace the
-          %code TOKEN
-          and
-          %code REF_NAME
-          with the trigger token and the branch or tag name respectively.
-
-        %h5.gl-mt-3
-          Use cURL
+          = s_("These examples show how to trigger this project's pipeline for a branch or tag.")
 
         %p.light
-          Copy one of the tokens above, set your branch or tag name, and that
-          reference will be rebuilt.
+          = s_("Triggers|In each example, replace %{code_start}TOKEN%{code_end} with the trigger token you generated and replace %{code_start}REF_NAME%{code_end} with the branch or tag name.").html_safe % { code_start: "<code>".html_safe, code_end: "</code>".html_safe }
+
+        %h5.gl-mt-3
+          = s_("Use cURL")
 
         %pre
           :plain
@@ -55,39 +49,26 @@
                  -F ref=REF_NAME \
                  #{builds_trigger_url(@project.id)}
         %h5.gl-mt-3
-          Use .gitlab-ci.yml
-
-        %p.light
-          In the
-          %code .gitlab-ci.yml
-          of another project, include the following snippet.
-          The project will be rebuilt at the end of the pipeline.
+          = s_("Use .gitlab-ci.yml")
 
         %pre
           :plain
-            trigger_build:
-              stage: deploy
-              script:
-                - "curl -X POST -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
+            script:
+              - "curl -X POST -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
         %h5.gl-mt-3
-          Use webhook
-
-        %p.light
-          Add the following webhook to another project for Push and Tag push events.
-          The project will be rebuilt at the corresponding event.
+          = s_("Use webhook")
 
         %pre
           :plain
-             #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN
+            #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN
         %h5.gl-mt-3
-          Pass job variables
+          = s_("Pass job variables")
 
         %p.light
-          Add
-          %code variables[VARIABLE]=VALUE
-          to an API request. Variable values can be used to distinguish between triggered pipelines and normal pipelines.
+          = s_("Triggers|To pass variables to the triggered pipeline, add %{code_start}variables[VARIABLE]=VALUE%{code_end} to the API request.").html_safe % { code_start: "<code>".html_safe, code_end: "</code>".html_safe }
 
-          With cURL:
+        %p.light
+          = s_("cURL:")
 
         %pre
           :plain
@@ -97,8 +78,8 @@
                  -F "variables[RUN_NIGHTLY_BUILD]=true" \
                  #{builds_trigger_url(@project.id)}
         %p.light
-          With webhook:
+          = s_("Webhook:")
 
         %pre.gl-mb-0
           :plain
-             #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN&variables[RUN_NIGHTLY_BUILD]=true
+            #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN&variables[RUN_NIGHTLY_BUILD]=true