Apply GitLab UI styles to app/views/projects dir

These changes were cherry-picked from
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/52183
Thanks to @garybell for the original contribution

app/views/projects/_export.html.haml

@@ -20,9 +20,9 @@
       %li= _('Any encrypted tokens')
   - if project.export_status == :finished
     = link_to _('Download export'), download_export_project_path(project),
-            rel: 'nofollow', download: '', method: :get, class: "btn btn-default", data: { qa_selector: 'download_export_link' }
+            rel: 'nofollow', download: '', method: :get, class: "btn gl-button btn-default", data: { qa_selector: 'download_export_link' }
     = link_to _('Generate new export'), generate_new_export_project_path(project),
-            method: :post, class: "btn btn-default"
+            method: :post, class: "btn gl-button btn-default"
   - else
     = link_to _('Export project'), export_project_path(project),
-          method: :post, class: "btn btn-default", data: { qa_selector: 'export_project_link' }
+          method: :post, class: "btn gl-button btn-default", data: { qa_selector: 'export_project_link' }

app/views/projects/_home_panel.html.haml

@@ -69,7 +69,7 @@
       .home-panel-description.text-break
         .home-panel-description-markdown.read-more-container{ itemprop: 'description' }
           = markdown_field(@project, :description)
-        %button.btn.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
+        %button.btn.gl-button.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
           = _("Read more")
 
     - if @project.forked?

app/views/projects/_last_push.html.haml

@@ -15,5 +15,5 @@
 
       - if can?(current_user, :create_merge_request_in, event.project.default_merge_request_target)
         .flex-right
-          = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn btn-info btn-sm qa-create-merge-request" do
+          = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn gl-button btn-info btn-sm qa-create-merge-request" do
             #{ _('Create merge request') }

app/views/projects/_readme.html.haml

@@ -24,4 +24,4 @@
         distributed with computer software, forming part of its documentation.
         GitLab will render it here instead of this message.
       %p
-        = link_to "Add Readme", @project.add_readme_path, class: 'btn btn-success'
+        = link_to "Add Readme", @project.add_readme_path, class: 'btn gl-button btn-success'

app/views/projects/_service_desk_settings.html.haml

@@ -2,7 +2,7 @@
 %section.settings.js-service-desk-setting-wrapper.no-animate#js-service-desk{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Service Desk')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.js-settings-toggle
       = expanded ? _('Collapse') : _('Expand')
     - link_start = "<a href='#{help_page_path('user/project/service_desk')}' target='_blank' rel='noopener noreferrer'>".html_safe
     %p= _('Enable and disable Service Desk. Some additional configuration might be required. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }

app/views/projects/_stat_anchor_list.html.haml

@@ -6,4 +6,4 @@
   - anchors.each do |anchor|
     %li.nav-item
       = link_to_if(anchor.link, anchor.label, anchor.link, stat_anchor_attrs(anchor)) do
-        .stat-text.d-flex.align-items-center{ class: ('btn btn-default disabled' if project_buttons) }= anchor.label
+        .stat-text.d-flex.align-items-center{ class: ('btn gl-button btn-default disabled' if project_buttons) }= anchor.label

app/views/projects/_visibility_modal.html.haml

@@ -24,6 +24,6 @@
         .form-group
           = text_field_tag 'confirm_path_input', '', class: 'form-control js-confirm-danger-input qa-confirm-input'
         .form-actions
-          %button.btn.btn-default.gl-mr-4{ type: "button", "data-dismiss": "modal" }
+          %button.btn.gl-button.btn-default.gl-mr-4{ type: "button", "data-dismiss": "modal" }
             = _('Cancel')
-          = submit_tag _('Reduce project visibility'), class: "btn btn-danger js-confirm-danger-submit qa-confirm-button", disabled: true
+          = submit_tag _('Reduce project visibility'), class: "btn gl-button btn-danger js-confirm-danger-submit qa-confirm-button", disabled: true

app/views/projects/_wiki.html.haml

@@ -14,4 +14,4 @@
       - if can_create_wiki
         %p
           = _("Add a homepage to your wiki that contains information about your project and GitLab will display it here instead of this message.")
-        = link_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', class: "btn btn-primary"
+        = link_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', class: "btn gl-button btn-primary"

app/views/projects/edit.html.haml

@@ -8,14 +8,14 @@
 %section.settings.general-settings.no-animate.expanded#js-general-settings
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, topics, avatar')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= _('Collapse')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= _('Collapse')
     %p= _('Update your project name, topics, description, and avatar.')
   .settings-content= render 'projects/settings/general'
 
 %section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded), data: { qa_selector: 'visibility_features_permissions_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Visibility, project features, permissions')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
     %p= _('Choose visibility level, enable/disable project features and their permissions, disable email notifications, and show default award emoji.')
 
   .settings-content
