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

19 files changed, 161 insertions, 156 deletions

diff --git a/app/views/profiles/_email_settings.html.haml b/app/views/profiles/_email_settings.html.haml
index c05d42a5846..977116af88f 100644
--- a/app/views/profiles/_email_settings.html.haml
+++ b/app/views/profiles/_email_settings.html.haml
@@ -4,7 +4,7 @@
 - read_only_help_text = readonly ? s_("Profiles|Your email address was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:email) } : user_email_help_text(@user)
 - help_text = email_change_disabled ? s_("Your account uses dedicated credentials for the \"%{group_name}\" group and can only be updated through SSO.") % { group_name: @user.managing_group.name } : read_only_help_text
 
-= form.text_field :email, required: true, class: 'input-lg', value: (@user.email unless @user.temp_oauth_email?), help: help_text.html_safe, readonly: readonly || email_change_disabled
+= form.text_field :email, required: true, class: 'input-lg gl-form-input', value: (@user.email unless @user.temp_oauth_email?), help: help_text.html_safe, readonly: readonly || email_change_disabled
 = form.select :public_email, options_for_select(@user.public_verified_emails, selected: @user.public_email),
   { help: s_("Profiles|This email will be displayed on your public profile"), include_blank: s_("Profiles|Do not show on profile") },
   control_class: 'select2 input-lg', disabled: email_change_disabled
diff --git a/app/views/profiles/_name.html.haml b/app/views/profiles/_name.html.haml
index 87f1634b4f3..aea38bf4c3b 100644
--- a/app/views/profiles/_name.html.haml
+++ b/app/views/profiles/_name.html.haml
@@ -1,5 +1,5 @@
 - if user.read_only_attribute?(:name)
-  = form.text_field :name, required: true, readonly: true, wrapper: { class: 'col-md-9 qa-full-name rspec-full-name' },
+  = form.text_field :name, class: 'gl-form-input', required: true, readonly: true, wrapper: { class: 'col-md-9 qa-full-name rspec-full-name' },
   help: s_("Profiles|Your name was automatically set based on your %{provider_label} account, so people you know can recognize you") % { provider_label: attribute_provider_label(:name) }
 - else
-  = form.text_field :name, label: s_('Profiles|Full name'), required: true, title: s_("Profiles|Using emojis in names seems fun, but please try to set a status message instead"), wrapper: { class: 'col-md-9 qa-full-name rspec-full-name' }, help: s_("Profiles|Enter your name, so people you know can recognize you")
+  = form.text_field :name, class: 'gl-form-input', label: s_('Profiles|Full name'), required: true, title: s_("Profiles|Using emojis in names seems fun, but please try to set a status message instead"), wrapper: { class: 'col-md-9 qa-full-name rspec-full-name' }, help: s_("Profiles|Enter your name, so people you know can recognize you")
diff --git a/app/views/profiles/accounts/_providers.html.haml b/app/views/profiles/accounts/_providers.html.haml
index f7368c5e921..5c0044ed825 100644
--- a/app/views/profiles/accounts/_providers.html.haml
+++ b/app/views/profiles/accounts/_providers.html.haml
@@ -1,3 +1,5 @@
+- button_class = 'btn btn-default gl-button gl-mb-3 gl-mr-3'
+
 %label.label-bold
   = s_('Profiles|Connected Accounts')
   %p= s_('Profiles|Click on icon to activate signin with one of the following services')
@@ -5,17 +7,19 @@
     - unlink_allowed = unlink_provider_allowed?(provider)
     - link_allowed = link_provider_allowed?(provider)
     - if unlink_allowed || link_allowed
-      .provider-btn-group
-        .provider-btn-image
-          = provider_image_tag(provider)
-        - if auth_active?(provider)
-          - if unlink_allowed
-            = link_to unlink_profile_account_path(provider: provider), method: :delete, class: 'provider-btn' do
+      - if auth_active?(provider)
+        - if unlink_allowed
+          = link_to unlink_profile_account_path(provider: provider), method: :delete, class: button_class do
+            .social-provider-btn-image.gl-button-icon= provider_image_tag(provider)
+            .gl-button-text
               = s_('Profiles|Disconnect %{provider}') % { provider: label_for_provider(provider) }
-          - else
-            %a.provider-btn
+        - else
+          %a{ class: button_class }
+            .gl-button-text
               = s_('Profiles|%{provider} Active') % { provider: label_for_provider(provider) }
-        - elsif link_allowed
-          = link_to omniauth_authorize_path(:user, provider), method: :post, class: 'provider-btn gl-text-blue-500' do
+      - elsif link_allowed
+        = link_to omniauth_authorize_path(:user, provider), method: :post, class: button_class do
+          .social-provider-btn-image.gl-button-icon= provider_image_tag(provider)
+          .gl-button-text
             = s_('Profiles|Connect %{provider}') % { provider: label_for_provider(provider) }
   = render_if_exists 'profiles/accounts/group_saml_unlink_buttons', group_saml_identities: group_saml_identities
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index ca64c5f57b3..e936cc133bd 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -13,9 +13,9 @@
     %button.gl-alert-dismiss.js-close-2fa-enabled-success-alert{ type: 'button', aria: { label: _('Close') } }
       = sprite_icon('close', size: 16)
     .gl-alert-body
-      = _('Congratulations! You have enabled Two-factor Authentication!')
+      = html_escape(_('You have set up 2FA for your account! If you lose access to your 2FA device, you can use your recovery codes to access your account. Alternatively, if you upload an SSH key, you can %{anchorOpen}use that key to generate additional recovery codes%{anchorClose}.')) % { anchorOpen: '<a href="%{href}">'.html_safe % { href: help_page_path('user/profile/account/two_factor_authentication', anchor: 'generate-new-recovery-codes-using-ssh') }, anchorClose: '</a>'.html_safe }
 
-.row.gl-mt-3
+.row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = s_('Profiles|Two-Factor Authentication')
@@ -25,14 +25,15 @@
     %p
       #{_('Status')}: #{current_user.two_factor_enabled? ? _('Enabled') : _('Disabled')}
     - if current_user.two_factor_enabled?
-      = link_to _('Manage two-factor authentication'), profile_two_factor_auth_path, class: 'gl-button btn btn-info'
+      = link_to _('Manage two-factor authentication'), profile_two_factor_auth_path, class: 'gl-button btn btn-confirm'
     - else
       .gl-mb-3
         = link_to _('Enable two-factor authentication'), profile_two_factor_auth_path, class: 'gl-button btn btn-success', data: { qa_selector: 'enable_2fa_button' }
+  .col-lg-12
+    %hr
 
-%hr
 - if display_providers_on_profile?
-  .row.gl-mt-3
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_('Profiles|Social sign-in')
@@ -40,9 +41,10 @@
         = s_('Profiles|Activate signin with one of the following services')
     .col-lg-8
       = render 'providers', providers: button_based_providers, group_saml_identities: local_assigns[:group_saml_identities]
-  %hr
+    .col-lg-12
+      %hr
 - if current_user.can_change_username?
-  .row.gl-mt-3
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0.warning-title
         = s_('Profiles|Change username')
@@ -53,9 +55,10 @@
     .col-lg-8
       - data = { initial_username: current_user.username, root_url: root_url, action_url: update_username_profile_path(format: :json) }
       #update-username{ data: data }
-  %hr
+    .col-lg-12
+      %hr
 
-.row.gl-mt-3
+.row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0.danger-title
       = s_('Profiles|Delete account')
@@ -81,9 +84,9 @@
           = s_('Profiles|You must transfer ownership or delete these groups before you can delete your account.')
       - elsif !current_user.can_remove_self?
         %p
-          = s_('Profiles|GitLab is unable to verify your identity automatically.')
+          = s_('Profiles|GitLab is unable to verify your identity automatically. For security purposes, you must set a password by %{openingTag}resetting your password%{closingTag} to delete your account.').html_safe % { openingTag: "<a href='#{reset_profile_password_path}' rel=\"nofollow\" data-method=\"put\">".html_safe, closingTag: '</a>'.html_safe}
         %p
-          = s_('Profiles|Please email %{data_request} to begin the account deletion process.').html_safe % { data_request: mail_to('personal-data-request@gitlab.com') }
+          = s_('Profiles|If after setting a password, the option to delete your account is still not available, please email %{data_request} to begin the account deletion process.').html_safe % { data_request: mail_to('personal-data-request@gitlab.com') }
       - else
         %p
           = s_("Profiles|You don't have access to delete this user.")
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index 0c6dc1a05d8..89198b0a65b 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -13,7 +13,7 @@
     = form_for 'email', url: profile_emails_path do |f|
       .form-group
         = f.label :email, _('Email'), class: 'label-bold'
-        = f.text_field :email, class: 'form-control', data: { qa_selector: 'email_address_field' }
+        = f.text_field :email, class: 'form-control gl-form-input', data: { qa_selector: 'email_address_field' }
       .gl-mt-3
         = f.submit _('Add email address'), class: 'gl-button btn btn-success', data: { qa_selector: 'add_email_address_button' }
     %hr
@@ -37,23 +37,23 @@
       %li
         = render partial: 'shared/email_with_badge', locals: { email: @primary_email, verified: current_user.confirmed? }
         %span.float-right
-          %span.badge.badge-success= s_('Profiles|Primary email')
+          %span.badge.badge-muted.badge-pill.gl-badge.badge-success= s_('Profiles|Primary email')
           - if @primary_email === current_user.commit_email
-            %span.badge.badge-info= s_('Profiles|Commit email')
+            %span.badge.badge-muted.badge-pill.gl-badge.badge-info= s_('Profiles|Commit email')
           - if @primary_email === current_user.public_email
-            %span.badge.badge-info= s_('Profiles|Public email')
+            %span.badge.badge-muted.badge-pill.gl-badge.badge-info= s_('Profiles|Public email')
           - if @primary_email === current_user.notification_email
-            %span.badge.badge-info= s_('Profiles|Default notification email')
+            %span.badge.badge-muted.badge-pill.gl-badge.badge-info= s_('Profiles|Default notification email')
       - @emails.each do |email|
         %li{ data: { qa_selector: 'email_row_content' } }
           = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
           %span.float-right
             - if email.email === current_user.commit_email
-              %span.badge.badge-info= s_('Profiles|Commit email')
+              %span.badge.badge-muted.badge-pill.gl-badge.badge-info= s_('Profiles|Commit email')
             - if email.email === current_user.public_email
-              %span.badge.badge-info= s_('Profiles|Public email')
+              %span.badge.badge-muted.badge-pill.gl-badge.badge-info= s_('Profiles|Public email')
             - if email.email === current_user.notification_email
-              %span.badge.badge-info= s_('Profiles|Notification email')
+              %span.badge.badge-muted.badge-pill.gl-badge.badge-info= s_('Profiles|Notification email')
             - unless email.confirmed?
               - confirm_title = "#{email.confirmation_sent_at ? _('Resend confirmation email') : _('Send confirmation email')}"
               = link_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, class: 'gl-button btn btn-sm btn-warning gl-ml-3'
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index eaf00ce6709..cc2e2a30052 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -1,32 +1,33 @@
-%li.d-flex.align-items-center.key-list-item
-  .gl-mr-3
-    - if key.valid?
-      - if key.expired?
-        %span.d-inline-block.has-tooltip{ title: s_('Profiles|Your key has expired') }
-          = sprite_icon('warning-solid', css_class: 'settings-list-icon d-none d-sm-block')
-      - else
-        = sprite_icon('key', css_class: 'settings-list-icon d-none d-sm-block ')
-    - else
-      %span.d-inline-block.has-tooltip{ title: key.errors.full_messages.join(', ') }
-        = sprite_icon('warning-solid', css_class: 'settings-list-icon d-none d-sm-block')
+%li.key-list-item
+  .gl-display-flex.gl-align-items-flex-start
+    .key-list-item-info.gl-w-full.float-none
+      = link_to path_to_key(key, is_admin), class: "title text-3" do
+        = key.title
 
-  .key-list-item-info.w-100.float-none
-    = link_to path_to_key(key, is_admin), class: "title" do
-      = key.title
-    %span.text-truncate
-      = key.fingerprint
+      .gl-display-flex.gl-align-items-center.gl-mt-2
+        - if key.valid?
+          - if key.expired?
+            %span.gl-display-inline-block.has-tooltip{ title: s_('Profiles|Your key has expired') }
+              = sprite_icon('warning-solid', css_class: 'settings-list-icon gl-display-none gl-sm-display-block')
+          - else
+            = sprite_icon('key', css_class: 'settings-list-icon gl-display-none gl-sm-display-block')
+        - else
+          %span.gl-display-inline-block.has-tooltip{ title: key.errors.full_messages.join(', ') }
+            = sprite_icon('warning-solid', css_class: 'settings-list-icon gl-display-none gl-sm-display-block')
 
-    .key-list-item-dates.d-flex.align-items-start.justify-content-between
-      %span.last-used-at.gl-mr-3
-        = s_('Profiles|Last used:')
-        = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : _('Never')
-      %span.expires.gl-mr-3
-        = s_('Profiles|Expires:')
-        = key.expires_at ? key.expires_at.to_date : _('Never')
-      %span.key-created-at.gl-display-flex.gl-align-items-center
-        = s_('Profiles|Created%{time_ago}'.html_safe) % { time_ago: time_ago_with_tooltip(key.created_at, html_class: 'gl-ml-2')}
-        - if key.can_delete?
-          .gl-ml-3
-            = button_to '#', class: "btn btn-default gl-button btn-default-tertiary js-confirm-modal-button", data: ssh_key_delete_modal_data(key, path_to_key(key, is_admin)) do
-              %span.sr-only= _('Delete')
-              = sprite_icon('remove')
+        %span.gl-text-truncate.gl-sm-ml-3
+          = key.fingerprint
+
+      .gl-mt-3= s_('Profiles|Created%{time_ago}'.html_safe) % { time_ago: time_ago_with_tooltip(key.created_at, html_class: 'gl-ml-2')}
+
+      .key-list-item-dates
+        %span.last-used-at.gl-mr-3
+          = s_('Profiles|Last used:')
+          = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : _('Never')
+        %span.expires.gl-mr-3
+          = s_('Profiles|Expires:')
+          = key.expires_at ? key.expires_at.to_date : _('Never')
+    %span.key-created-at.gl-display-flex.gl-align-items-center
+      - if key.can_delete?
+        .gl-ml-3
+          = render 'shared/ssh_keys/key_delete', html_class: "btn gl-button btn-icon btn-danger js-confirm-modal-button", button_data: ssh_key_delete_modal_data(key, path_to_key(key, is_admin))
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index 22d795ca831..8016d989ff1 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -38,4 +38,4 @@
   .col-md-12
     .float-right
       - if @key.can_delete?
-        = button_to _('Delete'), '#', class: "btn btn-danger gl-button delete-key js-confirm-modal-button", data: ssh_key_delete_modal_data(@key, path_to_key(@key, is_admin))
+        = render 'shared/ssh_keys/key_delete', text: _('Delete'), html_class: "btn btn-danger gl-button delete-key js-confirm-modal-button", button_data: ssh_key_delete_modal_data(@key, path_to_key(@key, is_admin))
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index 7b7c24f3ac8..80027cdfed0 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -11,8 +11,8 @@
     %h5.gl-mt-0
       = _('Add an SSH key')
     %p.profile-settings-content
-      - generate_link_url = help_page_path("ssh/README", anchor: 'generating-a-new-ssh-key-pair')
-      - existing_link_url = help_page_path("ssh/README", anchor: 'review-existing-ssh-keys')
+      - generate_link_url = help_page_path("ssh/README", anchor: 'generate-an-ssh-key-pair')
+      - existing_link_url = help_page_path("ssh/README", anchor: 'see-if-you-have-an-existing-ssh-key-pair')
       - generate_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: generate_link_url }
       - existing_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: existing_link_url }
       = _('To add an SSH key you need to %{generate_link_start}generate one%{link_end} or use an %{existing_link_start}existing key%{link_end}.').html_safe % { generate_link_start: generate_link_start, existing_link_start: existing_link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/profiles/notifications/_email_settings.html.haml b/app/views/profiles/notifications/_email_settings.html.haml
index 7ac3ef9b141..f452a5b2eb5 100644
--- a/app/views/profiles/notifications/_email_settings.html.haml
+++ b/app/views/profiles/notifications/_email_settings.html.haml
@@ -4,3 +4,7 @@
   = form.select :notification_email, @user.public_verified_emails, { include_blank: false }, class: "select2", disabled: local_assigns.fetch(:email_change_disabled, nil)
   .help-block
     = local_assigns.fetch(:help_text, nil)
+.form-group
+  %label{ for: 'user_email_opted_in' }
+    = form.check_box :email_opted_in
+    %span= _('Receive product marketing emails')
diff --git a/app/views/profiles/notifications/_group_settings.html.haml b/app/views/profiles/notifications/_group_settings.html.haml
index b1578886098..abbfbd995b6 100644
--- a/app/views/profiles/notifications/_group_settings.html.haml
+++ b/app/views/profiles/notifications/_group_settings.html.haml
@@ -9,7 +9,11 @@
       = link_to group.name, group_path(group)
 
   .table-section.section-30.text-right
-    = render 'shared/notifications/button', notification_setting: setting, emails_disabled: emails_disabled
+    - if Feature.enabled?(:vue_notification_dropdown, default_enabled: :yaml)
+      - if setting
+        .js-vue-notification-dropdown{ data: { disabled: emails_disabled, dropdown_items: notification_dropdown_items(setting).to_json, notification_level: setting.level, group_id: group.id, container_class: 'gl-mr-3', show_label: "true" } }
+    - else
+      = render 'shared/notifications/button', notification_setting: setting, emails_disabled: emails_disabled
 
   .table-section.section-30
     = form_for setting, url: profile_notifications_group_path(group), method: :put, html: { class: 'update-notifications gl-display-flex' } do |f|
diff --git a/app/views/profiles/notifications/_project_settings.html.haml b/app/views/profiles/notifications/_project_settings.html.haml
index 6e81d585f24..8cd552caa3d 100644
--- a/app/views/profiles/notifications/_project_settings.html.haml
+++ b/app/views/profiles/notifications/_project_settings.html.haml
@@ -8,4 +8,8 @@
     = link_to_project(project)
 
   .float-right
-    = render 'shared/notifications/button', notification_setting: setting, emails_disabled: emails_disabled
+    - if Feature.enabled?(:vue_notification_dropdown, default_enabled: :yaml)
+      - if setting
+        .js-vue-notification-dropdown{ data: { disabled: emails_disabled, dropdown_items: notification_dropdown_items(setting).to_json, notification_level: setting.level, project_id: project.id, container_class: 'gl-mr-3', show_label: "true" } }
+    - else
+      = render 'shared/notifications/button', notification_setting: setting, emails_disabled: emails_disabled
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index e1345a94fb1..cb0ada414ed 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -32,7 +32,11 @@
       %br
       .clearfix
       .form-group.float-left.global-notification-setting
-        = render 'shared/notifications/button', notification_setting: @global_notification_setting
+        - if Feature.enabled?(:vue_notification_dropdown, default_enabled: :yaml)
+          - if @global_notification_setting
+            .js-vue-notification-dropdown{ data: { dropdown_items: notification_dropdown_items(@global_notification_setting).to_json, notification_level: @global_notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), show_label: 'true' } }
+        - else
+          = render 'shared/notifications/button', notification_setting: @global_notification_setting
 
       .clearfix
 
