Uses new modal component for delete list modal

bookwyrm/templates/components/new_modal.html

@@ -0,0 +1,31 @@
+{% load i18n %}
+
+<div class="modal" id="{{ id }}">
+    <div class="modal-background" data-modal-close></div>
+    <div class="modal-card is-thin" role="dialog" aria-modal="true" tabindex="-1">
+        <header class="modal-card-head">
+            <h2 class="modal-card-title mb-0">
+                {% block modal-title %}{% endblock %}
+            </h2>
+            <button
+                type="button"
+                class="delete"
+                aria-label="{% trans 'Close' %}"
+                data-modal-close
+            ></button>
+        </header>
+
+        <section class="modal-card-body">
+            {% block modal-body %}{% endblock %}
+        </section>
+        <footer class="modal-card-foot">
+            {% block modal-footer %}{% endblock %}
+        </footer>
+    </div>
+    <button
+        type="button"
+        class="modal-close is-large"
+        aria-label="{% trans 'Close' %}"
+        data-modal-close
+    ></button>
+</div>

bookwyrm/templates/lists/delete_list_modal.html

@@ -1,4 +1,4 @@
-{% extends 'components/modal.html' %}
+{% extends 'components/new_modal.html' %}
 {% load i18n %}
 
 {% block modal-title %}{% trans "Delete this list?" %}{% endblock %}
@@ -14,8 +14,9 @@
     <button class="button is-danger" type="submit">
         {% trans "Delete" %}
     </button>
-    {% trans "Cancel" as button_text %}
-    {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="delete_list" controls_uid=list.id %}
+    <button type="button" class="button" data-modal-close>
+        {% trans "Cancel" %}
+    </button>
 </form>
 {% endblock %}
 

bookwyrm/templates/lists/edit_form.html

@@ -9,5 +9,5 @@
 <form name="edit-list" method="post" action="{% url 'list' list.id %}">
     {% include 'lists/form.html' %}
 </form>
-{% include "lists/delete_list_modal.html" with controls_text="delete_list" controls_uid=list.id %}
+{% include "lists/delete_list_modal.html" with id="delete_list" %}
 {% endblock %}

bookwyrm/templates/lists/form.html

@@ -117,8 +117,9 @@
 <div class="is-flex">
     {% if list.id %}
     <div class="is-flex-grow-1">
-        {% trans "Delete list" as button_text %}
-        {% include 'snippets/toggle/toggle_button.html' with class="is-danger" text=button_text icon_with_text="x" controls_text="delete_list" controls_uid=list.id focus="modal_title_delete_list" %}
+        <button type="button" data-modal-open="delete_list" class="button is-danger">
+            {% trans "Delete list" %}
+        </button>
     </div>
     {% endif %}
     <div class="field has-addons">