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

59 files changed, 231 insertions, 202 deletions

diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml
index 443d801d672..d6d84b2181f 100644
--- a/app/views/shared/_auto_devops_callout.html.haml
+++ b/app/views/shared/_auto_devops_callout.html.haml
@@ -8,7 +8,7 @@
     %p
       - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer')
       = s_('AutoDevOps|Learn more in the %{link_to_documentation}').html_safe % { link_to_documentation: link }
-    = link_to s_('AutoDevOps|Enable in settings'), project_settings_ci_cd_path(@project, anchor: 'autodevops-settings'), class: 'btn btn-md new-gl-button js-close-callout'
+    = link_to s_('AutoDevOps|Enable in settings'), project_settings_ci_cd_path(@project, anchor: 'autodevops-settings'), class: 'btn btn-md btn-default gl-button js-close-callout'
 
   %button.gl-banner-close.close.js-close-callout{ type: 'button',
   'aria-label' => s_('AutoDevOps|Dismiss Auto DevOps box') }
diff --git a/app/views/shared/_commit_message_container.html.haml b/app/views/shared/_commit_message_container.html.haml
index d65b7492690..47ecc75af1f 100644
--- a/app/views/shared/_commit_message_container.html.haml
+++ b/app/views/shared/_commit_message_container.html.haml
@@ -8,7 +8,7 @@
       .max-width-marker
       = text_area_tag 'commit_message',
           (params[:commit_message] || local_assigns[:text] || local_assigns[:placeholder]),
-          class: 'form-control js-commit-message', placeholder: local_assigns[:placeholder],
+          class: 'form-control gl-form-input js-commit-message', placeholder: local_assigns[:placeholder],
           data: descriptions,
           required: true, rows: (local_assigns[:rows] || 3),
           id: "commit_message-#{nonce}"
diff --git a/app/views/shared/_email_with_badge.html.haml b/app/views/shared/_email_with_badge.html.haml
index 294fe74a5ca..8b9ca966ed6 100644
--- a/app/views/shared/_email_with_badge.html.haml
+++ b/app/views/shared/_email_with_badge.html.haml
@@ -1,5 +1,5 @@
-- css_classes = %w(badge badge-verification-status)
-- css_classes << (verified ? 'verified': 'unverified')
+- css_classes = %w(badge gl-badge)
+- css_classes << (verified ? 'badge-success': 'badge-danger')
 - text = verified ? _('Verified') : _('Unverified')
 
 .email-badge
diff --git a/app/views/shared/_file_picker_button.html.haml b/app/views/shared/_file_picker_button.html.haml
index 8c10e4958b9..9e6a7626d89 100644
--- a/app/views/shared/_file_picker_button.html.haml
+++ b/app/views/shared/_file_picker_button.html.haml
@@ -1,7 +1,7 @@
 - classes = local_assigns.fetch(:classes, '')
 
 %span.js-filepicker
-  %button.btn.js-filepicker-button{ type: 'button', class: classes }= _("Choose file…")
+  %button.gl-button.btn.js-filepicker-button{ type: 'button', class: classes }= _("Choose file…")
   %span.file_name.js-filepicker-filename= _("No file chosen")
   = f.file_field field, class: "js-filepicker-input hidden"
   - if help_text.present?
diff --git a/app/views/shared/_issuable_meta_data.html.haml b/app/views/shared/_issuable_meta_data.html.haml
index 352d51dbb8e..4b006bddbf6 100644
--- a/app/views/shared/_issuable_meta_data.html.haml
+++ b/app/views/shared/_issuable_meta_data.html.haml
@@ -5,23 +5,23 @@
 - issuable_mr        = @issuable_meta_data[issuable.id].merge_requests_count
 
 - if issuable_mr > 0
-  %li.issuable-mr.gl-display-none.gl-display-sm-block.has-tooltip{ title: _('Related merge requests') }
+  %li.issuable-mr.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Related merge requests') }
     = sprite_icon('merge-request', css_class: "gl-vertical-align-middle")
     = issuable_mr
 
 - if upvotes > 0
-  %li.issuable-upvotes.gl-display-none.gl-display-sm-block.has-tooltip{ title: _('Upvotes') }
+  %li.issuable-upvotes.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Upvotes') }
     = sprite_icon('thumb-up', css_class: "gl-vertical-align-middle")
     = upvotes
 
 - if downvotes > 0
-  %li.issuable-downvotes.gl-display-none.gl-display-sm-block.has-tooltip{ title: _('Downvotes') }
+  %li.issuable-downvotes.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Downvotes') }
     = sprite_icon('thumb-down', css_class: "gl-vertical-align-middle")
     = downvotes
 
 = render_if_exists 'shared/issuable/blocking_issues_count', issuable: issuable
 
-%li.issuable-comments.gl-display-none.gl-display-sm-block
+%li.issuable-comments.gl-display-none.gl-sm-display-block
   = link_to issuable_path, class: ['has-tooltip', ('no-comments' if note_count == 0)], title: _('Comments') do
     = sprite_icon('comments', css_class: 'gl-vertical-align-text-bottom')
     = note_count
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index 4b09e8de896..95d7f075964 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -29,7 +29,7 @@
             %ul
               - if label.project_label? && label.project.group && can?(current_user, :admin_label, label.project.group)
                 %li
-                  %button.js-promote-project-label-button.btn.btn-transparent.btn-action{ disabled: true, type: 'button',
+                  %button.js-promote-project-label-button.btn.btn-transparent{ disabled: true, type: 'button',
                     data: { url: promote_project_label_path(label.project, label),
                             label_title: label.title,
                             label_color: label.color,
@@ -43,10 +43,10 @@
     - if current_user
       %li.inline.label-subscription
         - if label.can_subscribe_to_label_in_different_levels?
-          %button.js-unsubscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
+          %button.js-unsubscribe-button.gl-button.label-subscribe-button.btn.btn-default.gl-ml-3{ class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
             %span= _('Unsubscribe')
           .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) }
-            %button.label-subscribe-button.btn.btn-default{ data: { toggle: 'dropdown' } }
+            %button.gl-button.label-subscribe-button.btn.btn-default.gl-ml-3{ data: { toggle: 'dropdown' } }
               %span
                 = _('Subscribe')
                 = sprite_icon('chevron-down')
@@ -59,7 +59,7 @@
                   %button.js-subscribe-button.js-group-level.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } }
                     %span= _('Subscribe at group level')
         - else