diff --git a/app/views/profiles/passwords/edit.html.haml b/app/views/profiles/passwords/edit.html.haml
index 1ee5f52e407..b281dbb4367 100644
--- a/app/views/profiles/passwords/edit.html.haml
+++ b/app/views/profiles/passwords/edit.html.haml
@@ -20,15 +20,15 @@
       - unless @user.password_automatically_set?
         .form-group
           = f.label :current_password, _('Current password'), class: 'label-bold'
-          = f.password_field :current_password, required: true, class: 'form-control', data: { qa_selector: 'current_password_field' }
+          = f.password_field :current_password, required: true, class: 'form-control gl-form-input', data: { qa_selector: 'current_password_field' }
           %p.form-text.text-muted
             = _('You must provide your current password in order to change it.')
       .form-group
         = f.label :password, _('New password'), class: 'label-bold'
-        = f.password_field :password, required: true, class: 'form-control', data: { qa_selector: 'new_password_field' }
+        = f.password_field :password, required: true, class: 'form-control gl-form-input', data: { qa_selector: 'new_password_field' }
       .form-group
         = f.label :password_confirmation, _('Password confirmation'), class: 'label-bold'
-        = f.password_field :password_confirmation, required: true, class: 'form-control', data: { qa_selector: 'confirm_password_field' }
+        = f.password_field :password_confirmation, required: true, class: 'form-control gl-form-input', data: { qa_selector: 'confirm_password_field' }
       .gl-mt-3.gl-mb-3
         = f.submit _('Save password'), class: "gl-button btn btn-success gl-mr-3", data: { qa_selector: 'save_password_button' }
         - unless @user.password_automatically_set?
