From 203c26e006b2856a6ccd9f69347b885667a18555 Mon Sep 17 00:00:00 2001
From: Laurens Weijs <laurens.weijs@rijksoverheid.nl>
Date: Tue, 17 Dec 2024 10:58:48 +0100
Subject: [PATCH] Improve modals

---
 .../algorithms/details_measure_modal.html.j2      |  9 ++++++++-
 amt/site/templates/macros/form_macros.html.j2     | 15 ++++++++-------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/amt/site/templates/algorithms/details_measure_modal.html.j2 b/amt/site/templates/algorithms/details_measure_modal.html.j2
index e5513841..c813fcd2 100644
--- a/amt/site/templates/algorithms/details_measure_modal.html.j2
+++ b/amt/site/templates/algorithms/details_measure_modal.html.j2
@@ -1,6 +1,13 @@
 {% import "macros/form_macros.html.j2" as macros with context %}
 <div class="rvo-layout-column rvo-layout-gap--xl">
-    <h1 class="utrecht-heading-1 rvo-heading--no-margins">{{ measure.name }}</h1>
+    <div class="amt-flex-container">
+        <h1 class="utrecht-heading-1 rvo-heading--no-margins">{{ measure.name }}</h1> <a
+        onclick="amt.closeModal('measure-modal')"><span
+        class="utrecht-icon rvo-icon rvo-icon-kruis rvo-icon--md rvo-icon--hemelblauw"
+        role="img"
+        aria-label="Close"></span></a>
+    </div>
+    <hr class="rvo-hr" />
     <div class="rvo-layout-column rvo-layout-gap--md">
         <div class="rvo-layout-column rvo-layout-gap--xs">
             <form hx-encoding="multipart/form-data"
diff --git a/amt/site/templates/macros/form_macros.html.j2 b/amt/site/templates/macros/form_macros.html.j2
index 51ed6b49..c71da09d 100644
--- a/amt/site/templates/macros/form_macros.html.j2
+++ b/amt/site/templates/macros/form_macros.html.j2
@@ -141,10 +141,11 @@
                             <div id="delete-file-modal-{{ ulid }}" class="minbzk-modal display-none">
                                 <div class="modal-underlay"
                                      onclick="amt.closeModal('delete-file-modal-{{ ulid }}')"></div>
-                                <div class="modal-content rvo-layout-column"
+                                <div class="modal-content rvo-layout-column rvo-layout-align-content-space-between"
                                      style="overflow-x: hidden;
+                                            min-height: 240px;
                                             height: auto;
-                                            width: auto">
+                                            width: auto";>
                                     <div class="amt-flex-container">
                                         <h3 class="utrecht-heading-3 rvo-heading--no-margins">{% trans %}Delete file{% endtrans %}</h3>
                                         <a onclick="amt.closeModal('delete-file-modal-{{ ulid }}')"><span class="utrecht-icon rvo-icon rvo-icon-kruis rvo-icon--md rvo-icon--hemelblauw"
@@ -152,11 +153,11 @@
       aria-label="Close"></span></a>
                                     </div>
                                     <hr class="rvo-hr" />
-                                    <p style="padding-block: 0.5em 0.4em;">
-                                        <strong>{% trans %}Are you sure you want to delete{%
-                                        endtrans %} {{ file }}?</strong>
+                                    <p style="min-height: 54%; padding-block: 0.5em 0.4em;">
+                                        {% trans %}Are you sure you want to delete{% endtrans %}
+                                        <strong> {{ file }}?</strong>
                                     </p>
-                                    <p class="utrecht-button-group">
+                                    <div class="utrecht-button-group">
                                         <button hx-headers='{"X-CSRF-Token": "{{ csrftoken }}"}'
                                                 hx-delete="/algorithm/{{ algorithm_id }}/file/{{ ulid }}"
                                                 hx-target="#file-{{ ulid }}"
@@ -170,7 +171,7 @@
                                         <button class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-md"
                                                 onclick="amt.closeModal('delete-file-modal-{{ ulid }}')"
                                                 type="button">{% trans %}No{% endtrans %}</button>
-                                    </p>
+                                    </div>
                                 </div>
                             </div>
                             <li id="file-{{ ulid }}" class="rvo-item-list__item">