From 70384b04c3824c431f467b94893035997b7f5dbc Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Thu, 28 Apr 2022 03:35:02 -0400
Subject: [PATCH] nicer delete buttons

---
 static/feather-icons/x.svg |  1 +
 static/transbeam.css       | 15 +++++++++++++++
 static/transbeam.js        |  9 +++------
 3 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 static/feather-icons/x.svg

diff --git a/static/feather-icons/x.svg b/static/feather-icons/x.svg
new file mode 100644
index 0000000..7d5875c
--- /dev/null
+++ b/static/feather-icons/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
diff --git a/static/transbeam.css b/static/transbeam.css
index bff9c51..4e7150b 100644
--- a/static/transbeam.css
+++ b/static/transbeam.css
@@ -85,6 +85,21 @@ td {
     padding: 10px;
 }
 
+td.file_delete {
+    background-color: #888;
+    mask-image: url("feather-icons/x.svg");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    padding-left: 15px;
+    padding-right: 15px;
+    cursor: pointer;
+}
+
+td.file_delete:hover {
+    background-color: #f00;
+}
+
 td.file_size {
     text-align: right;
 }
diff --git a/static/transbeam.js b/static/transbeam.js
index 800f045..ff2d412 100644
--- a/static/transbeam.js
+++ b/static/transbeam.js
@@ -121,11 +121,8 @@ function addListEntry(file) {
     const listEntry = document.createElement('tr');
 
     const deleteButtonCell = document.createElement('td');
-    const deleteButton = document.createElement('button');
-    deleteButtonCell.appendChild(deleteButton);
-    deleteButton.className = 'file_delete';
-    deleteButton.textContent = 'x';
-    deleteButton.addEventListener('click', () => {
+    deleteButtonCell.className = 'file_delete';
+    deleteButtonCell.addEventListener('click', () => {
         removeFile(file.name);
         listEntry.remove();
         updateFiles();
@@ -160,7 +157,7 @@ uploadButton.addEventListener('click', (e) => {
     if (files.length === 0) { return; }
 
     fileInputContainer.remove();
-    for (const button of Array.from(document.getElementsByTagName('button'))) {
+    for (const button of Array.from(document.getElementsByTagName('button')).concat(...document.getElementsByClassName('file_delete'))) {
         button.remove();
     }