feat: improve toasts

src/components/cards/AddCardBulkModal.svelte

@@ -98,7 +98,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -116,7 +116,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w- rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -183,7 +183,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/cards/AddCardModal.svelte

@@ -91,7 +91,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -104,12 +104,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -165,7 +165,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/cards/CardDetailModal.svelte

@@ -85,7 +85,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -98,12 +98,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -174,7 +174,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/cards/DeleteCardModal.svelte

@@ -41,7 +41,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -54,12 +54,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -80,13 +80,8 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
+                {$_("please-confirm-the-deletion-of-card")}
               </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_("please-confirm-the-deletion-of-card")}
-                </p>
-              </div>
               <div class="w-full">
                 {$_("card")} #{delete_card.code}<br />
                 <span class="inline-block">
@@ -104,11 +99,11 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
           >
             {$_("delete")}
           </button>

src/components/contacts/AddContactModal.svelte

@@ -143,7 +143,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -161,7 +161,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -454,7 +454,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/contacts/ContactsOverview.svelte

@@ -151,7 +151,7 @@
 															(obj) => obj.id !== t.id
 														);
 														toast.dismiss();
-														toast($_("contact-deleted"));
+														toast.success($_("contact-deleted"));
 													});
 												}}
 												tabindex="0"

src/components/donations/AddDonationModal.svelte

@@ -122,7 +122,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -135,12 +135,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -289,7 +289,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/donations/AddDonationPaymentModal.svelte

@@ -83,7 +83,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -96,12 +96,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -179,7 +179,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/donations/DeleteDonationModal.svelte

@@ -44,7 +44,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -57,12 +57,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -82,13 +82,8 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
+                {$_("please-confirm-the-deletion-of-donation")}
               </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_("please-confirm-the-deletion-of-donation")}
-                </p>
-              </div>
               <div class="w-full">
                 <span class="inline-block"
                   ><b>{$_("donor")}</b>: {delete_donation.donor.firstname}
@@ -98,11 +93,11 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
           >
             {$_("delete")}
           </button>

src/components/donations/DonationDetail.svelte

