feat: replace modal close button with X icon at top right

Author: zorexsalvo

static/css/app.css

@@ -1811,12 +1811,18 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
   .top-full {
     top: 100%;
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
   .right-8 {
     right: calc(var(--spacing) * 8);
   }
@@ -3311,6 +3317,13 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .btn-sm {
+    @layer daisyui.l1.l2 {
+      --fontsize: 0.75rem;
+      --btn-p: 0.75rem;
+      --size: calc(var(--size-field, 0.25rem) * 8);
+    }
+  }
   .btn-primary {
     @layer daisyui.l1.l2.l3 {
       --btn-color: var(--color-primary);

templates/includes/announcement_modal.html

@@ -6,15 +6,13 @@
 {% if latest_announcement %}
 <dialog id="announcement-modal" class="modal" open>
     <div class="modal-box bg-cream-1 {% if latest_announcement.modal_size == 'lg' %}w-11/12 max-w-2xl{% elif latest_announcement.modal_size == 'xl' %}w-11/12 max-w-4xl{% endif %}">
+        <form method="dialog" class="absolute right-4 top-4">
+            <button class="btn btn-sm btn-ghost">✕</button>
+        </form>
         <h3 class="font-bold text-lg">📢 {{ latest_announcement.title }}</h3>
         <div class="py-4">
             {{ latest_announcement.content|safe }}
         </div>
-        <div class="modal-action">
-            <form method="dialog">
-                <button class="btn">Close</button>
-            </form>
-        </div>
     </div>
     <form method="dialog" class="modal-backdrop">
         <button>close</button>