diff --git a/app/views/profiles/passwords/new.html.haml b/app/views/profiles/passwords/new.html.haml
index f6783528243..ffec6baa20e 100644
--- a/app/views/profiles/passwords/new.html.haml
+++ b/app/views/profiles/passwords/new.html.haml
@@ -16,16 +16,16 @@
       .col-sm-2.col-form-label
         = f.label :current_password, _('Current password')
       .col-sm-10
-        = f.password_field :current_password, required: true, class: 'form-control'
+        = f.password_field :current_password, required: true, class: 'form-control gl-form-input'
   .form-group.row
     .col-sm-2.col-form-label
       = f.label :password, _('New password')
     .col-sm-10
-      = f.password_field :password, required: true, class: 'form-control'
+      = f.password_field :password, required: true, class: 'form-control gl-form-input'
   .form-group.row
     .col-sm-2.col-form-label
       = f.label :password_confirmation, _('Password confirmation')
     .col-sm-10
-      = f.password_field :password_confirmation, required: true, class: 'form-control'
+      = f.password_field :password_confirmation, required: true, class: 'form-control gl-form-input'
   .form-actions
     = f.submit _('Set new password'), class: 'gl-button btn btn-success'
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 577b64ba17a..ee04d9142b1 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -4,7 +4,7 @@
 - type_plural = _('personal access tokens')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-.row.gl-mt-3