@@ -106,7 +106,7 @@
 	function deleteDonation() {
 		DonationService.donationControllerRemove(original_data.id, false)
 			.then((resp) => {
-				toast($_("donation-deleted"));
+				toast.success($_("donation-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {

src/components/donations/DonationsOverview.svelte

@@ -163,7 +163,7 @@
       ...options,
       data: current_donations,
     }));
-    toast($_("donation-deleted"));
+    toast.success($_("donation-deleted"));
   }
 
   onMount(async () => {

src/components/donors/AddDonorModal.svelte

@@ -131,7 +131,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -149,7 +149,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -418,7 +418,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/donors/ConfirmDonorDeletion.svelte

@@ -1,95 +1,90 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
+	import { clickOutside } from "../base/outsideclick";
-
+	import { createEventDispatcher } from "svelte";
-  import { DonorService } from "@odit/lfk-client-js";
+	export let modal_open;
-
+	export let delete_donor;
-  import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
-  export let modal_open;
+	function cancelDelete() {
-  export let delete_donor;
+		modal_open = false;
-  const dispatch = createEventDispatcher();
+		dispatch("cancelDelete", { id: delete_donor.id });
-  function cancelDelete() {
+	}
-    modal_open = false;
+	function deleteDonor() {
-    dispatch("cancelDelete", { id: delete_donor.id });
+		dispatch("delete", { id: delete_donor.id });
-  }
+	}
-  function deleteDonor() {
-    dispatch("delete", { id: delete_donor.id });
-  }
 </script>
 
 {#if modal_open}
-  <div
+	<div
-    class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-auto"
-    use:clickOutside
+		use:clickOutside
-    on:click_outside={cancelDelete}
+		on:click_outside={cancelDelete}
-  >
+	>
-    <div
+		<div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
-    >
+		>
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
+				<div
-          class="absolute inset-0 bg-gray-500 opacity-75"
+					class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
+					data-id="modal_backdrop"
-        />
+				/>
-      </div>
+			</div>
-      <span
+			<span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
+				aria-hidden="true">&#8203;</span
-      >
+			>
-      <div
+			<div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+				class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
+				role="dialog"
-        aria-modal="true"
+				aria-modal="true"
-        aria-labelledby="modal-headline"
+				aria-labelledby="modal-headline"
-      >
+			>
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
-          <div class="sm:flex sm:items-start">
+					<div class="sm:flex sm:items-start">
-            <div
+						<div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-            >
+						>
-              <svg
+							<svg
-                class="h-6 w-6 text-blue-600"
+								class="h-6 w-6 text-blue-600"
-                fill="currentColor"
+								fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
+								xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
+								viewBox="0 0 24 24"
-                ><path fill="none" d="M0 0h24v24H0z" /><path
+								><path fill="none" d="M0 0h24v24H0z" /><path
-                  d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"
+									d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"
-                /></svg
+								/></svg
-              >
+							>
-            </div>
+						</div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+						<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
+							<h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("attention")}
+								{$_(
-              </h3>
+									"do-you-want-to-delete-this-donor-with-all-related-donations"
-              <div class="mt-2 mb-6">
+								)}
-                <p class="text-sm text-gray-500">
+							</h3>
-                  {$_(
+							<div class="mt-2 mb-6">
-                    "do-you-want-to-delete-this-donor-with-all-related-donations"
+								<p class="text-sm text-gray-500">
-                  )}
+									{$_("all-associated-donations-will-get-deleted-as-well")}
-                  <br />
+								</p>
-                  {$_("all-associated-donations-will-get-deleted-as-well")}
+							</div>
-                </p>
+						</div>
-              </div>
+					</div>
-            </div>
+				</div>
-          </div>
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
-        </div>
+					<button
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+						on:click={deleteDonor}
-          <button
+						type="button"
-            on:click={deleteDonor}
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-            type="button"
+					>
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+						{$_("confirm-delete-donor-with-all-donations")}
-          >
+					</button>
-            {$_("confirm-delete-donor-with-all-donations")}
+					<button
-          </button>
+						on:click={cancelDelete}
-          <button
+						type="button"
-            on:click={cancelDelete}
+						class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            type="button"
+					>
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+						{$_("cancel-keep-donor")}
-          >
+					</button>
-            {$_("cancel-keep-donor")}
+				</div>
-          </button>
+			</div>
-        </div>
+		</div>
-      </div>
+	</div>
-    </div>
-  </div>
 {/if}

src/components/donors/DonorDetail.svelte

@@ -77,7 +77,7 @@
 	function deleteDonor() {
 		DonorService.donorControllerRemove(original_data.id, true)
 			.then((resp) => {
-				toast($_("donor-deleted"));
+				toast.success($_("donor-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {

src/components/donors/DonorsOverview.svelte

@@ -174,7 +174,7 @@
     toast.loading($_("deleting-donor"));
     await DonorService.donorControllerRemove(event.detail.id, true);
     toast.dismiss();
-    toast($_("donor-deleted"));
+    toast.success($_("donor-deleted"));
     current_donors = current_donors.filter((d) => d.id !== event.detail.id);
     active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
     options.update((options) => ({

src/components/general/About.svelte

@@ -49,7 +49,7 @@
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
-				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
 					<div class="sm:flex sm:items-start">
 						<div
 							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -80,7 +80,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
 					<button
 						on:click={() => {
 							modal_open = false;

src/components/groups/AddGroupModal.svelte

@@ -66,7 +66,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -84,7 +84,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -159,7 +159,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/groups/GroupPermissions.svelte

@@ -50,7 +50,7 @@
         );
       });
       grantedPermissions_initial = grantedPermissions;
-      toast($_("permissions-updated"));
+      toast.success($_("permissions-updated"));
     });
   }
   Object.values(CreatePermission.target).forEach((t) => {

src/components/orgs/AddOrgModal.svelte

@@ -89,7 +89,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -107,7 +107,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -279,7 +279,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/orgs/ConfirmOrgDeletionModal.svelte

@@ -18,7 +18,7 @@
 			true
 		)
 			.then((resp) => {
-				toast($_("organization-deleted"));
+				toast.success($_("organization-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {});
@@ -32,7 +32,7 @@
 		on:click_outside={cancelDelete}
 	>
 		<div
-			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
@@ -50,7 +50,7 @@
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
-				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
 					<div class="sm:flex sm:items-start">
 						<div
 							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -82,7 +82,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
 					<button
 						on:click={deleteOrg}
 						type="button"

src/components/orgs/OrgDetail.svelte

@@ -75,7 +75,7 @@
 			false
 		)
 			.then((resp) => {
-				toast($_("organization-deleted"));
+				toast.success($_("organization-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {});

src/components/pdf_generation/GenerateRunnerCards.svelte

@@ -30,7 +30,7 @@
 		a.click();
 		a.remove();
 		toast.dismiss();
-		toast($_("pdf-successfully-generated"));
+		toast.success($_("pdf-successfully-generated"));
 	}
 
 	function generateRunnerCards(locale) {

src/components/pdf_generation/GenerateRunnerCertificates.svelte

@@ -37,7 +37,7 @@
 		a.click();
 		a.remove();
 		toast.dismiss();
-		toast($_("pdf-successfully-generated"));
+		toast.success($_("pdf-successfully-generated"));
 	}
 
 	async function generateRunnerCertificates(locale) {
@@ -146,7 +146,7 @@
 							count_orgs === generate_orgs.length
 						) {
 							toast.dismiss();
-							toast($_("pdfs-successfully-generated"));
+							toast.success($_("pdfs-successfully-generated"));
 						}
 					})
 					.catch((err) => {});

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -36,7 +36,7 @@
 		a.click();
 		a.remove();
 		toast.dismiss();
-		toast($_("pdf-successfully-generated"));
+		toast.success($_("pdf-successfully-generated"));
 	}
 
 	async function generateTeamContracts(locale) {

src/components/runners/AddRunnerModal.svelte

@@ -124,7 +124,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -137,12 +137,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -323,7 +323,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/runners/DeleteRunnerModal.svelte

@@ -38,7 +38,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -51,12 +51,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -76,13 +76,8 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
+                {$_('delete_runner')}
               </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_("please-confirm-the-deletion-of-runner")}
-                </p>
-              </div>
               <div class="w-full">
                 <span class="inline-block"
                   >{delete_runner.firstname} {delete_runner.lastname}</span
@@ -91,11 +86,11 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
           >
             {$_("delete")}
           </button>

src/components/runners/ImportRunnerModal.svelte

@@ -150,7 +150,7 @@
               dispatch("created", { runners: resp });
               toast.dismiss();
               recent_processed = true;
-              toast($_("import-finished"));
+              toast.success($_("import-finished"));
               cancelModal();
             })
             .catch((err) => {
@@ -170,7 +170,7 @@
               dispatch("created", { runners: resp });
               toast.dismiss();
               recent_processed = true;
-              toast($_("import-finished"));
+              toast.success($_("import-finished"));
               cancelModal();
             })
             .catch((err) => {
@@ -194,7 +194,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -212,7 +212,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"

src/components/runners/Runners.svelte

@@ -146,7 +146,7 @@
 			...options,
 			data: current_runners,
 		}));
-		toast($_("runner-deleted"));
+		toast.success($_("runner-deleted"));
 	}
 
 	onMount(async () => {

src/components/scans/AddScanModal.svelte

@@ -75,7 +75,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -88,12 +88,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -180,7 +180,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/scans/DeleteScanModal.svelte

@@ -40,7 +40,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -53,12 +53,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -78,19 +78,19 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
+                {$_("please-confirm-the-deletion-of-scan")}
               </h3>
               <div class="mt-2 mb-6">
-                {$_("please-confirm-the-deletion-of-scan")} #{delete_scan.id}
+                #{delete_scan.id}
               </div>
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
           >
             {$_("delete")}
           </button>

src/components/scans/ScanDetail.svelte

@@ -72,7 +72,7 @@
 	function deleteScan() {
 		ScanService.scanControllerRemove(original_data.id, false)
 			.then((resp) => {
-				toast($_("deleted-scan"));
+				toast.success($_("deleted-scan"));
 				location.replace("./");
 			})
 			.catch((err) => {

src/components/scans/ScansOverview.svelte

@@ -174,7 +174,7 @@
       ...options,
       data: current_scans,
     }));
-    toast($_("scan-deleted"));
+    toast.success($_("scan-deleted"));
   }
 
   onMount(async () => {

src/components/scanstations/AddScanStationModal.svelte

@@ -79,7 +79,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -92,12 +92,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -188,7 +188,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/scanstations/ConfirmScanStationDeletion.svelte

@@ -15,7 +15,7 @@
   function deleteStation() {
     ScanStationService.scanStationControllerRemove(delete_station.id, true)
       .then((resp) => {
-        toast($_("station-deleted"));
+        toast.success($_("station-deleted"));
         location.replace("./");
       })
       .catch((err) => {});
@@ -29,7 +29,7 @@
     on:click_outside={cancelDelete}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -47,7 +47,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -78,7 +78,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             on:click={deleteStation}
             type="button"

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -62,7 +62,7 @@
 	{/if}
 	<div class="fixed z-10 inset-0 overflow-y-auto">
 		<div
-			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
@@ -80,7 +80,7 @@
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
-				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
 					<div class="sm:flex sm:items-start">
 						<div
 							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -184,7 +184,7 @@
 						/>
 					</div>
 				</div>
-				<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
 					<button
 						on:click={close}
 						type="button"

src/components/scanstations/ScanStationDetail.svelte

@@ -49,7 +49,7 @@
 	function deleteStation() {
 		ScanStationService.scanStationControllerRemove(original_data.id, false)
 			.then((resp) => {
-				toast($_("station-deleted"));
+				toast.success($_("station-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {

src/components/scanstations/ScanStations.svelte

@@ -165,7 +165,7 @@
 																current_stations = current_stations.filter(
 																	(obj) => obj.id !== s.id
 																);
-																toast($_("station-deleted"));
+																toast.success($_("station-deleted"));
 															})
 															.catch((err) => {
 																modal_open = true;

src/components/settings/ConfirmProfileDeletion.svelte

@@ -30,7 +30,7 @@
     on:click_outside={cancelDelete}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -48,7 +48,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -81,7 +81,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             on:click={deleteMe}
             type="button"

src/components/statsclients/AddStatsClientModal.svelte

@@ -65,7 +65,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -78,12 +78,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -133,7 +133,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/statsclients/ConfirmStatsClientDeletion.svelte

@@ -14,7 +14,7 @@
   function deleteClient() {
     StatsClientService.statsClientControllerRemove(delete_client.id, true)
       .then((resp) => {
-        toast($_("statsclient-deleted"));
+        toast.success($_("statsclient-deleted"));
         location.replace("./");
       })
       .catch((err) => {});
@@ -28,7 +28,7 @@
     on:click_outside={cancelDelete}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -46,7 +46,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -77,7 +77,7 @@
             </div> -->
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             on:click={deleteClient}
             type="button"

src/components/statsclients/CopyStatsClientTokenModal.svelte

@@ -22,7 +22,7 @@
       if (!successful) {
         throw new Error();
       }
-      toast($_("copied-token-to-clipboard"));
+      toast.success($_("copied-token-to-clipboard"));
       copied = true;
     } catch (err) {
       toast.error($_("error-whyile-copying-to-clipboard"));
@@ -39,7 +39,7 @@
   {/if}
   <div class="fixed z-10 inset-0 overflow-y-auto">
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -57,7 +57,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -123,7 +123,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             on:click={close}
             type="button"

src/components/statsclients/StatsClientDetail.svelte

@@ -20,7 +20,7 @@
 	function deleteClient() {
 		StatsClientService.statsClientControllerRemove(original_data.id, false)
 			.then((resp) => {
-				toast($_("statsclient-deleted"));
+				toast.success($_("statsclient-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {

src/components/statsclients/StatsClientsOverview.svelte

@@ -118,7 +118,7 @@
                               current_clients = current_clients.filter(
                                 (obj) => obj.id !== c.id
                               );
-                              toast($_("statsclient-deleted"));
+                              toast.success($_("statsclient-deleted"));
                             })
                             .catch((err) => {
                               modal_open = true;

src/components/teams/AddTeamModal.svelte

@@ -76,7 +76,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -89,12 +89,12 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-md text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -184,7 +184,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/teams/ConfirmTeamDeletionModal.svelte

@@ -31,7 +31,7 @@
 		on:click_outside={cancelDelete}
 	>
 		<div
-			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
@@ -49,7 +49,7 @@
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
-				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
 					<div class="sm:flex sm:items-start">
 						<div
 							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -81,7 +81,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
 					<button
 						on:click={deleteTeam}
 						type="button"

src/components/teams/TeamDetail.svelte

@@ -67,7 +67,7 @@
 	function deleteTeam() {
 		RunnerTeamService.runnerTeamControllerRemove(original.id, false)
 			.then((resp) => {
-				toast($_("team-deleted"));
+				toast.success($_("team-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {

src/components/tracks/AddTrackModal.svelte

@@ -74,7 +74,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -92,7 +92,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -215,7 +215,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/tracks/TracksOverview.svelte

@@ -188,7 +188,7 @@
                           tracksstore.set(
                             $tracksstore.filter((tr) => tr.id !== t.id)
                           );
-                          toast($_("track-deleted"));
+                          toast.success($_("track-deleted"));
                         }}
                         class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
                         >{$_("confirm-delete")}</button

src/components/users/AddUserModal.svelte

@@ -91,7 +91,7 @@
     }}
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -109,7 +109,7 @@
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
@@ -272,7 +272,7 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}

src/components/users/UserDetail.svelte

@@ -92,7 +92,7 @@
 					usergroups_array_original = usergroups_array;
 					//
 					toast.dismiss();
-					toast($_("user-updated"));
+					toast.success($_("user-updated"));
 				})
 				.catch((err) => {});
 		}

src/locales/de.json

@@ -61,7 +61,7 @@
     "cancel-keep-team": "Abbrechen, Team behalten",
     "cannot-reset-your-password-directly": "Schade. \nWir können das Passwort leider nicht direkt zurücksetzen.\nBitte sende uns eine Mail in der du deine Identität bestätigst.",
     "card": "Läuferkarte",
-    "card-added": "Karte wurde hinzugefügt",
+    "card-added": "Karte wurde erstellt",
     "card-deleted": "Karte gelöscht",
     "card-updated": "Karte aktualisiert",
     "cards": "Läuferkarten",
@@ -87,7 +87,7 @@
     "confirm-runner-import": "Bitte die Läufer für den Import bestätigen.",
     "confirm-the-new-password": "Neues Passwort bestätigen",
     "contact": "Kontakt",
-    "contact-added": "Kontakt wurde hinzugefügt",
+    "contact-added": "Kontakt wurde erstellt",
     "contact-deleted": "Kontakt gelöscht",
     "contact-information": "Kontaktinformation",
     "contact-is-being-added": "Kontakt wird erstellt...",
@@ -164,6 +164,7 @@
     "delete-statsclient": "Statsclient löschen",
     "delete-team": "Team Löschen",
     "delete-user": "Benutzer löschen",
+    "delete_runner": "Läufer löschen?",
     "deleted-scan": "Scan wurde gelöscht",
     "deleting-contact": "Kontakt wird gelöscht",
     "deleting-donor": "Sponsor wird gelöscht",
@@ -334,10 +335,9 @@
     "permissions": "Berechtigungen",
     "permissions-updated": "Berechtigungen aktualisiert!",
     "phone": "Telefon",
-    "please-confirm-the-deletion-of-card": "Bitte bestätige die Löschung der Karte",
+    "please-confirm-the-deletion-of-card": "Karte löschen?",
-    "please-confirm-the-deletion-of-donation": "Bitte bestätige die Löschung des Sponsorings",
+    "please-confirm-the-deletion-of-donation": "Sponsoring löschen?",
-    "please-confirm-the-deletion-of-runner": "Bitte bestätige die Löschung des Läufers",
+    "please-confirm-the-deletion-of-scan": "Scan löschen?",
-    "please-confirm-the-deletion-of-scan": "Bitte bestätige die Löschung des Scans",
     "please-copy-the-token-and-store-it-somewhere-save": "Bitte kopiere dir den Token und bewahre ihn gut auf.",
     "please-provide-a-password": "Bitte gebe ein Passwort an...",
     "please-provide-the-nessecary-information-to-add-a-new-donor": "Bitte mach die Notwendigen Angaben, um eine neuen Sponsor zu erstellen",
@@ -419,7 +419,7 @@
     "stuff-that-could-harm-your-profile": "Einstellungen, die deinem Profil nachhaltig schaden können",
     "successful-password-reset": "Passwort erfolgreich zurückgesetzt!",
     "team": "Team",
-    "team-added": "Team wurde hinzugefügt",
+    "team-added": "Team wurde erstellt",
     "team-deleted": "Team gelöscht",
     "team-detail-is-being-loaded": "Team wird geladen...",
     "team-is-being-added": "Team wird erstellt...",

src/locales/en.json

@@ -164,6 +164,7 @@
     "delete-statsclient": "Delete statsclient",
     "delete-team": "Delete Team",
     "delete-user": "Delete User",
+    "delete_runner": "Delete runner?",
     "deleted-scan": "Deleted scan",
     "deleting-contact": "deleting contact",
     "deleting-donor": "deleting donor...",
@@ -334,10 +335,9 @@
     "permissions": "Permissions",
     "permissions-updated": "Permissions updated!",
     "phone": "Phone",
-    "please-confirm-the-deletion-of-card": "Please confirm the deletion of this card",
+    "please-confirm-the-deletion-of-card": "delete card?",
-    "please-confirm-the-deletion-of-donation": "Please confirm the deletion of this donation",
+    "please-confirm-the-deletion-of-donation": "delete donation?",
-    "please-confirm-the-deletion-of-runner": "Please confirm the deletion of this runner",
+    "please-confirm-the-deletion-of-scan": "delete scan?",
-    "please-confirm-the-deletion-of-scan": "Please confirm the deletion of scan",
     "please-copy-the-token-and-store-it-somewhere-save": "Please copy the token and store it somewhere safe.",
     "please-provide-a-password": "Please provide a password...",
     "please-provide-the-nessecary-information-to-add-a-new-donor": "Please provide the nessecary information to add a new donor",