-          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ data: { status: status, url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
+          %button.gl-button.js-subscribe-button.label-subscribe-button.btn.btn-default.gl-ml-3{ data: { status: status, url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
             %span= label_subscription_toggle_button_text(label, @project)
 
 = render 'shared/delete_label_modal', label: label
diff --git a/app/views/shared/_milestone_expired.html.haml b/app/views/shared/_milestone_expired.html.haml
index 2261e9e3121..171ae9d2c07 100644
--- a/app/views/shared/_milestone_expired.html.haml
+++ b/app/views/shared/_milestone_expired.html.haml
@@ -1,6 +1,6 @@
 - if milestone.expired? and not milestone.closed?
-  .status-box.status-box-expired.gl-mb-2= _('Expired')
+  .gl-badge.badge-warning.badge-pill.gl-mb-2= _('Expired')
 - if milestone.upcoming?
-  .status-box.status-box-mr-merged.gl-mb-2= _('Upcoming')
+  .gl-badge.badge-primary.badge-pill.gl-mb-2= _('Upcoming')
 - if milestone.closed?
-  .status-box.status-box-closed.gl-mb-2= _('Closed')
+  .gl-badge.badge-danger.badge-pill.gl-mb-2= _('Closed')
diff --git a/app/views/shared/_new_commit_form.html.haml b/app/views/shared/_new_commit_form.html.haml
index 81c33eeea4f..62ba89e2576 100644
--- a/app/views/shared/_new_commit_form.html.haml
+++ b/app/views/shared/_new_commit_form.html.haml
@@ -10,7 +10,7 @@
     .form-group.row.branch
       = label_tag 'branch_name', _('Target Branch'), class: 'col-form-label col-sm-2'
       .col-sm-10
-        = text_field_tag 'branch_name', branch_name, required: true, class: "form-control js-branch-name ref-name"
+        = text_field_tag 'branch_name', branch_name, required: true, class: "form-control gl-form-input js-branch-name ref-name"
 
         .js-create-merge-request-container
           = render 'shared/new_merge_request_checkbox'
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index 0a7fa2a3c1e..2c6ceb58654 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -6,5 +6,5 @@
     .gl-alert-body
       = s_("MissingSSHKeyWarningLink|You won't be able to pull or push repositories via SSH until you add an SSH key to your profile")
     .gl-alert-actions
-      = link_to s_('MissingSSHKeyWarningLink|Add SSH key'), profile_keys_path, class: "btn gl-alert-action btn-warning btn-md new-gl-button"
+      = link_to s_('MissingSSHKeyWarningLink|Add SSH key'), profile_keys_path, class: "btn gl-alert-action btn-warning btn-md gl-button"
       = link_to s_("MissingSSHKeyWarningLink|Don't show again"), profile_path(user: {hide_no_ssh_key: true}), method: :put, role: 'button', class: 'btn gl-alert-action btn-md btn-warning gl-button btn-warning-secondary'
diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml
index 3d5229f87b5..9110f5a7f31 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -1,5 +1,5 @@
 - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
-  .project-limit-message.gl-alert.gl-alert-warning.gl-display-none.gl-display-sm-block
+  .project-limit-message.gl-alert.gl-alert-warning.gl-display-none.gl-sm-display-block
     = _("You won't be able to create new projects because you have reached your project limit.")
 
     .float-right
diff --git a/app/views/shared/_search_settings.html.haml b/app/views/shared/_search_settings.html.haml
index ea3d7b97327..d689e9ae5c0 100644
--- a/app/views/shared/_search_settings.html.haml
+++ b/app/views/shared/_search_settings.html.haml
@@ -1,2 +1,6 @@
+- container_class = local_assigns.fetch(:container_class, 'gl-mt-5')
+
 - if Feature.enabled?(:search_settings_in_page, @project, default_enabled: false)
-  .js-search-settings-app
+  %div{ class: container_class }
+    .js-search-settings-app
+      %input.gl-form-input.form-control{ type: "text", placeholder: _("Search settings"), aria_label: _("Search settings"), disabled: true }
diff --git a/app/views/shared/_service_settings.html.haml b/app/views/shared/_service_settings.html.haml
index 194e0eb57f2..7af356c0820 100644
--- a/app/views/shared/_service_settings.html.haml
+++ b/app/views/shared/_service_settings.html.haml
@@ -1,13 +1,14 @@
 = form_errors(integration)
 
-- if lookup_context.template_exists?('help', "projects/services/#{integration.to_param}", true)
-  = render "projects/services/#{integration.to_param}/help", subject: integration
-- elsif integration.help.present?
-  .info-well
-    .well-segment
-      = markdown integration.help
-
 .service-settings
   - if @default_integration
     .js-vue-default-integration-settings{ data: integration_form_data(@default_integration, group: @group) }
   .js-vue-integration-settings{ data: integration_form_data(integration, group: @group) }
+    .js-integration-help-html.gl-display-none
+      -# All content below will be repositioned in Vue
+      - if lookup_context.template_exists?('help', "projects/services/#{integration.to_param}", true)
+        = render "projects/services/#{integration.to_param}/help", subject: integration
+      - elsif integration.help.present?
+        .info-well
+          .well-segment
+            = markdown integration.help
diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml
index f206a2152c2..089643f4748 100644
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
@@ -30,4 +30,4 @@
     = render 'shared/tokens/scopes_form', prefix: prefix, token: token, scopes: scopes
 
   .gl-mt-3
-    = f.submit _('Create %{type}') % { type: type }, class: 'btn btn-success', data: { qa_selector: 'create_token_button' }
+    = f.submit _('Create %{type}') % { type: type }, class: 'gl-button btn btn-success', data: { qa_selector: 'create_token_button' }
diff --git a/app/views/shared/access_tokens/_table.html.haml b/app/views/shared/access_tokens/_table.html.haml
index 50daa400e6c..d7c74255578 100644
--- a/app/views/shared/access_tokens/_table.html.haml
+++ b/app/views/shared/access_tokens/_table.html.haml
@@ -43,7 +43,7 @@
               - else
                 %span.token-never-expires-label= _('Never')
             %td= token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
-            %td= link_to _('Revoke'), revoke_route_helper.call(token), method: :put, class: 'btn btn-danger float-right qa-revoke-button', data: { confirm: _('Are you sure you want to revoke this %{type}? This action cannot be undone.') % { type: type } }
+            %td= link_to _('Revoke'), revoke_route_helper.call(token), method: :put, class: 'gl-button btn btn-danger float-right qa-revoke-button', data: { confirm: _('Are you sure you want to revoke this %{type}? This action cannot be undone.') % { type: type } }
 - else
   .settings-message.text-center
     = no_active_tokens_message
diff --git a/app/views/shared/boards/_show.html.haml b/app/views/shared/boards/_show.html.haml
index e4222d8a4fe..ababbdc7eb9 100644
--- a/app/views/shared/boards/_show.html.haml
+++ b/app/views/shared/boards/_show.html.haml
@@ -6,7 +6,10 @@
 - @no_breadcrumb_container = true
 - @no_container = true
 - @content_class = "issue-boards-content js-focus-mode-board"
-- breadcrumb_title _("Issue Boards")
+- if board.to_type == "EpicBoard"
+  - breadcrumb_title _("Epic Boards")
+- else
+  - breadcrumb_title _("Issue Boards")
 - page_title("#{board.name}", _("Boards"))
 - add_page_specific_style 'page_bundles/boards'
 
diff --git a/app/views/shared/boards/components/_sidebar.html.haml b/app/views/shared/boards/components/_sidebar.html.haml
index b4f75967a67..3daa13fb488 100644
--- a/app/views/shared/boards/components/_sidebar.html.haml
+++ b/app/views/shared/boards/components/_sidebar.html.haml
@@ -1,6 +1,6 @@
 %board-sidebar{ "inline-template" => true, ":current-user" => (UserSerializer.new.represent(current_user) || {}).to_json }
   %transition{ name: "boards-sidebar-slide" }
-    %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
+    %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar", 'aria-label': s_('Boards|Board') }
       .issuable-sidebar
         .block.issuable-sidebar-header.position-relative
           %span.issuable-header-text.hide-collapsed.float-left
diff --git a/app/views/shared/boards/components/sidebar/_assignee.html.haml b/app/views/shared/boards/components/sidebar/_assignee.html.haml
index e22a7807b3b..c36f2c7c969 100644
--- a/app/views/shared/boards/components/sidebar/_assignee.html.haml
+++ b/app/views/shared/boards/components/sidebar/_assignee.html.haml
@@ -1,31 +1,9 @@
+- dropdown_options = assignees_dropdown_options('issue')
+
 .block.assignee{ ref: "assigneeBlock" }
   %template{ "v-if" => "issue.assignees" }
-    %assignee-title{ ":number-of-assignees" => "issue.assignees.length",
-      ":loading" => "loadingAssignees",
-      ":editable" => can_admin_issue? }
-    %assignees.value{ "root-path" => "#{root_url}",
-      ":users" => "issue.assignees",
-      ":editable" => can_admin_issue?,
-      "@assign-self" => "assignSelf" }
-
-  - if can_admin_issue?
-    .selectbox.hide-collapsed
-      %input.js-vue{ type: "hidden",
-        name: "issue[assignee_ids][]",
-        ":value" => "assignee.id",
-        "v-if" => "issue.assignees",
-        "v-for" => "assignee in issue.assignees",
-        ":data-avatar_url" => "assignee.avatar",
-        ":data-name" => "assignee.name",
-        ":data-username" => "assignee.username" }
-      .dropdown
-        - dropdown_options = assignees_dropdown_options('issue')
-        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-multiselect.js-save-user-data.js-issue-board-sidebar{ type: 'button', ref: 'assigneeDropdown', data: board_sidebar_user_data,
-          ":data-issuable-id" => "issue.iid" }
-          = dropdown_options[:title]
-          = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
-        .dropdown-menu.dropdown-select.dropdown-menu-user.dropdown-menu-selectable.dropdown-menu-author
-          = dropdown_title("Assign to")
-          = dropdown_filter("Search users")
-          = dropdown_content
-          = dropdown_loading
+    %sidebar-assignees-widget{ ":iid" => "String(issue.iid)",
+      ":full-path" => "issue.path.split('/-/')[0].substring(1)",
+      ":initial-assignees" => "issue.assignees",
+      ":multiple-assignees" => "!Boolean(#{dropdown_options[:data][:"max-select"]})",
+      "@assignees-updated" => "setAssignees" }
diff --git a/app/views/shared/deploy_keys/_form.html.haml b/app/views/shared/deploy_keys/_form.html.haml
index 94742d96af7..37a56057268 100644
--- a/app/views/shared/deploy_keys/_form.html.haml
+++ b/app/views/shared/deploy_keys/_form.html.haml
@@ -6,7 +6,7 @@
 
 .form-group
   = form.label :title, class: 'col-form-label col-sm-2'
-  .col-sm-10= form.text_field :title, class: 'form-control', readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
+  .col-sm-10= form.text_field :title, class: 'form-control gl-form-input', readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
 
 .form-group
   - if deploy_key.new_record?
@@ -15,12 +15,12 @@
       %p.light
         - link_start = "<a href='#{help_page_path('ssh/README')}' target='_blank' rel='noreferrer noopener'>".html_safe
         - link_end = '</a>'
-        = _('Paste a machine public key here. Read more about how to generate it %{link_start}here%{link_end}').html_safe % { link_start: link_start, link_end: link_end.html_safe }
-      = form.text_area :key, class: 'form-control thin_area', rows: 5
+        = _('Paste a public key here. %{link_start}How do I generate it?%{link_end}').html_safe % { link_start: link_start, link_end: link_end.html_safe }
+      = form.text_area :key, class: 'form-control gl-form-input thin_area', rows: 5
   - else
     = form.label :fingerprint, class: 'col-form-label col-sm-2'
     .col-sm-10
-      = form.text_field :fingerprint, class: 'form-control', readonly: 'readonly'
+      = form.text_field :fingerprint, class: 'form-control gl-form-input', readonly: 'readonly'
 
 - if deploy_keys_project.present?
   = form.fields_for :deploy_keys_projects, deploy_keys_project do |deploy_keys_project_form|
@@ -29,6 +29,6 @@
       .col-sm-10
         = deploy_keys_project_form.label :can_push do
           = deploy_keys_project_form.check_box :can_push
-          %strong= _('Write access allowed')
+          %strong= _('Grant write permissions to this key')
         %p.light.gl-mb-0
-          = _('Allow this key to push to repository as well? (Default only allows pull access.)')
+          = _('Allow this key to push to this repository')
diff --git a/app/views/shared/deploy_keys/_index.html.haml b/app/views/shared/deploy_keys/_index.html.haml
index f2f577383f8..5d9c2cd25b4 100644
--- a/app/views/shared/deploy_keys/_index.html.haml
+++ b/app/views/shared/deploy_keys/_index.html.haml
@@ -1,14 +1,14 @@
 - expanded = expanded_by_default?
 %section.qa-deploy-keys-settings.settings.no-animate#js-deploy-keys-settings{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_keys_settings_content' } }
   .settings-header
-    %h4= _('Deploy Keys')
+    %h4= _('Deploy keys')
     %button.btn.js-settings-toggle{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
-      = _('Deploy keys allow read-only or read-write (if enabled) access to your repository. Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.')
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/deploy_keys/index') }
+      = _("Add deploy keys to grant read/write access to this repository. %{link_start}What are deploy keys?%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
   .settings-content
     %h5.gl-mt-0
-      = _('Create a new deploy key for this project')
     = render @deploy_keys.form_partial_path
     %hr
     #js-deploy-keys{ data: { endpoint: project_deploy_keys_path(@project), project_id: @project.id } }
diff --git a/app/views/shared/deploy_keys/_project_group_form.html.haml b/app/views/shared/deploy_keys/_project_group_form.html.haml
index 179ec33ee65..bad25086d9f 100644
--- a/app/views/shared/deploy_keys/_project_group_form.html.haml
+++ b/app/views/shared/deploy_keys/_project_group_form.html.haml
@@ -2,23 +2,23 @@
   = form_errors(@deploy_keys.new_key)
   .form-group.row
     = f.label :title, class: "label-bold"
-    = f.text_field :title, class: 'form-control', required: true
+    = f.text_field :title, class: 'form-control gl-form-input', required: true
   .form-group.row
     = f.label :key, class: "label-bold"
-    = f.text_area :key, class: "form-control", rows: 5, required: true
+    = f.text_area :key, class: 'form-control gl-form-input', rows: 5, required: true
   .form-group.row
     %p.light.gl-mb-0
-      = _('Paste a machine public key here. Read more about how to generate it')
-      = link_to "here", help_page_path("ssh/README")
+      = _('Paste a public key here.')
+      = link_to _('How do I generate it?'), help_page_path("ssh/README")
 
   = f.fields_for :deploy_keys_projects do |deploy_keys_project_form|
     .form-group.row
       = deploy_keys_project_form.label :can_push do
         = deploy_keys_project_form.check_box :can_push
-        %strong= _('Write access allowed')
+        %strong= _('Grant write permissions to this key')
     .form-group.row
       %p.light.gl-mb-0
-        = _('Allow this key to push to repository as well? (Default only allows pull access.)')
+        = _('Allow this key to push to this repository')
 
   .form-group.row
     = f.submit _("Add key"), class: "btn-success btn"
diff --git a/app/views/shared/deploy_tokens/_form.html.haml b/app/views/shared/deploy_tokens/_form.html.haml
index da634d37c55..052d68baf71 100644
--- a/app/views/shared/deploy_tokens/_form.html.haml
+++ b/app/views/shared/deploy_tokens/_form.html.haml
@@ -1,50 +1,51 @@
 %p.profile-settings-content
-  = s_("DeployTokens|Pick a name for the application, and we'll give you a unique deploy token.")
+  = s_("DeployTokens|Pick a name for your unique deploy token.")
 
 = form_for token, url: create_deploy_token_path(group_or_project, anchor: 'js-deploy-tokens'), method: :post, remote: Feature.enabled?(:ajax_new_deploy_token, group_or_project) do |f|
   = form_errors(token)
 
   .form-group
     = f.label :name, class: 'label-bold'
-    = f.text_field :name, class: 'form-control qa-deploy-token-name', required: true
+    = f.text_field :name, class: 'form-control gl-form-input qa-deploy-token-name', required: true
 
   .form-group
-    = f.label :expires_at, class: 'label-bold'
+    = f.label :expires_at, _('Expires at (optional)'), class: 'label-bold'
     = f.text_field :expires_at, class: 'datepicker form-control qa-deploy-token-expires-at', value: f.object.expires_at
+    .text-secondary= s_('DeployTokens|Unless you enter a date, the token does not expire.')
 
   .form-group
-    = f.label :username, class: 'label-bold'
+    = f.label :username, _('Username (optional)'), class: 'label-bold'
     = f.text_field :username, class: 'form-control qa-deploy-token-username'
-    .text-secondary= s_('DeployTokens|Default format is "gitlab+deploy-token-{n}". Enter custom username if you want to change it.')
+    .text-secondary= s_('DeployTokens|Unless you specify a username, it is set to "gitlab+deploy-token-{n}".')
 
   .form-group
-    = f.label :scopes, class: 'label-bold'
+    = f.label :scopes, _('Scopes [Select 1 or more]'), class: 'label-bold'
     %fieldset.form-group.form-check
       = f.check_box :read_repository, class: 'form-check-input qa-deploy-token-read-repository'
       = label_tag ("deploy_token_read_repository"), 'read_repository', class: 'label-bold form-check-label'
-      .text-secondary= s_('DeployTokens|Allows read-only access to the repository')
+      .text-secondary= s_('DeployTokens|Allows read-only access to the repository.')
 
     - if container_registry_enabled?(group_or_project)
       %fieldset.form-group.form-check
         = f.check_box :read_registry, class: 'form-check-input qa-deploy-token-read-registry'
         = label_tag ("deploy_token_read_registry"), 'read_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows read-only access to the registry images')
+        .text-secondary= s_('DeployTokens|Allows read-only access to registry images.')
 
       %fieldset.form-group.form-check
         = f.check_box :write_registry, class: 'form-check-input'
         = label_tag ("deploy_token_write_registry"), 'write_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows write access to the registry images')
+        .text-secondary= s_('DeployTokens|Allows write access to registry images.')
 
     - if packages_registry_enabled?(group_or_project)
       %fieldset.form-group.form-check
         = f.check_box :read_package_registry, class: 'form-check-input'
         = label_tag ("deploy_token_read_package_registry"), 'read_package_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows read access to the package registry')
+        .text-secondary= s_('DeployTokens|Allows read access to the package registry.')
 
       %fieldset.form-group.form-check
         = f.check_box :write_package_registry, class: 'form-check-input'
         = label_tag ("deploy_token_write_package_registry"), 'write_package_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows write access to the package registry')
+        .text-secondary= s_('DeployTokens|Allows write access to the package registry.')
 
   .gl-mt-3
-    = f.submit s_('DeployTokens|Create deploy token'), class: 'btn btn-success qa-create-deploy-token'
+    = f.submit s_('DeployTokens|Create deploy token'), class: 'btn gl-button btn-success qa-create-deploy-token'
diff --git a/app/views/shared/deploy_tokens/_index.html.haml b/app/views/shared/deploy_tokens/_index.html.haml
index c26400690a6..e64b8634cf5 100644
--- a/app/views/shared/deploy_tokens/_index.html.haml
+++ b/app/views/shared/deploy_tokens/_index.html.haml
@@ -2,7 +2,7 @@
 
 %section.qa-deploy-tokens-settings.settings.no-animate#js-deploy-tokens{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_tokens_settings_content' } }
   .settings-header
-    %h4= s_('DeployTokens|Deploy Tokens')
+    %h4= s_('DeployTokens|Deploy tokens')
     %button.gl-button.btn.js-settings-toggle.qa-expand-deploy-keys{ type: 'button' }
       = expanded ? 'Collapse' : 'Expand'
     %p
diff --git a/app/views/shared/deploy_tokens/_new_deploy_token.html.haml b/app/views/shared/deploy_tokens/_new_deploy_token.html.haml
index 738f2f9db70..41e50138220 100644
--- a/app/views/shared/deploy_tokens/_new_deploy_token.html.haml
+++ b/app/views/shared/deploy_tokens/_new_deploy_token.html.haml
@@ -1,18 +1,24 @@
 .qa-created-deploy-token-section.created-deploy-token-container.info-well
   .well-segment
     %h5.gl-mt-0
-      = s_('DeployTokens|Your New Deploy Token')
+      = s_('DeployTokens|Your new Deploy Token username')
 
     .form-group
       .input-group
         = text_field_tag 'deploy-token-user', deploy_token.username, readonly: true, class: 'deploy-token-field form-control js-select-on-focus qa-deploy-token-user'
         .input-group-append
           = clipboard_button(text: deploy_token.username, title: s_('DeployTokens|Copy username'), placement: 'left')
-      %span.deploy-token-help-block.gl-mt-2.text-success= s_("DeployTokens|Use this username as a login.")
+      %span.deploy-token-help-block.gl-mt-2.text-success
+        - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/deploy_tokens/index.md') }
+        - link_end = "</a>".html_safe
+        = s_("DeployTokens|This username supports access. %{link_start}What kind of access?%{link_end}").html_safe % { link_start: link_start, link_end: link_end }
 
     .form-group
       .input-group
         = text_field_tag 'deploy-token', deploy_token.token, readonly: true, class: 'deploy-token-field form-control js-select-on-focus qa-deploy-token'
         .input-group-append
           = clipboard_button(text: deploy_token.token, title: s_('DeployTokens|Copy deploy token'), placement: 'left')
-      %span.deploy-token-help-block.gl-mt-2.text-danger= s_("DeployTokens|Use this token as a password. Make sure you save it - you won't be able to access it again.")
+      %span.deploy-token-help-block.gl-mt-2.text-danger
+        - i_start = "<i>".html_safe
+        - i_end = "</i>".html_safe
+        = s_("DeployTokens|Use this token as a password. Save it. This password can %{i_start}not%{i_end} be recovered.").html_safe % { i_start: i_start, i_end: i_end }
diff --git a/app/views/shared/deploy_tokens/_table.html.haml b/app/views/shared/deploy_tokens/_table.html.haml
index 361471af0ad..ad3c53c4925 100644
--- a/app/views/shared/deploy_tokens/_table.html.haml
+++ b/app/views/shared/deploy_tokens/_table.html.haml
@@ -24,7 +24,7 @@
               - else
                 %span.token-never-expires-label= _('Never')
             %td= token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
-            %td= link_to s_('DeployTokens|Revoke'), "#", class: "btn btn-danger float-right", data: { toggle: "modal", target: "#revoke-modal-#{token.id}"}
+            %td= link_to s_('DeployTokens|Revoke'), "#", class: "gl-button btn btn-danger float-right", data: { toggle: "modal", target: "#revoke-modal-#{token.id}"}
             = render 'shared/deploy_tokens/revoke_modal', token: token, group_or_project: group_or_project
 - else
   .settings-message.text-center
diff --git a/app/views/shared/empty_states/_deploy_keys.html.haml b/app/views/shared/empty_states/_deploy_keys.html.haml
index da34b866aa6..6fca64d805b 100644
--- a/app/views/shared/empty_states/_deploy_keys.html.haml
+++ b/app/views/shared/empty_states/_deploy_keys.html.haml
@@ -4,6 +4,6 @@
       = image_tag 'illustrations/empty-state/empty-deploy-keys-lg.svg'
   .gl-flex-grow-0.gl-flex-shrink-0
     .text-content.gl-mx-auto.gl-my-0.gl-p-5
-      %h4.h4= _('Deploy keys allow read-only or read-write (if enabled) access to your repository')
-      %p= _('Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.')
+      %h4.h4= _('Deploy Keys')
+      %p= _('Deploy keys grant read/write access to all repositories in your instance')
       = link_to _('New deploy key'), new_admin_deploy_key_path, class: 'btn btn-success btn-md gl-button'
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
index 8c5319e2178..997bc7b8a98 100644
--- a/app/views/shared/empty_states/_issues.html.haml
+++ b/app/views/shared/empty_states/_issues.html.haml
@@ -42,7 +42,7 @@
             - if project_select_button
               = render 'shared/new_project_item_select', path: 'issues/new', label: _('New issue'), type: :issues, with_feature_enabled: 'issues'
             - else
-              = link_to _('New issue'), button_path, class: 'btn btn-success', id: 'new_issue_link'
+              = link_to _('New issue'), button_path, class: 'btn gl-button btn-success', id: 'new_issue_link'
 
             - if show_import_button
               = render 'projects/issues/import_csv/button', type: :text
diff --git a/app/views/shared/empty_states/_milestones.html.haml b/app/views/shared/empty_states/_milestones.html.haml
new file mode 100644
index 00000000000..c22869fb7e6
--- /dev/null
+++ b/app/views/shared/empty_states/_milestones.html.haml
@@ -0,0 +1,7 @@
+.row.empty-state
+  .col-12
+    .svg-content
+      = image_tag 'illustrations/milestone_burndown_chart.svg'
+  .col-12
+    .text-content
+      %h4.text-center= _('No milestones to show')
diff --git a/app/views/shared/empty_states/_profile_tabs.html.haml b/app/views/shared/empty_states/_profile_tabs.html.haml
index 38c9fe7179c..abcf9740200 100644
--- a/app/views/shared/empty_states/_profile_tabs.html.haml
+++ b/app/views/shared/empty_states/_profile_tabs.html.haml
@@ -1,5 +1,6 @@
 - current_user_empty_message_description = local_assigns.fetch(:current_user_empty_message_description, nil)
 - secondary_button_link = local_assigns.fetch(:secondary_button_link, nil)
+- primary_button_link = local_assigns.fetch(:primary_button_link, nil)
 
 .nothing-here-block
   .svg-content
@@ -12,9 +13,9 @@
           %p= current_user_empty_message_description
 
         - if secondary_button_link.present?
-          = link_to secondary_button_label, secondary_button_link, class: 'btn btn-success btn-inverted'
+          = link_to secondary_button_label, secondary_button_link, class: 'gl-button btn btn-success btn-inverted'
 
         - if primary_button_link.present?
-          = link_to primary_button_label, primary_button_link, class: 'btn btn-success'
+          = link_to primary_button_label, primary_button_link, class: 'gl-button btn btn-success'
       - else
         %h5= visitor_empty_message
diff --git a/app/views/shared/empty_states/_snippets.html.haml b/app/views/shared/empty_states/_snippets.html.haml
index aa762782c46..105efcc3c88 100644
--- a/app/views/shared/empty_states/_snippets.html.haml
+++ b/app/views/shared/empty_states/_snippets.html.haml
@@ -12,7 +12,7 @@
           = s_('SnippetsEmptyState|Store, share, and embed small pieces of code and text.')
         .mt-2<
           - if button_path
-            = link_to s_('SnippetsEmptyState|New snippet'), button_path, class: 'btn btn-success', title: s_('SnippetsEmptyState|New snippet'), id: 'new_snippet_link', data: { qa_selector: 'create_first_snippet_link' }
-          = link_to s_('SnippetsEmptyState|Documentation'), help_page_path('user/snippets.md'), class: 'btn btn-default', title: s_('SnippetsEmptyState|Documentation')
+            = link_to s_('SnippetsEmptyState|New snippet'), button_path, class: 'btn gl-button btn-success', title: s_('SnippetsEmptyState|New snippet'), id: 'new_snippet_link', data: { qa_selector: 'create_first_snippet_link' }
+          = link_to s_('SnippetsEmptyState|Documentation'), help_page_path('user/snippets.md'), class: 'btn gl-button btn-default', title: s_('SnippetsEmptyState|Documentation')
       - else
         %h4.text-center= s_('SnippetsEmptyState|There are no snippets to show.')
diff --git a/app/views/shared/integrations/_form.html.haml b/app/views/shared/integrations/_form.html.haml
index 11e390a47e2..62f8d986296 100644
--- a/app/views/shared/integrations/_form.html.haml
+++ b/app/views/shared/integrations/_form.html.haml
@@ -1,10 +1,7 @@
 - integration = local_assigns.fetch(:integration)
 
-.row.gl-mt-3
-  .col-lg-4
-    %h3.page-title.gl-mt-0
-      = integration.title
+%h3.page-title
+  = integration.title
 
-  .col-lg-8
-    = form_for integration, as: :service, url: scoped_integration_path(integration), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => scoped_test_integration_path(integration) } } do |form|
-      = render 'shared/service_settings', form: form, integration: integration
+= form_for integration, as: :service, url: scoped_integration_path(integration), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => scoped_test_integration_path(integration) } } do |form|
+  = render 'shared/service_settings', form: form, integration: integration
diff --git a/app/views/shared/issuable/_board_create_list_dropdown.html.haml b/app/views/shared/issuable/_board_create_list_dropdown.html.haml
index b6cf23faff8..1a22a66d185 100644
--- a/app/views/shared/issuable/_board_create_list_dropdown.html.haml
+++ b/app/views/shared/issuable/_board_create_list_dropdown.html.haml
@@ -1,5 +1,5 @@
-.dropdown.gl-ml-3#js-add-list
-  %button.btn.btn-success.btn-inverted.js-new-board-list{ type: "button", data: board_list_data }
+.dropdown.gl-display-flex.gl-align-items-center.gl-ml-3#js-add-list
+  %button.gl-button.btn.btn-confirm.btn-confirm-secondary.js-new-board-list{ type: "button", data: board_list_data }
     Add list
   .dropdown-menu.dropdown-extended-height.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable.js-tab-container-labels
     = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