+.row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title
@@ -33,8 +33,9 @@
         revoke_route_helper: ->(token) { revoke_profile_personal_access_token_path(token) }
 
 - unless Gitlab::CurrentSettings.disable_feed_token
-  %hr
-  .row.gl-mt-3
+  .col-lg-12
+    %hr
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_('AccessTokens|Feed token')
@@ -44,15 +45,16 @@
         = s_('AccessTokens|It cannot be used to access any other data.')
     .col-lg-8.feed-token-reset
       = label_tag :feed_token, s_('AccessTokens|Feed token'), class: 'label-bold'
-      = text_field_tag :feed_token, current_user.feed_token, class: 'form-control js-select-on-focus', readonly: true
+      = text_field_tag :feed_token, current_user.feed_token, class: 'form-control gl-form-input js-select-on-focus', readonly: true
       %p.form-text.text-muted
         - reset_link = link_to s_('AccessTokens|reset it'), [:reset, :feed_token, :profile], method: :put, data: { confirm: s_('AccessTokens|Are you sure? Any RSS or calendar URLs currently in use will stop working.') }
         - reset_message = s_('AccessTokens|Keep this token secret. Anyone who gets ahold of it can read activity and issue RSS feeds or your calendar feed as if they were you. You should %{link_reset_it} if that ever happens.') % { link_reset_it: reset_link }
         = reset_message.html_safe
 
 - if incoming_email_token_enabled?
