Make button pretty (#937)

* Make button pretty

2 hours to make the button look better

* Make button square

Button is no longer weirdly rectangular

* Fix formatting

---------

Co-authored-by: Melker Widén <85902964+memagu@users.noreply.github.com>

Author: carlhaggren

src/lib/components/GlobalAlert.svelte

@@ -21,7 +21,7 @@
   })();
 </script>
 
-<div role="alert" class={`alert alert-${severity} rounded-none`}>
+<div role="alert" class={`alert alert-${severity} gap-1 rounded-none`}>
   <span class={`${icon} text-xl`}></span>
   <span class="font-bold prose-a:link">
     <!-- eslint-disable-next-line svelte/no-at-html-tags -- Sanitized client-side -->
@@ -30,6 +30,7 @@
   <form
     method="POST"
     action="/api/closeAlert"
+    class="h-7 w-20 border-t-[1.5px] border-black border-opacity-20 sm:h-[unset] sm:w-7 sm:border-0"
     on:submit={(e) => {
       e.preventDefault();
       const ACTION_URL = "/api/closeAlert";
@@ -47,7 +48,11 @@
       }).then(() => invalidate("alerts"));
     }}
   >
-    <button class="p-2 font-black"> ✕ </button>
+    <button
+      class="mt-1 aspect-square h-7 w-7 rounded-lg bg-transparent font-black transition hover:bg-white/20 sm:mt-0"
+    >
+      ✕
+    </button>
     <input type="hidden" name="alertId" value={id} />
   </form>
 </div>