add some more icons

6 files changed, 17 insertions, 6 deletions

diff --git a/fietsboek/static/favicon.png b/fietsboek/static/favicon.png
index 136fe91..0adcf4f 100644
--- a/fietsboek/static/favicon.png
+++ b/fietsboek/static/favicon.png
diff --git a/fietsboek/static/fietsboek.js b/fietsboek/static/fietsboek.js
index 0f0685d..6fc5209 100644
--- a/fietsboek/static/fietsboek.js
+++ b/fietsboek/static/fietsboek.js
@@ -1,5 +1,10 @@
 function tagClicked(event) {
-  event.target.parentNode.removeChild(event.target);
+  /* We clicked on the little icon */
+  if (event.target.tagName.toLowerCase() == "i") {
+    event.target.parentNode.parentNode.removeChild(event.target.parentNode);
+  } else {
+    event.target.parentNode.removeChild(event.target);
+  }
   updateTagList();
 }
 
@@ -29,7 +34,13 @@ document.addEventListener('DOMContentLoaded', function(event) {
       node.addEventListener("click", tagClicked);
       let text = document.createTextNode($("#new-tag").value);
       node.appendChild(text);
+      let icon = document.createElement("i");
+      icon.classList.add("bi");
+      icon.classList.add("bi-x");
+      node.appendChild(icon);
       $("#formTags").appendChild(node);
+      let space = document.createTextNode(" ");
+      $("#formTags").appendChild(space);
       $("#new-tag").value = "";
       updateTagList();
     })
diff --git a/fietsboek/templates/admin.jinja2 b/fietsboek/templates/admin.jinja2
index 04a9ac3..47c1832 100644
--- a/fietsboek/templates/admin.jinja2
+++ b/fietsboek/templates/admin.jinja2
@@ -24,7 +24,7 @@
       </form>
       <form method="POST" action="{{ request.route_path('admin-badge-delete') }}">
         <input type="hidden" name="badge-delete-id" value="{{ badge.id }}">
-        <button class="btn btn-danger">{{ _("page.admin.badge.delete_badge") }}</button>
+        <button class="btn btn-danger"><i class="bi bi-trash"></i> {{ _("page.admin.badge.delete_badge") }}</button>
       </form>
     </span>
     {% endfor %}
diff --git a/fietsboek/templates/edit.jinja2 b/fietsboek/templates/edit.jinja2
index 153c127..2a77e4b 100644
--- a/fietsboek/templates/edit.jinja2
+++ b/fietsboek/templates/edit.jinja2
@@ -11,8 +11,8 @@
   <form method="POST">
     {{ edit_form.edit_track(track.title, track.date, track.visibility, track.description, track.tags, badges) }}
     <div class="btn-group" role="group">
-        <button type="submit" class="btn btn-primary">{{ _("page.edit.form.submit") }}</button>
-        <a href="{{ request.route_url('details', id=track.id) }}" class="btn btn-secondary">{{ _("page.edit.form.cancel") }}</a>
+        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> {{ _("page.edit.form.submit") }}</button>
+        <a href="{{ request.route_url('details', id=track.id) }}" class="btn btn-secondary"><i class="bi bi-x-circle"></i> {{ _("page.edit.form.cancel") }}</a>
     </div>
   </form>
 </div>
diff --git a/fietsboek/templates/login.jinja2 b/fietsboek/templates/login.jinja2
index 42c3221..b54f1bd 100644
--- a/fietsboek/templates/login.jinja2
+++ b/fietsboek/templates/login.jinja2
@@ -16,7 +16,7 @@
         <input type="password" class="form-control" id="loginPassword" name="password">
       </div>
     </div>
-    <button type="submit" class="btn btn-primary">{{ _("page.login.submit") }}</button>
+    <button type="submit" class="btn btn-primary"><i class="bi bi-door-open"></i> {{ _("page.login.submit") }}</button>
   </form>
 </div>
 {% endblock content %}
diff --git a/fietsboek/templates/upload.jinja2 b/fietsboek/templates/upload.jinja2
index 7a5790b..b3b4ddc 100644
--- a/fietsboek/templates/upload.jinja2
+++ b/fietsboek/templates/upload.jinja2
@@ -8,7 +8,7 @@
       <label for="uploadFile" class="form-label">{{ _("page.upload.form.gpx") }}</label>
       <input class="form-control" type="file" id="uploadFile" name="gpx">
     </div>
-    <button type="submit" class="btn btn-primary">{{ _("page.upload.form.submit") }}</button>
+    <button type="submit" class="btn btn-primary"><i class="bi bi-upload"></i> {{ _("page.upload.form.submit") }}</button>
   </form>
 </div>
 {% endblock %}