style(next): promoted attributes widget: tweak buttons

src/public/app/widgets/ribbon_widgets/promoted_attributes.js

@@ -16,7 +16,7 @@ const TPL = `
         flex-shrink: 0.4;
         overflow: auto;
     }
-    
+
     .promoted-attributes-container {
         margin: 0 1.5em;
         overflow: auto;
@@ -39,7 +39,7 @@ const TPL = `
         display: table-cell;
         padding: 1px 0;
     }
-    
+
     .promoted-attribute-cell div.input-group {
         margin-left: 10px;
         display: flex;
@@ -54,9 +54,9 @@ const TPL = `
         flex-grow: 0;
         width: unset;
     }
-    
+
     </style>
-    
+
     <div class="promoted-attributes-container"></div>
 </div>`;
 
@@ -272,7 +272,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
 
         if (definition.multiplicity === "multi") {
             const $addButton = $("<span>")
-                .addClass("bx bx-plus pointer")
+                .addClass("bx bx-plus pointer tn-tool-button")
                 .prop("title", t("promoted_attributes.add_new_attribute"))
                 .on("click", async () => {
                     const $new = await this.createPromotedAttributeCell(
@@ -292,7 +292,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
                 });
 
             const $removeButton = $("<span>")
-                .addClass("bx bx-trash pointer")
+                .addClass("bx bx-trash pointer tn-tool-button")
                 .prop("title", t("promoted_attributes.remove_this_attribute"))
                 .on("click", async () => {
                     const attributeId = $input.attr("data-attribute-id");

src/public/stylesheets/theme-next/shell.css

@@ -1876,4 +1876,11 @@ div.promoted-attribute-cell div.input-group {
 div.promoted-attribute-cell input {
     padding: 2px 8px;
     font-weight: 500;
+}
+
+div.promoted-attribute-cell .multiplicity {
+    --icon-button-size: 28px;
+
+    margin-left: 8px;
+    font-size: 0; /* Prevent whitespaces creating a gap between buttons */
 }