client: use the icon action style for the help buttons of the attachment pages

Author: adoriandoran

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(

src/public/app/widgets/type_widgets/attachment_list.js

@@ -40,19 +40,20 @@ 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()
         noteLink.addClass("use-tn-links");
 
         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 })),

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 {