diff --git a/css/tailwind.source.css b/css/tailwind.source.css index 35176ffb..d63b93ef 100644 --- a/css/tailwind.source.css +++ b/css/tailwind.source.css @@ -1789,6 +1789,10 @@ transform: scale(0.8); } + .video-tag-pill__icon svg { + @apply h-3 w-3; + } + .video-tag-pill:hover .video-tag-pill__label, .video-tag-pill:focus-visible .video-tag-pill__label { opacity: 0; diff --git a/js/ui/components/tagPillList.js b/js/ui/components/tagPillList.js index a17a130d..3348987c 100644 --- a/js/ui/components/tagPillList.js +++ b/js/ui/components/tagPillList.js @@ -37,7 +37,23 @@ function createTagButton({ doc, tag, onTagActivate }) { const icon = doc.createElement("span"); icon.className = "video-tag-pill__icon"; icon.setAttribute("aria-hidden", "true"); - icon.dataset.icon = "plus"; + + const svgNS = "http://www.w3.org/2000/svg"; + const svg = doc.createElementNS(svgNS, "svg"); + svg.setAttribute("viewBox", "0 0 16 16"); + svg.setAttribute("width", "16"); + svg.setAttribute("height", "16"); + svg.setAttribute("fill", "currentColor"); + svg.setAttribute("focusable", "false"); + + const path = doc.createElementNS(svgNS, "path"); + path.setAttribute( + "d", + "M8.75 3.5a.75.75 0 0 0-1.5 0v3.75H3.5a.75.75 0 1 0 0 1.5h3.75V12.5a.75.75 0 0 0 1.5 0V8.75H12.5a.75.75 0 0 0 0-1.5H8.75z", + ); + + svg.append(path); + icon.append(svg); button.append(label, icon); diff --git a/tests/ui/tag-pill-list.test.mjs b/tests/ui/tag-pill-list.test.mjs index a192e207..51f1d026 100644 --- a/tests/ui/tag-pill-list.test.mjs +++ b/tests/ui/tag-pill-list.test.mjs @@ -32,8 +32,11 @@ test("renderTagPillStrip builds buttons with labels and icons", () => { const icon = button.querySelector(".video-tag-pill__icon"); assert(icon, "icon span should be present"); - assert.equal(icon.dataset.icon, "plus"); assert.equal(icon.getAttribute("aria-hidden"), "true"); + + const svg = icon.querySelector("svg"); + assert(svg, "plus icon svg should be present"); + assert.equal(svg.getAttribute("viewBox"), "0 0 16 16"); } }); @@ -88,6 +91,9 @@ test("updateTagPillStrip replaces buttons and rewires handlers", () => { assert.equal(root.querySelectorAll("button").length, 1); assert.equal(updatedButtons[0].dataset.tag, "video"); + const updatedIcon = updatedButtons[0].querySelector(".video-tag-pill__icon svg"); + assert(updatedIcon, "updated button should contain the svg icon"); + // Ensure the old handler is removed by dispatching a click on the detached button. initialButtons[0].dispatchEvent(new document.defaultView.Event("click", { bubbles: true })); assert.deepEqual(firstActivations, ["nostr"]);