Move the modal close button to top right/left corner #5887

hedyorg · Oct 31, 2024 · 3b5ca0e · 3b5ca0e
1 parent d5dfed9
commit 3b5ca0e
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/templates/layout.html b/templates/layout.html
@@ -215,10 +215,12 @@ <h2>{{ _('levels')|capitalize }}</h2>
        </div>
     </div>
     <div id="modal_alert" class="z-50 fixed hidden" role="alert" style="top: 10%; left: 50%; transform: translate(-50%, -50%);">
-        <div id="modal_alert_container" data-cy="modal_alert_container" class="mx-auto text-center bg-green-100 border-green-400 text-green-700 border rounded px-4 py-3">
-            <span id="modal_alert_title" class="block sm:inline"></span>
+        <div id="modal_alert_container" data-cy="modal_alert_container"
+             class="mx-auto text-center bg-green-100 border-green-400 text-green-700 border rounded px-7 py-2">
+            <svg class="absolute top-2 end-1 h-6 w-6 fill-current text-green-500 block sm:inline"
+                 id="modal_alert_button"
+                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
             <span id="modal_alert_text" data-cy="modal_alert_text" class="block sm:inline"></span>
-            <svg class="fill-current h-6 w-6 text-green-500 block sm:inline" id="modal_alert_button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
         </div>
     </div>