index 2f30958c877..b6fc1f4955b 100644
--- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml
+++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
@@ -1,14 +1,13 @@
 - type = local_assigns.fetch(:type)
-- bulk_issue_health_status_flag = type == :issues && @project&.group&.feature_available?(:issuable_health_status)
-- epic_bulk_edit_flag = @project&.group&.feature_available?(:epics) && type == :issues
+- is_issue = type == :issues
 
-%aside.issues-bulk-update.js-right-sidebar.right-sidebar{ "aria-live" => "polite", data: { 'signed-in': current_user.present? } }
+%aside.issues-bulk-update.js-right-sidebar.right-sidebar{ "aria-live" => "polite", data: { 'signed-in': current_user.present? }, 'aria-label': _('Bulk update') }
   .issuable-sidebar.hidden
     = form_tag [:bulk_update, @project, type], method: :post, class: "bulk-update" do
       .block.issuable-sidebar-header
         .filter-item.inline.update-issues-btn.float-left
-          = button_tag _('Update all'), class: "btn update-selected-issues btn-info", disabled: true
-        = button_tag _('Cancel'), class: "btn btn-default js-bulk-update-menu-hide float-right"
+          = button_tag _('Update all'), class: "gl-button btn update-selected-issues btn-info", disabled: true
+        = button_tag _('Cancel'), class: "gl-button btn btn-default js-bulk-update-menu-hide float-right"
       - if params[:state] != 'merged'
         .block
           .title