-  %hr
-  .row.gl-mt-3
+  .col-lg-12
+    %hr
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_('AccessTokens|Incoming email token')
@@ -62,15 +64,16 @@
         = s_('AccessTokens|It cannot be used to access any other data.')
     .col-lg-8.incoming-email-token-reset
       = label_tag :incoming_email_token, s_('AccessTokens|Incoming email token'), class: 'label-bold'
-      = text_field_tag :incoming_email_token, current_user.incoming_email_token, class: 'form-control js-select-on-focus', readonly: true
+      = text_field_tag :incoming_email_token, current_user.incoming_email_token, class: 'form-control gl-form-input js-select-on-focus', readonly: true
       %p.form-text.text-muted
         - reset_link = link_to s_('AccessTokens|reset it'), [:reset, :incoming_email_token, :profile], method: :put, data: { confirm: s_('AccessTokens|Are you sure? Any issue email addresses currently in use will stop working.') }
         - reset_message = s_('AccessTokens|Keep this token secret. Anyone who gets ahold of it can create issues as if they were you. You should %{link_reset_it} if that ever happens.') % { link_reset_it: reset_link }
         = reset_message.html_safe
 
 - if static_objects_external_storage_enabled?
-  %hr
-  .row.gl-mt-3
+  .col-lg-12
+    %hr
+  .row.gl-mt-3.js-search-settings-section
     .col-lg-4
       %h4.gl-mt-0
         = s_('AccessTokens|Static object token')