@@ -25,12 +25,12 @@
       .js-project-permissions-form
       - if show_visibility_confirm_modal?(@project)
         = render "visibility_modal"
-      = f.submit _('Save changes'), class: "gl-button gl-button btn btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
+      = f.submit _('Save changes'), class: "btn gl-button btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
 
 %section.qa-merge-request-settings.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Merge requests')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
     = render_if_exists 'projects/merge_request_settings_description_text'
 
   .settings-content
@@ -39,7 +39,7 @@
     = form_for @project, remote: true, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
       = render 'projects/merge_request_settings', form: f
-      = f.submit _('Save changes'), class: "gl-button btn btn-succes qa-save-merge-request-changes rspec-save-merge-request-changes"
+      = f.submit _('Save changes'), class: "btn gl-button btn-success qa-save-merge-request-changes rspec-save-merge-request-changes"
 
 = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
 
@@ -48,7 +48,8 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('ProjectSettings|Badges')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
     %p
       = s_('ProjectSettings|Customize this project\'s badges.')
       = link_to s_('ProjectSettings|What are badges?'), help_page_path('user/project/badges')
@@ -62,7 +63,7 @@
 %section.qa-advanced-settings.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
-    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
     %p= _('Housekeeping, export, path, transfer, remove, archive.')
 
   .settings-content
@@ -72,7 +73,7 @@
         = _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
         = link_to _('Learn more.'), help_page_path('administration/housekeeping'), target: '_blank', rel: 'noopener noreferrer'
       = link_to _('Run housekeeping'), housekeeping_project_path(@project),
-        method: :post, class: "gl-button btn btn-default"
+        method: :post, class: "btn gl-button btn-default"
 
     = render 'export', project: @project
 

changelogs/unreleased/231179-app-projects-buttons.yml

+---
+title: Add gl-button class in relevant places on project html
+merge_request: 52183
+author: Gary Bell @garybell
+type: other

spec/features/projects/settings/project_settings_spec.rb

@@ -6,7 +6,7 @@ RSpec.describe 'Projects settings' do
   let_it_be(:project) { create(:project) }
   let(:user) { project.owner }
   let(:panel) { find('.general-settings', match: :first) }
-  let(:button) { panel.find('.btn.js-settings-toggle') }
+  let(:button) { panel.find('.btn.gl-button.js-settings-toggle') }
   let(:title) { panel.find('.settings-title') }
 
   before do

spec/features/projects/settings/registry_settings_spec.rb

@@ -39,7 +39,7 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p
         select('7 days', from: 'Remove tags older than:')
         fill_in('Remove tags matching:', with: '.*-production')
 
-        submit_button = find('.btn.btn-success')
+        submit_button = find('.btn.gl-button.btn-success')
         expect(submit_button).not_to be_disabled
         submit_button.click
       end
@@ -53,7 +53,7 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p
       within '#js-registry-policies' do
         fill_in('Remove tags matching:', with: '*-production')
 
-        submit_button = find('.btn.btn-success')
+        submit_button = find('.btn.gl-button.btn-success')
         expect(submit_button).not_to be_disabled
         submit_button.click
       end