From 8ca00c2138bfa02cbd1cf7adb1f58c4720b7f43a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 6 Feb 2025 17:29:41 +0200
Subject: [PATCH] client: use the icon action style for the help buttons of the
 attachment pages

---
 .../widgets/type_widgets/attachment_detail.js   | 11 ++++++-----
 .../app/widgets/type_widgets/attachment_list.js | 13 +++++++------
 src/public/stylesheets/style.css                | 17 +++++++++--------
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/attachment_detail.js b/src/public/app/widgets/type_widgets/attachment_detail.js
index 15932d63b..108c5da2e 100644
--- a/src/public/app/widgets/type_widgets/attachment_detail.js
+++ b/src/public/app/widgets/type_widgets/attachment_detail.js
@@ -48,11 +48,12 @@ export default class AttachmentDetailTypeWidget extends TypeWidget {
         this.$wrapper.empty();
         this.children = [];
 
-        const $helpButton = $(
-            '<button class="attachment-help-button" type="button" data-help-page="attachments.html" title="' +
-                t("attachment_detail.open_help_page") +
-                '"><span class="bx bx-help-circle"></span></button>'
-        );
+        const $helpButton = $(`
+            <button class="attachment-help-button icon-action bx bx-help-circle"
+                     type="button" data-help-page="attachments.html"
+                     title="${t("attachment_detail.open_help_page")}"
+            </button>
+        `);
         utils.initHelpButtons($helpButton);
 
         this.$linksWrapper.empty().append(
diff --git a/src/public/app/widgets/type_widgets/attachment_list.js b/src/public/app/widgets/type_widgets/attachment_list.js
index db5d44771..f6eadb97e 100644
--- a/src/public/app/widgets/type_widgets/attachment_list.js
+++ b/src/public/app/widgets/type_widgets/attachment_list.js
@@ -40,11 +40,12 @@ export default class AttachmentListTypeWidget extends TypeWidget {
     }
 
     async doRefresh(note) {
-        const $helpButton = $(
-            '<button class="attachment-help-button" type="button" data-help-page="attachments.html" title="' +
-                t("attachment_list.open_help_page") +
-                '"><span class="bx bx-help-circle"></span></button>'
-        );
+        const $helpButton = $(`
+            <button class="attachment-help-button icon-action bx bx-help-circle"
+                     type="button" data-help-page="attachments.html"
+                     title="${t("attachment_list.open_help_page")}">
+            </button>
+        `);
         utils.initHelpButtons($helpButton);
 
         const noteLink = await linkService.createLink(this.noteId); // do separately to avoid race condition between empty() and .append()
@@ -52,7 +53,7 @@ export default class AttachmentListTypeWidget extends TypeWidget {
 
         this.$linksWrapper.empty().append(
             $("<div>").append(t("attachment_list.owning_note"), noteLink),
-            $("<div>").append(
+            $(`<div class="attachment-actions-toolbar">`).append(
                 $('<button class="btn btn-sm">')
                     .text(t("attachment_list.upload_attachments"))
                     .on("click", () => this.triggerCommand("showUploadAttachmentsDialog", { noteId: this.noteId })),
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 8f883d8ff..53b7097ac 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1536,15 +1536,16 @@ textarea {
     display: none !important;
 }
 
+.attachment-actions-toolbar {
+    display: flex;
+    align-items: center;
+}
+
 .attachment-help-button {
-    font-size: xx-large;
-    border: 0;
-    background: none;
-    cursor: pointer;
-    color: var(--main-text-color);
-    margin-left: 20px;
-    position: relative;
-    top: 8px;
+    display: inline-block;
+    margin-left: 10px;
+    vertical-align: middle;
+    font-size: 1em;
 }
 
 .jump-to-note-dialog .modal-header {