@@ -80,7 +83,7 @@
         = s_('AccessTokens|It cannot be used to access any other data.')
     .col-lg-8
       = label_tag :static_object_token, s_('AccessTokens|Static object token'), class: "label-bold"
-      = text_field_tag :static_object_token, current_user.static_object_token, class: 'form-control', readonly: true, onclick: 'this.select()'
+      = text_field_tag :static_object_token, current_user.static_object_token, class: 'form-control gl-form-input', readonly: true, onclick: 'this.select()'
       %p.form-text.text-muted
         - reset_link = url_for [:reset, :static_object_token, :profile]
         - reset_link_start = '<a data-confirm="%{confirm}" rel="nofollow" data-method="put" href="%{url}">'.html_safe % { confirm: s_('AccessTokens|Are you sure?'), url: reset_link }
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index aeecb0c0d72..cd76a67b692 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -1,14 +1,15 @@
 - page_title _('Preferences')
 - @content_class = "limit-container-width" unless fluid_layout
-- user_fields = { gitpod_enabled: @user.gitpod_enabled, sourcegraph_enabled: @user.sourcegraph_enabled }
 - user_theme_id = Gitlab::Themes.for_user(@user).id
-- data_attributes = { integration_views: integration_views.to_json, user_fields: user_fields.to_json }
+- user_fields = { theme: user_theme_id, gitpod_enabled: @user.gitpod_enabled, sourcegraph_enabled: @user.sourcegraph_enabled }.to_json
+- @themes = Gitlab::Themes::THEMES.to_json
+- data_attributes = { themes: @themes, integration_views: integration_views.to_json, user_fields: user_fields, body_classes: Gitlab::Themes.body_classes, profile_preferences_path: profile_preferences_path }
 
 - Gitlab::Themes.each do |theme|
   = stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename
 
-= form_for @user, url: profile_preferences_path, remote: true, method: :put do |f|
-  .row.gl-mt-3.js-preferences-form
+= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f|
+  .row.gl-mt-3.js-preferences-form.js-search-settings-section
     .col-lg-4.application-theme#navigation-theme
       %h4.gl-mt-0
         = s_('Preferences|Navigation theme')
@@ -25,6 +26,7 @@
     .col-sm-12
       %hr
 
+  .row.js-preferences-form.js-search-settings-section
     .col-lg-4.profile-settings-sidebar#syntax-highlighting-theme
       %h4.gl-mt-0
         = s_('Preferences|Syntax highlighting theme')
@@ -42,6 +44,7 @@
     .col-sm-12
       %hr
 
+  .row.js-preferences-form.js-search-settings-section
     .col-lg-4.profile-settings-sidebar#behavior
       %h4.gl-mt-0
         = s_('Preferences|Behavior')
@@ -97,7 +100,7 @@
 
     .col-sm-12
       %hr
-
+  .row.js-preferences-form.js-search-settings-section
     .col-lg-4.profile-settings-sidebar#localization
       %h4.gl-mt-0
         = _('Localization')
@@ -141,10 +144,4 @@
             .form-text.text-muted
               = s_('Preferences|For example: 30 mins ago.')
 
-  #js-profile-preferences-app{ data: data_attributes, user_fields: user_fields.to_json }
-
-  .row.gl-mt-3.js-preferences-form
-    .col-lg-4.profile-settings-sidebar
-    .col-lg-8
-      .form-group
-        = f.submit _('Save changes'), class: 'gl-button btn btn-success'
+  #js-profile-preferences-app{ data: data_attributes }
diff --git a/app/views/profiles/preferences/update.js.erb b/app/views/profiles/preferences/update.js.erb
deleted file mode 100644
index 241262880c1..00000000000
--- a/app/views/profiles/preferences/update.js.erb
+++ /dev/null
@@ -1,20 +0,0 @@
-// Remove body class for any previous theme, re-add current one
-$('body').removeClass('<%= Gitlab::Themes.body_classes %>')
-$('body').addClass('<%= user_application_theme %>')
-
-// Toggle container-fluid class
-if ('<%= current_user.layout %>' === 'fluid') {
-  $('.content-wrapper .container-fluid').removeClass('container-limited')
-} else {
-  $('.content-wrapper .container-fluid').addClass('container-limited')
-}
-
-// Re-enable the "Save" button
-$('input[type=submit]').enable()
-
-// Show flash messages
-<% if flash.notice %>
-  new Flash({ message: '<%= flash.discard(:notice) %>', type: 'notice'})
-<% elsif flash.alert %>
-  new Flash({ message: '<%= flash.discard(:alert) %>', type: 'alert'})
-<% end %>
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 41699d6f01f..4689fd5272a 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -8,7 +8,7 @@
 = bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user gl-mt-3 js-quick-submit gl-show-field-errors' }, authenticity_token: true do |f|
   = form_errors(@user)
 