@@ -29,30 +28,22 @@
           - field_name = "update[assignee_ids][]"
           = dropdown_tag(_("Select assignee"), options: { toggle_class: "js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: _("Assign to"), filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
             placeholder: _("Search authors"), data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: field_name } })
-      - if epic_bulk_edit_flag
-        .block
-          .title
-            = _('Epic')
-          .filter-item.epic-bulk-edit
-            #js-epic-select-root{ data: { group_id: @project&.group&.id, show_header: "true" } }
-          %input{ id: 'issue_epic_id', type: 'hidden', name: 'update[epic_id]' }
+      - if is_issue
+        = render_if_exists 'shared/issuable/epic_dropdown', parent: @project.group
       .block
         .title
           = _('Milestone')
         .filter-item
           = dropdown_tag(_("Select milestone"), options: { title: _("Assign milestone"), toggle_class: "js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update", filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: _("Search milestones"), data: { show_no: true, field_name: "update[milestone_id]", project_id: @project.id, use_id: true, default_label: _("Milestone") } })
+      - if is_issue
+        = render_if_exists 'shared/issuable/iterations_dropdown', parent: @project.group
       .block
         .title
           = _('Labels')
         .filter-item.labels-filter
           = render "shared/issuable/label_dropdown", classes: ["js-filter-bulk-update", "js-multiselect"], dropdown_title: _("Apply a label"), show_create: false, show_footer: false, extra_options: false, filter_submit: false, data_options: { persist_when_hide: "true", field_name: "update[label_ids][]", show_no: false, show_any: false, use_id: true, default_label: _("Labels") }, label_name: _("Select labels"), no_default_styles: true
