src/components/auth/Login.svelte

@@ -20,6 +20,7 @@
         OpenAPI.TOKEN = value.access_token;
         const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
         store.login(value, jwtinfo);
+        toast($_("welcome_wavinghand"));
       }
     }
   });
@@ -49,6 +50,7 @@
           store.login(result.access_token, jwtinfo);
           location.replace("/");
           toast.dismiss();
+          toast($_("welcome_wavinghand"));
         })
         .catch((err) => {
           toast.dismiss();

src/components/cards/CardsOverview.svelte

@@ -151,6 +151,7 @@
   }
 
   onMount(async () => {
+    toast.loading($_("loading-cards"));
     let page = 0;
     let pagesize = 500;
     while (page >= 0) {
@@ -171,6 +172,8 @@
       dataLoaded = true;
       page++;
     }
+    toast.dismiss();
+    toast.success($_("all-cards-loaded"));
   });
 </script>
 

src/components/donations/AddDonationModal.svelte

@@ -100,6 +100,7 @@
   }
 
   onMount(async () => {
+    toast.loading($_("loading-donors"));
     donors = (await DonorService.donorControllerGetAll()).map(
       (r) => {
         return { label: getDonorLabel(r), value: r };
@@ -110,6 +111,8 @@
         return { label: getDonorLabel(r), value: r };
       }
     );
+    toast.dismiss();
+    toast.success($_("all-donors-loaded"));
   });
 </script>
 

src/components/general/About.svelte

@@ -31,7 +31,7 @@
     }}
   >
     <div
-			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -67,7 +67,7 @@
                 /></svg
               >
             </div>
-						<div class="mt-3 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">
                 {$_("read-license")}
               </h3>
@@ -96,28 +96,41 @@
   </div>
 {/if}
 <!-- /// -->
-<section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
+  <div class="text-center mb-8">
+    <h1
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
+    >
       {$_("about")}
-	</h4>
-	<p class="mt-2 mb-2">
+      🧾
+    </h1>
+    <p
+      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300"
+    >
       Lauf für Kaya!
-		<strong class="font-medium">
+      <strong class="text-white font-medium">
         {$_("by")}
         <a href="https://odit.services" class="underline">ODIT.Services</a>
       </strong>
       <br />
-		<span>{$_("lfk-is-os")}</span>
+      <span class="text-lg">{$_("lfk-is-os")}</span>
     </p>
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  </div>
+</div>
+
+<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
+  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    <h2 class="text-4xl font-display font-semibold md:text-5xl">
       {$_("credits")}
-	</h4>
-	<p class="text-left">{$_("oss_credit_description")}</p>
-	<div class="mt-5 overflow-x-auto">
+    </h2>
+    <div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
+      <p class="text-center">{$_("oss_credit_description")}</p>
+    </div>
+    <div class="w-screen leading-8 pl-5 mt-5">
       {#await license_promise}
-			<p>{$_("licenses-are-being-loaded")}</p>
+        <p class="text-center w-full">{$_("licenses-are-being-loaded")}</p>
       {:then}
-			<table class="font-mono">
+        <table>
           <thead class="border-b border-gray-400">
             <tr class="odd:bg-white even:bg-gray-100">
               <th>{$_("dependency_name")}</th>
@@ -129,17 +142,17 @@
           </thead>
           <tbody>
             {#each licenses as l}
-						<tr class="odd:bg-white even:bg-gray-100 *:p-2">
+              <tr class="odd:bg-white even:bg-gray-100">
                 <td>{l.name}</td>
                 <td>
-								<button
+                  {l.license || "?"}<br /><button
                     class="underline cursor-pointer"
                     on:click={() => {
                       modal_open = true;
                       currentlicense = l.name + "@" + l.version;
                       licensetext =
                         l.licensetext || $_("no-license-text-could-be-found");
-									}}>{l.license || "?"}</button
+                    }}>{$_("read-license")}</button
                   >
                 </td>
                 <td>
@@ -164,9 +177,9 @@
         </div>
       {/await}
     </div>
-	<div class="w-full mt-8">
-		<p class="font-medium">{$_("icon-image-credits")}</p>
-		<ul class="list-disc ml-6">
+    <div class="w-full leading-8 mt-8">
+      <p class="text-xl font-medium">{$_("icon-image-credits")}</p>
+      <ul class="list-disc">
         <li>
           <a
             class="underline"
@@ -193,4 +206,5 @@
         </li>
       </ul>
     </div>
-</section>
+  </div>
+</div>