-  .row
+  .row.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_("Profiles|Public Avatar")
@@ -32,16 +32,16 @@
           = image_tag avatar_icon_for_user(@user, 160), alt: '', class: 'avatar s160'
       %h5.gl-mt-0= s_("Profiles|Upload new avatar")
       .gl-mt-2.gl-mb-3
-        %button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
+        %button.gl-button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
         %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen")
         = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
       .form-text.text-muted= s_("Profiles|The maximum file size allowed is 200KB.")
       - if @user.avatar?
         %hr
         = link_to s_("Profiles|Remove avatar"), profile_avatar_path, data: { confirm: s_("Profiles|Avatar will be removed. Are you sure?") }, method: :delete, class: 'gl-button btn btn-danger btn-inverted'
-
-  %hr
-  .row
+    .col-lg-12
+      %hr
+  .row.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0= s_("Profiles|Current status")
       %p= s_("Profiles|This emoji and message will appear on your profile and throughout the interface.")
@@ -65,7 +65,7 @@
         = status_form.hidden_field :emoji, id: 'js-status-emoji-field'
         = status_form.text_field :message,
           id: 'js-status-message-field',
-          class: 'form-control input-lg',
+          class: 'form-control gl-form-input input-lg',
           label: s_("Profiles|Your status"),
           prepend: emoji_button,
           append: reset_message_button,
@@ -74,21 +74,22 @@
           .checkbox-icon-inline-wrapper
             = status_form.check_box :availability, { data: { testid: "user-availability-checkbox" }, label: s_("Profiles|Busy"), wrapper_class: 'gl-mr-0 gl-font-weight-bold' }, availability["busy"], availability["not_set"]
             .gl-text-gray-600.gl-ml-5= s_('Profiles|"Busy" will be shown next to your name')
-  - if Feature.enabled?(:user_time_settings)
-    %hr
-    .row.user-time-preferences
-      .col-lg-4.profile-settings-sidebar
-        %h4.gl-mt-0= s_("Profiles|Time settings")
-        %p= s_("Profiles|You can set your current timezone here")
-      .col-lg-8
-        -# TODO: might need an entry in user/profile.md to describe some of these settings
-        -# https://gitlab.com/gitlab-org/gitlab-foss/issues/60070
-        %h5= ("Time zone")
-        = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'gl-button btn js-timezone-dropdown input-lg', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
-        %input.hidden{ :type => 'hidden', :id => 'user_timezone', :name => 'user[timezone]', value: @user.timezone }
-
-  %hr
-  .row
+    - if Feature.enabled?(:user_time_settings)
+      .col-lg-12
+        %hr
+  .row.user-time-preferences.js-search-settings-section
+    .col-lg-4.profile-settings-sidebar
+      %h4.gl-mt-0= s_("Profiles|Time settings")
+      %p= s_("Profiles|You can set your current timezone here")
+    .col-lg-8
+      -# TODO: might need an entry in user/profile.md to describe some of these settings
+      -# https://gitlab.com/gitlab-org/gitlab-foss/issues/60070
+      %h5= ("Time zone")
+      = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'gl-button btn js-timezone-dropdown input-lg', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
+      %input.hidden{ :type => 'hidden', :id => 'user_timezone', :name => 'user[timezone]', value: @user.timezone }
+    .col-lg-12
+      %hr
+  .row.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
         = s_("Profiles|Main settings")
@@ -99,20 +100,20 @@
     .col-lg-8
       .row
         = render 'profiles/name', form: f, user: @user
-        = f.text_field :id, readonly: true, label: s_('Profiles|User ID'), wrapper: { class: 'col-md-3' }
+        = f.text_field :id, class: 'gl-form-input', readonly: true, label: s_('Profiles|User ID'), wrapper: { class: 'col-md-3' }
 
       = render_if_exists 'profiles/email_settings', form: f