-      - if bulk_issue_health_status_flag
-        .block
-          .title
-            = _('Health status')
-          .filter-item.health-status.health-status-filter
-            #js-bulk-update-health-status-root
-          %input{ id: 'issue_health_status_value', type: 'hidden', name: 'update[health_status]' }
+      - if is_issue
+        = render_if_exists 'shared/issuable/health_status_dropdown', parent: @project
       .block
         .title
           = _('Subscriptions')
diff --git a/app/views/shared/issuable/_feed_buttons.html.haml b/app/views/shared/issuable/_feed_buttons.html.haml
index 86c2e243718..c3e4c3a15cc 100644
--- a/app/views/shared/issuable/_feed_buttons.html.haml
+++ b/app/views/shared/issuable/_feed_buttons.html.haml
@@ -1,4 +1,4 @@
-= link_to safe_params.merge(rss_url_options), class: 'btn btn-svg has-tooltip', data: { container: 'body', testid: 'rss-feed-link' }, title: _('Subscribe to RSS feed') do
+= link_to safe_params.merge(rss_url_options), class: 'btn gl-button btn-default btn-icon has-tooltip', data: { container: 'body', testid: 'rss-feed-link' }, title: _('Subscribe to RSS feed') do
   = sprite_icon('rss', css_class: 'qa-rss-icon')
-= link_to safe_params.merge(calendar_url_options), class: 'btn has-tooltip', data: { container: 'body' }, title: _('Subscribe to calendar') do
+= link_to safe_params.merge(calendar_url_options), class: 'btn gl-button btn-default btn-icon has-tooltip', data: { container: 'body' }, title: _('Subscribe to calendar') do
   = sprite_icon('calendar')
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 552f83906e1..2a91ffbdbaa 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -64,17 +64,17 @@
 .row-content-block{ class: (is_footer ? "footer-block" : "middle-block") }
   .float-right
     - if issuable.new_record?
-      = link_to 'Cancel', polymorphic_path([@project, issuable.class]), class: 'btn btn-cancel'
+      = link_to 'Cancel', polymorphic_path([@project, issuable.class]), class: 'gl-button btn btn-cancel'
     - else
       - if can?(current_user, :"destroy_#{issuable.to_ability_name}", @project)
         = link_to 'Delete', polymorphic_path([@project, issuable], params: { destroy_confirm: true }), data: { confirm: "#{issuable.human_class_name} will be removed! Are you sure?" }, method: :delete, class: 'btn btn-danger btn-grouped'
-      = link_to 'Cancel', polymorphic_path([@project, issuable]), class: 'btn btn-grouped btn-cancel'
+      = link_to 'Cancel', polymorphic_path([@project, issuable]), class: 'gl-button btn btn-grouped btn-cancel'
 
   %span.gl-mr-3
     - if issuable.new_record?
-      = form.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'btn btn-success qa-issuable-create-button'
+      = form.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'gl-button btn btn-success qa-issuable-create-button'
     - else
-      = form.submit 'Save changes', class: 'btn btn-success'
+      = form.submit 'Save changes', class: 'gl-button btn btn-success'
 
   - if !issuable.persisted? && !issuable.project.empty_repo? && (guide_url = issuable.project.present.contribution_guide_path)
     .inline.gl-mt-3
diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml
index a0d3bc64f1f..005b76180fd 100644
--- a/app/views/shared/issuable/_label_page_create.html.haml
+++ b/app/views/shared/issuable/_label_page_create.html.haml
@@ -19,7 +19,7 @@
           %input.js-add-list{ type: "checkbox", name: "add_list", checked: add_list }
           %span= _('Add list')
     .clearfix
-      %button.btn.btn-primary.float-left.js-new-label-btn{ type: "button" }
+      %button.gl-button.btn.btn-success.float-left.js-new-label-btn{ type: "button" }
         = _('Create')
-      %button.btn.btn-default.float-right.js-cancel-label-btn{ type: "button" }
+      %button.gl-button.btn.btn-default.float-right.js-cancel-label-btn{ type: "button" }
         = _('Cancel')
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 79d86500bd9..d1e74cc771e 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -193,13 +193,16 @@
     .filter-dropdown-container.d-flex.flex-column.flex-md-row
       - if type == :boards
         #js-board-labels-toggle
+        - if current_user
+          #js-board-epics-swimlanes-toggle
         .js-board-config{ data: { can_admin_list: user_can_admin_list, has_scope: board.scoped? } }
         - if user_can_admin_list
-          = render 'shared/issuable/board_create_list_dropdown', board: board
+          - if Feature.enabled?(:board_new_list, board.resource_parent, default_enabled: :yaml)
+            .js-create-column-trigger{ data: board_list_data }
+          - else
+            = render 'shared/issuable/board_create_list_dropdown', board: board
           - if @project
-            #js-add-issues-btn.gl-ml-3{ data: { can_admin_list: can?(current_user, :admin_list, @project) } }
-        - if current_user
-          #js-board-epics-swimlanes-toggle
+            #js-add-issues-btn{ data: { can_admin_list: can?(current_user, :admin_list, @project) } }
         #js-toggle-focus-btn
       - elsif is_not_boards_modal_or_productivity_analytics && show_sorting_dropdown
         = render 'shared/issuable/sort_dropdown'
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 911bef482dd..f26f4adc19a 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -8,7 +8,7 @@
 - add_page_startup_api_call "#{issuable_sidebar[:issuable_json_path]}?serializer=sidebar_extras"
 - reviewers = local_assigns.fetch(:reviewers, nil)
 
-%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite', 'aria-label': issuable_type }
   .issuable-sidebar
     .block.issuable-sidebar-header
       - if signed_in
@@ -26,7 +26,7 @@
       .block.assignee.qa-assignee-block
         = render "shared/issuable/sidebar_assignees", issuable_sidebar: issuable_sidebar, assignees: assignees, signed_in: signed_in
 
-      - if Feature.enabled?(:merge_request_reviewers, @project, default_enabled: true) && reviewers
+      - if reviewers
         .block.reviewer.qa-reviewer-block
           = render "shared/issuable/sidebar_reviewers", issuable_sidebar: issuable_sidebar, reviewers: reviewers, signed_in: signed_in
 
