Apply gl-button class to projects/notes

Style buttons in the notes UI with the GlButton component styles

app/views/projects/notes/_actions.html.haml

@@ -39,15 +39,15 @@
 - if can?(current_user, :award_emoji, note)
   - if note.emoji_awardable?
     .note-actions-item
-      = button_tag title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip btn btn-transparent", data: { position: 'right', container: 'body' } do
-        %span{ class: 'link-highlight award-control-icon-neutral' }= sprite_icon('slight-smile')
-        %span{ class: 'link-highlight award-control-icon-positive' }= sprite_icon('smiley')
-        %span{ class: 'link-highlight award-control-icon-super-positive' }= sprite_icon('smile')
+      = button_tag title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip btn gl-button btn-icon btn-default-tertiary btn-transparent", data: { position: 'right', container: 'body' } do
+        = sprite_icon('slight-smile', css_class: 'link-highlight award-control-icon-neutral gl-button-icon gl-icon gl-text-gray-400')
+        = sprite_icon('smiley', css_class: 'link-highlight award-control-icon-positive gl-button-icon gl-icon gl-left-3!')
+        = sprite_icon('smile', css_class: 'link-highlight award-control-icon-super-positive gl-button-icon gl-icon gl-left-3! ')
 
   - if note_editable
-    .note-actions-item
-      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn btn-transparent', data: { container: 'body', qa_selector: 'edit_comment_button' } do
+    .note-actions-item.gl-ml-0
+      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn gl-button btn-default-tertiary btn-transparent gl-px-2!', data: { container: 'body', qa_selector: 'edit_comment_button' } do
         %span.link-highlight
-          = custom_icon('icon_pencil')
+          = sprite_icon('pencil', css_class: 'gl-button-icon gl-icon gl-text-gray-400 s16')
 
   = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable

app/views/projects/notes/_more_actions_dropdown.html.haml

 - is_current_user = current_user == note.author
 
 - if note_editable || !is_current_user
-  .dropdown.more-actions.note-actions-item
-    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn btn-transparent', data: { toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' } do
-      %span.icon
-        = custom_icon('ellipsis_v')
+  %div{ class: "dropdown more-actions note-actions-item gl-ml-0!" }
+    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn gl-button btn-default-tertiary btn-transparent gl-pl-2! gl-pr-0!', data: { toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' } do
+      = sprite_icon('ellipsis_v', css_class: 'gl-button-icon gl-icon gl-text-gray-400')
     %ul.dropdown-menu.more-actions-dropdown.dropdown-open-left
       %li
         = clipboard_button(text: noteable_note_url(note), title: _('Copy reference'), button_text: _('Copy link'), class: 'btn-clipboard', hide_tooltip: true, hide_button_icon: true)

changelogs/unreleased/231204-projects-notes.yml

+---
+title: Apply GitLab UI button styles to buttons in app/views/projects/notes directory
+merge_request: 44107
+author: Lakshit
+type: other