-      = f.text_field :skype, class: 'input-md', placeholder: s_("Profiles|username")
-      = f.text_field :linkedin, class: 'input-md', help: s_("Profiles|Your LinkedIn profile name from linkedin.com/in/profilename")
-      = f.text_field :twitter, class: 'input-md', placeholder: s_("Profiles|@username")
-      = f.text_field :website_url, class: 'input-lg', placeholder: s_("Profiles|website.com")
+      = f.text_field :skype, class: 'input-md gl-form-input', placeholder: s_("Profiles|username")
+      = f.text_field :linkedin, class: 'input-md gl-form-input', help: s_("Profiles|Your LinkedIn profile name from linkedin.com/in/profilename")
+      = f.text_field :twitter, class: 'input-md gl-form-input', placeholder: s_("Profiles|@username")
+      = f.text_field :website_url, class: 'input-lg gl-form-input', placeholder: s_("Profiles|website.com")
       - if @user.read_only_attribute?(:location)
-        = f.text_field :location, readonly: true, help: s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
+        = f.text_field :location, class: 'gl-form-input', readonly: true, help: s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
       - else
-        = f.text_field :location, label: s_('Profiles|Location'), class: 'input-lg', placeholder: s_("Profiles|City, country")
-      = f.text_field :job_title, class: 'input-md'
-      = f.text_field :organization, label: s_('Profiles|Organization'), class: 'input-md', help: s_("Profiles|Who you represent or work for")
-      = f.text_area :bio, label: s_('Profiles|Bio'), rows: 4, maxlength: 250, help: s_("Profiles|Tell us about yourself in fewer than 250 characters")
+        = f.text_field :location, label: s_('Profiles|Location'), class: 'input-lg gl-form-input', placeholder: s_("Profiles|City, country")
+      = f.text_field :job_title, class: 'input-md gl-form-input'
+      = f.text_field :organization, label: s_('Profiles|Organization'), class: 'input-md gl-form-input', help: s_("Profiles|Who you represent or work for")
+      = f.text_area :bio, class: 'gl-form-input', label: s_('Profiles|Bio'), rows: 4, maxlength: 250, help: s_("Profiles|Tell us about yourself in fewer than 250 characters")
       %hr
       %h5= s_("Private profile")
       .checkbox-icon-inline-wrapper
@@ -124,9 +125,10 @@
       = f.check_box :include_private_contributions, label: s_('Profiles|Include private contributions on my profile'), wrapper_class: 'mb-2', inline: true
       .help-block
         = s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")
-      .gl-mt-3.gl-mb-3
-        = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-success'
-        = link_to _("Cancel"), user_path(current_user), class: 'gl-button btn btn-cancel'
+  .row.gl-mt-3.gl-mb-3.gl-justify-content-end
+    .col-lg-8
+      = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-success'
+      = link_to _("Cancel"), user_path(current_user), class: 'gl-button btn btn-cancel'
 
 .modal.modal-profile-crop{ data: { cropper_css_path: ActionController::Base.helpers.stylesheet_path('lazy_bundles/cropper.css') } }
   .modal-dialog
@@ -141,12 +143,12 @@
           %img.modal-profile-crop-image{ alt: s_("Profiles|Avatar cropper") }
         .crop-controls
           .btn-group
-            %button.btn.btn-primary{ data: { method: 'zoom', option: '-0.1' } }
+            %button.btn.gl-button.btn-confirm{ data: { method: 'zoom', option: '-0.1' } }
               %span
                 = sprite_icon('search-minus')
-            %button.btn.btn-primary{ data: { method: 'zoom', option: '0.1' } }
+            %button.btn.gl-button.btn-confirm{ data: { method: 'zoom', option: '0.1' } }
               %span
                 = sprite_icon('search-plus')
       .modal-footer
-        %button.btn.btn-primary.js-upload-user-avatar{ type: 'button' }
+        %button.btn.gl-button.btn-confirm.js-upload-user-avatar{ type: 'button' }
           = s_("Profiles|Set new profile picture")
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index ff4ddd4ad69..0284c779cfa 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -22,12 +22,11 @@
                 data: { confirm: webauthn_enabled ? _('Are you sure? This will invalidate your registered applications and U2F / WebAuthn devices.') : _('Are you sure? This will invalidate your registered applications and U2F devices.') },
                 class: 'gl-button btn btn-danger gl-mr-3'
           = form_tag codes_profile_two_factor_auth_path, {style: 'display: inline-block', method: :post} do |f|
-            = submit_tag _('Regenerate recovery codes'), class: 'btn'
+            = submit_tag _('Regenerate recovery codes'), class: 'gl-button btn btn-default'
 
       - else
         %p
-          - help_link_start = '<a href="%{url}" target="_blank">' % { url: help_page_path('user/profile/account/two_factor_authentication') }
-          - register_2fa_token = _('Install a soft token authenticator like %{free_otp_link} or Google Authenticator from your application repository and use that app to scan this QR code. More information is available in the %{help_link_start}documentation%{help_link_end}.') % { free_otp_link:'<a href="https://freeotp.github.io/">FreeOTP</a>', help_link_start:help_link_start, help_link_end:'</a>' }
+          - register_2fa_token = _('We recommend cloud-based mobile authenticator apps such as Authy, Duo Mobile, and LastPass. They can restore access if you lose your hardware device.')
           = register_2fa_token.html_safe
         .row.gl-mb-3
           .col-md-4