ci: only tagged runs for now

.devcontainer/Dockerfile

@@ -1,5 +0,0 @@
-FROM mcr.microsoft.com/vscode/devcontainers/base:alpine-3.12
-RUN apk update
-RUN apk add --upgrade nodejs-current npm
-RUN npm i -g pnpm rimraf
-RUN rimraf node_modules

.devcontainer/devcontainer.json

@@ -1,20 +0,0 @@
-{
-  "name": "Node.js",
-  "build": {
-    "dockerfile": "Dockerfile"
-  },
-  "settings": {
-    "terminal.integrated.shell.linux": "/bin/sh"
-  },
-  "extensions": [
-    "dbaeumer.vscode-eslint",
-    "2gua.rainbow-brackets",
-    "christian-kohler.npm-intellisense",
-    "remimarsal.prettier-now",
-    "svelte.svelte-vscode",
-    "lokalise.i18n-ally",
-    "fivethree.vscode-svelte-snippets",
-    "voorjaar.windicss-intellisense"
-  ],
-  "postCreateCommand": "yarn && yarn dev --open"
-}

.gitea/workflows/dev.yaml

@@ -1,34 +0,0 @@
-name: Build Latest and dev images
-on:
-  push:
-    branches:
-      - dev
-
-jobs:
-  build-container:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 19
-      - run: npm i -g pnpm@8 && pnpm i
-      - run: pnpm licenses:export
-      - name: Login to registry
-        uses: docker/login-action@v3
-        with:
-          registry: registry.odit.services
-          username: ${{ vars.REGISTRY_USERNAME }}
-          password: ${{ secrets.REGISTRY_PASSWORD }}
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Build and push
-        uses: docker/build-push-action@v6
-        with:
-          push: true
-          tags: |
-            ${{ vars.REGISTRY }}/lfk/frontend:dev
-            ${{ vars.REGISTRY }}/lfk/frontend:latest
-          platforms: linux/amd64,linux/arm64

.gitea/workflows/release.yaml

@@ -14,7 +14,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 19
-      - run: npm i -g pnpm@8 && pnpm i
+      - run: npm i -g pnpm@10.7 && pnpm i
       - run: pnpm licenses:export
       - name: Login to registry
         uses: docker/login-action@v3

CHANGELOG.md