@@ -59,7 +59,7 @@
             = f.hidden_field 'milestone_id', value: milestone[:id], id: nil
             = dropdown_tag('Milestone', options: { title: _('Assign milestone'), toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: _('Search milestones'), data: { show_no: true, field_name: "#{issuable_type}[milestone_id]", project_id: issuable_sidebar[:project_id], issuable_id: issuable_sidebar[:id], ability_name: issuable_type, issue_update: issuable_sidebar[:issuable_json_path], use_id: true, default_no: true, selected: milestone[:title], null_default: true, display: 'static' }})
           - if @project.group.present? && issuable_sidebar[:supports_iterations]
-            = render_if_exists 'shared/issuable/iteration_select', can_edit: can_edit_issuable, group_path: @project.group.full_path, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], issuable_type: issuable_type
+            = render_if_exists 'shared/issuable/iteration_select', can_edit: can_edit_issuable.to_s, group_path: @project.group.full_path, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], issuable_type: issuable_type
 
       - if issuable_sidebar[:supports_time_tracking]
         #issuable-time-tracker.block
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index a7f435edb90..2b6920ed80f 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -5,7 +5,7 @@
     = _('Assignee')
     = loading_icon(css_class: 'gl-vertical-align-text-bottom')
 
-.selectbox.hide-collapsed
+.js-sidebar-assignee-data.selectbox.hide-collapsed
   - if assignees.none?
     = hidden_field_tag "#{issuable_type}[assignee_ids][]", 0, id: nil
   - else
diff --git a/app/views/shared/issuable/_sidebar_todo.html.haml b/app/views/shared/issuable/_sidebar_todo.html.haml
index 7b5926fc186..a867421298b 100644
--- a/app/views/shared/issuable/_sidebar_todo.html.haml
+++ b/app/views/shared/issuable/_sidebar_todo.html.haml
@@ -6,10 +6,10 @@
 - button_icon = has_todo ? todo_button_data[:mark_icon] : todo_button_data[:todo_icon]
 
 %button.issuable-todo-btn.js-issuable-todo{ type: 'button',
-  class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'btn btn-default issuable-header-btn float-right'),
+  class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'gl-button btn btn-default issuable-header-btn float-right'),
   title: button_title,
   'aria-label' => button_title,
   data: todo_button_data }
   %span.issuable-todo-inner.js-issuable-todo-inner<
     = is_collapsed ? button_icon : button_title
-  = loading_icon
+  = loading_icon(css_class: is_collapsed ? '' : 'gl-ml-3')
diff --git a/app/views/shared/issuable/csv_export/_button.html.haml b/app/views/shared/issuable/csv_export/_button.html.haml
index 3584c9c1ed5..8134b7eb161 100644
--- a/app/views/shared/issuable/csv_export/_button.html.haml
+++ b/app/views/shared/issuable/csv_export/_button.html.haml
@@ -1,4 +1,4 @@
 - if current_user