@@ -2,9 +2,44 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.9.2](https://git.odit.services/lfk/frontend/compare/1.9.1...1.9.2)
+
+- chore: update lfk client [`f4542ad`](https://git.odit.services/lfk/frontend/commit/f4542adf3b7c757d907c979b989450b64553d750)
+- feat(dashboard): show runners via selfservice count [`0ee43f8`](https://git.odit.services/lfk/frontend/commit/0ee43f80a65bb5b83d51d6c098bd203bc09e2f1f)
+- refactor: change release message [`9f0623d`](https://git.odit.services/lfk/frontend/commit/9f0623d194a7784d4ede3cb6a6cd10d0aea4a180)
+
+#### [1.9.1](https://git.odit.services/lfk/frontend/compare/1.9.0...1.9.1)
+
+> 28 March 2025
+
+- refactor: project cleanup [`04897c7`](https://git.odit.services/lfk/frontend/commit/04897c7d2e89cb7e834815907409698ad6758637)
+- 🚀RELEASE v1.9.1 [`5bab95a`](https://git.odit.services/lfk/frontend/commit/5bab95a9423d9da8c17165732b988ca868f950a5)
+- feat(RunnerDetail): show created_via [`a4fbaba`](https://git.odit.services/lfk/frontend/commit/a4fbabaf9a0a9a26b6c6782056f11b8a646b8f16)
+- feat(ConfirmTeamDeletionModal): success toast [`831f369`](https://git.odit.services/lfk/frontend/commit/831f36946d5db777ca77855161f653f861cbd56e)
+
+#### [1.9.0](https://git.odit.services/lfk/frontend/compare/1.8.2...1.9.0)
+
+> 28 March 2025
+
+- feat: improved ConfirmOrgDeletionModal [`fecf3b5`](https://git.odit.services/lfk/frontend/commit/fecf3b59a320afafee52c95b361edec644c5cbff)
+- feat: modal improvements [`f5a46aa`](https://git.odit.services/lfk/frontend/commit/f5a46aa203ca2adf2e4e6fe4863629ca80f1becb)
+- feat: improve ConfirmTeamDeletionModal [`a2cd54f`](https://git.odit.services/lfk/frontend/commit/a2cd54fba4a987f7f7dbab22cc958f9aea2817ff)
+- feat: improve modals [`443371e`](https://git.odit.services/lfk/frontend/commit/443371e2fdc42506e6e87379bd65facbd8f22d7d)
+- feat: improve toasts [`481f6b6`](https://git.odit.services/lfk/frontend/commit/481f6b686e77ffa36ee08b62f653d626dd9124c9)
+- feat: improve modals [`e7a69eb`](https://git.odit.services/lfk/frontend/commit/e7a69ebdca668a5d78b52d092aa1bca6259aa19b)
+- 🚀RELEASE v1.9.0 [`b7e6fda`](https://git.odit.services/lfk/frontend/commit/b7e6fdaeacf17a7cc77109460b5e2c6d3775ef7b)
+- feat: improve translations [`d7ab924`](https://git.odit.services/lfk/frontend/commit/d7ab9247cd2eab4f7269b23de5fada76a99ac8bc)
+- feat: improved translations [`18a4623`](https://git.odit.services/lfk/frontend/commit/18a4623e71dfd942f2268203ce713030acfb2d9d)
+- feat: improve translations [`9048f3d`](https://git.odit.services/lfk/frontend/commit/9048f3df774df233705a41b08012193447eab803)
+- feat: improved sidebar z-index [`968a7cc`](https://git.odit.services/lfk/frontend/commit/968a7ccc0e7917bf1a42ac8f85f358880951cc2a)
+- feat: improved track deletion ui feedback [`194c3c4`](https://git.odit.services/lfk/frontend/commit/194c3c4886e3f3206d76d8634be9d3dd2fa02d8d)
+
 #### [1.8.2](https://git.odit.services/lfk/frontend/compare/1.8.1...1.8.2)
 
+> 26 March 2025
+
 - feat: improvement of card,certificate,sponsoringcontract action buttons [`7633b7b`](https://git.odit.services/lfk/frontend/commit/7633b7b05671342bc30e0bbecbcd9450e06b5e4d)
+- 🚀RELEASE v1.8.2 [`6249502`](https://git.odit.services/lfk/frontend/commit/6249502a88ec5bfba6dfbc3ad5ede82d71d0d9e2)
 - feat(dashboard): active item for teams + runners [`8a78034`](https://git.odit.services/lfk/frontend/commit/8a780340792445fff1f78db994fb78acb5da8304)
 
 #### [1.8.1](https://git.odit.services/lfk/frontend/compare/1.8.0...1.8.1)

Dockerfile

@@ -3,7 +3,7 @@ ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
 
 COPY package.json pnpm-lock.yaml vite.config.js tailwind.config.cjs postcss.config.cjs index.html ./
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@9
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@10.7
 RUN mkdir /pnpm && pnpm config set store-dir /pnpm && pnpm i
 
 COPY src ./src

index.html

@@ -13,7 +13,7 @@
 
   <body>
     <span style="display: none; visibility: hidden" id="buildinfo"
-      >RELEASE_INFO-1.8.2-RELEASE_INFO</span
+      >RELEASE_INFO-1.9.2-RELEASE_INFO</span
     >
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script src="/env.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odit/lfk-frontend",
-  "version": "1.8.2",
+  "version": "1.9.2",
   "type": "module",
   "scripts": {
     "i18n-order": "node order.js",
@@ -28,11 +28,11 @@
     "git": {
       "commit": true,
       "requireCleanWorkingDir": false,
-      "commitMessage": "🚀RELEASE v${version}",
+      "commitMessage": "chore(release): ${version}",
       "push": true,
       "tag": true,
-      "tagName": null,
+      "tagName": "${version}",
-      "tagAnnotation": "v${version}"
+      "tagAnnotation": "${version}"
     },
     "npm": {
       "publish": false
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@fontsource/athiti": "^5.2.5",
-    "@odit/lfk-client-js": "1.1.3",
+    "@odit/lfk-client-js": "1.2.0",
     "@paralleldrive/cuid2": "2.2.2",
     "@tanstack/svelte-table": "8.9.1",
     "bwip-js": "3.4.0",

public/logo.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.1 118">
-  <path fill="#ff3e00" d="M91.8 15.6C80.9-.1 59.2-4.7 43.6 5.2L16.1 22.8A31.25 31.25 0 001.9 43.9c-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5"/>
-  <path fill="#fff" d="M40.9 103.9a21.8 21.8 0 01-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3l.6-2.6.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1a6.62 6.62 0 008.8 2L65.5 72c1.4-.9 2.3-2.2 2.6-3.8.3-1.6-.1-3.3-1-4.6a6.56 6.56 0 00-8.8-1.9l-10.5 6.7a18.6 18.6 0 01-5.6 2.4 21.8 21.8 0 01-23.4-8.7 20.2 20.2 0 01-3.4-15.3c.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1a6.56 6.56 0 00-8.8-1.9L32.4 46.1c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6a6.56 6.56 0 008.8 1.9l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5"/>
-</svg>

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/dashboard/Dashboard.svelte

@@ -16,7 +16,8 @@
 <section class="min-h-screen bg-gray-50">
 	<div
 		class:collapsed_navigation={!navOpen}
-		class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
+		style="z-index:2;"
+		class="select-none fixed top-0 left-0 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
 	>
 		<a href="/" class="flex items-center px-4 py-5">
 			<img src="/lfk-logo.png" alt="Logo" class="h-10" />

src/components/dashboard/MainDashContent.svelte

@@ -1,228 +1,246 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import { StatsService } from "@odit/lfk-client-js";
+	import { StatsService } from "@odit/lfk-client-js";
-  import store from "../../store";
+	import store from "../../store";
-  import StatCard from "./StatCard.svelte";
+	import StatCard from "./StatCard.svelte";
-  const stats_promise = StatsService.statsControllerGet();
+	const stats_promise = StatsService.statsControllerGet();
 </script>
 
 <div class="p-2 md:p-5 overflow-x-hidden">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("dashboard-greeting")} <span class="text-blue-500"
+		{$_("dashboard-greeting")}
-      >{store.state.jwtinfo.userdetails.firstname}
+		<span class="text-blue-500"
-      {store.state.jwtinfo.userdetails.lastname}</span
+			>{store.state.jwtinfo.userdetails.firstname}
-    >
+			{store.state.jwtinfo.userdetails.lastname}</span
-  </h4>
+		>
-  {#await stats_promise}
+	</h4>
-    <div
+	{#await stats_promise}
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+		<div
-      role="alert"
+			class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-    >
+			role="alert"
-      <p class="font-bold">{$_("stats-are-being-loaded")}</p>
+		>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			<p class="font-bold">{$_("stats-are-being-loaded")}</p>
-    </div>
+			<p class="text-sm">{$_("this-might-take-a-moment")}</p>
-  {:then stats}
+		</div>
-    <div
+	{:then stats}
-      class="grid gap-1 grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 sm:gap-4"
+		<div
-    >
+			class="grid gap-1 grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 sm:gap-4"
-      <StatCard
+		>
-        title={$_("runners")}
+			<StatCard
-        value={stats.total_runners}
+				title={$_("runners")}
-        href="/runners/"
+				value={stats.total_runners}
-      >
+				href="/runners/"
-        <svg
+			>
-          height="24"
+				<svg
-          width="24"
+					height="24"
-          fill="currentColor"
+					width="24"
-          xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
-          viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
-          ><path d="M0 0h24v24H0z" fill="none" />
+					viewBox="0 0 24 24"
-          <path
+					><path d="M0 0h24v24H0z" fill="none" />
-            d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
+					<path
-          /></svg
+						d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("total-scans")}
+			<StatCard
-        value={stats.total_scans}
+				title={$_("total-scans")}
-        href="/scans/"
+				value={stats.total_scans}
-      >
+				href="/scans/"
-        <svg
+			>
-          fill="currentColor"
+				<svg
-          width="24"
+					fill="currentColor"
-          height="24"
+					width="24"
-          xmlns="http://www.w3.org/2000/svg"
+					height="24"
-          viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
-          ><path fill="none" d="M0 0h24v24H0z" />
+					viewBox="0 0 24 24"
-          <path
+					><path fill="none" d="M0 0h24v24H0z" />
-            fill="currentColor"
+					<path
-            d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+						fill="currentColor"
-          /></svg
+						d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("total-donors")}
+			<StatCard
-        value={stats.total_donors}
+				title={$_("total-donors")}
-        href="/donors/"
+				value={stats.total_donors}
-      >
+				href="/donors/"
-        <svg
+			>
-          fill="currentColor"
+				<svg
-          xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
-          viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
-          width="24"
+					viewBox="0 0 24 24"
-          height="24"
+					width="24"
-          ><path fill="none" d="M0 0h24v24H0z" />
+					height="24"
-          <path
+					><path fill="none" d="M0 0h24v24H0z" />
-            d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
+					<path
-          /></svg
+						d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("total-donation-count")}
+			<StatCard
-        value={stats.total_donations}
+				title={$_("total-donation-count")}
-        href="/donations/"
+				value={stats.total_donations}
-      >
+				href="/donations/"
-        <svg
+			>
-          fill="currentColor"
+				<svg
-          xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
-          viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
-          width="24"
+					viewBox="0 0 24 24"
-          height="24"
+					width="24"
-          ><path fill="none" d="M0 0h24v24H0z" />
+					height="24"
-          <path
+					><path fill="none" d="M0 0h24v24H0z" />
-            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+					<path
-          /></svg
+						d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("average-donation")}
+			<StatCard
-        value={`${parseFloat(stats.average_donation / 100).toLocaleString(
+				title={$_("average-donation")}
-          undefined,
+				value={`${parseFloat(stats.average_donation / 100).toLocaleString(
-          {
+					undefined,
-            minimumFractionDigits: 2,
+					{
-            maximumFractionDigits: 2,
+						minimumFractionDigits: 2,
-          }
+						maximumFractionDigits: 2,
-        )}`}
+					}
-        href="/donations/"
+				)}`}
-      >
+				href="/donations/"
-        <svg
+			>
-          xmlns="http://www.w3.org/2000/svg"
+				<svg
-          height="24"
+					xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
+					height="24"
-          width="24"
+					fill="currentColor"
-          ><path d="M0 0h24v24H0z" fill="none" />
+					width="24"
-          <path
+					><path d="M0 0h24v24H0z" fill="none" />
-            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
+					<path
-          /></svg
+						d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("total-donations")}
+			<StatCard
-        value={`${parseFloat(stats.total_donation / 100).toLocaleString(
+				title={$_("total-donations")}
-          undefined,
+				value={`${parseFloat(stats.total_donation / 100).toLocaleString(
-          {
+					undefined,
-            minimumFractionDigits: 2,
+					{
-            maximumFractionDigits: 2,
+						minimumFractionDigits: 2,
-          }
+						maximumFractionDigits: 2,
-        )}`}
+					}
-        href="/donations/"
+				)}`}
-      >
+				href="/donations/"
-        <svg
+			>
-          xmlns="http://www.w3.org/2000/svg"
+				<svg
-          height="24"
+					xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
+					height="24"
-          width="24"
+					fill="currentColor"
-          ><path d="M0 0h24v24H0z" fill="none" />
+					width="24"
-          <path
+					><path d="M0 0h24v24H0z" fill="none" />
-            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
+					<path
-          /></svg
+						d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("total-distance")}
+			<StatCard
-        value={`${stats.total_distance / 1000}km`}
+				title={$_("total-distance")}
-        href="/scans/"
+				value={`${stats.total_distance / 1000}km`}
-      >
+				href="/scans/"
-        <svg
+			>
-          fill="currentColor"
+				<svg
-          xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
-          height="24"
+					xmlns="http://www.w3.org/2000/svg"
-          width="24"
+					height="24"
-          ><path d="M0 0h24v24H0z" fill="none" />
+					width="24"
-          <path
+					><path d="M0 0h24v24H0z" fill="none" />
-            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
+					<path
-          /></svg
+						d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("average-distance")}
+			<StatCard
-        value={`${parseFloat(stats.average_distance / 1000).toLocaleString(
+				title={$_("average-distance")}
-          undefined,
+				value={`${parseFloat(stats.average_distance / 1000).toLocaleString(
-          {
+					undefined,
-            minimumFractionDigits: 2,
+					{
-            maximumFractionDigits: 2,
+						minimumFractionDigits: 2,
-          }
+						maximumFractionDigits: 2,
-        )}km`}
+					}
-        href="/scans/"
+				)}km`}
-      >
+				href="/scans/"
-        <svg
+			>
-          fill="currentColor"
+				<svg
-          xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
-          height="24"
+					xmlns="http://www.w3.org/2000/svg"
-          width="24"
+					height="24"
-          ><path d="M0 0h24v24H0z" fill="none" />
+					width="24"
-          <path
+					><path d="M0 0h24v24H0z" fill="none" />
-            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
+					<path
-          /></svg
+						d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("count_teams")}
+			<StatCard
-        value={stats.total_teams}
+				title={$_("count_teams")}
-        href="/teams/"
+				value={stats.total_teams}
-      >
+				href="/teams/"
-        <svg
+			>
-          stroke="currentColor"
+				<svg
-          fill="none"
+					stroke="currentColor"
-          stroke-width="2"
+					fill="none"
-          viewBox="0 0 24 24"
+					stroke-width="2"
-          stroke-linecap="round"
+					viewBox="0 0 24 24"
-          stroke-linejoin="round"
+					stroke-linecap="round"
-          size="24"
+					stroke-linejoin="round"
-          class="stroke-current text-grey-500"
+					size="24"
-          height="24"
+					class="stroke-current text-grey-500"
-          width="24"
+					height="24"
-          xmlns="http://www.w3.org/2000/svg"
+					width="24"
-          ><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+					xmlns="http://www.w3.org/2000/svg"
-          <circle cx="9" cy="7" r="4" />
+					><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+					<circle cx="9" cy="7" r="4" />
-          <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
+					<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-        >
+					<path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("count_organizations")}
+			<StatCard
-        value={stats.total_orgs}
+				title={$_("count_organizations")}
-        href="/orgs/"
+				value={stats.total_orgs}
-      >
+				href="/orgs/"
-        <svg
+			>
-          height="24"
+				<svg
-          fill="currentColor"
+					height="24"
-          width="24"
+					fill="currentColor"
-          xmlns="http://www.w3.org/2000/svg"
+					width="24"
-          viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
-          ><path fill="none" d="M0 0h24v24H0z" />
+					viewBox="0 0 24 24"
-          <path
+					><path fill="none" d="M0 0h24v24H0z" />
-            d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z"
+					<path
-          /></svg
+						d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z"
-        >
+					/></svg
-      </StatCard>
+				>
-    </div>
+			</StatCard>
-  {:catch error}
+			<StatCard
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+				title={$_("runner_via_selfservice")}
-      <span class="inline-block align-middle mr-8">
+				value={stats.runnersViaSelfservice}
-        <b class="capitalize">{$_("general_promise_error")}</b>
+				href="/runners/"
-        {error}
+			>
-      </span>
+				<svg
-    </div>
+					height="24"
-  {/await}
+					width="24"
+					fill="currentColor"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					><path d="M0 0h24v24H0z" fill="none" />
+					<path
+						d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
+					/></svg
+				>
+			</StatCard>
+		</div>
+	{:catch error}
+		<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+			<span class="inline-block align-middle mr-8">
+				<b class="capitalize">{$_("general_promise_error")}</b>
+				{error}
+			</span>
+		</div>
+	{/await}
 </div>

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/ConfirmOrgDeletion.svelte

@@ -1,108 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-
-  import { createEventDispatcher } from "svelte";
-  export let modal_open;
-  export let delete_org;
-  const dispatch = createEventDispatcher();
-  function cancelDelete() {
-    modal_open = false;
-    dispatch("cancelDelete", { id: delete_org.id });
-  }
-  function deleteOrg() {
-    RunnerOrganizationService.runnerOrganizationControllerRemove(
-      delete_org.id,
-      true
-    )
-      .then((resp) => {
-        toast($_("organization-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
-</script>
-
-{#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:clickOutside
-    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"
-    >
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
-        />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
-      >
-      <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"
-        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="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"
-            >
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                ><path
-                  fill="currentColor"
-                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-                /></svg
-              >
-            </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">
-                {$_("attention")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_(
-                    "do-you-want-to-delete-the-organization-delete_org-name",
-                    {
-                      values: { orgname: delete_org.name },
-                    }
-                  )}<br />
-                  {$_("all-associated-teams-and-runners-will-be-deleted-too")}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={deleteOrg}
-            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-organization-and-associated-teams-runners")}
-          </button>
-          <button
-            on:click={cancelDelete}
-            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-organization")}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/orgs/ConfirmOrgDeletionModal.svelte

@@ -0,0 +1,104 @@
+<script>
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";
+
+	import { RunnerOrganizationService } from "@odit/lfk-client-js";
+
+	import { createEventDispatcher } from "svelte";
+	export let modal_open;
+	export let delete_org;
+	const dispatch = createEventDispatcher();
+	function cancelDelete() {
+		modal_open = false;
+		dispatch("cancelDelete", { id: delete_org.id });
+	}
+	function deleteOrg() {
+		RunnerOrganizationService.runnerOrganizationControllerRemove(
+			delete_org.id,
+			true
+		)
+			.then((resp) => {
+				toast.success($_("organization-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {});
+	}
+</script>
+
+{#if modal_open}
+	<div
+		class="fixed z-10 inset-0 overflow-y-auto"
+		use:clickOutside
+		on:click_outside={cancelDelete}
+	>
+		<div
+			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="absolute inset-0 bg-gray-500 opacity-75"
+					data-id="modal_backdrop"
+				/>
+			</div>
+			<span
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				aria-hidden="true">&#8203;</span
+			>
+			<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"
+				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 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"
+						>
+							<svg
+								class="h-6 w-6 text-blue-600"
+								fill="currentColor"
+								width="24"
+								height="24"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 640 512"
+								><path
+									fill="currentColor"
+									d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+								/></svg
+							>
+						</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">
+								{$_("do-you-want-to-delete-the-organization-delete_org-name", {
+									values: { orgname: delete_org.name },
+								})}
+							</h3>
+							<div class="mt-2 mb-6">
+								<p class="text-sm text-gray-500">
+									{$_("all-associated-teams-and-runners-will-be-deleted-too")}
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
+					<button
+						on:click={deleteOrg}
+						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-organization-and-associated-teams-runners")}
+					</button>
+					<button
+						on:click={cancelDelete}
+						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-organization")}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/components/orgs/OrgDetail.svelte

@@ -13,8 +13,7 @@
 	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
 	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
 	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.svelte";
-	$: delete_triggered = false;
 	$: address_valid_or_none =
 		(isAddress1Valid && iszipcodevalid && iscityvalid) ||
 		editable.address_checked === false;
@@ -76,13 +75,10 @@
 			false
 		)
 			.then((resp) => {
-				toast($_("organization-deleted"));
+				toast.success($_("organization-deleted"));
 				location.replace("./");
 			})
-			.catch((err) => {
+			.catch((err) => {});
-				modal_open = true;
-				delete_org = original_object;
-			});
 	}
 	function submit() {
 		if (data_loaded === true && save_enabled) {
@@ -142,7 +138,7 @@
 	opened_from="OrgDetail"
 	bind:import_modal_open
 />
-<ConfirmOrgDeletion bind:modal_open bind:delete_org />
+<ConfirmOrgDeletionModal bind:modal_open bind:delete_org />
 {#if data_loaded}
 	<section class="container p-5">
 		<div class="flex flex-row mb-4">
@@ -192,41 +188,24 @@
 					</button>
 				{/if}
 				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
-					{#if delete_triggered}
-						<button
-							on:click={deleteOrganization}
-							class="w-full 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:w-auto sm:text-sm"
-							>{$_("confirm-delete")}</button
-						>
-						<button
-							on:click={() => {
-								delete_triggered = !delete_triggered;
-							}}
-							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-							>{$_("cancel")}</button
-						>
-					{/if}
-					{#if !delete_triggered}
-						<button
-							on:click={() => {
-								delete_triggered = true;
-							}}
-							type="button"
-							class="w-full 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:w-auto sm:text-sm"
-							>{$_("delete-organization")}</button
-						>
-					{/if}
-				{/if}
-				{#if !delete_triggered}
 					<button
-						on:click={submit}
+						on:click={() => {
-						disabled={!save_enabled}
+							modal_open = true;
-						class:opacity-50={!save_enabled}
+							delete_org = original_object;
+						}}
 						type="button"
-						class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
+						class="w-full 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:w-auto sm:text-sm"
-						>{$_("save-changes")}</button
+						>{$_("delete-organization")}</button
 					>
 				{/if}
+				<button
+					on:click={submit}
+					disabled={!save_enabled}
+					class:opacity-50={!save_enabled}
+					type="button"
+					class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
+					>{$_("save-changes")}</button
+				>
 			</div>
 		</div>
 		<div class="text-sm w-full mt-2">

src/components/orgs/Orgs.svelte

@@ -4,7 +4,7 @@
 	import { RunnerOrganizationService } from "@odit/lfk-client-js";
 	import store from "../../store";
 	import OrgsEmptyState from "./OrgsEmptyState.svelte";
-	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.svelte";
 	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
 	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
 	import toast from "svelte-french-toast";
@@ -30,6 +30,7 @@
 		);
 	import { _ } from "svelte-i18n";
 	import AddOrgModal from "./AddOrgModal.svelte";
+	let delete_modal_open = false;
 	let modal_open = false;
 	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
 	let import_modal_open = false;
@@ -61,12 +62,12 @@
 			{$_("import-runners")}
 		</button>
 	{/if}
-	<ConfirmOrgDeletion
+	<ConfirmOrgDeletionModal
 		on:cancelDelete={(event) => {
-			modal_open = false;
+			delete_modal_open = false;
 			active_deletes[event.detail.id] = false;
 		}}
-		bind:modal_open
+		bind:modal_open={delete_modal_open}
 		bind:delete_org
 	/>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
@@ -196,63 +197,27 @@
 												</div>
 											</div>
 										</td>
-										{#if active_deletes[o.id] === true}
+										<td
-											<td
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+										>
+											<a
+												href="./{o.id}"
+												class="text-indigo-600 hover:text-indigo-900"
+												>{$_("details")}</a
 											>
+											{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
 												<button
 													on:click={() => {
-														active_deletes[o.id] = false;
+														active_deletes[o.id] = true;
-													}}
+														delete_modal_open = true;
-													tabindex="0"
+														delete_org = o;
-													class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-													>{$_("cancel-delete")}</button
-												>
-												<button
-													on:click={() => {
-														toast.loading($_("deleting-organization"));
-														RunnerOrganizationService.runnerOrganizationControllerRemove(
-															o.id,
-															false
-														)
-															.then((resp) => {
-																current_organizations =
-																	current_organizations.filter(
-																		(obj) => obj.id !== o.id
-																	);
-																toast($_("organization-deleted"));
-															})
-															.catch((err) => {
-																modal_open = true;
-																delete_org = o;
-															});
 													}}
 													tabindex="0"
 													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-													>{$_("confirm-delete")}</button
+													>{$_("delete")}</button
 												>
-											</td>
+											{/if}
-										{:else}
+										</td>
-											<td
-												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-											>
-												<a
-													href="./{o.id}"
-													class="text-indigo-600 hover:text-indigo-900"
-													>{$_("details")}</a
-												>
-												{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
-													<button
-														on:click={() => {
-															active_deletes[o.id] = true;
-														}}
-														tabindex="0"
-														class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-														>{$_("delete")}</button
-													>
-												{/if}
-											</td>
-										{/if}
 									</tr>
 								{/if}
 							{/each}

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/presets/Avatars.svelte

@@ -1,92 +0,0 @@
-<h3 class="text-lg">Standard Avatars</h3>
-<div class="relative rounded-full w-4 h-4">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-8 h-8">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-12 h-12">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-16 h-16">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-20 h-20">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<div class="relative rounded-full w-24 h-24">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-</div>
-<h3 class="text-lg">Status Avatars</h3>
-<div class="relative rounded-full w-4 h-4">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
-</div>
-<div class="relative rounded-full w-8 h-8">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
-</div>
-<div class="relative rounded-full w-12 h-12">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
-</div>
-<div class="relative rounded-full w-16 h-16">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
-</div>
-<div class="relative rounded-full w-20 h-20">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
-</div>
-<div class="relative rounded-full w-24 h-24">
-  <img
-    alt=""
-    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
-  />
-  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
-</div>

src/components/presets/Badges.svelte

@@ -1,65 +0,0 @@
-<h3 class="text-lg">badges</h3>
-<span
-  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle"
-  >Paid</span
->
-<span
-  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle"
-  >Overdue</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600"
-  >Primary</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600"
-  >Secondary</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600"
-  >Success</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600"
-  >Danger</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400"
-  >Warning</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300"
-  >Info</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200"
-  >Light</span
->
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900"
-  >Dark</span
->
-<h3 class="text-lg">closable badges</h3>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
-  Primary
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">
-  Secondary
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">
-  Success
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">
-  Danger
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">
-  Warning
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">
-  Info
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">
-  Light<span class="ml-2 text-base cursor-pointer">×</span>
-</span>
-<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">
-  Dark
-  <span class="ml-2 text-base cursor-pointer">×</span>
-</span>

src/components/presets/BreadcrumbNav.svelte

@@ -1,59 +0,0 @@
-<div class="flex flex-row mb-4">
-  <div class="w-full">
-    <nav class="w-full flex">
-      <ol class="list-none flex flex-row items-center justify-start">
-        <li class="mr-2 flex items-center">
-          <svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-3 w-3 stroke-current"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-            <polyline points="9 22 9 12 15 12 15 22" /></svg
-          >
-        </li>
-        <li class="flex items-center">
-          <a class="mr-2" href="/">Home</a><svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-3 w-3 mr-2 stroke-current"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><line x1="5" y1="12" x2="19" y2="12" />
-            <polyline points="12 5 19 12 12 19" /></svg
-          >
-        </li>
-        <li class="flex items-center">
-          <a class="mr-2" href="/">Second level</a><svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-3 w-3 mr-2 stroke-current"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><line x1="5" y1="12" x2="19" y2="12" />
-            <polyline points="12 5 19 12 12 19" /></svg
-          >
-        </li>
-        <li class="flex items-center">
-          <a class="mr-2" href="/">Third level</a>
-        </li>
-      </ol>
-    </nav>
-  </div>
-</div>

src/components/presets/ComponentDump.svelte

@@ -1,80 +0,0 @@
-<script>
-  import Avatars from "./Avatars.svelte";
-  import Badges from "./Badges.svelte";
-  import BreadcrumbNav from "./BreadcrumbNav.svelte";
-  import FileUpload from "./FileUpload.svelte";
-  import Pagination from "./Pagination.svelte";
-  import Table from "./Table.svelte";
-  import Tabs from "./Tabs.svelte";
-  import Tags from "./Tags.svelte";
-</script>
-
-<div class="border-4 border-dashed rounded h-96 mb-4" />
-<div class="mb-8">
-  <FileUpload />
-</div>
-<div class="mb-8">
-  <Tabs />
-</div>
-<div class="mb-8">
-  <Tags />
-</div>
-<div class="mb-8">
-  <Badges />
-</div>
-<div class="mb-8">
-  <Avatars />
-</div>
-<Pagination />
-<div class="mb-8">
-  <Table />
-</div>
-<div class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
-  <div class="flex flex-row items-center justify-between mb-6">
-    <div class="flex flex-col">
-      <div class="text-sm font-light text-grey-500">Regular</div>
-      <div class="text-sm font-bold"><span>Text inputs</span></div>
-    </div>
-  </div>
-  <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
-    <div class="w-full lg:w-1/4">
-      <div class="form-element">
-        <div class="form-label">Label</div>
-        <input
-          name="name"
-          type="text"
-          class="form-input"
-          placeholder="Enter something..."
-        />
-        <div class="form-hint">This is a hint</div>
-      </div>
-    </div>
-    <div class="w-full lg:w-1/4">
-      <div class="form-element">
-        <div class="form-label">First name</div>
-        <input
-          name="name"
-          type="text"
-          class="form-input form-input-invalid"
-          placeholder="john@example.com"
-        />
-        <div class="form-error">First name is required</div>
-      </div>
-    </div>
-    <div class="w-full lg:w-1/4">
-      <div class="form-element">
-        <div class="form-label">First name</div>
-        <input
-          name="name"
-          type="text"
-          class="form-input form-input-valid"
-          placeholder="john@example.com"
-        />
-        <div class="form-success">First name is valid</div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="mb-8">
-  <BreadcrumbNav />
-</div>

src/components/presets/ConversionsChart.svelte

@@ -1,643 +0,0 @@
-<div class="w-full p-4 rounded-lg bg-white border border-grey-100">
-  <div class="flex flex-row items-center justify-between mb-6">
-    <div class="flex flex-col">
-      <div class="text-sm font-light text-grey-500">Conversions</div>
-      <div class="text-sm font-bold"><span>This year</span></div>
-    </div>
-    <div class="relative">
-      <button
-        class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"
-        ><svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="stroke-current stroke-1"
-          size="18"
-          height="18"
-          width="18"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle cx="12" cy="12" r="1" />
-          <circle cx="12" cy="5" r="1" />
-          <circle cx="12" cy="19" r="1" />
-        </svg></button
-      >
-      <div class="dropdown absolute top-0 right-0 mt-8">
-        <div class="dropdown-content w-48 bottom-start">
-          <div class="flex flex-col w-full">
-            <ul class="list-none">
-              <li>
-                <a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">Today</a
-                >
-              </li>
-              <li>
-                <a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This week</a
-                >
-              </li>
-              <li>
-                <a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This month</a
-                >
-              </li>
-              <li>
-                <a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This year</a
-                >
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="flex flex-row w-full">
-    <div style="width:100%;height:240px">
-      <div class="recharts-responsive-container" style="width:100%;height:100%">
-        <div
-          class="recharts-wrapper"
-          style="position: relative; cursor: default; width: 704px; height: 240px;"
-        >
-          <svg
-            class="recharts-surface"
-            width="704"
-            height="240"
-            viewBox="0 0 704 240"
-            version="1.1"
-          >
-            <defs>
-              <clipPath id="recharts3-clip">
-                <rect x="40" y="10" height="190" width="654" />
-              </clipPath>
-            </defs>
-            <g
-              class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis"
-            >
-              <g class="recharts-cartesian-axis-ticks">
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="67.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="67.25" dy="0.71em">Jan</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="121.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="121.75" dy="0.71em">Feb</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="176.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="176.25" dy="0.71em">Mar</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="230.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="230.75" dy="0.71em">Apr</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="285.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="285.25" dy="0.71em">May</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="339.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="339.75" dy="0.71em">Jun</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="394.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="394.25" dy="0.71em">Jul</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="448.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="448.75" dy="0.71em">Aug</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="503.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="503.25" dy="0.71em">Sep</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="557.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="557.75" dy="0.71em">Oct</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="612.25"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="612.25" dy="0.71em">Nov</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="654"
-                    height="30"
-                    x="666.75"
-                    y="208"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle"
-                  >
-                    <tspan x="666.75" dy="0.71em">Dec</tspan>
-                  </text></g
-                >
-              </g>
-            </g>
-            <g
-              class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis"
-            >
-              <g class="recharts-cartesian-axis-ticks">
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="200"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">0</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="152.5"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">65</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="105"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">130</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="57.5"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">195</tspan>
-                  </text></g
-                >
-                <g class="recharts-layer recharts-cartesian-axis-tick"
-                  ><text
-                    width="30"
-                    height="190"
-                    x="32"
-                    y="10"
-                    stroke="none"
-                    fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end"
-                  >
-                    <tspan x="32" dy="0.355em">260</tspan>
-                  </text></g
-                >
-              </g>
-            </g>
-            <g class="recharts-layer recharts-bar">
-              <g class="recharts-layer recharts-bar-rectangles">
-                <g class="recharts-layer">
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="119.11538461538461"
-                      x="55"
-                      y="80.88461538461539"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="95"
-                      x="109.5"
-                      y="105"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 109.5,105 h 10 v 95 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="122.03846153846155"
-                      x="164"
-                      y="77.96153846153845"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="81.11538461538461"
-                      x="218.5"
-                      y="118.88461538461539"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="114"
-                      x="273"
-                      y="86"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 273,86 h 10 v 114 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="117.65384615384616"
-                      x="327.5"
-                      y="82.34615384615384"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="103.76923076923076"
-                      x="382"
-                      y="96.23076923076924"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="92.80769230769232"
-                      x="436.5"
-                      y="107.19230769230768"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="92.80769230769232"
-                      x="491"
-                      y="107.19230769230768"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="127.8846153846154"
-                      x="545.5"
-                      y="72.1153846153846"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="105.23076923076924"
-                      x="600"
-                      y="94.76923076923076"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#90caf9"
-                      width="10"
-                      height="115.46153846153845"
-                      x="654.5"
-                      y="84.53846153846155"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"
-                    />
-                  </g>
-                </g>
-              </g>
-            </g>
-            <g class="recharts-layer recharts-bar">
-              <g class="recharts-layer recharts-bar-rectangles">
-                <g class="recharts-layer">
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="112.53846153846155"
-                      x="69"
-                      y="87.46153846153845"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="151.26923076923077"
-                      x="123.5"
-                      y="48.730769230769226"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="181.23076923076923"
-                      x="178"
-                      y="18.769230769230774"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="165.8846153846154"
-                      x="232.5"
-                      y="34.11538461538461"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="156.38461538461536"
-                      x="287"
-                      y="43.61538461538464"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="118.38461538461539"
-                      x="341.5"
-                      y="81.61538461538461"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="138.84615384615384"
-                      x="396"
-                      y="61.15384615384616"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="175.3846153846154"
-                      x="450.5"
-                      y="24.615384615384613"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="155.65384615384613"
-                      x="505"
-                      y="44.34615384615387"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="179.76923076923077"
-                      x="559.5"
-                      y="20.230769230769226"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="173.19230769230768"
-                      x="614"
-                      y="26.80769230769232"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"
-                    />
-                  </g>
-                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path
-                      fill="#1e88e5"
-                      width="10"
-                      height="146.15384615384616"
-                      x="668.5"
-                      y="53.84615384615384"
-                      radius="0"
-                      class="recharts-rectangle"
-                      d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"
-                    />
-                  </g>
-                </g>
-              </g>
-            </g>
-          </svg>
-          <div
-            class="recharts-tooltip-wrapper"
-            style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);"
-          />
-        </div>
-        <div
-          style="position:absolute;width:0;height:0;visibility:hidden;display:none"
-        />
-      </div>
-    </div>
-  </div>
-</div>

src/components/presets/Pagination.svelte

@@ -1,120 +0,0 @@
-<!-- This example requires Tailwind CSS v2.0+ -->
-<div
-  class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
->
-  <div class="flex-1 flex justify-between sm:hidden">
-    <a
-      href="#"
-      class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
-    >
-      Previous
-    </a>
-    <a
-      href="#"
-      class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
-    >
-      Next
-    </a>
-  </div>
-  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-    <div>
-      <p class="text-sm text-gray-700">
-        Showing
-        <span class="font-medium">1</span>
-        to
-        <span class="font-medium">10</span>
-        of
-        <span class="font-medium">97</span>
-        results
-      </p>
-    </div>
-    <div>
-      <nav
-        class="relative z-0 inline-flex shadow-sm -space-x-px"
-        aria-label="Pagination"
-      >
-        <a
-          href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-        >
-          <span class="sr-only">Previous</span>
-          <!-- Heroicon name: chevron-left -->
-          <svg
-            class="h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          1
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          2
-        </a>
-        <a
-          href="#"
-          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          3
-        </a>
-        <span
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
-        >
-          ...
-        </span>
-        <a
-          href="#"
-          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          8
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          9
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          10
-        </a>
-        <a
-          href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-        >
-          <span class="sr-only">Next</span>
-          <!-- Heroicon name: chevron-right -->
-          <svg
-            class="h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </a>
-      </nav>
-    </div>
-  </div>
-</div>

src/components/presets/Profile.svelte

@@ -1,289 +0,0 @@
-<div class="min-h-screen w-full p-4">
-  <div class="section-title w-full mb-6 pt-3">
-    <div class="flex flex-row items-center justify-between mb-4">
-      <div class="flex flex-col">
-        <div class="text-xs uppercase font-light text-grey-500">Pages</div>
-        <div class="text-xl font-bold">User profile</div>
-      </div>
-    </div>
-  </div>
-  <div class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
-    <div class="flex flex-row items-center justify-start p-4">
-      <div class="flex-shrink-0 w-24">
-        <img
-          src="/images/faces/m1.png"
-          alt="media"
-          class="shadow rounded-full h-20 w-20 shadow-outline mb-2"
-        />
-      </div>
-      <div class="py-2 px-2">
-        <p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p>
-        <p class="text-sm text-grey-500 whitespace-no-wrap">
-          Vital Database Dude
-        </p>
-        <div
-          class="flex flex-row items-center justify-start w-full py-1 space-x-2"
-        >
-          <svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="stroke-current text-xl text-twitter"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><path
-              d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
-            /></svg
-          ><svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="stroke-current text-xl text-facebook"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><path
-              d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
-            /></svg
-          ><svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="stroke-current text-xl text-instagram"
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-            ><rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-            <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg
-          >
-        </div>
-      </div>
-      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
-        <button
-          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
-          >Subscribe</button
-        ><button
-          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
-          >Follow</button
-        >
-      </div>
-    </div>
-    <div class="flex flex-wrap">
-      <div class="w-full p-4">
-        <div class="flex flex-wrap flex-col w-full tabs">
-          <div class="flex lg:flex-wrap flex-row lg:space-x-2">
-            <div class="flex-none">
-              <button class="tab tab-underline tab-active" type="button"
-                >Account settings</button
-              >
-            </div>
-            <div class="flex-none">
-              <button class="tab tab-underline" type="button"
-                >Email preferences</button
-              >
-            </div>
-            <div class="flex-none">
-              <button class="tab tab-underline" type="button"
-                >Security settings</button
-              >
-            </div>
-          </div>
-          <div class="tab-content block">
-            <div class="py-4 w-full lg:w-1/2">
-              <div class="flex flex-col">
-                <form class="form flex flex-wrap w-full">
-                  <div class="w-full">
-                    <div class="form-element">
-                      <div class="form-label">First name</div>
-                      <input
-                        name="first-name"
-                        type="text"
-                        class="form-input"
-                        placeholder="Enter you first name"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Last name</div>
-                      <input
-                        name="last-name"
-                        type="text"
-                        class="form-input"
-                        placeholder="Enter you last name"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Email address</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="form-input"
-                        placeholder="Enter you email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Company</div>
-                      <input
-                        name="company"
-                        type="text"
-                        class="form-input"
-                        placeholder="Enter you company"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Position</div>
-                      <input
-                        name="position"
-                        type="text"
-                        class="form-input"
-                        placeholder="Enter you position"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Language</div>
-                      <select name="language" class="form-select"
-                        ><option>Select language</option>
-                        <option value="english">English</option>
-                        <option value="spanish">Spanish</option>
-                        <option value="portuguese">Portuguese</option></select
-                      >
-                    </div>
-                  </div>
-                  <input
-                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                  />
-                </form>
-              </div>
-            </div>
-          </div>
-          <div class="tab-content hidden">
-            <div class="py-4 w-full lg:w-1/2">
-              <div class="flex flex-col">
-                <form class="form flex flex-wrap w-full">
-                  <div class="w-full">
-                    <div class="form-element">
-                      <div class="form-label">Current email</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="form-input"
-                        placeholder="Enter you current email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">New email</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="form-input"
-                        placeholder="Enter you new email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Daily updates</div>
-                      <div class="flex items-center justify-start space-x-2">
-                        <label class="flex items-center justify-start space-x-2"
-                          ><input
-                            type="radio"
-                            name="daily-updates"
-                            class="form-radio h-4 w-4"
-                            value="yes"
-                          /><span class="">Yes</span></label
-                        ><label
-                          class="flex items-center justify-start space-x-2"
-                          ><input
-                            type="radio"
-                            name="daily-updates"
-                            class="form-radio h-4 w-4"
-                            value="no"
-                          /><span class="">No</span></label
-                        >
-                      </div>
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Weekly updates</div>
-                      <div class="flex items-center justify-start space-x-2">
-                        <label class="flex items-center justify-start space-x-2"
-                          ><input
-                            type="radio"
-                            name="weekle-updates"
-                            class="form-radio h-4 w-4"
-                            value="yes"
-                          /><span class="">Yes</span></label
-                        ><label
-                          class="flex items-center justify-start space-x-2"
-                          ><input
-                            type="radio"
-                            name="weekle-updates"
-                            class="form-radio h-4 w-4"
-                            value="no"
-                          /><span class="">No</span></label
-                        >
-                      </div>
-                    </div>
-                  </div>
-                  <input
-                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                  />
-                </form>
-              </div>
-            </div>
-          </div>
-          <div class="tab-content hidden">
-            <div class="py-4 w-full lg:w-1/2">
-              <div class="flex flex-col">
-                <form class="form flex flex-wrap w-full">
-                  <div class="w-full">
-                    <div class="form-element">
-                      <div class="form-label">Current password</div>
-                      <input
-                        name="current-password"
-                        type="password"
-                        class="form-input"
-                        placeholder="Enter your current password"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">New password</div>
-                      <input
-                        name="new-password"
-                        type="password"
-                        class="form-input"
-                        placeholder="Enter your new password"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Confirm new password</div>
-                      <input
-                        name="confirm-new-password"
-                        type="password"
-                        class="form-input"
-                        placeholder="Enter your new password confirmation"
-                      />
-                    </div>
-                  </div>
-                  <input
-                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                  />
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

src/components/presets/Table.svelte

@@ -1,92 +0,0 @@
-<!-- This example requires Tailwind CSS v2.0+ -->
-<div class="flex flex-col">
-  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-      <div
-        class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
-      >
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr class="odd:bg-white even:bg-gray-100">
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Name
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Title
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Status
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Role
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_("edit")}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            <tr class="odd:bg-white even:bg-gray-100">
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="flex items-center">
-                  <div class="flex-shrink-0 h-10 w-10">
-                    <img
-                      class="h-10 w-10 rounded-full"
-                      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60"
-                      alt=""
-                    />
-                  </div>
-                  <div class="ml-4">
-                    <div class="text-sm font-medium text-gray-900">
-                      Jane Cooper
-                    </div>
-                    <div class="text-sm text-gray-500">
-                      jane.cooper@example.com
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="text-sm text-gray-900">
-                  Regional Paradigm Technician
-                </div>
-                <div class="text-sm text-gray-500">Optimization</div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <span
-                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
-                >
-                  Active
-                </span>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                Admin
-              </td>
-              <td
-                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-              >
-                <a href="#" class="text-indigo-600 hover:text-indigo-900"
-                  >{$_("edit")}</a
-                >
-              </td>
-            </tr>
-
-            <!-- More rows... -->
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>

src/components/presets/Tabs.svelte

@@ -1,23 +0,0 @@
-<h3 class="text-lg">Tabs</h3>
-<div
-  class="w-full flex sm:border-b sm:border-gray-300 relative flex-col sm:flex-row"
->
-  <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
-  >
-    1
-  </div>
-  <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
-  >
-    2
-  </div>
-  <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
-  >
-    3
-  </div>
-  <div
-    class="hidden sm:block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out w-1/4 transform translate-x-double"
-  />
-</div>

src/components/presets/Tags.svelte

@@ -1,113 +0,0 @@
-<div>
-  <div
-    class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-blue-200 text-blue-700 rounded-full"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-bell-off mr-2"
-    >
-      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
-      <path d="M18.63 13A17.89 17.89 0 0 1 18 8" />
-      <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" />
-      <path d="M18 8a6 6 0 0 0-9.33-5" />
-      <line x1="1" y1="1" x2="23" y2="23" />
-    </svg>
-    Tag
-  </div>
-
-  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-arrow-right mr-2"
-    >
-      <line x1="5" y1="12" x2="19" y2="12" />
-      <polyline points="12 5 19 12 12 19" />
-    </svg>
-    Tag
-  </div>
-
-  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-full"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-activity mr-2"
-    >
-      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
-    </svg>
-    Tag
-  </div>
-
-  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-red-200 text-red-700 rounded-full"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-archive mr-2"
-    >
-      <polyline points="21 8 21 21 3 21 3 8" />
-      <rect x="1" y="3" width="22" height="5" />
-      <line x1="10" y1="12" x2="14" y2="12" />
-    </svg>
-    Tag
-  </div>
-
-  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-hard-drive mr-2"
-    >
-      <line x1="22" y1="12" x2="2" y2="12" />
-      <path
-        d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
-      />
-      <line x1="6" y1="16" x2="6.01" y2="16" />
-      <line x1="10" y1="16" x2="10.01" y2="16" />
-    </svg>
-    Tag
-  </div>
-</div>

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/RunnerDetail.svelte

@@ -291,6 +291,11 @@
 			<br />
 			<span class="text-gray-700">{original_data.distance / 1000} km</span>
 		</div>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_('created_via')}</span>
+			<br />
+			<span class="text-gray-700">{original_data.created_via}</span>
+		</div>
 	</section>
 {:catch error}
 	<PromiseError {error} />

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/ConfirmTeamDeletion.svelte

@@ -1,103 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-
-  import { RunnerTeamService } from "@odit/lfk-client-js";
-  import { createEventDispatcher } from "svelte";
-  import toast from "svelte-french-toast";
-  export let modal_open;
-  export let delete_team;
-  const dispatch = createEventDispatcher();
-  function cancelDelete() {
-    modal_open = false;
-    dispatch("cancelDelete", { id: delete_team.id });
-  }
-  function deleteTeam() {
-    toast.loading($_("deleting-team"));
-    RunnerTeamService.runnerTeamControllerRemove(delete_team.id, true)
-      .then((resp) => {
-        toast.dismiss();
-        toast($_("team-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
-</script>
-
-{#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:clickOutside
-    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"
-    >
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
-        />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
-      >
-      <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"
-        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="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"
-            >
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                ><path
-                  fill="currentColor"
-                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-                /></svg
-              >
-            </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">
-                {$_("attention")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_("do-you-want-to-delete-the-team-delete_team-name", {
-                    values: { teamname: delete_team.name },
-                  })}<br />{$_("all-associated-runners-will-be-deleted-too")}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={deleteTeam}
-            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-team-and-associated-runners")}
-          </button>
-          <button
-            on:click={cancelDelete}
-            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-team")}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/teams/ConfirmTeamDeletionModal.svelte

@@ -0,0 +1,103 @@
+<script>
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";
+
+	import { RunnerTeamService } from "@odit/lfk-client-js";
+	import { createEventDispatcher } from "svelte";
+	import toast from "svelte-french-toast";
+	export let modal_open;
+	export let delete_team;
+	const dispatch = createEventDispatcher();
+	function cancelDelete() {
+		modal_open = false;
+		dispatch("cancelDelete", { id: delete_team.id });
+	}
+	function deleteTeam() {
+		toast.loading($_("deleting-team"));
+		RunnerTeamService.runnerTeamControllerRemove(delete_team.id, true)
+			.then((resp) => {
+				toast.dismiss();
+				toast.success($_("team-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {});
+	}
+</script>
+
+{#if modal_open}
+	<div
+		class="fixed z-10 inset-0 overflow-y-auto"
+		use:clickOutside
+		on:click_outside={cancelDelete}
+	>
+		<div
+			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="absolute inset-0 bg-gray-500 opacity-75"
+					data-id="modal_backdrop"
+				/>
+			</div>
+			<span
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				aria-hidden="true">&#8203;</span
+			>
+			<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"
+				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 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"
+						>
+							<svg
+								class="h-6 w-6 text-blue-600"
+								fill="currentColor"
+								width="24"
+								height="24"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 640 512"
+								><path
+									fill="currentColor"
+									d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+								/></svg
+							>
+						</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">
+								{$_("do-you-want-to-delete-the-team-delete_team-name", {
+									values: { teamname: delete_team.name },
+								})}
+							</h3>
+							<div class="mt-2 mb-6">
+								<p class="text-sm text-gray-500">
+									{$_("all-associated-runners-will-be-deleted-too")}
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
+					<button
+						on:click={deleteTeam}
+						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-team-and-associated-runners")}
+					</button>
+					<button
+						on:click={cancelDelete}
+						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-team")}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/components/teams/TeamDetail.svelte

@@ -4,15 +4,13 @@
 		RunnerOrganizationService,
 		RunnerTeamService,
 	} from "@odit/lfk-client-js";
-	import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
 	import toast from "svelte-french-toast";
-
 	import store from "../../store";
 	import Select from "svelte-select";
 	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
 	import PromiseError from "../base/PromiseError.svelte";
-	import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+	import ConfirmTeamDeletionModal from "./ConfirmTeamDeletionModal.svelte";
-	import Teams from "./Teams.svelte";
 	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
 	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
 	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
@@ -69,7 +67,7 @@
 	function deleteTeam() {
 		RunnerTeamService.runnerTeamControllerRemove(original.id, false)
 			.then((resp) => {
-				toast($_("team-deleted"));
+				toast.success($_("team-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {
@@ -105,7 +103,7 @@
 	opened_from="TeamDetail"
 	bind:import_modal_open
 />
-<ConfirmTeamDeletion bind:modal_open bind:delete_team />
+<ConfirmTeamDeletionModal bind:modal_open bind:delete_team />
 {#if data_loaded}
 	<section class="container p-5">
 		<div class="flex flex-row mb-4">

src/components/teams/Teams.svelte

@@ -6,11 +6,10 @@
 	const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
 	import store, { users as usersstore } from "../../store.js";
 	import TeamsEmptyState from "./TeamsEmptyState.svelte";
-	import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+	import ConfirmTeamDeletionModal from "./ConfirmTeamDeletionModal.svelte";
 	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
 	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
 	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-	import toast from "svelte-french-toast";
 	$: searchvalue = "";
 	$: active_deletes = [];
 	$: sponsoring_contracts_show = current_teams.some(
@@ -19,6 +18,7 @@
 	$: cards_show = current_teams.some((r) => r.is_selected === true);
 	$: certificates_show = current_teams.some((r) => r.is_selected === true);
 	$: generate_teams = current_teams.filter((r) => r.is_selected === true);
+	let delete_modal_open = false;
 	let modal_open = false;
 	let delete_team = {};
 	usersstore.subscribe((val) => {
@@ -44,12 +44,12 @@
 			{$_("create-team")}
 		</button>
 	{/if}
-	<ConfirmTeamDeletion
+	<ConfirmTeamDeletionModal
 		on:cancelDelete={(event) => {
 			modal_open = false;
 			active_deletes[event.detail.id] = false;
 		}}
-		bind:modal_open
+		bind:modal_open={delete_modal_open}
 		bind:delete_team
 	/>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
@@ -182,61 +182,27 @@
 												</div>
 											</div>
 										</td>
-										{#if active_deletes[t.id] === true}
+										<td
-											<td
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+										>
+											<a
+												href="./{t.id}"
+												class="text-indigo-600 hover:text-indigo-900"
+												>{$_("details")}</a
 											>
+											{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
 												<button
 													on:click={() => {
-														active_deletes[t.id] = false;
+														active_deletes[t.id] = true;
-													}}
+														delete_modal_open = true;
-													tabindex="0"
+														delete_team = t;
-													class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-													>{$_("cancel-delete")}</button
-												>
-												<button
-													on:click={() => {
-														RunnerTeamService.runnerTeamControllerRemove(
-															t.id,
-															false
-														)
-															.then((resp) => {
-																current_teams = current_teams.filter(
-																	(obj) => obj.id !== t.id
-																);
-																toast($_("team-deleted"));
-															})
-															.catch((err) => {
-																modal_open = true;
-																delete_team = t;
-															});
 													}}
 													tabindex="0"
 													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-													>{$_("confirm-delete")}</button
+													>{$_("delete")}</button
 												>
-											</td>
+											{/if}
-										{:else}
+										</td>
-											<td
-												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-											>
-												<a
-													href="./{t.id}"
-													class="text-indigo-600 hover:text-indigo-900"
-													>{$_("details")}</a
-												>
-												{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
-													<button
-														on:click={() => {
-															active_deletes[t.id] = true;
-														}}
-														tabindex="0"
-														class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-														>{$_("delete")}</button
-													>
-												{/if}
-											</td>
-										{/if}
 									</tr>
 								{/if}
 							{/each}

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

@@ -55,13 +55,13 @@
     "cancel-delete": "Löschen abbrechen",
     "cancel-keep-donor": "Abbrechen, Sponsor behalten",
     "cancel-keep-my-profile": "Abbrechen, mein Profil behalten",
-    "cancel-keep-organization": "Abbrechen und Organisation bearbeiten",
+    "cancel-keep-organization": "Abbrechen, Organisation behalten",
-    "cancel-keep-station": "Abbrechen und Station behalten",
+    "cancel-keep-station": "Abbrechen, Station behalten",
-    "cancel-keep-statsclient": "Abbrechen und Statsclient behalten",
+    "cancel-keep-statsclient": "Abbrechen, Statsclient behalten",
     "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",
@@ -79,7 +79,7 @@
     "confirm-delete": "Löschung Bestätigen",
     "confirm-delete-donor-with-all-donations": "Bestätigen, Sponsor mit allen Sponsorings löschen",
     "confirm-delete-my-user-profile": "Bestätigung, mein Benutzerprofil löschen",
-    "confirm-delete-organization-and-associated-teams-runners": "Bestätugung, lösche die Organisation und alle zugehörigen Teams und Läufer.",
+    "confirm-delete-organization-and-associated-teams-runners": "Organisation & alle zugehörigen Teams und Läufer löschen",
     "confirm-delete-station-with-all-scans": "Löschen der Scannerstation mit allen Scans bestätigen",
     "confirm-delete-statsclient": "Bestätigung, Statsclient löschen",
     "confirm-delete-team-and-associated-runners": "Bestätigung, lösche das Team mitsamt seinen Läufern.",
@@ -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...",
@@ -124,6 +124,7 @@
     "create-user": "Benutzer anlegen",
     "create-without-pdf": "Ohne PDF erstellen",
     "created-blanco-cards": "Blankokarten wurden erstellt",
+    "created_via": "Erstellt von",
     "creating-blanco-cards": "Erstelle Blankokarten",
     "credits": "Credits",
     "csv_import__class": "Klasse",
@@ -164,6 +165,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",
@@ -181,9 +183,9 @@
     "distance-in-km": "Distanz (in KM)",
     "distance-track": "Distanz (+Track)",
     "do-you-really-want-to-delete-your-profile": "Möchtest du dein Profil wirklich löschen?",
-    "do-you-want-to-delete-the-organization-delete_org-name": "Möchtest du die Organisation {orgname} löschen?",
+    "do-you-want-to-delete-the-organization-delete_org-name": "Organisation \"{orgname}\" löschen?",
-    "do-you-want-to-delete-the-team-delete_team-name": "Möchtest du das Team {teamname} löschen?",
+    "do-you-want-to-delete-the-team-delete_team-name": "Team \"{teamname}\" löschen?",
-    "do-you-want-to-delete-this-donor-with-all-related-donations": "Möchtest du diese Sponsor mit all ihren Sponsorings löschen?",
+    "do-you-want-to-delete-this-donor-with-all-related-donations": "Sponsor inkl. allen Sponsorings löschen?",
     "documentation": "Dokumentation",
     "donation-amount": "Sponsoringbetrag",
     "donation-amount-must-be-greater-that-0-00eur": "Der Sponsoringbetrag muss größer als 0.00€ sein.",
@@ -334,10 +336,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",
@@ -374,6 +375,7 @@
     "runner-import": "Läufer Import",
     "runner-is-being-added": "Läufer wird hinzugefügt...",
     "runner-updated": "Läufer aktualisiert!",
+    "runner_via_selfservice": "Läufer via Selfservice",
     "runnercards": "Laeuferkarten",
     "runnerimport_verify_runners_org": "Bitte die Läufer für den Import in die Organisation \"{org_name}\" bestätigen",
     "runners": "Läufer",
@@ -419,7 +421,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

@@ -124,6 +124,7 @@
     "create-user": "Create User",
     "create-without-pdf": "Create without PDF",
     "created-blanco-cards": "Created blanco cards",
+    "created_via": "Erstellt über",
     "creating-blanco-cards": "Creating blanco cards",
     "credits": "Credits",
     "csv_import__class": "Class",
@@ -164,6 +165,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 +336,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",
@@ -374,6 +375,7 @@
     "runner-import": "Runner Import",
     "runner-is-being-added": "Runner is being added...",
     "runner-updated": "Runner updated!",
+    "runner_via_selfservice": "Runner via Selfservice",
     "runnercards": "Runnercards",
     "runnerimport_verify_runners_org": "Please confirm these runners for import into the organization \"{org_name}\"",
     "runners": "Runners",