-  %button.csv_download_link.btn.gl-button.has-tooltip{ title: _('Export as CSV'),
+  %button.csv_download_link.btn.gl-button.btn-default.btn-icon.has-tooltip{ title: _('Export as CSV'),
     data: { toggle: 'modal', target: ".#{issuable_type}-export-modal", qa_selector: 'export_as_csv_button' } }
     = sprite_icon('export')
diff --git a/app/views/shared/issuable/form/_template_selector.html.haml b/app/views/shared/issuable/form/_template_selector.html.haml
index bf34ea4a1b2..c870bb17a85 100644
--- a/app/views/shared/issuable/form/_template_selector.html.haml
+++ b/app/views/shared/issuable/form/_template_selector.html.haml
@@ -1,9 +1,9 @@
 - issuable = local_assigns.fetch(:issuable, nil)
 
-- return unless issuable && issuable_templates(issuable).any?
+- return unless issuable && issuable_templates(ref_project, issuable.to_ability_name).any?
 
 .issuable-form-select-holder.selectbox.form-group
-  .js-issuable-selector-wrap{ data: { issuable_type: issuable.to_ability_name } }
+  .js-issuable-selector-wrap{ data: { issuable_type: issuable.to_ability_name.pluralize, qa_selector: 'template_dropdown' } }
     = template_dropdown_tag(issuable) do
       %ul.dropdown-footer-list
         %li
diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml
index 98c9f73fa3a..94d0c395fa6 100644
--- a/app/views/shared/issuable/form/_title.html.haml
+++ b/app/views/shared/issuable/form/_title.html.haml
@@ -1,7 +1,7 @@
 - issuable = local_assigns.fetch(:issuable)
 - has_wip_commits = local_assigns.fetch(:has_wip_commits)
 - form = local_assigns.fetch(:form)
-- no_issuable_templates = issuable_templates(issuable).empty?
+- no_issuable_templates = issuable_templates(ref_project, issuable.to_ability_name).empty?
 - div_class = no_issuable_templates ? 'col-sm-10' : 'col-sm-7 col-lg-8'
 - toggle_wip_link_start = '<a href="" class="js-toggle-wip">'
 - toggle_wip_link_end = '</a>'
diff --git a/app/views/shared/issue_type/_details_header.html.haml b/app/views/shared/issue_type/_details_header.html.haml
index d6226760ba5..7e150c544bd 100644
--- a/app/views/shared/issue_type/_details_header.html.haml
+++ b/app/views/shared/issue_type/_details_header.html.haml
@@ -1,12 +1,12 @@
 .detail-page-header
   .detail-page-header-body
     .issuable-status-box.status-box.status-box-issue-closed{ class: issue_status_visibility(issuable, status_box: :closed) }
-      = sprite_icon('mobile-issue-close', css_class: 'gl-display-block gl-display-sm-none!')
-      .gl-display-none.gl-display-sm-block!
+      = sprite_icon('mobile-issue-close', css_class: 'gl-display-block gl-sm-display-none!')
+      .gl-display-none.gl-sm-display-block!
         = issue_closed_text(issuable, current_user)
     .issuable-status-box.status-box.status-box-open{ class: issue_status_visibility(issuable, status_box: :open) }
-      = sprite_icon('issue-open-m', css_class: 'gl-display-block gl-display-sm-none!')
-      %span.gl-display-none.gl-display-sm-block!
+      = sprite_icon('issue-open-m', css_class: 'gl-display-block gl-sm-display-none!')
+      %span.gl-display-none.gl-sm-display-block!
         = _('Open')
 
     .issuable-meta
diff --git a/app/views/shared/milestones/_labels_tab.html.haml b/app/views/shared/milestones/_labels_tab.html.haml
index a419e749f35..d2bee57992d 100644
--- a/app/views/shared/milestones/_labels_tab.html.haml
+++ b/app/views/shared/milestones/_labels_tab.html.haml
@@ -8,7 +8,7 @@
         = markdown_field(label, :description)
 
       .float-right.d-none.d-lg-block
-        = link_to milestones_issues_path(options.merge(state: 'opened')), class: 'btn gl-button btn-default-tertiary btn-action' do
+        = link_to milestones_issues_path(options.merge(state: 'opened')), class: 'btn gl-button btn-default-tertiary' do
           - pluralize milestone_issues_by_label_count(@milestone, label, state: :opened), _('open issue')
-        = link_to milestones_issues_path(options.merge(state: 'closed')), class: 'btn gl-button btn-default-tertiary btn-action' do
+        = link_to milestones_issues_path(options.merge(state: 'closed')), class: 'btn gl-button btn-default-tertiary' do
           - pluralize milestone_issues_by_label_count(@milestone, label, state: :closed), _('closed issue')
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index 48a97ed66bb..4301bf01858 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -29,10 +29,10 @@
       %div
         = render('shared/milestone_expired', milestone: milestone)
         - if milestone.group_milestone?
-          .label-badge.gl-bg-blue-50.d-inline-block
+          .gl-badge.badge-info.badge-pill
             = milestone.group.full_name
         - if milestone.project_milestone?
-          .label-badge.gl-bg-gray-50.d-inline-block
+          .gl-badge.badge-muted.badge-pill
             = milestone.project.full_name
 
     .col-sm-4.milestone-progress
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
index d9d7d18c732..661ace8feaa 100644
--- a/app/views/shared/milestones/_sidebar.html.haml
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -1,7 +1,7 @@
 - affix_offset = local_assigns.fetch(:affix_offset, "50")
 - project = local_assigns[:project]
 
-%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite', 'aria-label': _('Milestone') }
   .issuable-sidebar.milestone-sidebar
     .block.milestone-progress.issuable-sidebar-header
       %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => s_('MilestoneSidebar|Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
diff --git a/app/views/shared/notes/_comment_button.html.haml b/app/views/shared/notes/_comment_button.html.haml
index eb03608e18a..4f1aa3a7b01 100644
--- a/app/views/shared/notes/_comment_button.html.haml
+++ b/app/views/shared/notes/_comment_button.html.haml
@@ -1,15 +1,15 @@
 - noteable_name = @note.noteable.human_class_name
 
 .float-left.btn-group.gl-mr-3.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
-  %input.btn.btn-success.js-comment-button.js-comment-submit-button{ type: 'submit', value: _('Comment'), data: { qa_selector: 'comment_button' } }
+  %input.btn.gl-button.btn-success.js-comment-button.js-comment-submit-button{ type: 'submit', value: _('Comment'), data: { qa_selector: 'comment_button' } }
 
   - if @note.can_be_discussion_note?
-    = button_tag type: 'button', class: 'btn dropdown-toggle btn-success js-note-new-discussion js-disable-on-submit', data: { 'dropdown-trigger' => '#resolvable-comment-menu' }, 'aria-label' => _('Open comment type dropdown') do
+    = button_tag type: 'button', class: 'gl-button btn dropdown-toggle btn-success js-note-new-discussion js-disable-on-submit', data: { 'dropdown-trigger' => '#resolvable-comment-menu' }, 'aria-label' => _('Open comment type dropdown') do
       = sprite_icon('chevron-down')
 
     %ul#resolvable-comment-menu.dropdown-menu.dropdown-open-top{ data: { dropdown: true } }
       %li#comment.droplab-item-selected{ data: { value: '', 'submit-text' => _('Comment'), 'close-text' => _("Comment & close %{noteable_name}") % { noteable_name: noteable_name }, 'reopen-text' => _("Comment & reopen %{noteable_name}") % { noteable_name: noteable_name } } }
-        %button.btn.btn-transparent
+        %button.btn.gl-button.btn-transparent
           = sprite_icon('check', css_class: 'icon')
           .description
             %strong= _("Comment")
@@ -19,7 +19,7 @@
       %li.divider.droplab-item-ignore
 
       %li#discussion{ data: { value: 'DiscussionNote', 'submit-text' => _('Start thread'), 'close-text' => _("Start thread & close %{noteable_name}") % { noteable_name: noteable_name }, 'reopen-text' => _("Start thread & reopen %{noteable_name}") % { noteable_name: noteable_name } } }
-        %button.btn.btn-transparent
+        %button.btn.gl-button.btn-transparent
           = sprite_icon('check', css_class: 'icon')
           .description
             %strong= _("Start thread")
diff --git a/app/views/shared/notes/_edit_form.html.haml b/app/views/shared/notes/_edit_form.html.haml
index d783fa0d777..63c895a5a03 100644
--- a/app/views/shared/notes/_edit_form.html.haml
+++ b/app/views/shared/notes/_edit_form.html.haml
@@ -1,4 +1,4 @@
-.note-edit-form
+.snippets.note-edit-form
   = form_tag '#', method: :put, class: 'edit-note common-note-form js-quick-submit' do
     = hidden_field_tag :target_id, '', class: 'js-form-target-id'
     = hidden_field_tag :target_type, '', class: 'js-form-target-type'
@@ -9,6 +9,6 @@
     .note-form-actions.clearfix
       .settings-message.note-edit-warning.js-finish-edit-warning
         = _("Finish editing this message first!")
-      = submit_tag _('Save comment'), class: 'btn btn-success js-comment-save-button', data: { qa_selector: 'save_comment_button' }
-      %button.btn.btn-cancel.note-edit-cancel{ type: 'button' }
+      = submit_tag _('Save comment'), class: 'gl-button btn btn-success js-comment-save-button', data: { qa_selector: 'save_comment_button' }
+      %button.btn.gl-button.btn-cancel.note-edit-cancel{ type: 'button' }
         = _("Cancel")
diff --git a/app/views/shared/notes/_form.html.haml b/app/views/shared/notes/_form.html.haml
index 2cf074b9d3f..6f54c54d0a9 100644
--- a/app/views/shared/notes/_form.html.haml
+++ b/app/views/shared/notes/_form.html.haml
@@ -38,5 +38,5 @@
     .note-form-actions.clearfix
       = render partial: 'shared/notes/comment_button'
 
-      %a.btn.btn-cancel.js-close-discussion-note-form.hide{ role: "button", data: { cancel_text: _("Cancel") } }
+      %a.btn.gl-button.btn-cancel.js-close-discussion-note-form.hide{ role: "button", data: { cancel_text: _("Cancel") } }
         = _('Cancel')
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
index 1b03225d48d..f7f5c02370d 100644
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -12,9 +12,6 @@
       .timeline-entry-inner
         .flash-container.timeline-content
 
-        .timeline-icon.d-none.d-md-block
-          %a.author-link{ href: user_path(current_user) }
-            = image_tag avatar_icon_for_user(current_user), alt: current_user.to_reference, class: 'avatar s40'
         .timeline-content.timeline-content-form
           = render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
 - elsif !current_user
diff --git a/app/views/shared/notifications/_new_button.html.haml b/app/views/shared/notifications/_new_button.html.haml
index 14f4b04ef78..4b008601783 100644
--- a/app/views/shared/notifications/_new_button.html.haml
+++ b/app/views/shared/notifications/_new_button.html.haml
@@ -17,14 +17,14 @@
       .js-notification-toggle-btns
         %div{ class: ("btn-group" if notification_setting.custom?) }
           - if notification_setting.custom?
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => button_title, data: { container: "body", placement: 'top', toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
+            %button.dropdown-new.btn.gl-button.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => button_title, data: { container: "body", placement: 'top', toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
               = notification_setting_icon(notification_setting)
               %span.js-notification-loading.fa.hidden
-            %button.btn.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" }, class: "#{btn_class}" }
+            %button.btn.gl-button.btn-default.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" }, class: "#{btn_class}" }
               = sprite_icon("chevron-down", css_class: "icon mr-0")
               .sr-only Toggle dropdown
           - else
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => button_title, data: { container: "body", placement: 'top', toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
+            %button.dropdown-new.btn.gl-button.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => button_title, data: { container: "body", placement: 'top', toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               = notification_setting_icon(notification_setting)
               %span.js-notification-loading.fa.hidden
               = sprite_icon("chevron-down", css_class: "icon")
diff --git a/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml b/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml
index cb954c20b48..d1b32df7139 100644
--- a/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml
+++ b/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml
@@ -1,5 +1,3 @@
-- select_mode_for_dropdown = Feature.enabled?(:deploy_keys_on_protected_branches, protected_branch.project) ? 'js-multiselect' : ''
-
 - merge_access_levels = protected_branch.merge_access_levels.for_role
 - push_access_levels = protected_branch.push_access_levels.for_role
 
@@ -25,7 +23,7 @@
 %td.push_access_levels-container
   = hidden_field_tag "allowed_to_push_#{protected_branch.id}", push_access_levels.first&.access_level
   = dropdown_tag( (push_access_levels.first&.humanize || 'Select') ,
-    options: { toggle_class: "js-allowed-to-push #{select_mode_for_dropdown}", dropdown_class: 'dropdown-menu-selectable js-allowed-to-push-container capitalize-header',
+    options: { toggle_class: "js-allowed-to-push js-multiselect", dropdown_class: 'dropdown-menu-selectable js-allowed-to-push-container capitalize-header',
                  data: { field_name: "allowed_to_push_#{protected_branch.id}", preselected_items: access_levels_data(push_access_levels) }})
   - if user_push_access_levels.any?
     %p.small
diff --git a/app/views/shared/ssh_keys/_key_delete.html.haml b/app/views/shared/ssh_keys/_key_delete.html.haml
new file mode 100644
index 00000000000..1526e5d3eda
--- /dev/null
+++ b/app/views/shared/ssh_keys/_key_delete.html.haml
@@ -0,0 +1,6 @@
+- if defined?(text)
+  = button_to text, '#', class: html_class, data: button_data
+- else
+  = button_to '#', class: html_class, data: button_data do
+    %span.sr-only= _('Delete')
+    = sprite_icon('remove')
diff --git a/app/views/shared/users/_user.html.haml b/app/views/shared/users/_user.html.haml
new file mode 100644
index 00000000000..f92c12102bb
--- /dev/null
+++ b/app/views/shared/users/_user.html.haml
@@ -0,0 +1,13 @@
+- user = local_assigns.fetch(:user)
+
+.col-lg-3.col-md-4.col-sm-12
+  .gl-card.gl-mb-5
+    .gl-card-body
+      = image_tag avatar_icon_for_user(user, 40), class: "avatar s40", alt: ''
+
+      .user-info
+        .block-truncated
+          = link_to user.name, user_path(user), class: 'user js-user-link', data: { user_id: user.id }
+
+        .block-truncated
+          %span.gl-text-gray-900= user.to_reference
diff --git a/app/views/shared/users/index.html.haml b/app/views/shared/users/index.html.haml
new file mode 100644
index 00000000000..dd6b14d6be2
--- /dev/null
+++ b/app/views/shared/users/index.html.haml
@@ -0,0 +1,20 @@
+- followers_illustration_path = 'illustrations/starred_empty.svg'
+- followers_visitor_empty_message = s_('UserProfile|This user doesn\'t have any followers.')
+- followers_current_user_empty_message_header = s_('UserProfile|You do not have any followers.')
+- following_illustration_path = 'illustrations/starred_empty.svg'
+- following_visitor_empty_message = s_('UserProfile|This user isn\'t following other users.')
+- following_current_user_empty_message_header = s_('UserProfile|You are not following other users.')
+
+- if users.size > 0
+  .row.gl-mt-3
+    = render partial: 'shared/users/user', collection: users, as: :user
+  = paginate users, theme: 'gitlab'
+- else
+  - if @user_followers
+    = render partial: 'shared/empty_states/profile_tabs', locals: { illustration_path: followers_illustration_path,
+      visitor_empty_message: followers_visitor_empty_message,
+      current_user_empty_message_header: followers_current_user_empty_message_header}
+  - elsif @user_following
+    = render partial: 'shared/empty_states/profile_tabs', locals: { illustration_path: following_illustration_path,
+      visitor_empty_message: following_visitor_empty_message,
+      current_user_empty_message_header: following_current_user_empty_message_header}
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index c37a34f9be8..ad84ce1d343 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -2,96 +2,99 @@
 
 .form-group
   = form.label :url, s_('Webhooks|URL'), class: 'label-bold'
-  = form.text_field :url, class: 'form-control', placeholder: 'http://example.com/trigger-ci.json'
+  = form.text_field :url, class: 'form-control gl-form-input', placeholder: 'http://example.com/trigger-ci.json'
+  %p.form-text.text-muted
+  = s_('Webhooks|URL must be percent-encoded if neccessary.')
 .form-group
-  = form.label :token, s_('Webhooks|Secret Token'), class: 'label-bold'
-  = form.text_field :token, class: 'form-control', placeholder: ''
+  = form.label :token, s_('Webhooks|Secret token'), class: 'label-bold'
+  = form.text_field :token, class: 'form-control gl-form-input', placeholder: ''
   %p.form-text.text-muted
-  = s_('Webhooks|Use this token to validate received payloads. It will be sent with the request in the X-Gitlab-Token HTTP header.')
+  = s_('Webhooks|Use this token to validate received payloads. It is sent with the request in the X-Gitlab-Token HTTP header.')
 .form-group
   = form.label :url, s_('Webhooks|Trigger'), class: 'label-bold'
   %ul.list-unstyled.gl-ml-6
     %li
       = form.check_box :push_events, class: 'form-check-input'
-      = form.label :push_events, class: 'list-label form-check-label gl-ml-1' do
+      = form.label :push_events, class: 'list-label form-check-label gl-ml-1 gl-mb-3' do
         %strong= s_('Webhooks|Push events')
-      = form.text_field :push_events_branch_filter, class: 'form-control', placeholder: 'Branch name or wildcard pattern to trigger on (leave blank for all)'
+      = form.text_field :push_events_branch_filter, class: 'form-control gl-form-input', placeholder: 'Branch name or wildcard pattern to trigger on (leave blank for all)'
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered by a push to the repository')
+        = s_('Webhooks|URL is triggered by a push to the repository')
     %li
       = form.check_box :tag_push_events, class: 'form-check-input'
       = form.label :tag_push_events, class: 'list-label form-check-label gl-ml-1' do
         %strong= s_('Webhooks|Tag push events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered when a new tag is pushed to the repository')
+        = s_('Webhooks|URL is triggered when a new tag is pushed to the repository')
     %li
       = form.check_box :note_events, class: 'form-check-input'
       = form.label :note_events, class: 'list-label form-check-label gl-ml-1' do
         %strong= s_('Webhooks|Comments')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered when someone adds a comment')
+        = s_('Webhooks|URL is triggered when someone adds a comment')
     %li
       = form.check_box :confidential_note_events, class: 'form-check-input'
       = form.label :confidential_note_events, class: 'list-label form-check-label gl-ml-1' do
-        %strong= s_('Webhooks|Confidential Comments')
+        %strong= s_('Webhooks|Confidential comments')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered when someone adds a comment on a confidential issue')
+        = s_('Webhooks|URL is triggered when someone adds a comment on a confidential issue')
     %li
       = form.check_box :issues_events, class: 'form-check-input'
       = form.label :issues_events, class: 'list-label form-check-label gl-ml-1' do
         %strong= s_('Webhooks|Issues events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered when an issue is created/updated/merged')
+        = s_('Webhooks|URL is triggered when an issue is created, updated, or merged')
     %li
       = form.check_box :confidential_issues_events, class: 'form-check-input'
       = form.label :confidential_issues_events, class: 'list-label form-check-label gl-ml-1' do
-        %strong= s_('Webhooks|Confidential Issues events')
+        %strong= s_('Webhooks|Confidential issues events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered when a confidential issue is created/updated/merged')
+        = s_('Webhooks|URL is triggered when a confidential issue is created, updated, or merged')
     - if @group
       = render_if_exists 'groups/hooks/member_events', form: form
+      = render_if_exists 'groups/hooks/subgroup_events', form: form
     %li
       = form.check_box :merge_requests_events, class: 'form-check-input'
       = form.label :merge_requests_events, class: 'list-label form-check-label gl-ml-1' do
         %strong= s_('Webhooks|Merge request events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered when a merge request is created/updated/merged')
+        = s_('Webhooks|URL is triggered when a merge request is created, updated, or merged')
     %li
       = form.check_box :job_events, class: 'form-check-input'
       = form.label :job_events, class: 'list-label form-check-label gl-ml-1' do
         %strong= s_('Webhooks|Job events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered when the job status changes')
+        = s_('Webhooks|URL is triggered when the job status changes')
     %li
       = form.check_box :pipeline_events, class: 'form-check-input'
       = form.label :pipeline_events, class: 'list-label form-check-label gl-ml-1' do
         %strong= s_('Webhooks|Pipeline events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered when the pipeline status changes')
+        = s_('Webhooks|URL is triggered when the pipeline status changes')
     %li
       = form.check_box :wiki_page_events, class: 'form-check-input'
       = form.label :wiki_page_events, class: 'list-label form-check-label gl-ml-1' do
-        %strong= s_('Webhooks|Wiki Page events')
+        %strong= s_('Webhooks|Wiki page events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL will be triggered when a wiki page is created/updated')
+        = s_('Webhooks|URL is triggered when a wiki page is created or updated')
     %li
       = form.check_box :deployment_events, class: 'form-check-input'
       = form.label :deployment_events, class: 'list-label form-check-label gl-ml-1' do
         %strong= s_('Webhooks|Deployment events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL is triggered when a deployment starts, finishes, fails, or is canceled')
+        = s_('Webhooks|URL is triggered when a deployment starts, finishes, fails, or is canceled')
     %li
       = form.check_box :feature_flag_events, class: 'form-check-input'
       = form.label :feature_flag_events, class: 'list-label form-check-label gl-ml-1' do
-        %strong= s_('Webhooks|Feature Flag events')
+        %strong= s_('Webhooks|Feature flag events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL is triggered when a feature flag is turned on or off')
+        = s_('Webhooks|URL is triggered when a feature flag is turned on or off')
     %li
       = form.check_box :releases_events, class: 'form-check-input'
       = form.label :releases_events, class: 'list-label form-check-label gl-ml-1' do
         %strong= s_('Webhooks|Releases events')
       %p.text-muted.gl-ml-1
-        = s_('Webhooks|This URL is triggered when a release is created/updated')
+        = s_('Webhooks|URL is triggered when a release is created or updated')
 .form-group
   = form.label :enable_ssl_verification, s_('Webhooks|SSL verification'), class: 'label-bold checkbox'
   .form-check
diff --git a/app/views/shared/web_hooks/_hook.html.haml b/app/views/shared/web_hooks/_hook.html.haml
index 13fe8f76bd3..5437748a57e 100644
--- a/app/views/shared/web_hooks/_hook.html.haml
+++ b/app/views/shared/web_hooks/_hook.html.haml
@@ -12,5 +12,5 @@
 
     .col-md-4.col-lg-5.text-right-md.gl-mt-2
       %span>= render 'shared/web_hooks/test_button', hook: hook, button_class: 'btn-sm gl-mr-3'
-      %span>= link_to _('Edit'), edit_hook_path(hook), class: 'btn btn-sm gl-mr-3'
-      = link_to _('Delete'), destroy_hook_path(hook), data: { confirm: _('Are you sure?') }, method: :delete, class: 'btn btn-sm'
+      %span>= link_to _('Edit'), edit_hook_path(hook), class: 'gl-button btn btn-sm gl-mr-3'
+      = link_to _('Delete'), destroy_hook_path(hook), data: { confirm: _('Are you sure?') }, method: :delete, class: 'gl-button btn btn-sm'
diff --git a/app/views/shared/web_hooks/_test_button.html.haml b/app/views/shared/web_hooks/_test_button.html.haml
index c46b8a99886..a683f75c779 100644
--- a/app/views/shared/web_hooks/_test_button.html.haml
+++ b/app/views/shared/web_hooks/_test_button.html.haml
@@ -3,7 +3,7 @@
 - triggers = hook.class.triggers
 
 .hook-test-button.dropdown.inline>
-  %button.btn{ 'data-toggle' => 'dropdown', class: button_class }
+  %button.btn.gl-button{ 'data-toggle' => 'dropdown', class: button_class }
     = _('Test')
     = sprite_icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
diff --git a/app/views/shared/wikis/_sidebar.html.haml b/app/views/shared/wikis/_sidebar.html.haml
index 4e9fdc8b95a..5f181371663 100644
--- a/app/views/shared/wikis/_sidebar.html.haml
+++ b/app/views/shared/wikis/_sidebar.html.haml
@@ -1,6 +1,6 @@
 - editing ||= false
 
-%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
+%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" }, 'aria-label': _('Wiki') }
   .sidebar-container
     .block.wiki-sidebar-header.gl-mb-3.w-100
       %a.gutter-toggle.float-right.d-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" }