fix(donations): Don't show enter payment for anon donations

commit 8c56aa3c46
Merge: f642849d 1505080a
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:57:14 2025 +0200

    Merge branch 'dev' into feature/anonyme-spende

commit f642849dbb
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:56:45 2025 +0200

    wip

commit 7ac92ae6ca
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:45:47 2025 +0200

    wip

commit 95af9f9914
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:44:02 2025 +0200

    i18n

commit 1004aee16c
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:40:23 2025 +0200

    implement DonationDonor

commit 0baf2fc460
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:38:27 2025 +0200

    wip

commit 09b59175ee
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:35:45 2025 +0200

    wip

commit a21f61f3f3
Author: Philipp Dormann <philipp@philippdormann.de>
Date:   Mon Apr 28 10:24:07 2025 +0200

    wip

.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/release.yaml

@@ -0,0 +1,33 @@
+name: Build release images
+on:
+  push:
+    tags:
+      - "*.*.*"
+
+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@10.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:${{ github.ref_name }}
+          platforms: linux/amd64,linux/arm64

.woodpecker/build.yml

@@ -1,26 +0,0 @@
-steps:
-  - name: run full license export
-    image: registry.odit.services/hub/library/node:19.7.0-alpine3.16
-    commands:
-      - npm i -g pnpm@8
-      - pnpm i
-      - pnpm licenses:export
-  - name: build dev
-    image: woodpeckerci/plugin-docker-buildx
-    settings:
-      repo: registry.odit.services/lfk/frontend
-      tags:
-        - dev
-        - latest
-      registry: registry.odit.services
-      platforms: linux/amd64,linux/arm64
-      cache_from: registry.odit.services/lfk/frontend:dev
-      username:
-        from_secret: odit-registry-builder-username
-      password:
-        from_secret: odit-registry-builder-password
-when:
-  event:
-    - push
-  branch:
-    - dev

.woodpecker/release.yml

@@ -1,17 +0,0 @@
-steps:
-  - name: build tag
-    image: woodpeckerci/plugin-docker-buildx
-    settings:
-      repo: registry.odit.services/lfk/frontend
-      tags:
-        - "${CI_COMMIT_TAG}"
-      registry: registry.odit.services
-      platforms: linux/amd64,linux/arm64
-      cache_from: registry.odit.services/lfk/frontend:latest
-      username:
-        from_secret: odit-registry-builder-username
-      password:
-        from_secret: odit-registry-builder-password
-when:
-  event:
-    - tag

CHANGELOG.md

@@ -2,12 +2,266 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.12.0](https://git.odit.services/lfk/frontend/compare/1.11.5...1.12.0)
+
+- feat: anonymous donations [`9c03e35`](https://git.odit.services/lfk/frontend/commit/9c03e359a4e8f43452475b02bcabcb354987ab75)
+- refactor: use modern tailwindcss features [`1505080`](https://git.odit.services/lfk/frontend/commit/1505080afdd8b272b76584e2777df732001ce004)
+
+#### [1.11.5](https://git.odit.services/lfk/frontend/compare/1.11.4...1.11.5)
+
+> 25 April 2025
+
+- chore(release): 1.11.5 [`8cb6093`](https://git.odit.services/lfk/frontend/commit/8cb6093f0b3474c0952a8a51a47683262fc31f8f)
+- fix(cards): Update table for edit events [`27396e1`](https://git.odit.services/lfk/frontend/commit/27396e17f2cd8be72c9c8100afe6ec75ac66dceb)
+
+#### [1.11.4](https://git.odit.services/lfk/frontend/compare/1.11.3...1.11.4)
+
+> 25 April 2025
+
+- feat(CardAssign): styled buttons [`f9993c6`](https://git.odit.services/lfk/frontend/commit/f9993c60f565d7270b3a269e934b42b945c24b99)
+- chore(release): 1.11.4 [`fefd5c8`](https://git.odit.services/lfk/frontend/commit/fefd5c8237b91ac7fd7ecf467a6feb1100f84811)
+- feat(CardAssignment): support EAN13 [`8e314f8`](https://git.odit.services/lfk/frontend/commit/8e314f8676e5c189c09a33c9a382a8b984af5e30)
+
+#### [1.11.3](https://git.odit.services/lfk/frontend/compare/1.11.2...1.11.3)
+
+> 25 April 2025
+
+- chore(deps): Updated lock [`bce6d48`](https://git.odit.services/lfk/frontend/commit/bce6d484a9b1d7c40d4575a64ad528da2cc8fb3c)
+- chore(release): 1.11.3 [`98a3b07`](https://git.odit.services/lfk/frontend/commit/98a3b072370f029f82f79a75b8f809bc1b41d82f)
+- fix(cards): Z-Index for bulk card modal [`efad6fd`](https://git.odit.services/lfk/frontend/commit/efad6fdf2eae12c904575727b61fc61ed8a27d14)
+
+#### [1.11.2](https://git.odit.services/lfk/frontend/compare/1.11.1...1.11.2)
+
+> 23 April 2025
+
+- chore(release): 1.11.2 [`2dea19d`](https://git.odit.services/lfk/frontend/commit/2dea19df8990b34a56a345fef05487684ecec8c4)
+- fix(cardassignment): handle card not found [`6c98646`](https://git.odit.services/lfk/frontend/commit/6c986467d39344a32e598b834a115932ab8c9a1f)
+
+#### [1.11.1](https://git.odit.services/lfk/frontend/compare/1.11.0...1.11.1)
+
+> 22 April 2025
+
+- chore(release): 1.11.1 [`3cedbeb`](https://git.odit.services/lfk/frontend/commit/3cedbebe40b7699e39edc133e4bcbc16f4e7eb56)
+- ci: fix build [`dc986e4`](https://git.odit.services/lfk/frontend/commit/dc986e4fe5d462909e34b8bbf9a3c10accb2a00b)
+
+#### [1.11.0](https://git.odit.services/lfk/frontend/compare/1.10.6...1.11.0)
+
+> 22 April 2025
+
+- chore: move to tailwind v4 [`81a8ce0`](https://git.odit.services/lfk/frontend/commit/81a8ce002cd5a470f5ac4f064360c09bcf815ac8)
+- chore(deps): bump [`244be47`](https://git.odit.services/lfk/frontend/commit/244be471f07a6ab77768fb599cc2381a319e4e22)
+- chore: move privacy & imprint to website links [`3288ffb`](https://git.odit.services/lfk/frontend/commit/3288ffb3cc52bcfbb2b94c373932e9d614fba80f)
+- fix: modal position & z index [`a12c4f8`](https://git.odit.services/lfk/frontend/commit/a12c4f87d2db2271a6b123c3a009bd8d2f7663a4)
+- chore: tailwind class cleanup [`80ab4e0`](https://git.odit.services/lfk/frontend/commit/80ab4e037e44edf1f076d4a365ef36c614e7cb0a)
+- fix(cardassignment): debounce w/ immediate start [`1d6ed99`](https://git.odit.services/lfk/frontend/commit/1d6ed990736c6156b67f0715ee1f86aeb2be0390)
+- fix(RunnerDetail): move to standard html select for groups [`e1bf435`](https://git.odit.services/lfk/frontend/commit/e1bf435080a3845a4a29f9b8bce7aba3e9220cf9)
+- chore(release): 1.11.0 [`cae6be6`](https://git.odit.services/lfk/frontend/commit/cae6be6f867aece8997799e90f783a7b5f9b7602)
+- feat(ImportRunnerModal): sort groups by name [`3124574`](https://git.odit.services/lfk/frontend/commit/312457494cb0da805df5ec2811604ea45a09963d)
+- feat(cards): badge style for runner links [`1605b0f`](https://git.odit.services/lfk/frontend/commit/1605b0f7b2c12d2b247f40aefc03d2d053fea60d)
+
+#### [1.10.6](https://git.odit.services/lfk/frontend/compare/1.10.5...1.10.6)
+
+> 22 April 2025
+
+- feat: improved mobile card assignment [`d841727`](https://git.odit.services/lfk/frontend/commit/d841727439e42c940d56001f08da4ae2399176a7)
+- chore(release): 1.10.6 [`3fab344`](https://git.odit.services/lfk/frontend/commit/3fab3447799a5a28db741643189a2c4217b03714)
+
+#### [1.10.5](https://git.odit.services/lfk/frontend/compare/1.10.4...1.10.5)
+
+> 22 April 2025
+
+- chore(release): 1.10.5 [`87df34b`](https://git.odit.services/lfk/frontend/commit/87df34bb56c04c1efd22ecbe0b857198358f93d5)
+- feat(runners): add distance sorting [`9c3b742`](https://git.odit.services/lfk/frontend/commit/9c3b742a98e17837fbcabe308fb2774dc13b03b8)
+
+#### [1.10.4](https://git.odit.services/lfk/frontend/compare/1.10.3...1.10.4)
+
+> 22 April 2025
+
+- chore(release): 1.10.4 [`68bf371`](https://git.odit.services/lfk/frontend/commit/68bf3717f9cf15a547c51e245452d4e013f7acad)
+- fix(runners): Fix runner overview sort [`f88c6e0`](https://git.odit.services/lfk/frontend/commit/f88c6e0dbab620887e180de0d3eab03b8215a477)
+
+#### [1.10.3](https://git.odit.services/lfk/frontend/compare/1.10.2...1.10.3)
+
+> 17 April 2025
+
+- feat(pdf): Send selfservicelink for generation [`01e77a9`](https://git.odit.services/lfk/frontend/commit/01e77a97f3f28700e0249d35afd9641b56d9c55d)
+- chore(release): 1.10.3 [`12050cd`](https://git.odit.services/lfk/frontend/commit/12050cdda95b5f8eb5b414b81655d06faae3ef1e)
+- chore(deps): Bump @odit/lfk-client-js [`10824b5`](https://git.odit.services/lfk/frontend/commit/10824b5d9b207e14a37fa23e90d54337d76e60a9)
+
+#### [1.10.2](https://git.odit.services/lfk/frontend/compare/1.10.1...1.10.2)
+
+> 11 April 2025
+
+- refactor(runners): filter table for created_via [`785b9e0`](https://git.odit.services/lfk/frontend/commit/785b9e0b60a9961f99d0c519d6bb12dc735ac605)
+- chore(release): 1.10.2 [`d9870e0`](https://git.odit.services/lfk/frontend/commit/d9870e03bc3175ee9b299174a19f257d6046a718)
+
+#### [1.10.1](https://git.odit.services/lfk/frontend/compare/1.10.0...1.10.1)
+
+> 9 April 2025
+
+- feat: runner list filtered by created_via [`991716a`](https://git.odit.services/lfk/frontend/commit/991716a7f55d0414111ad264ad1e93de9e82971a)
+- chore(release): 1.10.1 [`fce2bc6`](https://git.odit.services/lfk/frontend/commit/fce2bc645e040322f4d1b98a1ed1ab5df7227b6d)
+
+#### [1.10.0](https://git.odit.services/lfk/frontend/compare/1.9.11...1.10.0)
+
+> 9 April 2025
+
+- feat: working CardAssignment [`ac4ef8f`](https://git.odit.services/lfk/frontend/commit/ac4ef8fb6ded5c5d5678a651420e356b3ef45399)
+- chore(release): 1.10.0 [`aa720f2`](https://git.odit.services/lfk/frontend/commit/aa720f2460079e35eed9d87a2ac580a3305efbd5)
+
+#### [1.9.11](https://git.odit.services/lfk/frontend/compare/1.9.10...1.9.11)
+
+> 8 April 2025
+
+- feat(dash): add runnersViaKiosk [`5291f8a`](https://git.odit.services/lfk/frontend/commit/5291f8a4d1721cd0c745191ebc85f221c34a23c8)
+- chore(release): 1.9.11 [`eae0afd`](https://git.odit.services/lfk/frontend/commit/eae0afda23a54020e25821c0188d8cbec3139593)
+
+#### [1.9.10](https://git.odit.services/lfk/frontend/compare/1.9.9...1.9.10)
+
+> 8 April 2025
+
+- feat: add experimental ui for mobile card assignment [`d7c9c27`](https://git.odit.services/lfk/frontend/commit/d7c9c27ec7a1fea1cbaf26914843d044bbae32fe)
+- chore(release): 1.9.10 [`e2d7de1`](https://git.odit.services/lfk/frontend/commit/e2d7de1e9e1fd134f54876fa80f19f94fbea3672)
+
+#### [1.9.9](https://git.odit.services/lfk/frontend/compare/1.9.8...1.9.9)
+
+> 4 April 2025
+
+- chore(release): 1.9.9 [`153b1b3`](https://git.odit.services/lfk/frontend/commit/153b1b3c2badee4826be614c3dbaafc10e1fbfea)
+- fix(CopyScanStationTokenModal): code sizes [`ec63c7c`](https://git.odit.services/lfk/frontend/commit/ec63c7c1c51ccaf25bdd1eacffda66c820003a4c)
+
+#### [1.9.8](https://git.odit.services/lfk/frontend/compare/1.9.7...1.9.8)
+
+> 2 April 2025
+
+- feat(GenerateSponsoringContracts): show download progress [`e261d5e`](https://git.odit.services/lfk/frontend/commit/e261d5e345f3175672bf86646ed838dd23400e50)
+- chore(release): 1.9.8 [`05c2535`](https://git.odit.services/lfk/frontend/commit/05c253569877a45f3c4759262255ca70aa9ee4a3)
+
+#### [1.9.7](https://git.odit.services/lfk/frontend/compare/1.9.6...1.9.7)
+
+> 2 April 2025
+
+- fix: ImportRunnerModal scrolling & team select [`766eeab`](https://git.odit.services/lfk/frontend/commit/766eeab49fb3ca5715c19dbf9bc53cb71124d3df)
+- chore(release): 1.9.7 [`c00497d`](https://git.odit.services/lfk/frontend/commit/c00497d7760a935965cc83213f72f35999a3c168)
+
+#### [1.9.6](https://git.odit.services/lfk/frontend/compare/1.9.5...1.9.6)
+
+> 29 March 2025
+
+- chore(release): 1.9.6 [`3c9b404`](https://git.odit.services/lfk/frontend/commit/3c9b404234c7d7d2f0c48256be2130a0ed8ae047)
+- pnpm allow builds [`9c56b38`](https://git.odit.services/lfk/frontend/commit/9c56b3883eeab9e1a5e1c4921bfb6528c230e0d4)
+
+#### [1.9.5](https://git.odit.services/lfk/frontend/compare/1.9.4...1.9.5)
+
+> 29 March 2025
+
+- feat: modal improvements [`d7e84a7`](https://git.odit.services/lfk/frontend/commit/d7e84a79a892294d532cc93aa3391c14a7a5ce99)
+- chore(release): 1.9.5 [`3d506db`](https://git.odit.services/lfk/frontend/commit/3d506db97502399e8b381b4cf38af2f07a584aec)
+
+#### [1.9.4](https://git.odit.services/lfk/frontend/compare/1.9.3...1.9.4)
+
+> 29 March 2025
+
+- feat: improve modals [`90b0fec`](https://git.odit.services/lfk/frontend/commit/90b0fec2366b608d163decdcd8798e879cf8218d)
+- chore(release): 1.9.4 [`102471e`](https://git.odit.services/lfk/frontend/commit/102471eaaae390d3ef815afde9ac4081be7d5dbc)
+
+#### [1.9.3](https://git.odit.services/lfk/frontend/compare/1.9.2...1.9.3)
+
+> 29 March 2025
+
+- feat: modal improvements [`fbe38ee`](https://git.odit.services/lfk/frontend/commit/fbe38eede95813e163a390b693790d78ce75c215)
+- feat: modal improvements [`22551c3`](https://git.odit.services/lfk/frontend/commit/22551c379f704b0d9c28c499f7d3f5a37f1533ca)
+- ci: only tagged runs for now [`e9dffce`](https://git.odit.services/lfk/frontend/commit/e9dffcea835cbcd6b5eb4ed1cc3feb62a9e831db)
+- chore(release): 1.9.3 [`4883e17`](https://git.odit.services/lfk/frontend/commit/4883e179e7090cf90783dcdecd5df8a422880188)
+- feat: modal improvements [`13c6e96`](https://git.odit.services/lfk/frontend/commit/13c6e96292613d9619f779f2557201cf0b938753)
+- feat(OrgDetail): improve selfservice link copy [`f547c0c`](https://git.odit.services/lfk/frontend/commit/f547c0cc817d7db0c70df4059dad753e9b16c1c9)
+- chore(deps): pnpm@10.7 [`b9563d7`](https://git.odit.services/lfk/frontend/commit/b9563d75dd15519d9ec5d425d628d232e7609913)
+- fix: sidebar [`a102af5`](https://git.odit.services/lfk/frontend/commit/a102af5a78c83cd54b4981bff2f6c8d54cf8c74c)
+
+#### [1.9.2](https://git.odit.services/lfk/frontend/compare/1.9.1...1.9.2)
+
+> 28 March 2025
+
+- 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)
+- chore(release): 1.9.2 [`3a56942`](https://git.odit.services/lfk/frontend/commit/3a569422ad7d68d0009fa73229dd73ee00be87a9)
+- 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)
+
+> 26 March 2025
+
+- 🚀RELEASE v1.8.1 [`b8e6b24`](https://git.odit.services/lfk/frontend/commit/b8e6b24bf32379c3f4a1679d422e6fdcc45f7c99)
+- fix(pdf_generation): Only load direct runners for direct calls [`97b7ca9`](https://git.odit.services/lfk/frontend/commit/97b7ca931f607ee64509ad10c2269632fc691091)
+
+#### [1.8.0](https://git.odit.services/lfk/frontend/compare/1.7.0...1.8.0)
+
+> 26 March 2025
+
+- wip [`824ecfa`](https://git.odit.services/lfk/frontend/commit/824ecfab2e976cd7c6cd2851be8a9be5c6b686e1)
+- wip [`0a6cf61`](https://git.odit.services/lfk/frontend/commit/0a6cf619b09be837d5503f4695250c7edaeeaff5)
+- feat: improve fonts + button positions [`c37fb98`](https://git.odit.services/lfk/frontend/commit/c37fb98bed377744981e927ea8d22db9e20c55ca)
+- 🚀RELEASE v1.8.0 [`48dd9ac`](https://git.odit.services/lfk/frontend/commit/48dd9acde595b882630855d5e6af3cfa18fc9ecf)
+- wip [`1bc5314`](https://git.odit.services/lfk/frontend/commit/1bc53146b9f024f3cab613b227d29304d687c92b)
+- wip [`e82350d`](https://git.odit.services/lfk/frontend/commit/e82350df4af082d2bbb322658c6c022d83b819ae)
+- wip [`37cdbba`](https://git.odit.services/lfk/frontend/commit/37cdbba0a3563875e19bee560f2cd5c8fc2d7a6e)
+- feat: improve input readability [`79e6a42`](https://git.odit.services/lfk/frontend/commit/79e6a4212d06029766d0a853686ed97879ebd349)
+- wip [`5f5d827`](https://git.odit.services/lfk/frontend/commit/5f5d8277b98363ef15a92621fca0a209345aca95)
+- chore(deps): bump [`bb2319a`](https://git.odit.services/lfk/frontend/commit/bb2319a78d253a2d6239a0d3daedc90fd29abdd0)
+- feat: cleanup TeamDetail + OrgDetail [`f734d1e`](https://git.odit.services/lfk/frontend/commit/f734d1e3f643a500a6432a389c3103045cc51262)
+- refactor(ci): Switch to actions for dev [`847fa28`](https://git.odit.services/lfk/frontend/commit/847fa288f1b5bbc422cc2944bbe66e80c5a00407)
+- refactor(ci): Add Gitea workflow for building release images and remove Woodpecker configuration [`3ec18a6`](https://git.odit.services/lfk/frontend/commit/3ec18a696435ada26bf2de2220b190dc630a9759)
+- feat: athiti font [`391186d`](https://git.odit.services/lfk/frontend/commit/391186d01f3b96638a3569dc2843bf181dc3f02c)
+- fix(DonorDetail): donor deletion [`5147a20`](https://git.odit.services/lfk/frontend/commit/5147a20b3c4a46968482b1e3517047351c94f77e)
+- feat(dashboard): full width for sidebar items [`975f145`](https://git.odit.services/lfk/frontend/commit/975f145444e5a478524ea2cbbfb9059b93617185)
+- wip [`3d3ce29`](https://git.odit.services/lfk/frontend/commit/3d3ce2918bc20cf1080a2b5153ddd8aaf51374b4)
+- feat(RunnerOrganizationService.runnerOrganizationControllerGetRunners): load all runners in org [`7c10d95`](https://git.odit.services/lfk/frontend/commit/7c10d95c1c68f4842fd323698e004a5ebf2c96cf)
+- wip [`050a146`](https://git.odit.services/lfk/frontend/commit/050a146ae070d67d8308db4b9612fd6eacbb9923)
+- fix(ci): Correct tag pattern syntax in release workflow [`e567bb3`](https://git.odit.services/lfk/frontend/commit/e567bb35c3b3f6eb73a2f0bc72f601e70f881ac8)
+
 #### [1.7.0](https://git.odit.services/lfk/frontend/compare/1.6.0...1.7.0)
 
+> 17 December 2024
+
 - refactor(pdfgeneration): Switch cards over to new service [`e230984`](https://git.odit.services/lfk/frontend/commit/e23098410c7d0b326cdbbb3a4b63fed10611e252)
 - refactor(pdfgeneration): Switch to new document-server api [`878d971`](https://git.odit.services/lfk/frontend/commit/878d9714cbc0a60cfd96bd1faf8af6af46e6fb5e)
 - refactor(pdfgeneration): Switched contract generation over to new document-server [`f99b7f4`](https://git.odit.services/lfk/frontend/commit/f99b7f4bb8f166bb966022ddd10689c082d248f0)
 - refactor(cards): Switched over to new document-server api [`65ce02e`](https://git.odit.services/lfk/frontend/commit/65ce02e777e6e9b3cfed248de680e5f292b3a639)
+- 🚀RELEASE v1.7.0 [`ae056cd`](https://git.odit.services/lfk/frontend/commit/ae056cd88cb27f003845fa4534553cde841c7f99)
 - fix(pdfgeneration): Added parent_group [`7f989b2`](https://git.odit.services/lfk/frontend/commit/7f989b206b16e2687d01a38da8e3ea9be0a52ba5)
 
 #### [1.6.0](https://git.odit.services/lfk/frontend/compare/1.5.3...1.6.0)

Dockerfile

@@ -1,9 +1,9 @@
-FROM registry.odit.services/hub/library/node:23.2.0-alpine3.20 AS build
+FROM registry.odit.services/hub/library/node:23.10.0-alpine3.21 AS build
 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 ./
+COPY package.json pnpm-lock.yaml vite.config.js 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.8
 RUN mkdir /pnpm && pnpm config set store-dir /pnpm && pnpm i
 
 COPY src ./src

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -13,7 +13,7 @@
 
   <body>
     <span style="display: none; visibility: hidden" id="buildinfo"
-      >RELEASE_INFO-1.7.0-RELEASE_INFO</span
+      >RELEASE_INFO-1.12.0-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.7.0",
+  "version": "1.12.0",
   "type": "module",
   "scripts": {
     "i18n-order": "node order.js",
@@ -14,25 +14,24 @@
   "devDependencies": {
     "@odit/license-exporter": "0.2.0",
     "@sveltejs/vite-plugin-svelte": "2.1.1",
+    "@types/papaparse": "^5.3.15",
+    "@types/underscore": "^1.13.0",
     "auto-changelog": "2.5.0",
-    "autoprefixer": "10.4.20",
+    "prettier": "3.5.3",
-    "postcss": "8.4.49",
+    "prettier-plugin-svelte": "3.3.3",
-    "prettier": "3.3.3",
-    "prettier-plugin-svelte": "3.2.8",
     "release-it": "17.10.0",
     "svelte-select": "3.17.0",
-    "tailwindcss": "3.4.15",
+    "vite": "6.3.2"
-    "vite": "4.3.3"
   },
   "release-it": {
     "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
@@ -42,19 +41,23 @@
     }
   },
   "dependencies": {
-    "@odit/lfk-client-js": "1.1.3",
+    "@bwip-js/browser": "^4.6.0",
+    "@fontsource/athiti": "^5.2.5",
+    "@odit/lfk-client-js": "1.2.4",
     "@paralleldrive/cuid2": "2.2.2",
+    "@tailwindcss/vite": "^4.1.4",
     "@tanstack/svelte-table": "8.9.1",
-    "bwip-js": "3.4.0",
     "check-password-strength": "2.0.10",
-    "csvtojson": "2.0.10",
+    "html5-qrcode": "^2.3.8",
     "localforage": "1.10.0",
-    "marked": "4.3.0",
+    "papaparse": "^5.5.2",
     "svelte": "3.58.0",
     "svelte-french-toast": "1.2.0",
-    "svelte-i18n": "3.6.0",
+    "svelte-i18n": "4.0.1",
+    "tailwindcss": "^4.1.4",
     "tinro": "0.6.12",
-    "validator": "13.12.0",
+    "underscore": "^1.13.7",
+    "validator": "13.15.0",
     "xlsx": "0.18.5"
   },
   "volta": {

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - es5-ext
+  - esbuild

postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

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>

public/privacy_en.md

@@ -1 +0,0 @@
-Nostrud tempor dolor aute ea excepteur aute mollit elit eiusmod exercitation. Magna laborum pariatur adipisicing pariatur cupidatat exercitation duis aliquip pariatur sint exercitation deserunt labore. Consectetur id laboris dolore nostrud do velit ipsum. Eu laboris velit do commodo ad ea sint ex cillum. Cillum ipsum qui eiusmod laborum mollit sunt dolore incididunt. Cillum sunt culpa veniam voluptate et qui ut magna anim occaecat ut mollit dolor. Duis irure proident eu incididunt dolore sunt nisi aute dolore amet eu fugiat laboris quis.

src/App.svelte

@@ -41,6 +41,7 @@
   import Settings from "./components/settings/Settings.svelte";
   import Transition from "./components/base/Transition.svelte";
   import Orgs from "./components/orgs/Orgs.svelte";
+  import CardAssignment from "./components/general/CardAssignment.svelte";
   import Runners from "./components/runners/Runners.svelte";
   import Footer from "./components/general/Footer.svelte";
   import TracksOverview from "./components/tracks/TracksOverview.svelte";
@@ -53,8 +54,6 @@
   import UserPermissions from "./components/users/UserPermissions.svelte";
   import GroupPermissions from "./components/groups/GroupPermissions.svelte";
   import RunnerDetail from "./components/runners/RunnerDetail.svelte";
-  import Imprint from "./components/general/Imprint.svelte";
-  import Privacy from "./components/general/Privacy.svelte";
   import ResetPassword from "./components/auth/ResetPassword.svelte";
   import Contacts from "./components/contacts/Contacts.svelte";
   import ContactDetail from "./components/contacts/ContactDetail.svelte";
@@ -87,14 +86,6 @@
     <Route path="/about">
       <About />
     </Route>
-  {:else if $router.path === "/imprint"}
-    <Route path="/imprint">
-      <Imprint />
-    </Route>
-  {:else if $router.path === "/privacy"}
-    <Route path="/privacy">
-      <Privacy />
-    </Route>
   {:else if $store.isLoggedIn}
     <Dashboard>
       <Transition>
@@ -135,12 +126,17 @@
         </Route>
         <Route path="/runners/*">
           <Route path="/">
-            <Runners />
+            <Runners created_via="all" />
           </Route>
           <Route path="/:runnerid" let:params>
             <RunnerDetail {params} />
           </Route>
         </Route>
+        <Route path="/cardassignment/*">
+          <Route path="/">
+            <CardAssignment />
+          </Route>
+        </Route>
         <Route path="/teams/*">
           <Route path="/">
             <Teams />

src/components/base/PromiseError.svelte

@@ -5,7 +5,7 @@
 
 <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>
+    <b>{$_("general_promise_error")}</b>
     {error}
   </span>
 </div>

src/components/cards/AddCardBulkModal.svelte

@@ -91,14 +91,14 @@
 
 {#if bulk_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       bulk_modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -111,18 +111,18 @@
         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-2xl sm:w-full"
+        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-2xl sm:w-full relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -135,18 +135,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:mt-0">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-bulk-blanco-cards")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "just-enter-how-many-you-want-and-the-system-will-create-them"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="amount"
@@ -163,7 +163,7 @@
                       type="number"
                       step="1"
                       name="amount"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="400"
                     />
                     <span
@@ -183,13 +183,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit_with_print}
             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-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"
           >
             {$_("create-and-generate-pdf")}
           </button>
@@ -198,7 +198,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit_without_print}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 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-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create-without-pdf")}
           </button>
@@ -207,7 +207,7 @@
               bulk_modal_open = false;
             }}
             type="button"
-            class="mr-auto 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"
+            class="mr-auto 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"
           >
             {$_("cancel")}
           </button>

src/components/cards/AddCardModal.svelte

@@ -84,14 +84,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -104,18 +104,18 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -128,11 +128,11 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:mt-0">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-card")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_("you-can-provide-a-runner-but-you-dont-have-to")}
                   {$_(
@@ -140,7 +140,7 @@
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="donor"
@@ -148,7 +148,7 @@
                     >{$_("runner")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}
@@ -165,13 +165,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("create")}
           </button>
@@ -180,7 +180,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/cards/CardDetailModal.svelte

@@ -78,14 +78,14 @@
 
 {#if edit_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       edit_modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -98,18 +98,18 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -122,16 +122,16 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("edit-a-card")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_("you-can-provide-a-runner-but-you-dont-have-to")}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="runner"
@@ -139,7 +139,7 @@
                     >{$_("runner")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}
@@ -162,7 +162,7 @@
                       name="enabled"
                       type="checkbox"
                       checked={editable.enabled}
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                     {$_("this-card-is")}
                     {#if editable.enabled}
@@ -174,13 +174,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("save-changes")}
           </button>
@@ -189,7 +189,7 @@
               edit_modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/cards/CardRunner.svelte

@@ -6,7 +6,7 @@
 {#if !runner}
   {$_("non-blanko")}
 {:else}
-  <a href={`/runners/${runner.id}`}>
+  <a class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-blue-100 text-blue-800" href={`/runners/${runner.id}`}>
     {#if runner.middlename}
       {runner.firstname} {runner.middlename} {runner.lastname}
     {:else}

src/components/cards/CardStatus.svelte

@@ -5,12 +5,12 @@
 
 {#if enabled}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
     >{$_("enabled")}</span
   >
 {:else}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
     >{$_("disabled")}</span
   >
 {/if}

src/components/cards/Cards.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("cards")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
@@ -20,7 +20,7 @@
         modal_open = true;
       }}
       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:w-auto sm:text-sm mt-1 sm:mt-0"
+      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:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("add-card")}
     </button>
@@ -29,7 +29,7 @@
         bulk_modal_open = true;
       }}
       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:w-auto sm:text-sm mt-1 sm:mt-0"
+      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:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("create-bulk-cards")}
     </button>

src/components/cards/CardsOverview.svelte

@@ -180,11 +180,9 @@
     bind:runner
     bind:editable
     bind:original_data
-    on:dataUpdated={(event) => {
+    on:dataUpdated={(editevent) => {
-      current_cards[
+      console.log(editevent.detail.card)
-        current_cards.findIndex((c) => c.id === event.detail.card.id)
+      current_cards = current_cards.filter((c) => c.id !== editevent.detail.card.id).concat([editevent.detail.card]).sort((a, b) => a.code - b.code);
-      ] = event.detail.card;
-      current_cards = current_cards;
       options.update((options) => ({
         ...options,
         data: current_cards,

src/components/cards/DeleteCardModal.svelte

@@ -34,14 +34,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -54,18 +54,18 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -78,15 +78,10 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
                 {$_("please-confirm-the-deletion-of-card")}
-                </p>
+              </h3>
-              </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <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"
           >
             {$_("delete")}
           </button>
@@ -117,7 +112,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/contacts/AddContactModal.svelte

@@ -43,7 +43,7 @@
   $: address_zipcode_value = "";
   $: address_city_value = "";
   $: processed_last_submit = true;
-  $: address_checked = true;
+  $: address_checked = false;
   $: isPhoneValidOrEmpty =
     (phone_input_value.includes("+") &&
       isMobilePhone(
@@ -136,14 +136,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -156,18 +156,18 @@
         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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -179,18 +179,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-contact")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-add-a-new-contact"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -208,7 +208,7 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -231,7 +231,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -250,7 +250,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -270,7 +270,7 @@
                     name="team"
                     multiple
                     bind:value={selected_team}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   >
                     {#each teams as team}
                       <option value={team.id}>
@@ -300,7 +300,7 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isPhoneValidOrEmpty}
                     <span
@@ -328,7 +328,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span
@@ -345,11 +345,11 @@
                       id="comments"
                       name="comments"
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                       >{$_("address")}</label
                     >
                   </div>
@@ -371,7 +371,7 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -394,7 +394,7 @@
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
                   <div class="col-span-6">
@@ -413,7 +413,7 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -439,7 +439,7 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span
@@ -454,13 +454,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("create")}
           </button>
@@ -469,7 +469,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/contacts/ContactDetail.svelte

@@ -104,50 +104,32 @@
 				<nav class="w-full flex">
 					<ol class="list-none flex flex-row items-center justify-start">
 						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="./"
-                fill="currentColor"
+								><svg
 									xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
 									width="24"
 									height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_("contacts")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
 									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
 									stroke-linecap="round"
 									stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
+									class="inline-block"
-                height="1em"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                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>
+								{$_("contacts")}</a
-            <li class="flex items-center">
-              <span class="mr-2"
-                >{original_data.firstname}
-                {original_data.middlename || ""}
-                {original_data.lastname}</span
 							>
 						</li>
 					</ol>
 				</nav>
 			</div>
 		</div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
 			{original_data.firstname}
 			{original_data.middlename || ""}
 			{original_data.lastname}
-      <span data-id="contact_actions_${editable.id}">
+			<div data-id="contact_actions_${editable.id}">
 				{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
 					{#if delete_triggered}
 						<button
@@ -180,15 +162,15 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-            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"
+						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
 					>
 				{/if}
-      </span>
+			</div>
 		</div>
 		<!--  -->
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="firstname" class="font-medium text-gray-700"
+			<label for="firstname" class="font-semibold text-gray-700"
 				>{$_("first-name")}</label
 			>
 			<input
@@ -200,7 +182,7 @@
 				class:focus:ring-red-500={!isFirstnameValid}
 				bind:value={editable.firstname}
 				name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isFirstnameValid}
 				<span
@@ -210,8 +192,8 @@
 				</span>
 			{/if}
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="middlename" class="font-medium text-gray-700"
+			<label for="middlename" class="font-semibold text-gray-700"
 				>{$_("middle-name")}</label
 			>
 			<input
@@ -220,11 +202,11 @@
 				type="text"
 				bind:value={editable.middlename}
 				name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="lastname" class="font-medium text-gray-700"
+			<label for="lastname" class="font-semibold text-gray-700"
 				>{$_("last-name")}</label
 			>
 			<input
@@ -236,7 +218,7 @@
 				class:focus:border-red-500={!isLastnameValid}
 				class:focus:ring-red-500={!isLastnameValid}
 				name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isLastnameValid}
 				<span
@@ -246,8 +228,8 @@
 				</span>
 			{/if}
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="email" class="font-medium text-gray-700"
+			<label for="email" class="font-semibold text-gray-700"
 				>{$_("e-mail-adress")}</label
 			>
 			<input
@@ -259,7 +241,7 @@
 				class:focus:border-red-500={!isEmailValid}
 				class:focus:ring-red-500={!isEmailValid}
 				name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isEmailValid}
 				<span
@@ -269,8 +251,8 @@
 				</span>
 			{/if}
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
+			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
 			<input
 				autocomplete="off"
 				placeholder={$_("phone")}
@@ -280,7 +262,7 @@
 				class:focus:ring-red-500={!isPhoneValidOrEmpty}
 				bind:value={editable.phone}
 				name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isPhoneValidOrEmpty}
 				<span
@@ -290,13 +272,13 @@
 				</span>
 			{/if}
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <span class="font-medium text-gray-700">{$_("groups")}</span>
+			<span class="font-semibold text-gray-700">{$_("groups")}</span>
 			<select
 				bind:value={editable.groups}
 				name="team"
 				multiple
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			>
 				{#each teams as team}
 					<option value={team.id}>
@@ -318,11 +300,11 @@
 					id="comments"
 					name="comments"
 					type="checkbox"
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+					class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 				/>
 			</div>
 			<div class="ml-3 text-sm">
-        <label for="comments" class="font-medium text-gray-700"
+				<label for="comments" class="font-semibold text-gray-700"
 					>{$_("address")}</label
 				>
 			</div>
@@ -341,7 +323,7 @@
 					bind:value={editable.address.address1}
 					type="text"
 					name="address1"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !isAddress1Valid}
 					<span
@@ -361,7 +343,7 @@
 					bind:value={editable.address.address2}
 					type="text"
 					name="address2"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 			</div>
 			<div class="col-span-6">
@@ -377,7 +359,7 @@
 					bind:value={editable.address.postalcode}
 					type="text"
 					name="zipcode"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !iszipcodevalid}
 					<span
@@ -400,7 +382,7 @@
 					bind:value={editable.address.city}
 					type="text"
 					name="city"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !iscityvalid}
 					<span

src/components/contacts/Contacts.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("contacts")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}

src/components/contacts/ContactsOverview.svelte

@@ -86,20 +86,21 @@
 									</td>
 									<td class="px-6 py-4 whitespace-nowrap">
 										<div class="flex items-center">
-                      <div class="ml-4">
+											<div
-                        <div class="text-sm font-medium text-gray-900">
+												class="text-sm font-medium text-gray-900 gap-0.5 flex flex-wrap"
+											>
 												{#if t.groups.length > 0}
 													{#each t.groups as g}
 														{#if g.responseType === "RUNNERORGANIZATION"}
 															<a
 																href="../orgs/{g.id}"
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+																class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
 																>{g.name}</a
 															>
 														{:else}
 															<a
 																href="../teams/{g.id}"
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+																class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
 																>{g.parentGroup.name}
 																&gt;
 																{g.name}</a
@@ -111,7 +112,6 @@
 												{/if}
 											</div>
 										</div>
-                    </div>
 									</td>
 									<td class="px-6 py-4 whitespace-nowrap">
 										<div class="flex items-center">
@@ -151,7 +151,7 @@
 															(obj) => obj.id !== t.id
 														);
 														toast.dismiss();
-                            toast($_("contact-deleted"));
+														toast.success($_("contact-deleted"));
 													});
 												}}
 												tabindex="0"
@@ -190,7 +190,7 @@
 	{: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>
+				<b>{$_("general_promise_error")}</b>
 				{error}
 			</span>
 		</div>

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:11;"
+		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" />
@@ -25,7 +26,7 @@
 		<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
 			<a
 				class:activenav={$router.path === "/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 				href="/"
 			>
 				<svg
@@ -40,10 +41,30 @@
 				</svg>
 				<span>{$_("dashboard-title")}</span>
 			</a>
-      {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET") && store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
 				<a
-          class:activenav={$router.path === "/runners/"}
+					class:activenav={$router.path.includes("/cardassignment/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/cardassignment/"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+
+					<span>{$_('card_assignment_menu')}</span>
+				</a>
+				<a
+					class:activenav={$router.path.includes("/runners/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/runners/"
 				>
 					<svg
@@ -63,8 +84,8 @@
 			{/if}
 			{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
 				<a
-          class:activenav={$router.path === "/teams/"}
+					class:activenav={$router.path.includes("/teams/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/teams/"
 				>
 					<svg
@@ -85,7 +106,7 @@
 			{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
 				<a
 					class:activenav={$router.path.includes("/orgs/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/orgs/"
 				>
 					<svg
@@ -106,7 +127,7 @@
 			{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
 				<a
 					class:activenav={$router.path.includes("/donors/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/donors/"
 				>
 					<svg
@@ -127,7 +148,7 @@
 			{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
 				<a
 					class:activenav={$router.path.includes("/donations/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/donations/"
 				>
 					<svg
@@ -148,7 +169,7 @@
 			{#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
 				<a
 					class:activenav={$router.path === "/tracks/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/tracks/"
 				>
 					<svg
@@ -169,7 +190,7 @@
 			{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
 				<a
 					class:activenav={$router.path === "/cards/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/cards/"
 				>
 					<svg
@@ -191,8 +212,8 @@
 			{/if}
 			{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
 				<a
-          class:activenav={$router.path === "/scans/"}
+					class:activenav={$router.path.includes("/scans/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/scans/"
 				>
 					<svg
@@ -213,8 +234,8 @@
 			{/if}
 			{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
 				<a
-          class:activenav={$router.path === "/contacts/"}
+					class:activenav={$router.path.includes("/contacts/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/contacts/"
 				>
 					<svg
@@ -234,8 +255,8 @@
 			{/if}
 			{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
 				<a
-          class:activenav={$router.path === "/scanstations/"}
+					class:activenav={$router.path.includes("/scanstations/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/scanstations/"
 				>
 					<svg
@@ -256,8 +277,8 @@
 			{/if}
 			{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
 				<a
-          class:activenav={$router.path === "/statsclients/"}
+					class:activenav={$router.path.includes("/statsclients/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/statsclients/"
 				>
 					<svg
@@ -278,8 +299,8 @@
 			{/if}
 			{#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
 				<a
-          class:activenav={$router.path === "/users/"}
+					class:activenav={$router.path.includes("/users/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/users/"
 				>
 					<svg
@@ -299,8 +320,8 @@
 			{/if}
 			{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
 				<a
-          class:activenav={$router.path === "/groups/"}
+					class:activenav={$router.path.includes("/groups/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/groups/"
 				>
 					<svg
@@ -320,7 +341,7 @@
 			{/if}
 			<a
 				class:activenav={$router.path === "/settings/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 				href="/settings/"
 			>
 				<svg
@@ -339,7 +360,7 @@
 			</a>
 			<a
 				class:activenav={$router.path === "/about/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 				href="/about/"
 			>
 				<svg
@@ -358,7 +379,7 @@
 			</a>
 			<button
 				tabindex="0"
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 				on:click={() => {
 					AuthService.authControllerLogout();
 					logout();
@@ -390,11 +411,21 @@
 				}}
 				class="block btn btn-light md:hidden"
 			>
-        <span class="sr-only">Menu</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+				<span class="sr-only">Menu</span><svg
-          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+					xmlns="http://www.w3.org/2000/svg"
-        </svg>
+					fill="none"
-        </button
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="size-6"
 				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+					/>
+				</svg>
+			</button>
 			<span class="inline-block">
 				<img src="/lfk-logo.png" alt="Logo" class="h-8 inline-block" />
 				<span class="text-lg font-bold">LfK!Admin</span>

src/components/dashboard/MainDashContent.svelte

@@ -7,8 +7,9 @@
 </script>
 
 <div class="p-2 md:p-5 overflow-x-hidden">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("dashboard-greeting")} <span class="text-blue-500"
+		{$_("dashboard-greeting")}
+		<span class="text-blue-500"
 			>{store.state.jwtinfo.userdetails.firstname}
 			{store.state.jwtinfo.userdetails.lastname}</span
 		>
@@ -216,11 +217,45 @@
 					/></svg
 				>
 			</StatCard>
+			<StatCard
+				title={$_("runner_via_selfservice")}
+				value={stats.runnersViaSelfservice}
+				href="/runners/"
+			>
+				<svg
+					height="24"
+					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>
+			<StatCard
+				title={$_('runners_via_kiosk')}
+				value={stats.runnersViaKiosk}
+				href="/runners/"
+			>
+				<svg
+					height="24"
+					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>
+				<b>{$_("general_promise_error")}</b>
 				{error}
 			</span>
 		</div>

src/components/donations/AddDonationModal.svelte

@@ -21,7 +21,7 @@
 	$: runner = 0;
 	$: donors = [];
 	$: runners = [];
-  $: is_fixed = false;
+	$: type = "distance";
 	$: is_paid = false;
 	$: amount_input = 0;
 	$: processed_last_submit = true;
@@ -46,7 +46,7 @@
 			let amount_cent = Math.floor(amount_input * 100);
 			processed_last_submit = false;
 			toast.loading($_("adding-donation"));
-      if (is_fixed) {
+			if (type === "fixed") {
 				let postdata = {
 					donor,
 					amount: amount_cent,
@@ -72,7 +72,30 @@
 					.finally(() => {
 						processed_last_submit = true;
 					});
-      } else {
+			} else if (type === "anonymous") {
+				let postdata = {
+					amount: amount_cent,
+					paidAmount: 0,
+				};
+				if (is_paid) {
+					postdata.paidAmount = amount_cent;
+				}
+				DonationService.donationControllerPostFixed(postdata)
+					.then((result) => {
+						amount_input = 0;
+						modal_open = false;
+						//
+						toast.dismiss();
+						toast.success($_("donation_added"));
+						dispatch("created", { donations: [result] });
+					})
+					.catch((err) => {
+						//
+					})
+					.finally(() => {
+						processed_last_submit = true;
+					});
+			} else if (type === "distance") {
 				let postdata = {
 					donor,
 					runner,
@@ -100,33 +123,29 @@
 	}
 
 	onMount(async () => {
-    donors = (await DonorService.donorControllerGetAll()).map(
+		donors = (await DonorService.donorControllerGetAll()).map((r) => {
-      (r) => {
 			return { label: getDonorLabel(r), value: r };
-      }
+		});
-    );
+		runners = (await RunnerService.runnerControllerGetAll()).map((r) => {
-    runners = (await RunnerService.runnerControllerGetAll()).map(
-      (r) => {
 			return { label: getDonorLabel(r), value: r };
-      }
+		});
-    );
 	});
 </script>
 
 {#if modal_open}
 	<div
-    class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={() => {
 			modal_open = false;
 		}}
 	>
 		<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 h-screen text-center sm:block p-0 lg:p-4"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
-          class="absolute inset-0 bg-gray-500 opacity-75"
+					class="absolute inset-0 bg-neutral-500 opacity-75"
 					data-id="modal_backdrop"
 				/>
 			</div>
@@ -135,18 +154,18 @@
 				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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				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-xl">
-          <div class="sm:flex sm:items-start">
+					<div class="">
 						<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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
-                class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								fill="currentColor"
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
@@ -158,41 +177,98 @@
 								/></svg
 							>
 						</div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+						<div class="mt-3">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
+              <h3 class="text-xl leading-6 font-medium text-neutral-900">
-                {#if is_fixed}
+                Sponsoring erstellen
-                  {$_("create-a-new-fixed-donation")}
-                {:else}{$_("create-a-new-distance-donation")}{/if}
               </h3>
-              <label class="content-center align-middle object-center">
+							<nav
-                <span class="ml-2 text-base" class:text-gray-300={is_fixed}
+								class="relative z-0 flex border border-neutral-200 rounded-xl overflow-hidden mb-2"
-                  >{$_("distance-donation")}</span
 							>
+								<button
+									on:click={() => {
+										type = "distance";
+									}}
+									type="button"
+									id="bar-with-underline-item-1"
+									class:donation_active_tab={type === "distance"}
+									class:donation_inactive_tab={type !== "distance"}
+									aria-selected={type === "distance"}
+									role="tab"
+								>
+									{$_("spende_pro_km")}
+								</button>
+								<button
+									on:click={() => {
+										type = "fixed";
+									}}
+									type="button"
+									id="bar-with-underline-item-2"
+									class:donation_active_tab={type === "fixed"}
+									class:donation_inactive_tab={type !== "fixed"}
+									aria-selected={type === "fixed"}
+									role="tab"
+								>
+									{$_("festbetrag")}
+								</button>
+								<button
+									on:click={() => {
+										type = "anonymous";
+									}}
+									type="button"
+									id="bar-with-underline-item-3"
+									class:donation_active_tab={type === "anonymous"}
+									class:donation_inactive_tab={type !== "anonymous"}
+									aria-selected={type === "anonymous"}
+									role="tab"
+								>
+									{$_("anonyme_spende")}
+								</button>
+							</nav>
+
+							<div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
+								{#if type === "anonymous"}
+									<div class="col-span-6">
+										<label
+											for="donation_amount_eur"
+											class="block text-sm font-medium text-neutral-900"
+										>
+											{$_("donation-amount")}</label
+										>
+										<div class="mt-1 flex rounded-md shadow-sm">
 											<input
-                  class="toggle relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle"
+												autocomplete="off"
-                  type="checkbox"
+												class:border-red-500={!is_amount_valid}
-                  bind:checked={is_fixed}
+												class:focus:border-red-500={!is_amount_valid}
+												class:focus:ring-red-500={!is_amount_valid}
+												bind:value={amount_input}
+												type="number"
+												step="0.01"
+												name="donation_amount_eur"
+												class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
+												placeholder="2.00"
 											/>
-                <span class="ml-2 text-base" class:text-gray-300={!is_fixed}
+											<span
-                  >{$_("fixed-donation")}</span
+												class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
+												>€</span
 											>
-              </label>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_(
-                    "please-provide-the-nessecary-information-to-create-a-new-donation"
-                  )}
-                </p>
 										</div>
-              <div class="grid grid-cols-6 gap-6">
+										{#if !is_amount_valid}
+											<span
+												class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+											>
+												{$_("donation-amount-must-be-greater-that-0-00eur")}
+											</span>
+										{/if}
+									</div>
+								{:else}
 									<div class="col-span-6">
 										<label
 											for="donor"
-                    class="block text-sm font-medium text-gray-700"
+											class="block text-sm font-medium text-neutral-900"
 											>{$_("donor")}</label
 										>
 										<Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+											containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 rounded-md p-2"
 											itemFilter={(label, filterText, option) =>
 												filterDonors(label, filterText, option)}
 											items={donors}
@@ -204,15 +280,15 @@
 											on:clear={() => (donors = null)}
 										/>
 									</div>
-                {#if !is_fixed}
+									{#if type === "distance"}
 										<div class="col-span-6">
 											<label
 												for="donor"
-                      class="block text-sm font-medium text-gray-700"
+												class="block text-sm font-medium text-neutral-900"
 												>{$_("runner")}</label
 											>
 											<Select
-                      containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+												containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 rounded-md p-2"
 												itemFilter={(label, filterText, option) =>
 													filterDonors(label, filterText, option)}
 												items={runners}
@@ -228,11 +304,11 @@
 									<div class="col-span-6">
 										<label
 											for="donation_amount_eur"
-                    class="block text-sm font-medium text-gray-700"
+											class="block text-sm font-medium text-neutral-900"
 										>
-                    {#if !is_fixed}
+											{#if type === "fixed"}
-                      {$_("amount-per-kilometer")}
+												{$_("donation-amount")}
-                    {:else}{$_("donation-amount")}{/if}</label
+											{:else}{$_("amount-per-kilometer")}{/if}</label
 										>
 										<div class="mt-1 flex rounded-md shadow-sm">
 											<input
@@ -244,11 +320,11 @@
 												type="number"
 												step="0.01"
 												name="donation_amount_eur"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+												class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
 												placeholder="2.00"
 											/>
 											<span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+												class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
 												>€</span
 											>
 										</div>
@@ -260,42 +336,35 @@
 											</span>
 										{/if}
 									</div>
-                {#if is_fixed}
+								{/if}
-                  <div class="col-span-6">
+								{#if type === "fixed" || type === "anonymous"}
+									<div class="flex">
+										<input
+											bind:checked={is_paid}
+											type="checkbox"
+											class="shrink-0 mt-0.5 border-neutral-200 rounded-sm text-blue-600 focus:ring-blue-500 checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none"
+											id="hs-default-checkbox"
+										/>
 										<label
-                      for="paid"
+											for="hs-default-checkbox"
-                      class="block text-sm font-medium text-gray-700"
+											class="text-base text-neutral-900 ms-2 font-medium"
 											>{$_("already-paid")}</label
 										>
-                    <p class="text-gray-500">
-                      <input
-                        id="paid"
-                        bind:checked={is_paid}
-                        name="paid"
-                        type="checkbox"
-                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                      />
-                      <span class="align-text-bottom">
-                        {#if is_paid}
-                          {$_("paid")}
-                        {:else}
-                          {$_("open")}
-                        {/if}
-                      </span>
-                    </p>
 									</div>
 								{/if}
 							</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-neutral-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10"
+				>
 					<button
 						disabled={!createbtnenabled}
 						class:opacity-50={!createbtnenabled}
 						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-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"
 					>
 						{$_("create")}
 					</button>
@@ -304,7 +373,7 @@
 							modal_open = false;
 						}}
 						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"
+						class="w-full justify-center rounded-md border border-neutral-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-neutral-900 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
 					>
 						{$_("cancel")}
 					</button>
@@ -313,28 +382,3 @@
 		</div>
 	</div>
 {/if}
-
-<style>
-  .toggle:before {
-    content: "";
-    position: absolute;
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 50%;
-    top: 0;
-    left: 0;
-    transform: scale(1.1);
-    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
-    background-color: white;
-    transition: 0.2s ease-in-out;
-  }
-
-  .toggle:checked {
-    /* @apply: bg-indigo-400; */
-    background-color: #7f9cf5;
-  }
-
-  .toggle:checked:before {
-    left: 1.25rem;
-  }
-</style>

src/components/donations/AddDonationPaymentModal.svelte

@@ -76,14 +76,14 @@
 
 {#if payment_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       payment_modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -96,18 +96,18 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -120,18 +120,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("enter-payment")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "you-can-enter-the-donations-paid-amount-manually-or-use-the-max-button-to-use-the-donations-exact-amount"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols gap-6">
+              <div class="grid grid-cols gap-2 lg:gap-6">
                 <div class="w-full">
                   <label
                     for="token"
@@ -179,13 +179,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("save-changes")}
           </button>
@@ -194,7 +194,7 @@
               payment_modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/donations/DeleteDonationModal.svelte

@@ -37,14 +37,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -57,18 +57,18 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -80,15 +80,10 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
                 {$_("please-confirm-the-deletion-of-donation")}
-                </p>
+              </h3>
-              </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <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"
           >
             {$_("delete")}
           </button>
@@ -111,7 +106,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/donations/DonationDetail.svelte

@@ -6,7 +6,7 @@
 		DonorService,
 		RunnerService,
 	} from "@odit/lfk-client-js";
-  import toast from 'svelte-french-toast'
+	import toast from "svelte-french-toast";
 
 	import PromiseError from "../base/PromiseError.svelte";
 	import Select from "svelte-select";
@@ -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) => {
@@ -121,46 +121,32 @@
 {:then}
 	<section class="container p-5 select-none">
 		<div class="flex flex-row mb-4">
-      <div class="w-full">
+			<div class="mt-2 w-full">
 				<nav class="w-full flex">
 					<ol class="list-none flex flex-row items-center justify-start">
 						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="./"
-                fill="currentColor"
+								><svg
 									xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
 									width="24"
 									height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  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
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_("donations")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
 									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
 									stroke-linecap="round"
 									stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
+									class="inline-block"
-                height="1em"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                width="1em"
+								>
-                xmlns="http://www.w3.org/2000/svg"
+								{$_("donations")}</a
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
 							>
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">{original_data.id}</span>
 						</li>
 					</ol>
 				</nav>
 			</div>
 		</div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
 			{original_data.donor.firstname}
 			{original_data.donor.middlename || ""}
 			{original_data.donor.lastname}
@@ -173,19 +159,20 @@
 				{$_("fixed-donation")}:
 				{amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
 			{/if}
-      <span data-id="donation_actions_${original_data.id}">
+			[#{original_data.id}]
+			<div data-id="donation_actions_${original_data.id}">
 				{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
 					{#if delete_triggered}
 						<button
 							on:click={deleteDonation}
-              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:ml-3 sm:w-auto sm:"
+							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-deletion")}</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:"
+							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}
@@ -195,7 +182,7 @@
 								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:ml-3 sm:w-auto sm:"
+							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-donation")}</button
 						>
 					{/if}
@@ -206,15 +193,15 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-            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:ml-3 sm:w-auto sm:"
+						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
 					>
 				{/if}
-      </span>
+			</div>
 		</div>
 		<!--  -->
 		<div>
-      <span class="font-medium text-gray-700"
+			<span class="font-semibold text-gray-700"
 				>{$_("total-donation-amount")}:</span
 			>
 			<span
@@ -223,33 +210,33 @@
 					.toLocaleString("de-DE", { valute: "EUR" })}€</span
 			>
 			|
-      <span class="font-medium text-gray-700">{$_("paid-amount")}:</span>
+			<span class="font-semibold text-gray-700">{$_("paid-amount")}:</span>
 			<span
 				>{(editable.paidAmount / 100)
 					.toFixed(2)
 					.toLocaleString("de-DE", { valute: "EUR" })}€</span
 			>
 			|
-      <span class="font-medium text-gray-700">{$_("status")}:</span>
+			<span class="font-semibold text-gray-700">{$_("status")}:</span>
 			{#if editable.status == "PAID"}
 				<span
-          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
 					>{$_("paid")}</span
 				>
 			{:else}
 				<span
-          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
 					>{$_("open")}</span
 				>
 			{/if}
 		</div>
 		<br />
-    <div class=" w-full">
+		<div class=" mt-2 w-full">
-      <label for="donor" class="block font-medium text-gray-700"
+			<label for="donor" class="block font-semibold text-gray-700"
 				>{$_("donor")}</label
 			>
 			<Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					filterDonors(label, filterText, option)}
 				items={current_donors}
@@ -267,12 +254,12 @@
 			/>
 		</div>
 		{#if original_data.responseType == "DISTANCEDONATION"}
-      <div class=" w-full">
+			<div class=" mt-2 w-full">
-        <label for="donor" class="block font-medium text-gray-700"
+				<label for="donor" class="block font-semibold text-gray-700"
 					>{$_("runner")}</label
 				>
 				<Select
-          containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 					itemFilter={(label, filterText, option) =>
 						filterDonors(label, filterText, option)}
 					items={current_runners}
@@ -286,8 +273,8 @@
 				/>
 			</div>
 		{/if}
-    <div class=" w-full">
+		<div class=" mt-2 w-full">
-      <label for="lastname" class="font-medium text-gray-700">
+			<label for="lastname" class="font-semibold text-gray-700">
 				{#if original_data.responseType == "DISTANCEDONATION"}
 					{$_("amount-per-kilometer")}
 				{:else}{$_("donation-amount")}{/if}
@@ -302,7 +289,7 @@
 					type="number"
 					step="0.01"
 					name="donation_amount_eur"
-          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 p-2"
 					placeholder="2.00"
 				/>
 				<span
@@ -318,8 +305,8 @@
 				</span>
 			{/if}
 		</div>
-    <div class="w-full">
+		<div class="mt-2 w-full">
-      <label for="token" class="block text-sm font-medium text-gray-700"
+			<label for="token" class="block font-semibold text-gray-700"
 				>{$_("paid-amount")}</label
 			>
 			<div

src/components/donations/DonationDonor.svelte

@@ -4,12 +4,15 @@
 </script>
 
 {#if !donor || donor.firstname == 0}
-  {$_("donor-has-no-associated-donations")}
+	<span
+		class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+		>{$_('anonymer_sponsor')}</span
+	>
 {:else}
 	<div class="flex items-center">
 		<a
 			href="../donors/{donor.id}"
-      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+			class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
 			>{donor.firstname}
 			{#if donor.middlename}{donor.middlename}{/if}
 			{donor.lastname}</a

src/components/donations/DonationRunner.svelte

@@ -9,7 +9,7 @@
   <div class="text-sm font-medium text-gray-900">
     <a
       href="../runners/{runner.id}"
-      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
       >{runner.firstname}
       {#if runner.middlename}{runner.middlename}{/if}
       {runner.lastname}</a

src/components/donations/DonationStatus.svelte

@@ -5,12 +5,12 @@
 
 {#if status == "PAID"}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
     >{$_("paid")}</span
   >
 {:else}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
     >{$_("open")}</span
   >
 {/if}

src/components/donations/DonationTableAction.svelte

@@ -9,10 +9,15 @@
   export let paymentAction;
 </script>
 
+{#if paymentAction}
 <button
   on:click={paymentAction}
   class="text-[#025a21] hover:text-green-900 mr-4">{$_("enter-payment")}</button
 >
+{:else}
+<span class="inline-block opacity-0 cursor-default mr-4" style="">{$_("enter-payment")}</span>
+
+{/if}
 <TableActions
   bind:detailsAction
   bind:detailsLink

src/components/donations/Donations.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("donations")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}

src/components/donations/DonationsOverview.svelte

@@ -112,18 +112,25 @@
       accessorKey: "actions",
       header: () => $_("action"),
       cell: (info) => {
+        let detailsLink
+        let paymentAction
+        if (info.row.original.donor != undefined){
+          detailsLink = `./${info.row.original.id}`
+          paymentAction = () => {
+            active_edits = current_donations.filter(
+              (r) => r.id == info.row.original.id
+            );
+          }
+        }
+        
         return renderComponent(DonationTableAction, {
-          detailsLink: `./${info.row.original.id}`,
+          detailsLink: detailsLink,
           deleteAction: () => {
             active_deletes = current_donations.filter(
               (r) => r.id == info.row.original.id
             );
           },
-          paymentAction: () => {
+          paymentAction: paymentAction,
-            active_edits = current_donations.filter(
-              (r) => r.id == info.row.original.id
-            );
-          },
           deleteEnabled:
             store.state.jwtinfo.userdetails.permissions.includes(
               "DONATION:DELETE"
@@ -163,7 +170,7 @@
       ...options,
       data: current_donations,
     }));
-    toast($_("donation-deleted"));
+    toast.success($_("donation-deleted"));
   }
 
   onMount(async () => {

src/components/donors/AddDonorModal.svelte

@@ -124,14 +124,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -144,18 +144,18 @@
         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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -167,18 +167,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-donor")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-nessecary-information-to-add-a-new-donor"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -196,7 +196,7 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -219,7 +219,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -238,7 +238,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -264,7 +264,7 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isPhoneValidOrEmpty}
                     <span
@@ -292,7 +292,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span
@@ -309,11 +309,11 @@
                       id="comments"
                       name="comments"
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                       >{$_("receipt-needed")}</label
                     >
                   </div>
@@ -335,7 +335,7 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -358,7 +358,7 @@
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
                   <div class="col-span-6">
@@ -377,7 +377,7 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -403,7 +403,7 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span
@@ -418,13 +418,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("create")}
           </button>
@@ -433,7 +433,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/donors/ConfirmDonorDeletion.svelte

@@ -1,9 +1,6 @@
 <script>
 	import { _ } from "svelte-i18n";
 	import { clickOutside } from "../base/outsideclick";
-
-  import { DonorService } from "@odit/lfk-client-js";
-
 	import { createEventDispatcher } from "svelte";
 	export let modal_open;
 	export let delete_donor;
@@ -19,12 +16,12 @@
 
 {#if modal_open}
 	<div
-    class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		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"
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
@@ -37,18 +34,18 @@
 				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"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				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-xl">
-          <div class="sm:flex sm:items-start">
+					<div class="">
 						<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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
-                class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								fill="currentColor"
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
@@ -57,34 +54,32 @@
 								/></svg
 							>
 						</div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+						<div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
 							<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-this-donor-with-all-related-donations"
 								)}
-                  <br />
+							</h3>
+							<div class="mb-6">
+								<p class="text-sm text-gray-500">
 									{$_("all-associated-donations-will-get-deleted-as-well")}
 								</p>
 							</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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
 					<button
 						on:click={deleteDonor}
 						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"
+						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"
 					>
 						{$_("confirm-delete-donor-with-all-donations")}
 					</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"
+						class="w-full 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 hidden lg:block"
 					>
 						{$_("cancel-keep-donor")}
 					</button>

src/components/donors/DonorDetail.svelte

@@ -1,12 +1,10 @@
 <script>
+	import { DonorService } from "@odit/lfk-client-js";
 	import { _ } from "svelte-i18n";
 	import store from "../../store";
-  import { DonorService, DonationService } from "@odit/lfk-client-js";
-
-  import PromiseError from "../base/PromiseError.svelte";
-  import isEmail from "validator/es/lib/isEmail";
-  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
 	import toast from "svelte-french-toast";
+	import isEmail from "validator/es/lib/isEmail";
+	import PromiseError from "../base/PromiseError.svelte";
 	let data_loaded = false;
 	export let params;
 	$: delete_triggered = false;
@@ -53,8 +51,6 @@
 	$: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
 	$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
 	$: iscityvalid = editable.address?.city?.trim().length !== 0;
-  let modal_open = false;
-  let delete_donor = {};
 	function submit() {
 		if (data_loaded === true && save_enabled) {
 			toast($_("donor-is-being-updated"));
@@ -79,19 +75,17 @@
 		}
 	}
 	function deleteDonor() {
-    DonorService.donorControllerRemove(original_data.id, false)
+		DonorService.donorControllerRemove(original_data.id, true)
 			.then((resp) => {
-        toast($_("donor-deleted"));
+				toast.success($_("donor-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {
-        modal_open = true;
+				console.log(err);
-        delete_donor = original_data;
 			});
 	}
 </script>
 
-<ConfirmDonorDeletion bind:modal_open bind:delete_donor />
 {#await promise}
 	{$_("loading-donor-details")}
 {:then}
@@ -101,62 +95,44 @@
 				<nav class="w-full flex">
 					<ol class="list-none flex flex-row items-center justify-start">
 						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="./"
-                fill="currentColor"
+								><svg
 									xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
 									width="24"
 									height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  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
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_("donors")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
 									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
 									stroke-linecap="round"
 									stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
+									class="inline-block"
-                height="1em"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                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>
+								{$_("donors")}</a
-            <li class="flex items-center">
-              <span class="mr-2"
-                >{original_data.firstname}
-                {original_data.middlename || ""}
-                {original_data.lastname}</span
 							>
 						</li>
 					</ol>
 				</nav>
 			</div>
 		</div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
 			{original_data.firstname}
 			{original_data.middlename || ""}
 			{original_data.lastname}
-      <span data-id="donor_actions_${editable.id}">
+			<div data-id="donor_actions_${editable.id}">
 				{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")}
 					{#if delete_triggered}
 						<button
 							on:click={deleteDonor}
-              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:ml-3 sm:w-auto sm:"
+							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-deletion")}</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:"
+							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}
@@ -166,7 +142,7 @@
 								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:ml-3 sm:w-auto sm:"
+							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-donor")}</button
 						>
 					{/if}
@@ -177,15 +153,15 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-            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:ml-3 sm:w-auto sm:"
+						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
 					>
 				{/if}
-      </span>
+			</div>
 		</div>
 		<!--  -->
 		<div>
-      <span class="font-medium text-gray-700"
+			<span class="font-semibold text-gray-700"
 				>{$_("total-donation-amount")}:</span
 			>
 			<span
@@ -194,14 +170,15 @@
 					.toLocaleString("de-DE", { valute: "EUR" })}€</span
 			>
 			|
-      <span class="font-medium text-gray-700">{$_("total-paid-amount")}:</span>
+			<span class="font-semibold text-gray-700">{$_("total-paid-amount")}:</span
+			>
 			<span
 				>{(editable.paidDonationAmount / 100)
 					.toFixed(2)
 					.toLocaleString("de-DE", { valute: "EUR" })}€</span
 			>
 			<br />
-      <span class="font-medium text-gray-700">{$_("donations")}:</span>
+			<span class="font-semibold text-gray-700">{$_("donations")}:</span>
 			{#if original_data.donations.length > 0}
 				{#each original_data.donations as d}
 					{#if d.responseType === "DISTANCEDONATION"}
@@ -215,7 +192,7 @@
 					{:else}
 						<a
 							href="../donations/{d.id}"
-              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
+							class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-700 text-white mr-1"
 							>{$_("fixed-donation")}:
 							{(d.amount / 100)
 								.toFixed(2)
@@ -225,8 +202,8 @@
 				{/each}
 			{:else}{$_("donor-has-no-associated-donations")}{/if}
 		</div>
-    <div class=" w-full">
+		<div class="mt-2 w-full">
-      <label for="firstname" class="font-medium text-gray-700"
+			<label for="firstname" class="font-semibold text-gray-700"
 				>{$_("first-name")}</label
 			>
 			<input
@@ -238,7 +215,7 @@
 				class:focus:ring-red-500={!isFirstnameValid}
 				bind:value={editable.firstname}
 				name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isFirstnameValid}
 				<span
@@ -248,8 +225,8 @@
 				</span>
 			{/if}
 		</div>
-    <div class=" w-full">
+		<div class="mt-2 w-full">
-      <label for="middlename" class="font-medium text-gray-700"
+			<label for="middlename" class="font-semibold text-gray-700"
 				>{$_("middle-name")}</label
 			>
 			<input
@@ -258,11 +235,11 @@
 				type="text"
 				bind:value={editable.middlename}
 				name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-    <div class=" w-full">
+		<div class="mt-2 w-full">
-      <label for="lastname" class="font-medium text-gray-700"
+			<label for="lastname" class="font-semibold text-gray-700"
 				>{$_("last-name")}</label
 			>
 			<input
@@ -274,7 +251,7 @@
 				class:focus:border-red-500={!isLastnameValid}
 				class:focus:ring-red-500={!isLastnameValid}
 				name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isLastnameValid}
 				<span
@@ -284,8 +261,8 @@
 				</span>
 			{/if}
 		</div>
-    <div class=" w-full">
+		<div class="mt-2 w-full">
-      <label for="email" class="font-medium text-gray-700"
+			<label for="email" class="font-semibold text-gray-700"
 				>{$_("e-mail-adress")}</label
 			>
 			<input
@@ -297,7 +274,7 @@
 				class:focus:border-red-500={!isEmailValid}
 				class:focus:ring-red-500={!isEmailValid}
 				name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isEmailValid}
 				<span
@@ -307,8 +284,10 @@
 				</span>
 			{/if}
 		</div>
-    <div class=" w-full">
+		<div class="mt-2 w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
+			<label for="phone" class="font-semibold text-gray-700"
+				>{$_("phone")}</label
+			>
 			<input
 				autocomplete="off"
 				placeholder={$_("phone")}
@@ -318,7 +297,7 @@
 				class:focus:ring-red-500={!isPhoneValidOrEmpty}
 				bind:value={editable.phone}
 				name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isPhoneValidOrEmpty}
 				<span
@@ -335,11 +314,11 @@
 					id="comments"
 					name="comments"
 					type="checkbox"
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+					class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 				/>
 			</div>
 			<div class="ml-3">
-        <label for="comments" class="font-medium text-gray-700"
+				<label for="comments" class="font-semibold text-gray-700"
 					>{$_("receipt-needed")}</label
 				>
 			</div>
@@ -358,7 +337,7 @@
 					bind:value={editable.address.address1}
 					type="text"
 					name="address1"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !isAddress1Valid}
 					<span
@@ -378,7 +357,7 @@
 					bind:value={editable.address.address2}
 					type="text"
 					name="address2"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 			</div>
 			<div class="col-span-6">
@@ -394,7 +373,7 @@
 					bind:value={editable.address.postalcode}
 					type="text"
 					name="zipcode"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !iszipcodevalid}
 					<span
@@ -417,7 +396,7 @@
 					bind:value={editable.address.city}
 					type="text"
 					name="city"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !iscityvalid}
 					<span

src/components/donors/DonorDonations.svelte

@@ -18,7 +18,7 @@
     {:else}
       <a
         href="../donations/{donation.id}"
-        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
+        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-700 text-white mr-1"
         >{$_("fixed-donation")}:
         {(donation.amount / 100)
           .toFixed(2)

src/components/donors/Donors.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("donors")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
@@ -18,7 +18,7 @@
         modal_open = true;
       }}
       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:w-auto sm:text-sm mt-1 sm:mt-0"
+      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:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("add-donor")}
     </button>
@@ -59,7 +59,7 @@
         hiddenElement.remove();
       }}
       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:w-auto sm:text-sm mt-1 sm:mt-0"
+      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:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("sponsoring-quittungs-liste_herunterladen")}
     </button>

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

@@ -24,7 +24,7 @@
 
 {#if modal_open}
 	<div
-		class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={() => {
 			modal_open = false;
@@ -44,19 +44,19 @@
 				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"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				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-xl">
-					<div class="sm:flex sm:items-start">
+					<div class="">
 						<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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
 								fill="currentColor"
-								class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
 								width="24"
@@ -71,16 +71,16 @@
 							<h3 class="text-lg leading-6 font-medium">
 								{$_("read-license")}
 							</h3>
-							<div class="mt-2 mb-6">
+							<div class="mb-6">
 								<p class="text-sm text-gray-500">{currentlicense}</p>
 							</div>
-							<div class="mt-2 mb-6">
+							<div class="mb-6">
 								<p class="text-sm text-gray-500">{licensetext}</p>
 							</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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
 					<button
 						on:click={() => {
 							modal_open = false;
@@ -97,7 +97,7 @@
 {/if}
 <!-- /// -->
 <section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("about")}
 	</h4>
 	<p class="mt-2 mb-2">
@@ -109,7 +109,7 @@
 		<br />
 		<span>{$_("lfk-is-os")}</span>
 	</p>
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("credits")}
 	</h4>
 	<p class="text-left">{$_("oss_credit_description")}</p>
@@ -158,7 +158,7 @@
 				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>
+					<b>{$_("general_promise_error")}</b>
 					{error}
 				</span>
 			</div>

src/components/general/CardAssignment.svelte

@@ -0,0 +1,505 @@
+<script>
+	import { _ } from "svelte-i18n";
+	import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
+	import QrCodeScanner from "./QrCodeScanner.svelte";
+	let state = "scan_runner";
+	let runnerinfo = { id: 0, firstname: "", lastname: "" };
+	let cardCode = "";
+	let scannerActive = true;
+	function resetAll() {
+		state = "scan_runner";
+		runnerinfo = { id: 0, firstname: "", lastname: "" };
+		cardCode = "";
+		scannerActive = true;
+	}
+</script>
+
+<div class="p-4">
+	<h3 class="text-3xl font-bold">{$_("card_assignment_for_mobile")}</h3>
+	{#if state === "done"}
+		<div class="text-center mx-auto">
+			<svg
+				class="h-64 mx-auto"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 500 500"
+				><path
+					d="m339.91 38.77-2 1.14c-16.77 9.58-27.19 27.41-26.49 46.53a50.12 50.12 0 0 0 .81 7.33 54.34 54.34 0 0 0 32.62 39.6c9.79 3.94 21.14 5.27 28.8 12.46 10 9.36 9.88 24.8 9.1 38.36s-.83 29 9.18 38.32c6.27 5.84 15.36 7.88 24 7.65 22.8-.61 43.57-15.93 54.22-35.83s12.18-43.63 8.31-65.82c-5.46-31.09-21.78-60.95-47.75-79.33s-61.88-23.8-90.8-10.41ZM152.06 393l2.36-.64c19.89-5.4 35.44-21 39.85-41a55.18 55.18 0 0 0 1.13-7.79 58 58 0 0 0-23.09-49.67c-9.05-6.7-20.43-11.12-26.42-20.6-7.79-12.35-3.56-28.28.89-42.08s8.63-29.75.79-42.07c-4.91-7.71-13.75-12.25-22.71-14.32-23.71-5.49-49.29 4.77-65.63 22.48S34.94 239.14 33 263.11c-2.74 33.57 6.14 68.81 28.05 94.77s57.54 41.19 91.01 35.12Z"
+					style="fill:#f5f5f5"
+				/><circle
+					cx="409.16"
+					cy="320.55"
+					r="36.72"
+					style="fill:#f5f5f5"
+					transform="rotate(-45 409.165 320.548)"
+				/><path
+					d="M470.34 473.11c0 .15-98.66.26-220.33.26s-220.35-.11-220.35-.26 98.64-.26 220.35-.26 220.33.15 220.33.26Z"
+					style="fill:#263238"
+				/><path
+					d="M453.56 473.11a9.53 9.53 0 0 1-1-2c-.54-1.27-1.24-3-2-5s-1.4-3.53-2-5a14.87 14.87 0 0 1-.8-2.09 7.37 7.37 0 0 1 1.14 1.93c.61 1.25 1.36 3 2.13 5s1.42 3.75 1.87 5a10.55 10.55 0 0 1 .66 2.16ZM458.16 473.31c-.15 0-.66-3.33-1.59-7.41s-1.9-7.32-1.76-7.37a8.61 8.61 0 0 1 .84 2.07c.44 1.31 1 3.14 1.43 5.19s.77 3.93.94 5.29a8.54 8.54 0 0 1 .14 2.23ZM466.32 459.42c.14.08-1.36 3.08-2.88 6.91s-2.51 7-2.66 7a9.06 9.06 0 0 1 .46-2.15 53.35 53.35 0 0 1 3.93-9.86 8.66 8.66 0 0 1 1.15-1.9ZM225.88 473.11a74 74 0 0 1-6.08-10.68 71.59 71.59 0 0 1 6.08 10.68ZM230.2 473a79 79 0 0 1-2.66-12.67A82 82 0 0 1 230.2 473ZM239.31 461.69a39.45 39.45 0 0 1-3.08 5.76 41.06 41.06 0 0 1-3.53 5.49 39.66 39.66 0 0 1 3.08-5.75 42.46 42.46 0 0 1 3.53-5.5ZM55.68 473.11a29 29 0 0 1-2.94-4.68 29 29 0 0 1-2.49-4.93 29.84 29.84 0 0 1 2.94 4.68 29.92 29.92 0 0 1 2.49 4.93ZM58.09 457.6a60.92 60.92 0 0 1 1.17 7.73 56.51 56.51 0 0 1 .64 7.78 118.57 118.57 0 0 1-1.81-15.51ZM67.49 462.53a29.15 29.15 0 0 1-1.38 5.37 29.37 29.37 0 0 1-1.88 5.21 29.37 29.37 0 0 1 1.38-5.36 31.72 31.72 0 0 1 1.88-5.22Z"
+					style="fill:#263238"
+				/><path
+					d="M141.72 440a6.16 6.16 0 0 1 3.2 3.62 11 11 0 0 1 .43 4.91c-.37 3.19-2.18 6.4-4.12 8.95-2.69-2.34-3.3-6.43-3.49-8.52-.29-3.31 1.2-9.46 4-9M144.34 462.69a5.24 5.24 0 0 1 1.71-5 7 7 0 0 1 5.15-1.61 2.94 2.94 0 0 1 2.27 1 2.26 2.26 0 0 1 0 2.29 4.49 4.49 0 0 1-1.69 1.66c-2.32 1.46-4.84 2.44-7.47 1.65"
+					style="fill:#455a64"
+				/><path
+					d="M140.9 472.46a4.38 4.38 0 0 1 .1-.65c.08-.46.19-1.06.32-1.77a18.5 18.5 0 0 1 1.83-5.65 11.28 11.28 0 0 1 4.06-4.31 7.33 7.33 0 0 1 1.65-.73 3 3 0 0 1 .48-.12h.17a11.36 11.36 0 0 0-2.22 1 11.75 11.75 0 0 0-3.94 4.28 20.19 20.19 0 0 0-1.87 5.57c-.16.74-.29 1.34-.39 1.76a2.49 2.49 0 0 1-.19.62Z"
+					style="fill:#263238"
+				/><path
+					d="M141 444.74a1.36 1.36 0 0 1 0 .29l.05.82c0 .71.08 1.74.12 3 .08 2.55.14 6.08.13 10s-.11 7.42-.22 10c-.05 1.28-.1 2.31-.15 3 0 .33 0 .6-.05.82a1.33 1.33 0 0 1 0 .28 1.29 1.29 0 0 1 0-.29v-.82c0-.74.05-1.77.08-3 .06-2.55.13-6.08.15-10s0-7.42-.07-10V445c-.04-.16-.04-.26-.04-.26Z"
+					style="fill:#263238"
+				/><path
+					d="M139.7 464.63a12.32 12.32 0 0 0-6.72-9c-.9-.43-2.07-.71-2.81 0s-.57 1.86-.21 2.79a10.54 10.54 0 0 0 9.68 6.54"
+					style="fill:#455a64"
+				/><path
+					d="M133.41 458.63a3 3 0 0 1 .57.25 5.17 5.17 0 0 1 .64.34 9.69 9.69 0 0 1 .82.52 9.89 9.89 0 0 1 .94.7 11.62 11.62 0 0 1 1 .91 13.72 13.72 0 0 1 1.89 2.43 14 14 0 0 1 1.25 2.82 10.26 10.26 0 0 1 .31 1.31 9.15 9.15 0 0 1 .16 1.16 8.75 8.75 0 0 1 0 1v.73a4 4 0 0 1-.07.62s0-.89-.12-2.3a10.83 10.83 0 0 0-.19-1.14 11.51 11.51 0 0 0-.33-1.28 13.92 13.92 0 0 0-1.24-2.77 14.19 14.19 0 0 0-1.85-2.4 10.11 10.11 0 0 0-1-.91 10.49 10.49 0 0 0-.9-.72c-1.1-.9-1.9-1.22-1.88-1.27Z"
+					style="fill:#263238"
+				/><path
+					d="M411.83 430.38a8.16 8.16 0 0 1 4.22 4.79 14.35 14.35 0 0 1 .57 6.48c-.48 4.21-2.87 8.46-5.45 11.82-3.54-3.09-4.35-8.49-4.6-11.25-.38-4.36 1.58-12.49 5.26-11.84M415.29 460.41a7 7 0 0 1 2.25-6.61 9.26 9.26 0 0 1 6.81-2.13 3.89 3.89 0 0 1 3 1.35 3 3 0 0 1 .05 3 6 6 0 0 1-2.23 2.2c-3.07 1.93-6.4 3.23-9.87 2.18"
+					style="fill:#455a64"
+				/><path
+					d="M410.75 473.31a5.31 5.31 0 0 1 .13-.86l.42-2.34a24.66 24.66 0 0 1 2.42-7.46 14.9 14.9 0 0 1 5.35-5.69 10.1 10.1 0 0 1 2.19-1 6.47 6.47 0 0 1 .63-.16.61.61 0 0 1 .22 0 13.81 13.81 0 0 0-8.13 7 26.37 26.37 0 0 0-2.46 7.36c-.22 1-.39 1.77-.53 2.32a4.05 4.05 0 0 1-.24.83Z"
+					style="fill:#263238"
+				/><path
+					d="M410.88 436.7a1.65 1.65 0 0 1 .05.38q0 .42.06 1.08c.05.94.11 2.31.16 4 .11 3.38.19 8 .17 13.18s-.15 9.81-.28 13.18c-.07 1.69-.14 3.05-.2 4 0 .44 0 .8-.07 1.08a1.65 1.65 0 0 1 0 .38 2.21 2.21 0 0 1 0-.38v-1.08c0-1 .06-2.34.1-4 .08-3.37.17-8 .2-13.17s0-9.8-.09-13.17c0-1.66 0-3-.06-4v-1.09a2.79 2.79 0 0 1-.04-.39Z"
+					style="fill:#263238"
+				/><path
+					d="M409.16 463a16.22 16.22 0 0 0-8.88-11.92c-1.19-.57-2.73-.94-3.71-.06s-.75 2.46-.28 3.69a13.9 13.9 0 0 0 12.79 8.63"
+					style="fill:#455a64"
+				/><path
+					d="M400.85 455.05a3.47 3.47 0 0 1 .75.32 9.58 9.58 0 0 1 .85.46 10.94 10.94 0 0 1 1.08.68 12.91 12.91 0 0 1 1.24.93 15.58 15.58 0 0 1 1.32 1.19 16.82 16.82 0 0 1 4.15 6.94 16.17 16.17 0 0 1 .42 1.74 13.28 13.28 0 0 1 .21 1.53c.06.47 0 .9.06 1.28a9.24 9.24 0 0 1 0 1 4.38 4.38 0 0 1-.09.81c-.07 0 .05-1.17-.16-3-.06-.46-.12-1-.24-1.51s-.27-1.1-.44-1.69a18.46 18.46 0 0 0-1.64-3.65 19.56 19.56 0 0 0-2.44-3.18 17.44 17.44 0 0 0-1.28-1.2c-.41-.37-.83-.67-1.2-.95-1.55-1.16-2.62-1.64-2.59-1.7ZM155.45 292c0 .14-14 .26-31.2.26S93 292.15 93 292s14-.26 31.21-.26 31.24.12 31.24.26ZM136.75 284.1c0 .14-14 .26-31.2.26s-31.21-.12-31.21-.26 14-.26 31.21-.26 31.2.16 31.2.26ZM294.43 412.9c0 .14-8.07.26-18 .26s-18-.12-18-.26 8.06-.26 18-.26 18 .12 18 .26ZM283.64 405c0 .15-8.07.26-18 .26s-18-.11-18-.26 8.06-.26 18-.26 18 .11 18 .26Z"
+					style="fill:#263238"
+				/><circle cx="88.02" cy="72.37" r="14.66" style="fill:#5e9cff" /><path
+					d="M88 87a14.68 14.68 0 0 1-13.52-9 14.78 14.78 0 0 1 0-11.43A14.84 14.84 0 0 1 77.64 62a14.69 14.69 0 0 1 20.76 0 14.84 14.84 0 0 1 3.14 4.66A14.67 14.67 0 0 1 88 87ZM85.93 105.14c-.08 0-.15-2.7-.15-6s.07-6 .15-6a56.83 56.83 0 0 1 .16 6 56.56 56.56 0 0 1-.16 6Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M85.93 105.16s-.08 0-.12-1.79v-8.55c0-1.78.09-1.78.12-1.78s.08 0 .13 1.78v8.55c-.06 1.79-.06 1.79-.13 1.79Zm0-12.08c-.07.22-.14 2.52-.14 6s.07 5.79.14 6c.07-.23.14-2.52.14-6s-.07-5.78-.14-6ZM77.48 89.64a63 63 0 0 1-3.07 5.64c-1.78 3.08-3.28 5.53-3.35 5.49a63.32 63.32 0 0 1 3.08-5.64c1.77-3.07 3.27-5.53 3.34-5.49Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M71.06 100.79s-.07 0 .84-1.7c.58-1.07 1.38-2.47 2.23-4s1.68-2.87 2.32-3.91c.89-1.46 1-1.58 1-1.58s.07 0-.84 1.7c-.58 1.07-1.37 2.48-2.23 4-1.52 2.64-3.22 5.46-3.35 5.5Zm6.41-11.12c-.18.17-1.46 2.25-3.32 5.47s-3 5.36-3.08 5.61c.18-.18 1.46-2.25 3.32-5.47s3.02-5.37 3.08-5.61ZM68.81 84.24a31 31 0 0 1-3.42 2.92 32.1 32.1 0 0 1-3.61 2.68 32.32 32.32 0 0 1 3.42-2.92 35.42 35.42 0 0 1 3.61-2.68Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M61.78 89.86s0-.06 1-.93c.65-.55 1.52-1.26 2.46-2a35.08 35.08 0 0 1 3.62-2.68 34.93 34.93 0 0 1-3.43 2.92c-.94.75-1.83 1.44-2.52 2a5 5 0 0 1-1.13.69Zm7-5.6a38.16 38.16 0 0 0-3.59 2.67 40.2 40.2 0 0 0-3.42 2.9 37.22 37.22 0 0 0 3.59-2.68 39.77 39.77 0 0 0 3.44-2.89Zm0 0ZM100.56 99.19a7.77 7.77 0 0 1-.39-1.49c-.21-.92-.51-2.19-.89-3.59s-.75-2.64-1-3.55a8.5 8.5 0 0 1-.41-1.48 7.14 7.14 0 0 1 .62 1.41c.33.89.75 2.14 1.12 3.54a36.32 36.32 0 0 1 .8 3.63 6.9 6.9 0 0 1 .15 1.53Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M100.55 99.2s-.11-.22-.4-1.5c-.19-.86-.5-2.16-.88-3.58s-.78-2.72-1-3.55c-.37-1.2-.45-1.46-.4-1.48s0 0 .22.37.27.64.42 1c.23.6.68 1.87 1.13 3.54s.69 3 .8 3.62a7.38 7.38 0 0 1 .17 1.54Zm-2.7-10.09a13.79 13.79 0 0 0 .41 1.43c.26.83.65 2.1 1 3.55s.69 2.73.88 3.59.32 1.37.37 1.46a10.18 10.18 0 0 0-.18-1.5c-.11-.64-.35-2-.8-3.62s-.9-2.94-1.13-3.54a9.12 9.12 0 0 0-.55-1.37ZM115.42 88.64a54.77 54.77 0 0 1-4.33-3.58 51.8 51.8 0 0 1-4.09-3.82 50.82 50.82 0 0 1 4.33 3.58 49.69 49.69 0 0 1 4.09 3.82Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M115.42 88.65a54.61 54.61 0 0 1-4.34-3.58c-1.13-1-2.18-1.93-3-2.65-1.22-1.13-1.19-1.17-1.17-1.19.15 0 2.34 1.85 4.33 3.59 1.13 1 2.19 1.93 3 2.65 1.22 1.13 1.18 1.17 1.16 1.19ZM107 81.26c.11.18 1.67 1.64 4.12 3.78s4.11 3.5 4.3 3.58c-.1-.19-1.67-1.64-4.12-3.79s-4.12-3.49-4.3-3.57ZM121.12 74.14a11.91 11.91 0 0 1-1.77-.26c-1.09-.18-2.59-.41-4.25-.6s-3.19-.3-4.29-.37a10.88 10.88 0 0 1-1.78-.16 8.74 8.74 0 0 1 1.79-.06 43.17 43.17 0 0 1 4.31.28c1.68.2 3.18.46 4.26.7a9.11 9.11 0 0 1 1.73.47Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M121.07 74.16c-.13 0-.49-.06-1.37-.2l-.35-.06c-1.49-.25-2.92-.45-4.26-.61s-2.77-.27-4.28-.37h-.35c-1.2-.08-1.44-.1-1.44-.15a9.68 9.68 0 0 1 1.79-.07 42.81 42.81 0 0 1 4.31.29 41.81 41.81 0 0 1 4.26.7 9.36 9.36 0 0 1 1.74.47s-.01 0-.05 0Zm-12-1.41a13.35 13.35 0 0 0 1.41.12h.35c1.51.1 3 .22 4.28.37s2.77.36 4.25.61l.35.06c.71.12 1.24.2 1.37.2a12.87 12.87 0 0 0-1.7-.44 41.81 41.81 0 0 0-4.26-.7 43 43 0 0 0-4.31-.29 13.47 13.47 0 0 0-1.75.07ZM121.14 59.88c0 .08-3.16.93-7.09 1.89s-7.14 1.66-7.16 1.58 3.15-.92 7.09-1.88 7.14-1.67 7.16-1.59Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M106.92 63.37s0-.08 2.07-.64c1.34-.35 3.13-.8 5-1.27s3.7-.88 5-1.18c2.11-.47 2.13-.42 2.13-.39s0 .07-2.07.63c-1.34.36-3.12.81-5 1.27s-3.69.88-5 1.18a16 16 0 0 1-2.13.4Zm14.18-3.48c-.29 0-3 .59-7.12 1.59s-6.8 1.73-7.06 1.86c.29 0 3-.58 7.13-1.59s6.8-1.75 7.05-1.86ZM104.57 43.27a63.61 63.61 0 0 1-3.39 5.41c-1.94 2.94-3.58 5.29-3.65 5.24s1.45-2.47 3.39-5.41 3.58-5.29 3.65-5.24Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M97.53 53.93c0-.14 1.72-2.9 3.39-5.42.94-1.42 1.84-2.75 2.53-3.74 1.06-1.52 1.12-1.52 1.14-1.5s.07 0-.93 1.64c-.65 1-1.52 2.37-2.46 3.79s-1.83 2.75-2.52 3.74c-.98 1.37-1.11 1.49-1.15 1.49Zm7-10.64c-.19.17-1.59 2.15-3.62 5.23s-3.32 5.14-3.39 5.37c.19-.16 1.58-2.14 3.62-5.22s3.34-5.14 3.42-5.38ZM88.13 39.8a12.88 12.88 0 0 1 0 2v4.85c0 1.85 0 3.61.06 4.85a14.66 14.66 0 0 1 0 2 11.36 11.36 0 0 1-.2-2c-.08-1.24-.14-3-.14-4.86s0-3.61.13-4.86a12.13 12.13 0 0 1 .15-1.98Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M88.15 53.54s-.05 0-.1-.55-.08-.88-.12-1.47c-.05-.84-.14-2.58-.14-4.86s.08-4 .13-4.86c0-.59.07-1.09.11-1.47s.08-.55.1-.55c.05 0 .07.19 0 2v4.85c0 1.91 0 3.54.05 4.77v2.08Zm0-13.71a18 18 0 0 0-.18 2c0 .83-.13 2.58-.13 4.85s.09 4 .14 4.86a16.64 16.64 0 0 0 .19 2v-2.08c0-1.23-.05-2.92-.05-4.77v-4.85c.03-.76.05-1.84.01-2.01ZM75.68 55.3c-.07.05-1.61-2.35-3.44-5.34s-3.24-5.47-3.19-5.51 1.62 2.35 3.45 5.35a63 63 0 0 1 3.18 5.5Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M75.68 55.32s-.16-.12-1.07-1.54c-.65-1-1.5-2.37-2.39-3.82-1.57-2.57-3.22-5.37-3.22-5.51s.07 0 1.09 1.54c.65 1 1.5 2.37 2.38 3.82s1.71 2.82 2.31 3.86c.94 1.63.9 1.65.87 1.67Zm-6.61-10.85c.06.24 1.26 2.34 3.18 5.48s3.24 5.16 3.42 5.33c-.07-.24-1.26-2.34-3.18-5.48s-3.24-5.16-3.42-5.33ZM68.25 61.62a7 7 0 0 1-1.56-.24c-1-.2-2.26-.52-3.69-.94s-2.7-.87-3.6-1.21a7.56 7.56 0 0 1-1.4-.64 8.28 8.28 0 0 1 1.52.43c.92.3 2.2.7 3.62 1.12s2.71.77 3.65 1a9.86 9.86 0 0 1 1.46.48Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M68.2 61.65h-.38c-.29 0-.68-.12-1.13-.22-.65-.13-2-.44-3.69-.94s-3-1-3.61-1.21l-1.07-.44c-.4-.17-.39-.2-.38-.22s.22 0 1.53.42c.74.24 2.12.68 3.62 1.13s2.6.74 3.65 1c1.34.36 1.53.43 1.52.48s0 0-.06 0ZM58 58.6a9.9 9.9 0 0 0 1.42.61c.62.24 1.9.71 3.61 1.21s3 .81 3.68.94a10.47 10.47 0 0 0 1.51.26 15.06 15.06 0 0 0-1.48-.44c-1-.28-2.29-.62-3.65-1s-2.89-.91-3.63-1.18c-.58-.15-1.36-.4-1.46-.4ZM65 72.89a38 38 0 0 1-4.68.6 37.31 37.31 0 0 1-4.71.3 35.07 35.07 0 0 1 4.68-.61 34.11 34.11 0 0 1 4.71-.29Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M55.88 73.83a1 1 0 0 1-.27 0 39.32 39.32 0 0 1 4.69-.6 39.75 39.75 0 0 1 4.72-.3 40.29 40.29 0 0 1-4.69.61c-1.81.14-3.74.29-4.45.29Zm-.24 0a43.5 43.5 0 0 0 4.68-.31 46 46 0 0 0 4.68-.63 43.61 43.61 0 0 0-4.69.31 39.33 39.33 0 0 0-4.67.59Z"
+					style="fill:#5e9cff"
+				/><path
+					d="m321.8 444.95 7.41 19.13 16.31-3.83 3.59-8.75-5.52-18.14-21.79 11.59z"
+					style="fill:#ffbf9d"
+				/><path
+					d="m349.94 449.25.58 1.45s29 0 31.09 4.61l-49.89 19.33-5.66-16.58c8.73.5 16.64-2.13 23.88-8.81Z"
+					style="fill:#455a64"
+				/><g style="opacity:.6000000000000001"
+					><path
+						d="M333.13 461.32a2.15 2.15 0 0 0-.52 2.83 2.11 2.11 0 0 0 2.84.5 2.25 2.25 0 0 0 .53-3 2.19 2.19 0 0 0-3-.2"
+						style="fill:#fff"
+					/></g
+				><g style="opacity:.6000000000000001"
+					><path
+						d="m331.72 474.64-1.36-4 48.32-17.07s2.59.09 2.93 1.73Z"
+						style="fill:#fff"
+					/></g
+				><path
+					d="M350.75 450.77c.08.24-1.1.82-2 2.06s-1.15 2.48-1.41 2.48-.44-1.54.68-3 2.69-1.78 2.73-1.54ZM356.81 450.87c.14.21-.76 1-1.19 2.36s-.26 2.5-.5 2.58-.93-1.21-.36-2.86 1.95-2.31 2.05-2.08ZM362.17 455.87c-.2.14-1-.93-.89-2.48s1.05-2.52 1.23-2.36-.25 1.14-.32 2.41.21 2.32-.02 2.43ZM259.73 325.23c.43 1.14 27.19 31 33.15 39.7 6.74 9.84 8.16 18.16 8.49 20.11 1.86 11.15 3.25 19 8.31 31.15S324.73 454 324.73 454l23.63-6.09s-13.93-59.44-15.19-69.34-3.38-17.57-8.87-26.67-29.71-58.77-29.71-58.77l-38.28 16.09Z"
+					style="fill:#263238"
+				/><path
+					d="M242.57 240.76s7.74.11 8.88.82 5.69 4.21 5.69 5a3 3 0 0 0 .32 1.38s2.86 4 1.57 5.71-2.24 2.27-2.21 2.8-.38 2.37-1.47 2.87a10.78 10.78 0 0 0-2.88 1.84 10.63 10.63 0 0 1-1.73 2.06 10.75 10.75 0 0 1-2.48 1.15 2.92 2.92 0 0 1-2.55 1.57c-1.64-.15-4.63-3.27-5.6-4.43-1.21-1.45-4.29-4-4.69-5.29a14.76 14.76 0 0 0-.92-2.3l-7.5-7.09 11.7-11.75Z"
+					style="fill:#ffbf9d"
+				/><path
+					d="M257.7 248.6a20.35 20.35 0 0 1-2.46-2.31 19.31 19.31 0 0 1-2.41-2.36 11.74 11.74 0 0 1 4.87 4.67Z"
+					style="fill:#ff9a6c"
+				/><path
+					d="M238.46 161.84s-8.9 7.54-11 9.43-29.46 24.87-31.29 35.27c-1.16 6.66 4 11.87 6.77 16.24 2 3.26 14.32 25.66 25.83 26.31.68 0 4.15 4.28 4.15 4.28l12.49-10.65a52.68 52.68 0 0 1-4.73-7c-5-9.38-15.89-24-15.55-24.66 2.43-4.55-3.34-3.47-3.34-3.47l23.94-21.95Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M198.89 199.64s-1.73-3.09 0-5.67S225 171.68 225 171.68s1.19.31 2.06 2.27-27 26.62-27 26.62Z"
+					style="fill:#263238"
+				/><path
+					d="M207.41 192.32s14 15.79 16 15.27 11.7-7.84 12.14-10.22-13.33-19-13.33-19ZM187.57 91.83c3.07.73 5.47 3.21 8.28 4.74 5.27 2.86 11.66 2.1 16.68-.23s9.1-6 13.61-9.1 8.09-6.22 14.6-6.81c11.49-1 23 9.11 17.78 17.7l-9.65 3.37a60.17 60.17 0 0 1-25.79 32.32c-2.42 1.47-5.16 2.83-8.17 2.45s-6.07-3.25-5.43-6c-4.78 1-9.7 1.92-14.7 1.17s-10.19-3.54-12.41-8-.26-10.48 4.56-11.35c-4.45-2.73-8.26-7.18-8.54-12s4.18-9.45 9.18-8.26Z"
+					style="fill:#263238"
+				/><path
+					d="M283.46 72.49c-6.22-1.69-12 .21-17.71 3.25a32.78 32.78 0 0 0-16.23 33.58 25.23 25.23 0 0 0 10.86 16.58c7.83 5 18.5 4.54 26.4-.31s13-13.65 14.27-22.84a30.7 30.7 0 0 0-3.05-18.6 23.36 23.36 0 0 0-14.53-11.66"
+					style="fill:#263238"
+				/><path
+					d="M263.37 92.26c1.16-2.33 1.06-5.07 1.68-7.6 1.36-5.57 3.94-10.5 9.42-12.19 5.1-1.57 13.45.3 19.16 2.78a22.62 22.62 0 0 1 9.88 7.9 17.84 17.84 0 0 1 1.71 16.26l-28.5-7c-2.92 2-5.92 4-9.32 4.91a6 6 0 0 1-3.07.19 2.7 2.7 0 0 1-2.06-2.07c-.16-1.15.59-2.17 1.1-3.18Z"
+					style="fill:#263238"
+				/><path
+					d="m257.85 145 5-54.65a4.74 4.74 0 0 1 4.85-4.19l25.76-2.89c8.09.25 12 10.79 11.46 18.86-.65 9-1.81 19.89-3.77 26.38-3.94 13.05-14.39 13.35-14.39 13.35s-.06.52-.78 5.35c0 0-1.31 10-12.46 7.81-7.24-1.42-15.67-10.02-15.67-10.02Z"
+					style="fill:#ffbf9d"
+				/><path
+					d="M300.16 112.56a1.72 1.72 0 0 1-1.88 1.5 1.66 1.66 0 0 1-1.56-1.78 1.75 1.75 0 0 1 1.89-1.51 1.65 1.65 0 0 1 1.55 1.79ZM301.8 107.49c-.24.19-1.41-.94-3.25-1.19s-3.32.49-3.49.24.19-.49.84-.84a4.8 4.8 0 0 1 2.83-.46 4.49 4.49 0 0 1 2.54 1.22c.51.54.65.94.53 1.03ZM284.13 110.14a1.73 1.73 0 0 1-1.89 1.5 1.66 1.66 0 0 1-1.55-1.78 1.74 1.74 0 0 1 1.89-1.51 1.65 1.65 0 0 1 1.55 1.79ZM284.19 104.44c-.24.2-1.41-.94-3.25-1.19s-3.32.49-3.49.24.19-.49.84-.83a4.73 4.73 0 0 1 2.83-.47 4.49 4.49 0 0 1 2.54 1.23c.51.51.65.94.53 1.02ZM288.47 119.93a12.12 12.12 0 0 1 3.06-.14c.48 0 .94 0 1.06-.32a2.42 2.42 0 0 0-.12-1.44c-.29-1.2-.59-2.45-.9-3.77-1.24-5.36-2.06-9.74-1.84-9.79s1.39 4.26 2.62 9.62c.29 1.32.58 2.58.84 3.78a2.7 2.7 0 0 1 0 1.88 1.16 1.16 0 0 1-.86.58 3.79 3.79 0 0 1-.82 0 12.7 12.7 0 0 1-3.04-.4Z"
+					style="fill:#263238"
+				/><path
+					d="M286.76 141.88a34.19 34.19 0 0 1-17.21-7.2s3.23 9.85 16.75 10.42ZM287.09 124.26a3.35 3.35 0 0 0-2.81-1.64 3 3 0 0 0-2.24.83 1.93 1.93 0 0 0-.45 2.18 2.26 2.26 0 0 0 2.33.94 7.25 7.25 0 0 0 2.55-1.08 2.35 2.35 0 0 0 .6-.48.64.64 0 0 0 .09-.68"
+					style="fill:#ff9a6c"
+				/><path
+					d="M282.88 120.46c.3 0 0 2 1.55 3.67s3.67 1.73 3.65 2c0 .13-.53.32-1.43.22a5 5 0 0 1-3.06-1.56 4.31 4.31 0 0 1-1.17-3.06c.03-.84.32-1.3.46-1.27ZM285.77 97.11c-.25.47-2.06 0-4.25 0s-4 .31-4.25-.17c-.1-.24.27-.67 1-1a7.07 7.07 0 0 1 3.26-.67 7.2 7.2 0 0 1 3.21.83c.79.33 1.14.78 1.03 1.01ZM302.37 99.37c-.39.37-1.59-.24-3.12-.47s-2.85-.1-3.09-.58c-.1-.23.16-.62.78-.94a4.55 4.55 0 0 1 5 .84c.48.51.6.96.43 1.15Z"
+					style="fill:#263238"
+				/><path
+					d="M259.12 87.91c3.37-7.43 15.81-16.79 23.82-15.28l12 9.26a12.54 12.54 0 0 1-9.57 8.54c-2.36.42-5.13.29-6.72 2.09s-1.15 4.86-2.69 6.77c-2.12 2.66-7 1.95-8.69 4.89-.75 1.28-.63 2.94-1.4 4.21-1 1.69-5.82 3.43-7.62 2.61s-1.44-4-1.85-5.74a9 9 0 0 1 .42-6c1.26-3.65.7-7.8 2.3-11.35Z"
+					style="fill:#263238"
+				/><path
+					d="M263.59 113.23c.13-1-.7-3.49-1.66-3.78-2.56-.76-7.31-1.2-8.27 5.45-1.3 9.09 8.09 8.52 8.15 8.26s1.32-6.5 1.78-9.93Z"
+					style="fill:#ffbf9d"
+				/><path
+					d="M259.53 119.32s-.18.09-.46.17a1.64 1.64 0 0 1-1.19-.14c-.91-.49-1.5-2.13-1.31-3.78a5.29 5.29 0 0 1 .77-2.2 1.83 1.83 0 0 1 1.36-1 .82.82 0 0 1 .88.56c.08.28 0 .45 0 .47s.22-.12.2-.51a1 1 0 0 0-.28-.62 1.23 1.23 0 0 0-.84-.36 2.24 2.24 0 0 0-1.85 1.18 5.24 5.24 0 0 0-.91 2.45c-.21 1.84.48 3.69 1.74 4.25a1.68 1.68 0 0 0 1.48 0c.36-.25.43-.45.41-.47Z"
+					style="fill:#ff9a6c"
+				/><path
+					d="M292.56 78.87c.48 3.8 5.66 9.12 7.86 12.25 4.19 6 4.95 7.91 3.7 20.24 2.65-4 4.76-8 5.06-12.88a20 20 0 0 0-4-13.6 15.6 15.6 0 0 0-12.61-6"
+					style="fill:#263238"
+				/><path
+					d="M254.48 87.34a9.48 9.48 0 0 0 1.51.54c.49.16 1.1.34 1.82.5s1.52.39 2.44.52a43.13 43.13 0 0 0 6.47.7 49.17 49.17 0 0 0 7.95-.43 48.36 48.36 0 0 0 7.76-1.81 44.66 44.66 0 0 0 6-2.47c.85-.39 1.56-.83 2.2-1.19s1.18-.7 1.6-1a10.08 10.08 0 0 0 1.31-.94 9 9 0 0 0-1.42.76c-.44.26-1 .58-1.64.9s-1.37.75-2.21 1.11a49.36 49.36 0 0 1-6 2.34 52.85 52.85 0 0 1-7.69 1.75 53.22 53.22 0 0 1-7.86.47 47.11 47.11 0 0 1-6.42-.58c-.91-.11-1.72-.3-2.43-.44s-1.33-.28-1.83-.41a8.25 8.25 0 0 0-1.56-.32ZM252.89 93.79a3.74 3.74 0 0 0 1 .36 27.49 27.49 0 0 0 2.91.67 36.71 36.71 0 0 0 19.39-1.88 24.88 24.88 0 0 0 2.81-1.21 3.77 3.77 0 0 0 .94-.55c0-.08-1.44.59-3.8 1.4a41.36 41.36 0 0 1-19.2 1.85c-2.52-.34-4.03-.73-4.05-.64Z"
+					style="fill:#455a64"
+				/><path
+					d="m155.92 343.89-19.68-8-8.49 15.01 4.13 8.92 18.26 6.26 5.78-22.19z"
+					style="fill:#ffbf9d"
+				/><path
+					d="m133 362.05-1.5-.59s-20.27 21.82-25.21 20.16l20.18-51.36 16.53 7.53c-6.47 6.21-10 14.05-10 24.26Z"
+					style="fill:#455a64"
+				/><g style="opacity:.6000000000000001"
+					><path
+						d="M135.6 340.8a2.25 2.25 0 0 0-1.79-2.4 2.14 2.14 0 0 0-2.36 1.78 2.36 2.36 0 0 0 1.9 2.53 2.23 2.23 0 0 0 2.26-2.12"
+						style="fill:#fff"
+					/></g
+				><g style="opacity:.6000000000000001"
+					><path
+						d="m126.48 330.26 4 1.81-20.81 48.57s-1.87 1.89-3.35 1Z"
+						style="fill:#fff"
+					/></g
+				><path
+					d="M131.3 361.58c-.25-.11.13-1.41-.17-3s-1.09-2.64-.9-2.83 1.46.76 1.8 2.65-.53 3.33-.73 3.18ZM127 366.08c-.26 0-.26-1.3-1-2.57s-1.72-2-1.61-2.22 1.57.16 2.42 1.77.42 3.11.19 3.02ZM119.45 366.56c0-.25 1.4-.09 2.5 1.1s1.17 2.58.93 2.6-.69-1-1.6-2-1.91-1.44-1.83-1.7ZM145.78 339.09s15.36 4.19 25.9 6.15 22.64 4.78 31 7c8.81 2.29 12.72 3.59 12.72 3.59s2 2.61 3.5-7.74 6.1-47.73 6.1-47.73l5.06-16.08 30.38-5.32 16.12 21.27s-14.57 47.3-19.53 57.09-12 38.32-29.14 33.87c-10.14-2.63-89.33-27.5-89.33-27.5Z"
+					style="fill:#263238"
+				/><path
+					d="m223.39 313.78-.13 1.06-.33 2.63 23.27-11.21s.15 10.69 22 19l2.78-4.84v-14.16l-16.89-13.13h-11.68l-18.61 14"
+					style="opacity:.30000000000000004"
+				/><path
+					d="M270.41 320.55a72.49 72.49 0 0 1-2.56 8.15 71.37 71.37 0 0 1-3.05 8 70.07 70.07 0 0 1 2.56-8.15 67 67 0 0 1 3.05-8ZM223.88 365.86a37.35 37.35 0 0 0-3.49-5.44 37.33 37.33 0 0 0-4.76-4.36 5.42 5.42 0 0 1 1.7.91 17 17 0 0 1 3.46 3.12 17.56 17.56 0 0 1 2.49 3.93 5.55 5.55 0 0 1 .6 1.84Z"
+					style="fill:#455a64"
+				/><path
+					d="M226.55 272.74s-5.06 13.2-4.88 20.65-2.73 22.38-2.73 22.38 27.33-14.67 29.37-16.45c0 0-2 14.72 21.22 21.58l2 .77 7.13-21.5a68.35 68.35 0 0 0 6.19-12c1.88-5.42 4.5-15.41 4.5-15.41L237.47 258Z"
+					style="fill:#455a64"
+				/><path
+					d="M289.38 287.64s12.76 17.61 12.94 20.49l-32.44 6.43-3-12.36-1.31-12.87Z"
+					style="fill:#455a64"
+				/><path
+					d="M239.86 171.23c.34.94 7 23.93 7 23.93l4 33.37s-6.73 19.75-12.4 26.21c-17.58 20.09-15.68 25.57-15.68 25.57s29.74-8 44.39-5.8 10.66 27.39 32 21.41l-.17-20.54s2.68-18.95 3.35-25.57-.24-30.41-.24-30.41 7.33-23.3 7.33-30.85 1.75-7.88-4.29-18.27-15-24.24-15-24.24l-33.63-2.84-18.64 19.21Z"
+					style="fill:#e0e0e0"
+				/><path
+					d="M281.7 292.51c.13 0-1.75 6.24-4.21 13.83s-4.56 13.72-4.7 13.67 1.75-6.23 4.21-13.83 4.56-13.72 4.7-13.67Z"
+					style="fill:#263238"
+				/><path
+					d="M238.71 172.17c-4.43 1.19-8.35 2.56-13.19 0s-8.89-7.36-9-12.84c-.06-4.48-.07-12.74 3.53-15.41s20.16-5.39 29.43-5.36c35.69.11 40.29 6 46 8.93a5.33 5.33 0 0 1-2.15 5.57"
+					style="fill:#5e9cff"
+				/><path
+					d="M235.67 165.5s1 19.66 2.47 27.09 7.38 29.67 7.38 29.67-3.28 1.23-2.79 5.68c0 0-3.55 3.09-3.95 9.89s1.57 9.76 1.57 9.76l-3.84 7.72 64.36 12.17 1.08-7.27s4.66 3 5.51-11-.82-24.45-.08-37.3 5.53-17.86 4.3-29.47C311 175.62 289.35 147 289.35 147s-31.46-5.35-34.62-1.91-19.06 20.41-19.06 20.41Z"
+					style="fill:#5e9cff"
+				/><path
+					d="M304 226.09c-15.48-8.7-26.72-23.17-37.53-37.27l-1.14-2.82c1.11 5.89 1.42 14.1 2.54 20a72.63 72.63 0 0 0 3.66 14.11 24.45 24.45 0 0 0 8.74 11.42c7 4.61 16.5 3.85 23.85-.1 1.08-.58 2.25-1.45 2.23-2.67s-1.28-2.05-2.35-2.67Z"
+					style="opacity:.30000000000000004"
+				/><path
+					d="M234.28 178.25a10.43 10.43 0 0 1 .6 1.69c.35 1.09.82 2.69 1.37 4.67 1.11 4 2.45 9.48 3.87 15.59s2.72 11.64 3.75 15.61c.51 1.93.93 3.51 1.24 4.71a11.9 11.9 0 0 1 .41 1.74 11.81 11.81 0 0 1-.6-1.69c-.37-1.09-.84-2.68-1.4-4.66-1.13-4-2.5-9.48-3.91-15.59s-2.7-11.64-3.71-15.62c-.5-1.92-.91-3.51-1.22-4.71a12.51 12.51 0 0 1-.4-1.74ZM265.5 233.75a26.55 26.55 0 0 1-3.27-1.23c-2-.79-4.76-1.89-7.89-2.86a49.52 49.52 0 0 0-8.18-1.79c-2.13-.26-3.46-.28-3.46-.37a2.82 2.82 0 0 1 .94-.08 20.82 20.82 0 0 1 2.56.09 39.56 39.56 0 0 1 8.29 1.66 69.24 69.24 0 0 1 7.89 3c1 .45 1.77.82 2.31 1.1a3.61 3.61 0 0 1 .81.48ZM305.27 259.42a4.28 4.28 0 0 1-.58.35 10.73 10.73 0 0 1-1.82.75 18.56 18.56 0 0 1-7.17.46 230.88 230.88 0 0 1-23.22-4.74c-9-2.19-17.11-4.25-23-5.61l-7-1.56-1.91-.42a3.36 3.36 0 0 1-.66-.18 3.14 3.14 0 0 1 .68.08l1.93.32c1.67.29 4.07.77 7 1.4 5.93 1.27 14.07 3.28 23.05 5.47s17.16 4 23.14 4.87a19.12 19.12 0 0 0 7.08-.29 23.9 23.9 0 0 0 2.48-.9Z"
+					style="fill:#263238"
+				/><path
+					d="M227.92 172.83c2.38 4 7.5 5.94 12.14 5.33s8.78-3.37 11.94-6.83 5.46-7.59 7.73-11.68l6.17-11.12c-7.32 3.05-9.81 11.52-15.35 17.2s-16.27 9.44-22.63 7.1"
+					style="opacity:.30000000000000004"
+				/><path
+					d="M266.52 148.59s-.73.18-2 .74a14.62 14.62 0 0 0-4.52 3.43 41.85 41.85 0 0 0-4.84 7 47 47 0 0 1-2.83 4.21 21.16 21.16 0 0 1-3.91 3.82 30.22 30.22 0 0 1-9.38 4.72 25 25 0 0 1-8.49 1.18 12.17 12.17 0 0 1-5.58-1.48 6.62 6.62 0 0 1-1.27-.93 2.54 2.54 0 0 1-.38-.4 18.82 18.82 0 0 0 1.75 1.16 12.65 12.65 0 0 0 5.5 1.28 25.19 25.19 0 0 0 8.33-1.27 30.59 30.59 0 0 0 9.21-4.67 21.42 21.42 0 0 0 3.82-3.72 47.6 47.6 0 0 0 2.82-4.15 40.4 40.4 0 0 1 5-7 14.13 14.13 0 0 1 4.7-3.36 9.15 9.15 0 0 1 1.5-.47 2 2 0 0 1 .57-.09ZM260.76 225.38c-.07.16-3.33-1.38-7.65-2.23a77 77 0 0 0-7.93-.88 8.27 8.27 0 0 1 2.35-.19 29.41 29.41 0 0 1 5.68.56 28.85 28.85 0 0 1 5.45 1.66 8.68 8.68 0 0 1 2.1 1.08ZM243 227.38c.07.07-.77 1-1.77 2.64a19.77 19.77 0 0 0-1.48 3.08 21.77 21.77 0 0 0-1 4.05 21.32 21.32 0 0 0-.16 4.17 20.22 20.22 0 0 0 .55 3.38c.48 1.89 1 3 .94 3a3.32 3.32 0 0 1-.44-.74 7.08 7.08 0 0 1-.41-.93 12.82 12.82 0 0 1-.45-1.26 17.38 17.38 0 0 1-.66-3.44 19.55 19.55 0 0 1 .11-4.29 20.16 20.16 0 0 1 1.1-4.14 17.53 17.53 0 0 1 1.62-3.11 12.25 12.25 0 0 1 .78-1.08 8.48 8.48 0 0 1 .66-.77c.38-.37.61-.58.61-.56Z"
+					style="fill:#263238"
+				/><path
+					d="M234.59 178.76a19.68 19.68 0 0 0 3.4 13.92c-.99-4.68-2.36-9.22-3.4-13.92Z"
+					style="opacity:.30000000000000004"
+				/><path
+					d="M340.48 208.44s5.27-6.17 6.6-6.62 7.22-1.77 7.88-1.22a3.09 3.09 0 0 0 1.33.67s5.11.33 5.66 2.55.34 3.33.78 3.66 1.67 1.89 1.33 3.11a11.48 11.48 0 0 0-.44 3.55 10.77 10.77 0 0 1 .5 2.78 11.39 11.39 0 0 1-.72 2.77 3.08 3.08 0 0 1-.45 3.11c-1.22 1.22-5.73 1.55-7.32 1.56-2 0-6.07.8-7.41.24a16.44 16.44 0 0 0-2.47-.8L335 225.08l-1.66-17.3Z"
+					style="fill:#ffbf9d"
+				/><path
+					d="M356.93 201.48a23.19 23.19 0 0 1-3.51.42 22.36 22.36 0 0 1-3.51.38 8.47 8.47 0 0 1 3.45-.9 8.38 8.38 0 0 1 3.57.1Z"
+					style="fill:#ff9a6c"
+				/><path
+					d="M264 182.13c4 10.83 7.79 25.38 10.6 33.79 3.81 11.43 15.63 15.68 21.67 16.14 7.73.58 45.4-6.55 45.4-6.55l-1.74-19-4.27.11a5.72 5.72 0 0 0-3-1.44c-7.93-1.87-29.3-.31-29.3-.31s-5.75-23.11-7-34.46c-1-9-1-23.68-15.07-24.53-9.15.43-15.06 3.81-17.29 13.61"
+					style="fill:#5e9cff"
+				/><path
+					d="M264 159.53s0-.14.08-.4.16-.67.29-1.18a19.72 19.72 0 0 1 1.76-4.37 13.72 13.72 0 0 1 5.28-5.37 22.3 22.3 0 0 1 9.87-2.44l1.53.19a8.4 8.4 0 0 1 1.56.29l1.58.44 1.53.71a12.92 12.92 0 0 1 5 4.92 23.71 23.71 0 0 1 2.63 7.23 74 74 0 0 1 1.13 8.18 161.08 161.08 0 0 0 2.91 17.77c1.3 6.2 2.78 12.67 4.42 19.35l-.26-.18c5.12-.35 10.45-.59 15.92-.62 2.74 0 5.52 0 8.33.23a38.23 38.23 0 0 1 4.22.51 13.37 13.37 0 0 1 2.1.51 5.35 5.35 0 0 1 1.9 1.17l-.19-.07 4.27-.11h.24v.51c.59 6.41 1.17 12.7 1.72 18.7v.23h-.23c-7.65 1.43-15.09 2.73-22.26 3.88q-5.39.87-10.55 1.57c-3.45.47-6.82.88-10.14 1.06a22.36 22.36 0 0 1-9.5-1.65 28.77 28.77 0 0 1-7.87-4.54 23 23 0 0 1-5.39-6.5 36.76 36.76 0 0 1-2.74-7.26c-2.84-9.43-5-17-6.64-22.2-.82-2.6-1.49-4.59-1.95-5.94-.22-.66-.4-1.17-.52-1.53a5.06 5.06 0 0 1-.16-.52s.07.16.2.5.33.86.57 1.52c.49 1.34 1.19 3.32 2 5.91 1.72 5.16 3.91 12.75 6.79 22.16a36.86 36.86 0 0 0 2.75 7.18 22.52 22.52 0 0 0 5.32 6.37 28.72 28.72 0 0 0 7.76 4.45 22.15 22.15 0 0 0 9.33 1.59c3.29-.18 6.66-.6 10.1-1.07s6.95-1 10.53-1.59c7.16-1.16 14.6-2.46 22.24-3.89l-.21.27c-.55-6-1.13-12.28-1.72-18.69v-.26l.26.23-4.26.11h-.11l-.08-.08a6.64 6.64 0 0 0-3.74-1.54 36.32 36.32 0 0 0-4.16-.5c-2.78-.2-5.55-.24-8.28-.24-5.46 0-10.78.26-15.89.6h-.21l-.05-.21a536.51 536.51 0 0 1-4.39-19.37 156.74 156.74 0 0 1-2.88-17.83 74.73 74.73 0 0 0-1.1-8.14 23.43 23.43 0 0 0-2.55-7.13 12.64 12.64 0 0 0-4.89-4.8l-1.48-.7-1.54-.44a7.37 7.37 0 0 0-1.53-.29l-1.51-.2a22.13 22.13 0 0 0-9.77 2.35 13.6 13.6 0 0 0-5.25 5.24 20.45 20.45 0 0 0-1.82 4.31l-.33 1.17Z"
+					style="fill:#263238"
+				/><path
+					d="M298.27 216a19.44 19.44 0 0 0 5-11.61 5.13 5.13 0 0 1 .08 1.92 14.38 14.38 0 0 1-1.12 4.51 14.19 14.19 0 0 1-2.5 3.92 4.86 4.86 0 0 1-1.46 1.26ZM337 226a88.26 88.26 0 0 1-1.07-9.59 91.09 91.09 0 0 1-.54-9.64 87.31 87.31 0 0 1 1.06 9.6A89.66 89.66 0 0 1 337 226Z"
+					style="fill:#263238"
+				/></svg
+			>
+			<h3 class="text-2xl font-bold">{$_("done")}</h3>
+			<h4 class="text-xl font-semibold">
+				{cardCode}<br />{runnerinfo.firstname}
+				{runnerinfo.lastname} [#{runnerinfo.id}]
+			</h4>
+			<button
+				on:click={() => {
+					resetAll();
+				}}
+				type="button"
+				class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 mt-2"
+			>
+				{$_("next_runner")}
+			</button>
+		</div>
+	{:else if state === "assigning"}
+		<p class="text-center font-semibold">
+			{$_("please_wait_a_moment_while_we_assign_the_card")}<br />{cardCode}
+		</p>
+	{:else if state === "error_runner"}
+		<div class="text-center mx-auto">
+			<svg
+				class="h-64 mx-auto"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 500 500"
+				><path
+					d="M298.37 335.5C382 299.85 469.46 233.1 432.31 135 398.6 46 284.74 25.75 219.62 102.47c-28.09 33.09-23.18 77.05-57.16 106.51s-90.4 45.83-75.13 104c23.67 89.93 156 46.02 211.04 22.52Z"
+					style="fill:#407bff"
+				/><path
+					d="M298.37 335.5C382 299.85 469.46 233.1 432.31 135 398.6 46 284.74 25.75 219.62 102.47c-28.09 33.09-23.18 77.05-57.16 106.51s-90.4 45.83-75.13 104c23.67 89.93 156 46.02 211.04 22.52Z"
+					style="fill:#fff;opacity:.9"
+				/><path
+					d="M360.6 263.05h-.36c-26.64-2.18-45-25-45.74-25.92a4.47 4.47 0 0 1 7-5.55c.21.27 15.9 19.61 37.63 22.37 7-7 13-25.48 12.33-31.07v-.16c-.14-1.8-.48-8 1.29-11.65a4.47 4.47 0 0 1 8 3.88c-.44.92-.65 4.23-.44 7 1 9.2-7 32.42-17 40.19a4.47 4.47 0 0 1-2.71.91ZM148.82 238.82a65.8 65.8 0 0 1-48.56-22.28 4.46 4.46 0 0 1-.26-5.64c7.22-9.71 20-32.64 22-40.11a10.91 10.91 0 0 0-4.14-4.33 4.45 4.45 0 0 1-2.55-3.61l-.72-7.32a4.47 4.47 0 0 1 8.89-.88l.5 5.09a22.34 22.34 0 0 1 6.81 8.65 4.48 4.48 0 0 1 .32 2.26c-.92 7.93-13.79 30.9-21.71 42.51 18.49 18.43 40.59 16.75 41.56 16.66a4.47 4.47 0 0 1 .82 8.9c-.26.02-1.29.1-2.96.1ZM292.87 416.09h-12a4.47 4.47 0 0 1-4.31-5.66c3.13-11.24 4.67-20.39 5.82-34.71-4.24-20-8.23-38.21-8.27-38.39a4.47 4.47 0 0 1 8.73-1.91c0 .18 4.12 18.86 8.41 39.08a4.23 4.23 0 0 1 .08 1.28c-1 12.86-2.31 21.75-4.67 31.38h6.18a4.47 4.47 0 0 1 0 8.93ZM200.32 416.09h-6.76a4.45 4.45 0 0 1-4.42-5.08c1.15-8.2 7-23.13 13.3-38.14 2.23-19.8 4.05-36.8 4.07-37a4.47 4.47 0 1 1 8.88 1c0 .17-1.88 17.56-4.15 37.65a4.31 4.31 0 0 1-.32 1.22c-4.43 10.63-9.49 23.15-11.8 31.44h1.2a4.47 4.47 0 1 1 0 8.93Z"
+					style="fill:#263238"
+				/><path
+					d="m204.21 111-52.06 52.07c-2.62 57.71-2.41 118.33 0 181.18h172.16c-3.41-81.1-3.73-159.17 0-233.25Z"
+					style="fill:#fff"
+				/><path
+					d="M324.31 345.13H152.15a.9.9 0 0 1-.9-.86c-2.49-65.27-2.49-126.27 0-181.27a.9.9 0 0 1 .27-.59l52.06-52.07a.89.89 0 0 1 .63-.26h120.1a.9.9 0 0 1 .65.28.87.87 0 0 1 .24.66c-3.59 71.34-3.59 147.61 0 233.17a.89.89 0 0 1-.25.65.86.86 0 0 1-.64.29ZM153 343.34h170.38c-3.54-84.86-3.55-160.59 0-231.47h-118.8L153 163.43c-2.45 54.64-2.45 115.16 0 179.91Z"
+					style="fill:#263238"
+				/><path
+					d="M214.28 219.19c-.2-4.36-2.67-7.8-5.53-7.7s-5 3.71-4.82 8.07 2.67 7.8 5.53 7.69 5.02-3.71 4.82-8.06ZM274.65 217.82c-.2-4.35-2.67-7.79-5.53-7.69s-5 3.71-4.82 8.07 2.68 7.8 5.53 7.69 5.02-3.71 4.82-8.07ZM229.35 237a36.55 36.55 0 0 1 28.63 1.3 1.27 1.27 0 0 1 .49 1.74 1.3 1.3 0 0 1-1.75.49c-.15-.08-14.4-7.76-31.41 1a1.31 1.31 0 0 1-1.74-.54 1.27 1.27 0 0 1 .55-1.72 41.73 41.73 0 0 1 5.23-2.27ZM205.64 178.34a2.64 2.64 0 0 1 1.26.36 2.58 2.58 0 0 1 .92 3.51A25.29 25.29 0 0 1 188.27 195a2.59 2.59 0 0 1-2.69-2.45 2.55 2.55 0 0 1 2.44-2.66c.39 0 9.62-.58 15.36-10.27a2.52 2.52 0 0 1 2.26-1.28ZM266.05 176.87a2.57 2.57 0 0 1 2.33.72c8 8 17.14 6.39 17.52 6.32a2.6 2.6 0 0 1 3 2 2.54 2.54 0 0 1-2 3c-.5.09-12.14 2.31-22.21-7.75a2.54 2.54 0 0 1 1.31-4.3Z"
+					style="fill:#407bff"
+				/><path
+					d="m321.72 204.86-7.31.68a5.22 5.22 0 0 1-5.58-4.06L298.7 156.1a5.22 5.22 0 0 1 3.77-6.18l19.59-5.14ZM209 167.69c-5.09-13.89-10.18-36.12-4.81-56.71l-52.06 52.07c14.73 4.95 38.19 7.06 56.87 4.64Z"
+					style="opacity:.2"
+				/><path
+					d="M204.21 163.05c-5.71-16.86-3.38-39.78 0-52.07l-52.06 52.07c15.76 2.87 33.37 2.41 52.06 0Z"
+					style="fill:#fff"
+				/><path
+					d="M176 165.92a133.14 133.14 0 0 1-24-2 .88.88 0 0 1-.47-1.5l52.06-52.07a.89.89 0 0 1 1.49.87c-3.14 11.44-5.75 34.6 0 51.54a.93.93 0 0 1-.09.76.87.87 0 0 1-.64.41 221.85 221.85 0 0 1-28.35 1.99Zm-22-3.46c13.84 2.29 29.91 2.24 49-.16-4.71-14.94-3.64-34.71-.48-48.4Z"
+					style="fill:#263238"
+				/></svg
+			>
+			<p class="text-lg font-semibold">{$_("runner_not_found")}</p>
+			<button
+				on:click={() => {
+					resetAll();
+				}}
+				type="button"
+				class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 mt-2"
+			>
+				{$_("try_again")}
+			</button>
+		</div>
+	{:else if state === "error_card"}
+		<div class="text-center mx-auto">
+			<svg
+				class="h-64 mx-auto"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 500 500"
+				><path
+					d="M298.37 335.5C382 299.85 469.46 233.1 432.31 135 398.6 46 284.74 25.75 219.62 102.47c-28.09 33.09-23.18 77.05-57.16 106.51s-90.4 45.83-75.13 104c23.67 89.93 156 46.02 211.04 22.52Z"
+					style="fill:#407bff"
+				/><path
+					d="M298.37 335.5C382 299.85 469.46 233.1 432.31 135 398.6 46 284.74 25.75 219.62 102.47c-28.09 33.09-23.18 77.05-57.16 106.51s-90.4 45.83-75.13 104c23.67 89.93 156 46.02 211.04 22.52Z"
+					style="fill:#fff;opacity:.9"
+				/><path
+					d="M360.6 263.05h-.36c-26.64-2.18-45-25-45.74-25.92a4.47 4.47 0 0 1 7-5.55c.21.27 15.9 19.61 37.63 22.37 7-7 13-25.48 12.33-31.07v-.16c-.14-1.8-.48-8 1.29-11.65a4.47 4.47 0 0 1 8 3.88c-.44.92-.65 4.23-.44 7 1 9.2-7 32.42-17 40.19a4.47 4.47 0 0 1-2.71.91ZM148.82 238.82a65.8 65.8 0 0 1-48.56-22.28 4.46 4.46 0 0 1-.26-5.64c7.22-9.71 20-32.64 22-40.11a10.91 10.91 0 0 0-4.14-4.33 4.45 4.45 0 0 1-2.55-3.61l-.72-7.32a4.47 4.47 0 0 1 8.89-.88l.5 5.09a22.34 22.34 0 0 1 6.81 8.65 4.48 4.48 0 0 1 .32 2.26c-.92 7.93-13.79 30.9-21.71 42.51 18.49 18.43 40.59 16.75 41.56 16.66a4.47 4.47 0 0 1 .82 8.9c-.26.02-1.29.1-2.96.1ZM292.87 416.09h-12a4.47 4.47 0 0 1-4.31-5.66c3.13-11.24 4.67-20.39 5.82-34.71-4.24-20-8.23-38.21-8.27-38.39a4.47 4.47 0 0 1 8.73-1.91c0 .18 4.12 18.86 8.41 39.08a4.23 4.23 0 0 1 .08 1.28c-1 12.86-2.31 21.75-4.67 31.38h6.18a4.47 4.47 0 0 1 0 8.93ZM200.32 416.09h-6.76a4.45 4.45 0 0 1-4.42-5.08c1.15-8.2 7-23.13 13.3-38.14 2.23-19.8 4.05-36.8 4.07-37a4.47 4.47 0 1 1 8.88 1c0 .17-1.88 17.56-4.15 37.65a4.31 4.31 0 0 1-.32 1.22c-4.43 10.63-9.49 23.15-11.8 31.44h1.2a4.47 4.47 0 1 1 0 8.93Z"
+					style="fill:#263238"
+				/><path
+					d="m204.21 111-52.06 52.07c-2.62 57.71-2.41 118.33 0 181.18h172.16c-3.41-81.1-3.73-159.17 0-233.25Z"
+					style="fill:#fff"
+				/><path
+					d="M324.31 345.13H152.15a.9.9 0 0 1-.9-.86c-2.49-65.27-2.49-126.27 0-181.27a.9.9 0 0 1 .27-.59l52.06-52.07a.89.89 0 0 1 .63-.26h120.1a.9.9 0 0 1 .65.28.87.87 0 0 1 .24.66c-3.59 71.34-3.59 147.61 0 233.17a.89.89 0 0 1-.25.65.86.86 0 0 1-.64.29ZM153 343.34h170.38c-3.54-84.86-3.55-160.59 0-231.47h-118.8L153 163.43c-2.45 54.64-2.45 115.16 0 179.91Z"
+					style="fill:#263238"
+				/><path
+					d="M214.28 219.19c-.2-4.36-2.67-7.8-5.53-7.7s-5 3.71-4.82 8.07 2.67 7.8 5.53 7.69 5.02-3.71 4.82-8.06ZM274.65 217.82c-.2-4.35-2.67-7.79-5.53-7.69s-5 3.71-4.82 8.07 2.68 7.8 5.53 7.69 5.02-3.71 4.82-8.07ZM229.35 237a36.55 36.55 0 0 1 28.63 1.3 1.27 1.27 0 0 1 .49 1.74 1.3 1.3 0 0 1-1.75.49c-.15-.08-14.4-7.76-31.41 1a1.31 1.31 0 0 1-1.74-.54 1.27 1.27 0 0 1 .55-1.72 41.73 41.73 0 0 1 5.23-2.27ZM205.64 178.34a2.64 2.64 0 0 1 1.26.36 2.58 2.58 0 0 1 .92 3.51A25.29 25.29 0 0 1 188.27 195a2.59 2.59 0 0 1-2.69-2.45 2.55 2.55 0 0 1 2.44-2.66c.39 0 9.62-.58 15.36-10.27a2.52 2.52 0 0 1 2.26-1.28ZM266.05 176.87a2.57 2.57 0 0 1 2.33.72c8 8 17.14 6.39 17.52 6.32a2.6 2.6 0 0 1 3 2 2.54 2.54 0 0 1-2 3c-.5.09-12.14 2.31-22.21-7.75a2.54 2.54 0 0 1 1.31-4.3Z"
+					style="fill:#407bff"
+				/><path
+					d="m321.72 204.86-7.31.68a5.22 5.22 0 0 1-5.58-4.06L298.7 156.1a5.22 5.22 0 0 1 3.77-6.18l19.59-5.14ZM209 167.69c-5.09-13.89-10.18-36.12-4.81-56.71l-52.06 52.07c14.73 4.95 38.19 7.06 56.87 4.64Z"
+					style="opacity:.2"
+				/><path
+					d="M204.21 163.05c-5.71-16.86-3.38-39.78 0-52.07l-52.06 52.07c15.76 2.87 33.37 2.41 52.06 0Z"
+					style="fill:#fff"
+				/><path
+					d="M176 165.92a133.14 133.14 0 0 1-24-2 .88.88 0 0 1-.47-1.5l52.06-52.07a.89.89 0 0 1 1.49.87c-3.14 11.44-5.75 34.6 0 51.54a.93.93 0 0 1-.09.76.87.87 0 0 1-.64.41 221.85 221.85 0 0 1-28.35 1.99Zm-22-3.46c13.84 2.29 29.91 2.24 49-.16-4.71-14.94-3.64-34.71-.48-48.4Z"
+					style="fill:#263238"
+				/></svg
+			>
+			<p class="text-lg font-semibold">{$_("card_not_found")}</p>
+			<button
+				on:click={() => {
+					state = "scan_card";
+					scannerActive = true;
+				}}
+				type="button"
+				class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 mt-2"
+			>
+				{$_("try_again")}
+			</button>
+		</div>
+	{:else}
+		<!--  -->
+		{#if runnerinfo.id === 0}
+			<h3 class="text-2xl font-bold">{$_("scan_runner")}</h3>
+			<h4 class="text-xl font-semibold">
+				{$_("selfservice_qr_registration_barcode")}
+			</h4>
+		{:else}
+			<h3 class="text-2xl font-bold">
+				{runnerinfo.firstname}
+				{runnerinfo.lastname}
+			</h3>
+			<p>
+				ID: #{runnerinfo.id}<br />created_via: {runnerinfo.created_via}<br
+				/>{runnerinfo.group.name}
+			</p>
+		{/if}
+		<!--  -->
+	{/if}
+	{#if state === "scan_card"}
+		<h3 class="text-2xl font-bold">{$_("scan_card")}</h3>
+		<h4 class="text-xl font-semibold">{$_("code_128_barcode")}</h4>
+	{/if}
+	{#if state.includes("scan_")}
+		{#if scannerActive}
+			<QrCodeScanner
+				:paused={!scannerActive}
+				on:detect={(e) => {
+					if (scannerActive) {
+						if (`${e.detail.decodedText}`.length === 13) {
+							e.detail.decodedText = e.detail.decodedText.substring(
+								0,
+								e.detail.decodedText.length - 1
+							);
+						}
+						scannerActive = false;
+						console.log({ type: "DETECT", code: e.detail.decodedText });
+						if (runnerinfo.id === 0) {
+							new Audio("/beep.mp3").play();
+							if (
+								e.detail.decodedText.includes(
+									"https://portal.lauf-fuer-kaya.de/profile/"
+								)
+							) {
+								const runnerID = JSON.parse(
+									atob(
+										e.detail.decodedText
+											.replace("https://portal.lauf-fuer-kaya.de/profile/", "")
+											.split(".")[1]
+									)
+								).id;
+								RunnerService.runnerControllerGetOne(runnerID)
+									.then((runner) => {
+										runnerinfo = runner;
+									})
+									.catch((e) => {
+										console.error(e);
+										state = "error_runner";
+										// resetAll();
+									});
+							} else {
+								const runnerID = parseInt(e.detail.decodedText);
+								RunnerService.runnerControllerGetOne(runnerID)
+									.then((runner) => {
+										runnerinfo = runner;
+									})
+									.catch((e) => {
+										console.error(e);
+										state = "error_runner";
+										// resetAll();
+									});
+							}
+						} else {
+							if (`${e.detail.decodedText}`.length > 10) {
+								cardCode = e.detail.decodedText;
+								new Audio("/beep.mp3").play();
+								state = "assigning";
+								RunnerCardService.runnerCardControllerGetAll()
+									.then((cards) => {
+										// console.log(cards);
+										const card = cards.find((c) => c.code === cardCode);
+										if (card) {
+											console.log("card found", card);
+											RunnerCardService.runnerCardControllerPut(card.id, {
+												enabled: true,
+												id: card.id,
+												runner: runnerinfo.id,
+											})
+												.then(() => {
+													state = "done";
+												})
+												.catch(() => {
+													state = "error_card";
+													scannerActive = false;
+												});
+										} else {
+											console.log("card not found");
+											// scannerActive = true;
+											state = "error_card";
+											scannerActive = false;
+										}
+									})
+									.catch(() => {
+										scannerActive = true;
+									});
+							}
+						}
+					}
+				}}
+				width={320}
+				height={320}
+				class="w-full max-w-sm bg-neutral-300 rounded-lg overflow-hidden"
+			/>
+		{/if}
+		{#if runnerinfo.id !== 0 && state !== "scan_card"}
+			<button
+				on:click={() => {
+					state = "scan_card";
+					scannerActive = true;
+				}}
+				type="button"
+				class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 w-full mt-2"
+			>
+				{$_("scan_card")}
+			</button>
+		{/if}
+		{#if state === "scan_card" || runnerinfo.id !== 0}
+			<button
+				on:click={() => {
+					state = "scan_runner";
+					scannerActive = true;
+					runnerinfo = { id: 0, firstname: "", lastname: "" };
+					cardCode = "";
+				}}
+				type="button"
+				class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-100 text-red-800 hover:bg-red-200 focus:outline-hidden focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none dark:text-red-500 dark:bg-red-800/30 dark:hover:bg-red-800/20 dark:focus:bg-red-800/20 w-full mt-2"
+			>
+				{$_("cancel")}
+			</button>
+		{/if}
+		<!--  -->
+	{/if}
+</div>

src/components/general/Footer.svelte

@@ -44,8 +44,12 @@
 			target="_blank">{$_("documentation")}</a
 		>
 		-
-    <a class="underline" href="/privacy">{$_("privacy")}</a>
+		<a class="underline" href="https://lauf-fuer-kaya.de/datenschutz/"
+			>{$_("privacy")}</a
+		>
 		-
-    <a class="underline" href="/imprint">{$_("imprint")}</a>
+		<a class="underline" href="https://lauf-fuer-kaya.de/impressum/"
+			>{$_("imprint")}</a
+		>
 	</p>
 </footer>

src/components/general/Imprint.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import { parse } from "marked";
-  import Footer from "./Footer.svelte";
-  // import * as css from "../base/simple.css";
-  let html = "";
-  async function load() {
-    let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
-    let text = (await md.text()).toString();
-    if (text.includes("<meta")) {
-      md.ok = false;
-    }
-    if (!md.ok) {
-      md = await fetch("/imprint_en.md");
-      text = await md.text();
-    }
-    html = parse(text);
-  }
-  const promise = load();
-</script>
-
-<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
-  <div class="text-center mb-8">
-    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-    >
-      {$_("imprint")}
-    </h1>
-  </div>
-</div>
-
-<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
-  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-    {#await promise}
-      <p class="text-center w-full">{$_("imprint-loading")}</p>
-    {:then}
-      <div class="simplecontent">
-        {@html html}
-      </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>
-</div>
-<Footer />

src/components/general/Privacy.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import { parse } from "marked";
-  import Footer from "./Footer.svelte";
-  // import * as css from "../base/simple.css?inline";
-  let html = "";
-  async function load() {
-    let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
-    let text = (await md.text()).toString();
-    if (text.includes("<meta")) {
-      md.ok = false;
-    }
-    if (!md.ok) {
-      md = await fetch("/privacy_en.md");
-      text = await md.text();
-    }
-    html = parse(text);
-  }
-  const promise = load();
-</script>
-
-<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
-  <div class="text-center mb-8">
-    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-    >
-      {$_("privacy")}
-    </h1>
-  </div>
-</div>
-
-<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
-  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-    {#await promise}
-      <p class="text-center w-full">{$_("privacy-loading")}</p>
-    {:then}
-      <div class="simplecontent">
-        {@html html}
-      </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>
-</div>
-<Footer />

src/components/general/QrCodeScanner.svelte

@@ -0,0 +1,85 @@
+<script>
+	import { onMount, createEventDispatcher } from "svelte";
+	import {
+		Html5QrcodeScanner,
+		Html5QrcodeScanType,
+		Html5QrcodeSupportedFormats,
+	} from "html5-qrcode";
+	import { debounce } from "underscore";
+
+	export let width;
+	export let height;
+	export let paused = false;
+
+	const dispatch = createEventDispatcher();
+
+	const debouncedDispatch = debounce(
+		function (decodedText) {
+			// console.log("dispatchEvent");
+			dispatch("detect", { decodedText });
+		},
+		500,
+		true
+	);
+
+	function onScanSuccess(decodedText, decodedResult) {
+		// console.log("onScanSuccess", decodedText);
+		if (!paused) {
+			debouncedDispatch(decodedText);
+		}
+	}
+
+	// usually better to ignore and keep scanning
+	function onScanFailure(message) {
+		if (!paused) {
+			dispatch("error", { message });
+		}
+	}
+
+	let scanner;
+	onMount(() => {
+		scanner = new Html5QrcodeScanner(
+			"qr-scanner",
+			{
+				fps: 10,
+				showTorchButtonIfSupported: true,
+				rememberLastUsedCamera: true,
+				qrbox: { width, height },
+				aspectRatio: 1,
+				supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA],
+				formatsToSupport: [
+					Html5QrcodeSupportedFormats.CODE_39,
+					Html5QrcodeSupportedFormats.EAN_8,
+					Html5QrcodeSupportedFormats.EAN_13,
+					Html5QrcodeSupportedFormats.QR_CODE,
+					Html5QrcodeSupportedFormats.CODE_128,
+				],
+			},
+			false // non-verbose
+		);
+		scanner.render(onScanSuccess, onScanFailure);
+	});
+</script>
+
+<div id="qr-scanner" class={$$props.class} />
+
+<style>
+	/* Hide unwanted icons */
+	#qr-scanner :global(img[alt="Info icon"]),
+	#qr-scanner :global(img[alt="Camera based scan"]) {
+		display: none;
+	}
+
+	/* Change camera permission button text */
+	#qr-scanner :global(#html5-qrcode-button-camera-permission) {
+		visibility: hidden;
+	}
+	#qr-scanner :global(#html5-qrcode-button-camera-permission::after) {
+		position: absolute;
+		inset: auto 0 0;
+		display: block;
+		content: "Allow camera access";
+		visibility: visible;
+		padding: 10px 0;
+	}
+</style>

src/components/general/Sidebar.svelte

@@ -1,103 +0,0 @@
-<script>
-  let open = false;
-</script>
-
-<div class="md:flex flex-col md:flex-row h-screen w-full">
-  <div
-    class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0"
-  >
-    <div
-      class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between"
-    >
-      <a
-        href="/#/test"
-        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"
-        >Sidebar</a
-      >
-      <button
-        class="rounded-lg md:hidden focus:outline-none focus:shadow-outline"
-      >
-        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
-          {#if open}
-            <path
-              fill-rule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd"
-            />
-          {/if}
-          {#if !open}
-            <path
-              fill-rule="evenodd"
-              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
-              clip-rule="evenodd"
-            />
-          {/if}
-        </svg>
-      </button>
-    </div>
-    <nav
-      :class:block={open}
-      :class:hidden={!open}
-      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto"
-    >
-      <a
-        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-gray-200 rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Blog</a
-      >
-      <a
-        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Portfolio</a
-      >
-      <a
-        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">About</a
-      >
-      <a
-        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Contact</a
-      >
-      <div class="relative">
-        <button
-          on:click={() => {
-            open = !open;
-          }}
-          class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        >
-          <span>Dropdown</span>
-          <svg
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
-            ><path
-              fill-rule="evenodd"
-              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd"
-            /></svg
-          >
-        </button>
-        <div
-          class:block={open}
-          class:hidden={!open}
-          class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg"
-        >
-          <div
-            class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800"
-          >
-            <a
-              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #1</a
-            >
-            <a
-              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #2</a
-            >
-            <a
-              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #3</a
-            >
-          </div>
-        </div>
-      </div>
-    </nav>
-  </div>
-</div>

src/components/groups/AddGroupModal.svelte

@@ -59,14 +59,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -79,20 +79,20 @@
         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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 640 512"
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
@@ -102,18 +102,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-user-group")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-for-creating-a-new-user-group"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -130,7 +130,7 @@
                     bind:value={name_input_value}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isNameValid}
                     <span
@@ -152,20 +152,20 @@
                     bind:value={description_input_value}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
               </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("create")}
           </button>
@@ -174,7 +174,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/groups/GroupDetail.svelte

@@ -2,7 +2,7 @@
 	import { _ } from "svelte-i18n";
 	import store from "../../store";
 	import { UserGroupService } from "@odit/lfk-client-js";
-  import toast from 'svelte-french-toast'
+	import toast from "svelte-french-toast";
 
 	import PromiseError from "../base/PromiseError.svelte";
 	let data_loaded = false;
@@ -88,46 +88,32 @@
 			<div class="w-full">
 				<nav class="w-full flex">
 					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center"></li>
 						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="../"
-                class="flex-shrink-0 w-5 h-5 mr-2"
+								><svg
-                fill="currentColor"
+									xmlns="http://www.w3.org/2000/svg"
 									width="24"
 									height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                ><path
-                  fill="currentColor"
-                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.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
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="../">{$_("groups")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
 									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
 									stroke-linecap="round"
 									stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
+									class="inline-block"
-                height="1em"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                width="1em"
+								>
-                xmlns="http://www.w3.org/2000/svg"
+								{$_("groups")}</a
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
 							>
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">{editable.name}</span>
 						</li>
 					</ol>
 				</nav>
 			</div>
 		</div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
-      {original_data.name}
+			{editable.name}
-      <span data-id="group_actions_${editable.id}">
+			<div data-id="group_actions_${editable.id}">
 				{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
 					{#if delete_triggered}
 						<button
@@ -160,15 +146,16 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-            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"
+						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
 					>
 				{/if}
-      </span>
+			</div>
 		</div>
 		<!--  -->
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="title" class="font-medium text-gray-700">{$_("name")}</label>
+			<label for="title" class="font-semibold text-gray-700">{$_("name")}</label
+			>
 			<input
 				autocomplete="off"
 				placeholder={$_("name")}
@@ -178,7 +165,7 @@
 				class:focus:border-red-500={!isGroupnameValid}
 				class:focus:ring-red-500={!isGroupnameValid}
 				name="title"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isGroupnameValid}
 				<span
@@ -188,8 +175,8 @@
 				</span>
 			{/if}
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="firstname" class="font-medium text-gray-700"
+			<label for="groupdescription" class="font-semibold text-gray-700"
 				>{$_("description")}</label
 			>
 			<input
@@ -197,26 +184,28 @@
 				placeholder={$_("description")}
 				type="text"
 				bind:value={editable.description}
-        name="firstname"
+				name="groupdescription"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-    <div class="text-sm w-full mt-8">
+		<div class="text-sm w-full mt-2">
-      <p class="font-medium mb-4">
+			<p class="font-semibold mb-4">
 				{$_("permissions")}
+			</p>
+			<div>
 				<a
 					class="px-4 py-2 bg-gray-500 rounded-md text-white"
 					href="/groups/{params.groupid}/permissions/"
 					>{$_("edit-permissions")}</a
 				>
-      </p>
+			</div>
 			<div class="w-full sm:my-px sm:px-px sm:w-1/2">
 				<input
 					autocomplete="off"
 					placeholder={$_("search-for-permission")}
 					type="text"
 					bind:value={search_permission}
-          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 			</div>
 			{#each original_data.permissions as p}

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) => {
@@ -133,17 +133,15 @@
         </nav>
       </div>
     </div>
-    <div class="mb-8 text-3xl font-extrabold">
+    <div class="mb-4 text-3xl font-extrabold">
-      {$_("permissions")}:
+      <div>
-      {original_data.name}
-      <span>
         {#if promises.length === 0}
           <button
             disabled={save_enabled}
             class:opacity-50={save_enabled}
             type="button"
             on:click={submit}
-            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"
+            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
           >
         {:else}
@@ -153,7 +151,7 @@
             >{$_("applying-changes")}</button
           >
         {/if}
-      </span>
+      </div>
     </div>
     <!--  -->
     <div class="flex flex-wrap -mx-1 overflow-hidden">

src/components/groups/Groups.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("user-groups")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}

src/components/groups/UserGroupsOverview.svelte

@@ -140,7 +140,7 @@
   {: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>
+        <b>{$_("general_promise_error")}</b>
         {error}
       </span>
     </div>

src/components/orgs/AddOrgModal.svelte

@@ -25,7 +25,7 @@
   $: address_input2_value = "";
   $: address_zipcode_value = "";
   $: address_city_value = "";
-  $: address_checked = true;
+  $: address_checked = false;
 
   let address_input1;
   let address_input2;
@@ -82,14 +82,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -102,18 +102,18 @@
         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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -124,18 +124,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-organization")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-add-a-new-organization"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -153,7 +153,7 @@
                     bind:this={name_input_dom}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isOrgnameValid}
                     <span
@@ -170,11 +170,11 @@
                       id="comments"
                       name="comments"
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                       >{$_("address")}</label
                     >
                   </div>
@@ -196,7 +196,7 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -219,10 +219,10 @@
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
-                  <div class="col-span-6">
+                  <div class="col-span-2">
                     <label
                       for="zipcode"
                       class="block text-sm font-medium text-gray-700"
@@ -238,7 +238,7 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -248,7 +248,7 @@
                       </span>
                     {/if}
                   </div>
-                  <div class="col-span-6">
+                  <div class="col-span-4">
                     <label
                       for="city"
                       class="block text-sm font-medium text-gray-700"
@@ -264,7 +264,7 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span
@@ -279,13 +279,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("create")}
           </button>
@@ -294,7 +294,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

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-hidden"
+		use:clickOutside
+		on:click_outside={cancelDelete}
+	>
+		<div
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
+		>
+			<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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
+				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-xl">
+					<div class="">
+						<div
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+						>
+							<svg
+								class="size-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 sm:text-left max-h-[75vh] overflow-y-auto">
+							<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="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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
+					<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"
+					>
+						{$_("confirm-delete-organization-and-associated-teams-runners")}
+					</button>
+					<button
+						on:click={cancelDelete}
+						type="button"
+						class="w-full 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 hidden lg:block"
+					>
+						{$_("cancel-keep-organization")}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/components/orgs/OrgDetail.svelte

@@ -3,19 +3,17 @@
 		GroupContactService,
 		RunnerOrganizationService,
 	} from "@odit/lfk-client-js";
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import toast from "svelte-french-toast";
-  import toast from 'svelte-french-toast'
+	import { _ } from "svelte-i18n";
-
+	import { tick } from "svelte";
-  import store from "../../store";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  import PromiseError from "../base/PromiseError.svelte";
 	import Select from "svelte-select";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import store from "../../store";
+	import PromiseError from "../base/PromiseError.svelte";
 	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
 	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import { tick } from "svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  $: delete_triggered = false;
+	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.svelte";
 	$: address_valid_or_none =
 		(isAddress1Valid && iszipcodevalid && iscityvalid) ||
 		editable.address_checked === false;
@@ -25,7 +23,6 @@
 	let contacts = [];
 	let valueCopy = null;
 	let areaDom;
-  let copied = false;
 	export let params;
 	$: editable = {};
 	$: contact = {};
@@ -78,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) {
@@ -123,7 +117,6 @@
 				throw new Error();
 			}
 			toast($_("copied-link-to-clipboard"));
-      copied = true;
 		} catch (err) {
 			toast.error($_("error-whyile-copying-to-clipboard"));
 		}
@@ -145,12 +138,38 @@
 	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="mb-8 text-3xl font-extrabold leading-tight">
+		<div class="flex flex-row mb-4">
-      {original_object.name}
+			<div class="w-full">
-      <span data-id="org_actions_${editable.id}">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("organizations")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{original_object.name} [#{params.orgid}]
+			<div data-id="org_actions_${editable.id}">
 				<GenerateSponsoringContracts
 					bind:sponsoring_contracts_show
 					bind:generate_orgs
@@ -169,131 +188,43 @@
 					</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;
+							modal_open = true;
-              }}
+							delete_org = original_object;
-              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}
 					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"
+					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
 				>
-        {/if}
-      </span>
-    </div>
-    <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="mr-2 flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_("organizations")}</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">
-              <span class="mr-2">Org-Details #{params.orgid}</span>
-            </li>
-          </ol>
-        </nav>
 			</div>
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="name" class="font-medium text-gray-700">{$_("name")}</label>
+			<label for="name" class="font-semibold text-gray-700">{$_("name")}</label>
 			<input
 				autocomplete="off"
 				placeholder={$_("name")}
 				type="text"
 				bind:value={editable.name}
 				name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="contact" class="font-medium text-gray-700"
+			<label for="contact" class="font-semibold text-gray-700"
 				>{$_("contact")}</label
 			>
 			<Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					label.toLowerCase().includes(filterText.toLowerCase()) ||
 					option.value.id.toString().startsWith(filterText.toLowerCase())}
@@ -315,24 +246,24 @@
 						id="toggle_selfservice_feature"
 						name="toggle_selfservice_feature"
 						type="checkbox"
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+						class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 					/>
 				</div>
 				<div class="ml-3 text-sm">
 					<label
 						for="toggle_selfservice_feature"
-            class="font-medium text-gray-700"
+						class="font-semibold text-gray-700"
 						>{$_("selfservice-registration")}</label
 					>
 				</div>
 			</div>
 			<div>
 				{#if editable.registrationEnabled}
-          <div class="text-sm w-full">
+					<div class="text-sm w-full mt-2">
 						<button on:click={copy} class="inline-flex w-full">
 							<p
 								name="token"
-                class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+								class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2 break-all font-mono text-left"
 							>
 								{#if editable.registrationKey}
 									{registrationLink}
@@ -341,7 +272,7 @@
 								{/if}
 							</p>
 							<div
-                class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer"
+								class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 cursor-pointer flex items-center justify-center"
 							>
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
@@ -372,13 +303,13 @@
 								id="toggle_address_checkbox"
 								name="toggle_address_checkbox"
 								type="checkbox"
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+								class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 							/>
 						</div>
 						<div class="ml-3 text-sm">
 							<label
 								for="toggle_address_checkbox"
-                class="font-medium text-gray-700">{$_("address")}</label
+								class="font-semibold text-gray-700">{$_("address")}</label
 							>
 						</div>
 					</div>
@@ -399,7 +330,7 @@
 							bind:value={editable.address.address1}
 							type="text"
 							name="address1"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 						/>
 						{#if !isAddress1Valid}
 							<span
@@ -421,7 +352,7 @@
 							bind:value={editable.address.address2}
 							type="text"
 							name="address2"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 						/>
 					</div>
 					<div class="col-span-6">
@@ -437,7 +368,7 @@
 							bind:value={editable.address.postalcode}
 							type="text"
 							name="zipcode"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 						/>
 						{#if !iszipcodevalid}
 							<span
@@ -460,7 +391,7 @@
 							bind:value={editable.address.city}
 							type="text"
 							name="city"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 						/>
 						{#if !iscityvalid}
 							<span
@@ -471,10 +402,12 @@
 						{/if}
 					</div>
 				{/if}
-        <div class="text-sm w-full">
+				<div class="text-sm w-full mt-2">
-          <span class="font-medium text-gray-700">{$_("distance")}</span>
+					<span class="font-semibold text-gray-700">{$_("distance")}</span>
 					<br />
-          <span class="text-gray-700">{(original_object.total_distance / 1000).toFixed(2)} km</span>
+					<span class="text-gray-700"
+						>{(original_object.total_distance / 1000).toFixed(2)} km</span
+					>
 				</div>
 			</div>
 		</div>

src/components/orgs/OrgOverview.svelte

@@ -1,250 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  let modal_open = false;
-  let delete_org = {};
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import store from "../../store";
-  import OrgsEmptyState from "./OrgsEmptyState.svelte";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.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_organizations.some(
-    (r) => r.is_selected === true
-  );
-  $: cards_show = current_organizations.some((r) => r.is_selected === true);
-  $: generate_orgs = current_organizations.filter(
-    (r) => r.is_selected === true
-  );
-  $: certificates_show = current_organizations.some(
-    (r) => r.is_selected === true
-  );
-  export let current_organizations = [];
-
-  const promise =
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      (val) => {
-        current_organizations = val;
-      }
-    );
-</script>
-
-<ConfirmOrgDeletion
-  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
-  }}
-  bind:modal_open
-  bind:delete_org
-/>
-{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
-  {#await promise}
-    <div
-      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">{$_("organizations-are-being-loaded")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:then}
-    {#if current_organizations.length === 0}
-      <OrgsEmptyState />
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_("datatable.search")}
-        aria-label={$_("datatable.search")}
-        class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
-      />
-      <div class="h-12">
-        <GenerateSponsoringContracts
-          bind:sponsoring_contracts_show
-          bind:generate_orgs
-        />
-        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
-        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
-      </div>
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-      >
-        <table class="divide-y divide-gray-200 w-full">
-          <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"
-              >
-                <button
-                  on:click={() => {
-                    const newstate = !current_organizations.some(
-                      (r) => r.is_selected === true
-                    );
-                    current_organizations = current_organizations.map((r) => {
-                      r.is_selected = newstate;
-                      return r;
-                    });
-                  }}
-                  class="underline cursor-pointer select-none"
-                  >{#if current_organizations.some((r) => r.is_selected === true)}
-                    {$_("deselect-all")}
-                  {:else}{$_("select-all")}{/if}
-                </button>
-              </th>
-              <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"
-              >
-                {$_("address")}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("contact")}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_("action")}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_organizations as o}
-              {#if Object.values(o)
-                .toString()
-                .toLowerCase()
-                .includes(searchvalue)}
-                <tr
-                  class="odd:bg-white even:bg-gray-100"
-                  data-rowid="org_{o.id}"
-                >
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <input
-                      bind:checked={o.is_selected}
-                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                    />
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {o.name}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if o.address.address1 !== null}
-                            {o.address.address1}<br />
-                            <!-- {o.address.address2 || ''}<br /> -->
-                            {o.address.postalcode}
-                            {o.address.city}
-                            {o.address.country}
-                          {/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if o.contact}
-                            <a
-                              href="../contacts/{o.contact.id}"
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                              >{o.contact.firstname}
-                              {o.contact.middlename || ""}
-                              {o.contact.lastname}</a
-                            >
-                          {:else}{$_("no-contact-specified")}{/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  {#if active_deletes[o.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                    >
-                      <button
-                        on:click={() => {
-                          active_deletes[o.id] = false;
-                        }}
-                        tabindex="0"
-                        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
-                      >
-                    </td>
-                  {:else}
-                    <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}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  {: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}
-{/if}

src/components/orgs/Orgs.svelte

@@ -1,16 +1,43 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	let delete_org = {};
+	import { RunnerOrganizationService } from "@odit/lfk-client-js";
 	import store from "../../store";
-  import AddOrgModal from "./AddOrgModal.svelte";
+	import OrgsEmptyState from "./OrgsEmptyState.svelte";
-  export let modal_open = false;
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.svelte";
-  import OrgOverview from "./OrgOverview.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import toast from "svelte-french-toast";
+	$: searchvalue = "";
+	$: active_deletes = [];
+	$: sponsoring_contracts_show = current_organizations.some(
+		(r) => r.is_selected === true
+	);
+	$: cards_show = current_organizations.some((r) => r.is_selected === true);
+	$: generate_orgs = current_organizations.filter(
+		(r) => r.is_selected === true
+	);
+	$: certificates_show = current_organizations.some(
+		(r) => r.is_selected === true
+	);
 	let current_organizations = [];
-  export let import_modal_open = false;
+
+	const promise =
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				current_organizations = val;
+			}
+		);
+	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;
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("organizations")}
 	</h4>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
@@ -19,7 +46,7 @@
 				modal_open = true;
 			}}
 			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:w-auto sm:text-sm mt-1 sm:mt-0"
+			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"
 		>
 			{$_("create-organization")}
 		</button>
@@ -30,12 +57,185 @@
 				import_modal_open = true;
 			}}
 			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:w-auto sm:text-sm mt-1 sm:mt-0"
+			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"
 		>
 			{$_("import-runners")}
 		</button>
 	{/if}
-  <OrgOverview bind:current_organizations />
+	<ConfirmOrgDeletionModal
+		on:cancelDelete={(event) => {
+			delete_modal_open = false;
+			active_deletes[event.detail.id] = false;
+		}}
+		bind:modal_open={delete_modal_open}
+		bind:delete_org
+	/>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
+		{#await promise}
+			<div
+				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">{$_("organizations-are-being-loaded")}</p>
+				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			</div>
+		{:then}
+			{#if current_organizations.length === 0}
+				<OrgsEmptyState />
+			{:else}
+				<input
+					type="search"
+					bind:value={searchvalue}
+					placeholder={$_("datatable.search")}
+					aria-label={$_("datatable.search")}
+					class="w-full sm:w-auto sm:mt-0 p-2 rounded-md border mb-1 lg:mb-0"
+				/>
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_orgs
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
+				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+				<div
+					class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+				>
+					<table class="divide-y divide-gray-200 w-full">
+						<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"
+								>
+									<button
+										on:click={() => {
+											const newstate = !current_organizations.some(
+												(r) => r.is_selected === true
+											);
+											current_organizations = current_organizations.map((r) => {
+												r.is_selected = newstate;
+												return r;
+											});
+										}}
+										class="underline cursor-pointer select-none"
+										>{#if current_organizations.some((r) => r.is_selected === true)}
+											{$_("deselect-all")}
+										{:else}{$_("select-all")}{/if}
+									</button>
+								</th>
+								<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"
+								>
+									{$_("address")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("contact")}
+								</th>
+								<th scope="col" class="relative px-6 py-3">
+									<span class="sr-only">{$_("action")}</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y divide-gray-200">
+							{#each current_organizations as o}
+								{#if Object.values(o)
+									.toString()
+									.toLowerCase()
+									.includes(searchvalue)}
+									<tr
+										class="odd:bg-white even:bg-gray-100"
+										data-rowid="org_{o.id}"
+									>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<input
+												bind:checked={o.is_selected}
+												type="checkbox"
+												class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
+											/>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{o.name}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if o.address.address1 !== null}
+														{o.address.address1}<br />
+														<!-- {o.address.address2 || ''}<br /> -->
+														{o.address.postalcode}
+														{o.address.city}
+														{o.address.country}
+													{/if}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if o.contact}
+														<a
+															href="../contacts/{o.contact.id}"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+															>{o.contact.firstname}
+															{o.contact.middlename || ""}
+															{o.contact.lastname}</a
+														>
+													{:else}{$_("no-contact-specified")}{/if}
+												</div>
+											</div>
+										</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;
+														delete_modal_open = true;
+														delete_org = o;
+													}}
+													tabindex="0"
+													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+													>{$_("delete")}</button
+												>
+											{/if}
+										</td>
+									</tr>
+								{/if}
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		{: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>{$_("general_promise_error")}</b>
+					{error}
+				</span>
+			</div>
+		{/await}
+	{/if}
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}

src/components/pdf_generation/DocumentServer.ts

@@ -26,24 +26,26 @@ class DocumentServer {
             parent_group: {
               id: cards[i]?.runner?.group?.parentGroup?.id,
               name: cards[i]?.runner?.group?.parentGroup?.name,
-                        }
+            },
-                    }
+          },
-                }
+        },
-            }
+      };
-            generateCards.push(card)
+      generateCards.push(card);
-            
     }
 
-        const response = await fetch(`${this.baseUrl}/v1/pdfs/cards?key=${this.apiKey}`, {
+    const response = await fetch(
-            method: 'POST',
+      `${this.baseUrl}/v1/pdfs/cards?key=${this.apiKey}`,
+      {
+        method: "POST",
         headers: {
-                'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           locale,
           cards: generateCards,
         }),
-        });
+      },
+    );
 
     const blob = await response.blob();
     return blob;
@@ -53,7 +55,7 @@ class DocumentServer {
     const generateRunners = new Array<any>();
 
     for (let i = 0; i < runners.length; i++) {
-            console.log(runners[i])
+      console.log(runners[i]);
       const card = {
         id: runners[i].id,
         first_name: runners[i].firstname,
@@ -65,23 +67,25 @@ class DocumentServer {
           parent_group: {
             id: runners[i]?.group?.parentGroup?.id,
             name: runners[i]?.group?.parentGroup?.name,
-                    }
+          },
-                }
+        },
-            }
+      };
-            generateRunners.push(card)
+      generateRunners.push(card);
-            
     }
 
-        const response = await fetch(`${this.baseUrl}/v1/pdfs/contracts?key=${this.apiKey}`, {
+    const response = await fetch(
-            method: 'POST',
+      `${this.baseUrl}/v1/pdfs/contracts?key=${this.apiKey}`,
+      {
+        method: "POST",
         headers: {
-                'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           locale,
           runners: generateRunners,
         }),
-        });
+      },
+    );
 
     const blob = await response.blob();
     return blob;
@@ -96,16 +100,18 @@ class DocumentServer {
         first_name: runners[i].firstname,
         middle_name: runners[i].middlename,
         last_name: runners[i].lastname,
+        self_service_link: runners[i].selfserviceLink,
         group: {
           id: runners[i].group.id,
           name: runners[i].group.name,
           parent_group: {
             id: runners[i]?.group?.parentGroup?.id,
             name: runners[i]?.group?.parentGroup?.name,
-                    }
+          },
         },
         distance: runners[i].distance,
-                distance_donations: runners[i].distanceDonations.map((distanceDonation: any) =>{
+        distance_donations: runners[i].distanceDonations.map(
+          (distanceDonation: any) => {
             return {
               id: distanceDonation.id,
               amount: distanceDonation.amount,
@@ -115,24 +121,27 @@ class DocumentServer {
                 first_name: distanceDonation.donor.firstname,
                 middle_name: distanceDonation.donor.middlename,
                 last_name: distanceDonation.donor.lastname,
-                            }
+              },
-                        }
+            };
-                }),
+          },
-            }
+        ),
-            generateRunners.push(certificate)
+      };
-            
+      generateRunners.push(certificate);
     }
 
-        const response = await fetch(`${this.baseUrl}/v1/pdfs/certificates?key=${this.apiKey}`, {
+    const response = await fetch(
-            method: 'POST',
+      `${this.baseUrl}/v1/pdfs/certificates?key=${this.apiKey}`,
+      {
+        method: "POST",
         headers: {
-                'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           locale,
           runners: generateRunners,
         }),
-        });
+      },
+    );
 
     const blob = await response.blob();
     return blob;

src/components/pdf_generation/DownloadProgressModal.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";
+	import { onMount } from "svelte";
+	export let download_details = "";
+	export let modal_open;
+	onMount(() => {
+		document.onkeydown = (e) => {
+			e = e || window.event;
+			if (e.key === "Escape") {
+				modal_open = false;
+			}
+			if (e.keyCode === 13) {
+				if (createbtnenabled === true) {
+					createbtnenabled = false;
+					submit();
+				}
+			}
+		};
+	});
+</script>
+
+{#if modal_open}
+	<div
+		class="fixed z-10 inset-0 overflow-y-hidden"
+		use:clickOutside
+		on:click_outside={() => {
+			modal_open = false;
+		}}
+	>
+		<div
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
+		>
+			<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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
+				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-xl">
+					<div class="">
+						<div
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								class="size-6 text-blue-600"
+								fill="currentColor"
+								width="24"
+								height="24"
+								><path fill="none" d="M0 0h24v24H0z" />
+								<path
+									d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+								/></svg
+							>
+						</div>
+						<div class="mt-3 sm:text-left text-base">
+							<h3 class="text-lg leading-6 font-medium text-gray-900">
+								{$_('download_laeuft')}
+							</h3>
+							<div class="w-full">
+								{download_details}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/components/pdf_generation/GenerateRunnerCards.svelte

@@ -1,31 +1,25 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
 	import {
 		RunnerCardService,
 		RunnerOrganizationService,
 		RunnerTeamService,
 	} from "@odit/lfk-client-js";
-  import toast from 'svelte-french-toast'
+	import toast from "svelte-french-toast";
-  import DocumentServer from "./DocumentServer.ts"
+	import DocumentServer from "./DocumentServer.ts";
 
 	import { init } from "@paralleldrive/cuid2";
 	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
+	const documentServer = new DocumentServer(
+		config.baseurl_documentserver,
+		config.documentserver_key
+	);
 
 	export let cards_show = false;
 	export let generate_cards = [];
 	export let generate_runners = [];
 	export let generate_orgs = [];
 	export let generate_teams = [];
-  $: cards_dropdown_open = false;
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
-    ) {
-      cards_dropdown_open = false;
-    }
-  });
 
 	function download(blob, fileName) {
 		const url = window.URL.createObjectURL(blob);
@@ -36,12 +30,10 @@
 		a.click();
 		a.remove();
 		toast.dismiss();
-    toast($_("pdf-successfully-generated"));
+		toast.success($_("pdf-successfully-generated"));
 	}
 
 	function generateRunnerCards(locale) {
-    cards_dropdown_open = false;
-
 		if (generate_orgs.length > 0) {
 			generateOrgCards(locale);
 		} else if (generate_teams.length > 0) {
@@ -55,7 +47,8 @@
 
 	function generateCards(locale) {
 		toast.loading($_("generating-pdf"));
-    documentServer.generateCards(generate_cards, locale)
+		documentServer
+			.generateCards(generate_cards, locale)
 			.then((blob) => {
 				download(blob, `${$_("runnercards")}-${locale}-${createId()}.pdf`);
 			})
@@ -77,7 +70,8 @@
 			}
 			cards.push(card);
 		}
-    documentServer.generateCards(cards, locale)
+		documentServer
+			.generateCards(cards, locale)
 			.then((blob) => {
 				let fileName = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
 				if (generate_runners.length == 1) {
@@ -108,11 +102,13 @@
 				}
 				cards.push(card);
 			}
-      documentServer.generateCards(cards, locale)
+			documentServer
+				.generateCards(cards, locale)
 				.then((blob) => {
-          download(blob, `${$_("runnercards")}_${
+					download(
-            t.name
+						blob,
-          }-${locale}-${createId()}.pdf`)
+						`${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`
+					);
 				})
 				.catch((err) => {});
 		}
@@ -141,11 +137,13 @@
 				}
 				cards.push(card);
 			}
-      await documentServer.generateCards(cards, locale)
+			await documentServer
+				.generateCards(cards, locale)
 				.then((blob) => {
-          download(blob, `${$_("runnercards")}_${
+					download(
-            o.name
+						blob,
-          }_direct-${locale}-${createId()}.pdf`)
+						`${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`
+					);
 				})
 				.catch((err) => {});
 			for (const t of o.teams) {
@@ -163,11 +161,15 @@
 					}
 					cards.push(card);
 				}
-        await documentServer.generateCards(cards, locale)
+				await documentServer
+					.generateCards(cards, locale)
 					.then((blob) => {
-            download(blob, `${$_("runnercards")}_${o.name}_${
+						download(
+							blob,
+							`${$_("runnercards")}_${o.name}_${
 								t.name
-            }-${locale}-${createId()}.pdf`)
+							}-${locale}-${createId()}.pdf`
+						);
 					})
 					.catch((err) => {});
 			}
@@ -176,69 +178,20 @@
 </script>
 
 {#if cards_show}
-  <div id="cards:dropdown" class="relative inline-block">
-    <div>
-      <button
-        on:click={() => {
-          cards_dropdown_open = !cards_dropdown_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-runnercards")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if cards_dropdown_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="cards:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
 	<button
 		on:click={() => {
 			generateRunnerCards("de");
 		}}
-            type="submit"
+		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="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
 	>
-            {$_("german")}
+		{$_("generate-runnercards")}: DE
 	</button>
 	<button
 		on:click={() => {
 			generateRunnerCards("en");
 		}}
-            type="submit"
+		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="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
 	>
-            {$_("english")}
+		{$_("generate-runnercards")}: EN
 	</button>
-        </div>
-      </div>
-    {/if}
-  </div>
 {/if}

src/components/pdf_generation/GenerateRunnerCertificates.svelte

@@ -4,31 +4,23 @@
     DonationService,
     RunnerTeamService,
     RunnerOrganizationService,
+	RunnerService
   } from "@odit/lfk-client-js";
   import { init } from "@paralleldrive/cuid2";
   import toast from "svelte-french-toast";
   import DocumentServer from "./DocumentServer";
   const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
+  const documentServer = new DocumentServer(
-
+    config.baseurl_documentserver,
+    config.documentserver_key
+  );
 
   export let certificates_show = false;
   export let generate_runners = [];
   export let generate_orgs = [];
   export let generate_teams = [];
-  $: certificates_dropdown_open = false;
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
-    ) {
-      certificates_dropdown_open = false;
-    }
-  });
 
   function generateCertificates(locale) {
-    certificates_dropdown_open = false;
-
     if (generate_orgs.length > 0) {
       generateOrgCertificates(locale);
     } else if (generate_teams.length > 0) {
@@ -46,7 +38,7 @@
     a.click();
     a.remove();
     toast.dismiss();
-    toast($_("pdf-successfully-generated"));
+    toast.success($_("pdf-successfully-generated"));
   }
 
   async function generateRunnerCertificates(locale) {
@@ -55,13 +47,15 @@
       (await DonationService.donationControllerGetAll()) || [];
     let certificateRunners = [];
     for (let runner of generate_runners) {
-      runner.distanceDonations =
+	  const linkRunner = await RunnerService.runnerControllerGetOne(runner.id)
+      linkRunner.distanceDonations =
         current_donations.filter((d) => d.runner?.id == runner.id) || [];
-      certificateRunners.push(runner);
+      certificateRunners.push(linkRunner);
     }
-    documentServer.generateCertificates(certificateRunners, locale)
+    documentServer
+      .generateCertificates(certificateRunners, locale)
       .then((blob) => {
-        let fileName = `${$_("certificates")}-${locale}.pdf`
+        let fileName = `${$_("certificates")}-${locale}.pdf`;
         if (generate_runners.length == 1) {
           fileName = `${$_("certificates")}_${
             generate_runners[0].firstname
@@ -79,7 +73,8 @@
       (await DonationService.donationControllerGetAll()) || [];
     for (const t of generate_teams) {
       const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-        t.id
+        t.id,
+        true
       );
       let certificateRunners = [];
       for (let runner of runners) {
@@ -87,12 +82,14 @@
           current_donations.filter((d) => d.runner?.id == runner.id) || [];
         certificateRunners.push(runner);
       }
-      documentServer.generateCertificates(certificateRunners, locale)
+      documentServer
+        .generateCertificates(certificateRunners, locale)
         .then((blob) => {
           count++;
-          download(blob, `${$_("certificates")}_${
+          download(
-            t.name
+            blob,
-          }-${locale}-${createId()}.pdf`)
+            `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`
+          );
         })
         .catch((err) => {});
     }
@@ -110,6 +107,7 @@
       let runners =
         await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
           o.id,
+          true,
 		  true
         );
       let certificateRunners = [];
@@ -118,17 +116,20 @@
           current_donations.filter((d) => d.runner?.id == runner.id) || [];
         certificateRunners.push(runner);
       }
-      await documentServer.generateCertificates(certificateRunners, locale)
+      await documentServer
+        .generateCertificates(certificateRunners, locale)
         .then((blob) => {
-          download(blob, `${$_("certificates")}_${
+          download(
-            o.name
+            blob,
-          }-${locale}-${createId()}.pdf`)
+            `${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`
+          );
         })
         .catch((err) => {});
       for (const t of o.teams) {
         count++;
         let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-          t.id
+          t.id,
+		  true
         );
         let certificateRunners = [];
         for (let runner of runners) {
@@ -136,17 +137,21 @@
             current_donations.filter((d) => d.runner?.id == runner.id) || [];
           certificateRunners.push(runner);
         }
-        await documentServer.generateCertificates(certificateRunners, locale)
+        await documentServer
+          .generateCertificates(certificateRunners, locale)
           .then((blob) => {
-            download(blob, `${$_("certificates")}_${o.name}_${
+            download(
+              blob,
+              `${$_("certificates")}_${o.name}_${
                 t.name
-            }-${locale}-${createId()}.pdf`)
+              }-${locale}-${createId()}.pdf`
+            );
             if (
               count === o.teams.length &&
               count_orgs === generate_orgs.length
             ) {
               toast.dismiss();
-              toast($_("pdfs-successfully-generated"));
+              toast.success($_("pdfs-successfully-generated"));
             }
           })
           .catch((err) => {});
@@ -156,69 +161,20 @@
 </script>
 
 {#if certificates_show}
-  <div id="certificates:dropdown" class="relative inline-block">
-    <div>
-      <button
-        on:click={() => {
-          certificates_dropdown_open = !certificates_dropdown_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-runner-certificates")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if certificates_dropdown_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="certificates:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
   <button
     on:click={() => {
       generateCertificates("de");
     }}
-            type="submit"
+    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="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
   >
-            {$_("german")}
+    {$_("generate-runner-certificates")}: DE
   </button>
   <button
     on:click={() => {
       generateCertificates("en");
     }}
-            type="submit"
+    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="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
   >
-            {$_("english")}
+    {$_("generate-runner-certificates")}: EN
   </button>
-        </div>
-      </div>
-    {/if}
-  </div>
 {/if}

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
 	import {
 		RunnerOrganizationService,
 		RunnerTeamService,
@@ -7,27 +7,23 @@
 	import DocumentServer from "./DocumentServer";
 	import { init } from "@paralleldrive/cuid2";
 	import toast from "svelte-french-toast";
+	import DownloadProgressModal from "./DownloadProgressModal.svelte";
 	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
+	const documentServer = new DocumentServer(
-
+		config.baseurl_documentserver,
+		config.documentserver_key
+	);
 
 	export let sponsoring_contracts_show = false;
 	export let generate_runners = [];
 	export let generate_orgs = [];
 	export let generate_teams = [];
-  $: sponsoring_contracts_download_open = false;
+	//
-  document.addEventListener("click", function (e) {
+	export let download_modal_open = false;
-    if (
+	export let download_details = "";
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
 
 	function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
+		download_modal_open = true;
-
 		if (generate_orgs.length > 0) {
 			generateOrgContracts(locale);
 		} else if (generate_teams.length > 0) {
@@ -45,22 +41,29 @@
 		a.click();
 		a.remove();
 		toast.dismiss();
-    toast($_("pdf-successfully-generated"));
+		toast.success($_("pdf-successfully-generated"));
 	}
 
 	async function generateTeamContracts(locale) {
 		toast.loading($_("generating-pdfs"));
+		let totalCount = generate_teams.length;
 		let count = 0;
 		for (const t of generate_teams) {
 			count++;
+			download_details = `${t.parentGroup.name} > ${t.name}`;
 			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
 				t.id
 			);
-      documentServer.generateContracts(runners, locale)
+			await documentServer
+				.generateContracts(runners, locale)
 				.then((blob) => {
-          download(blob, `${$_("sponsorings")}_${
+					download(
-            t.name
+						blob,
-          }-${locale}-${createId()}.pdf`)
+						`${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`
+					);
+					if (count === totalCount) {
+						download_modal_open = false;
+					}
 				})
 				.catch((err) => {});
 		}
@@ -68,20 +71,30 @@
 
 	async function generateOrgContracts(locale) {
 		toast.loading($_("generating-pdf"));
-    let count_orgs = 0;
+		let totalCount = 0;
 		for (const o of generate_orgs) {
-      count_orgs++;
+			totalCount++;
+			for (const t of o.teams) {
+				totalCount++;
+			}
+		}
+		console.log({ totalCount });
 		let count = 0;
+		for (const o of generate_orgs) {
+			count++;
 			let runners =
 				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
 					o.id,
 					true
 				);
-      await documentServer.generateContracts(runners, locale)
+			download_details = o.name;
+			await documentServer
+				.generateContracts(runners, locale)
 				.then((blob) => {
-          download(blob, `${$_("sponsorings")}_${
+					download(
-            o.name
+						blob,
-          }_direct-${locale}-${createId()}.pdf`)
+						`${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`
+					);
 				})
 				.catch((err) => {});
 			for (const t of o.teams) {
@@ -89,28 +102,39 @@
 				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
 					t.id
 				);
-        await documentServer.generateContracts(runners, locale)
+				download_details = `${o.name} > ${t.name}`;
+				await documentServer
+					.generateContracts(runners, locale)
 					.then((blob) => {
-            download(blob, `${$_("sponsorings")}_${o.name}_${
+						download(
+							blob,
+							`${$_("sponsorings")}_${o.name}_${
 								t.name
-            }-${locale}-${createId()}.pdf`)
+							}-${locale}-${createId()}.pdf`
+						);
+						console.log({ count });
+						if (count === totalCount) {
+							download_modal_open = false;
+						}
 					})
 					.catch((err) => {});
 			}
 		}
 	}
 
-  function generateRunnerContracts(locale) {
+	async function generateRunnerContracts(locale) {
 		toast.loading($_("generating-pdf"));
-    documentServer.generateContracts(generate_runners, locale)
+		await documentServer
+			.generateContracts(generate_runners, locale)
 			.then((blob) => {
-        let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`
+				let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
 				if (generate_runners.length == 1) {
 					fileName = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
 						generate_runners[0].lastname
 					}-${locale}-${createId()}.pdf`;
 				}
 				download(blob, fileName);
+				download_modal_open = false;
 			})
 			.catch((err) => {
 				console.error(err);
@@ -119,70 +143,21 @@
 </script>
 
 {#if sponsoring_contracts_show}
-  <div id="sponsoring:dropdown" class="relative inline-block">
+	<DownloadProgressModal {download_details} modal_open={download_modal_open} />
-    <div>
-      <button
-        on:click={() => {
-          sponsoring_contracts_download_open =
-            !sponsoring_contracts_download_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-sponsoring-contracts")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if sponsoring_contracts_download_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="sponsoring:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
 	<button
 		on:click={() => {
 			generateSponsoringContract("de");
 		}}
-            type="submit"
+		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="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
 	>
-            {$_("german")}
+		{$_("generate-sponsoring-contracts")}: DE
 	</button>
 	<button
 		on:click={() => {
 			generateSponsoringContract("en");
 		}}
-            type="submit"
+		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="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
 	>
-            {$_("english")}
+		{$_("generate-sponsoring-contracts")}: EN
 	</button>
-        </div>
-      </div>
-    {/if}
-  </div>
 {/if}

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 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

@@ -117,14 +117,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -137,20 +137,20 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
@@ -160,18 +160,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-runner")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-add-a-new-runner"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="firstname"
@@ -189,7 +189,7 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -212,7 +212,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -231,7 +231,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -248,7 +248,7 @@
                     >{$_("team")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id
@@ -281,7 +281,7 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isPhoneValidOrEmpty}
                     <span
@@ -309,7 +309,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span
@@ -323,13 +323,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("create")}
           </button>
@@ -338,7 +338,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/runners/DeleteRunnerModal.svelte

@@ -31,14 +31,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -51,20 +51,20 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
@@ -74,15 +74,10 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <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"
           >
             {$_("delete")}
           </button>
@@ -104,7 +99,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/runners/ImportRunnerModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import csv from "csvtojson";
+	import { parse } from "papaparse";
 	import { read as readXlsx, utils as xlsx_utils } from "xlsx";
 	import { _ } from "svelte-i18n";
 	import { clickOutside } from "../base/outsideclick";
@@ -10,7 +10,6 @@
 		RunnerOrganizationService,
 	} from "@odit/lfk-client-js";
 	import { createEventDispatcher } from "svelte";
-  import Select from "svelte-select";
 	import toast from "svelte-french-toast";
 	export let opened_from;
 	export let passed_org;
@@ -46,6 +45,7 @@
 			return { label: r.name, value: `ORG_${r.id}` };
 		});
 		groups = groups.concat(orgs);
+		groups.sort((a, b) => a.label.localeCompare(b.label));
 		RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
 			const teams = val.map((r) => {
 				return {
@@ -54,6 +54,7 @@
 				};
 			});
 			groups = groups.concat(teams);
+			groups.sort((a, b) => a.label.localeCompare(b.label));
 		});
 	});
 	let selected_org;
@@ -62,13 +63,14 @@
 	let recent_processed = true;
 	$: json_output = [];
 	$: {
+		if (json_output.length === 0) {
 			if (files) {
 				if (
 					files[0].type ===
 					"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
 				) {
 					const reader = new FileReader();
-        reader.addEventListener("load", async (e) => {
+					reader.addEventListener("loadend", (e) => {
 						const data = new Uint8Array(e.target.result);
 						const out = readXlsx(data, { type: "array" });
 						json_output = xlsx_utils.sheet_to_json(
@@ -78,16 +80,17 @@
 					reader.readAsArrayBuffer(files[0]);
 				} else {
 					const reader = new FileReader();
-        reader.addEventListener("load", async (e) => {
+					reader.addEventListener("loadend", (e) => {
-          json_output = await csv({
+						json_output = parse(e.target.result, {
-            delimiter: [";", ","],
+							delimitersToGuess: [";", ","],
-            trim: true,
+							header: true,
-          }).fromString(e.target.result);
+						}).data;
 					});
 					reader.readAsText(files[0]);
 				}
 			}
 		}
+	}
 	function importAction() {
 		if (recent_processed === true) {
 			toast.loading($_("runners-are-being-imported"));
@@ -150,7 +153,7 @@
 							dispatch("created", { runners: resp });
 							toast.dismiss();
 							recent_processed = true;
-              toast($_("import-finished"));
+							toast.success($_("import-finished"));
 							cancelModal();
 						})
 						.catch((err) => {
@@ -170,7 +173,7 @@
 							dispatch("created", { runners: resp });
 							toast.dismiss();
 							recent_processed = true;
-              toast($_("import-finished"));
+							toast.success($_("import-finished"));
 							cancelModal();
 						})
 						.catch((err) => {
@@ -187,14 +190,14 @@
 
 {#if import_modal_open}
 	<div
-    class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={() => {
 			cancelModal();
 		}}
 	>
 		<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 h-screen text-center sm:block p-0 lg:p-4"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
@@ -207,20 +210,22 @@
 				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-max sm:w-full"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				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"
+					class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl lg:rounded-xl"
+				>
+					<div class="">
+						<div
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
-                class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								fill="currentColor"
 								width="24"
 								height="24"
@@ -230,15 +235,15 @@
 								/></svg
 							>
 						</div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+						<div class="mt-3 sm:mt-0 sm:text-left w-full">
 							<h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
 								{$_("runner-import")}
 							</h3>
 						</div>
 					</div>
-          <div class="mt-5 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+					<div class="sm:text-left w-full">
 						{#if json_output.length === 0}
-              <div class="mt-2 mb-6">
+							<div class="mb-6">
 								<p class="text-sm text-gray-500">
 									{$_("please-provide-the-required-csv-xlsx-file")}
 								</p>
@@ -256,7 +261,7 @@
 										cancelModal();
 									}}
 									type="button"
-                  class="w-full 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 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm"
+									class="w-full 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 hidden lg:block"
 								>
 									{$_("cancel")}
 								</button>
@@ -268,7 +273,7 @@
 								<select
 									name="team"
 									bind:value={selected_org}
-                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+									class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 								>
 									{#each passed_orgs as o}
 										<option value={o.id}>{o.name}</option>
@@ -278,24 +283,14 @@
 							{/if}
 							{#if opened_from === "RunnerOverview"}
 								<p>{$_("group")}</p>
-                <Select
+								<select
-                  containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+									bind:value={selected_org_or_team}
-                  itemFilter={(label, filterText, option) =>
+									class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-                    label.toLowerCase().includes(filterText.toLowerCase()) ||
+								>
-                    option.id.value
+									{#each groups as g}
-                      .toString()
+										<option value={g.value}>{g.label}</option>
-                      .startsWith(filterText.toLowerCase())}
+									{/each}
-                  items={groups}
+								</select>
-                  showChevron={true}
-                  placeholder={$_(
-                    "search-for-an-organization-or-team-by-name-or-id"
-                  )}
-                  noOptionsMessage={$_("no-organization-or-team-found")}
-                  on:select={(selectedValue) => {
-                    selected_org_or_team = selectedValue.detail.value;
-                  }}
-                  on:clear={() => (selected_org_or_team = null)}
-                />
 							{/if}
 							{#if opened_from === "OrgDetail"}
 								<p>
@@ -304,15 +299,8 @@
 									})}
 								</p>
 							{/if}
-              <input
-                type="search"
-                bind:value={searchvalue}
-                placeholder={$_("datatable.search")}
-                aria-label={$_("datatable.search")}
-                class="p-2 w-full"
-              />
 							<div class="relative w-full mt-4 mb-4">
-                <div class="w-full overflow-x-auto">
+								<div class="w-full overflow-x-auto max-h-[50vh]">
 									<table class="divide-y divide-gray-200 w-full">
 										<thead class="bg-gray-50">
 											<tr class="odd:bg-white even:bg-gray-100">
@@ -378,7 +366,7 @@
 									class:opacity-50={!importButtonEnabled}
 									on:click={importAction}
 									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-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"
 								>
 									{$_("import-runners")}
 								</button>
@@ -387,7 +375,7 @@
 										cancelModal();
 									}}
 									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"
+									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"
 								>
 									{$_("cancel")}
 								</button>

src/components/runners/RunnerDetail.svelte

@@ -52,12 +52,17 @@
 					return { label: r.name, value: r };
 				});
 				groups = groups.concat(orgs);
+				groups.sort((a, b) => a.label.localeCompare(b.label));
 				RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
 					const teams = val.map((r) => {
 						return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
 					});
 					groups = groups.concat(teams);
-          group = groups.find((g) => g.value.id == editable.group);
+					groups.sort((a, b) => a.label.localeCompare(b.label));
+					let tmp_group = groups.find((g) => g.value.id == editable.group);
+					if (tmp_group) {
+						group = tmp_group.value.id;
+					}
 				});
 			}
 		);
@@ -100,52 +105,34 @@
 				<nav class="w-full flex">
 					<ol class="list-none flex flex-row items-center justify-start">
 						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="/runners/"
+								><svg
 									xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="flex-shrink-0 w-5 h-5 mr-2"
-                fill="currentColor"
 									width="24"
 									height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_("runners")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
 									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
 									stroke-linecap="round"
 									stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
+									class="inline-block"
-                height="1em"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                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>
+								{$_("runners")}</a
-            <li class="flex items-center">
-              <span class="mr-2"
-                >{original_data.firstname}
-                {original_data.middlename || ""}
-                {original_data.lastname}</span
 							>
 						</li>
 					</ol>
 				</nav>
 			</div>
 		</div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
 			{original_data.firstname}
 			{original_data.middlename || ""}
-      {original_data.lastname}
+			{original_data.lastname} [#{params.runnerid}]
 			<span data-id="runner_actions_${editable.id}">
 				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
+					<div>
 						{#if delete_triggered}
 							<button
 								on:click={deleteRunner}
@@ -159,6 +146,23 @@
 								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
 							>
+						{:else}
+							<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-runner")}</button
+							>
+							<button
+								disabled={!save_enabled}
+								class:opacity-50={!save_enabled}
+								type="button"
+								on:click={submit}
+								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
+							>
 						{/if}
 						<GenerateSponsoringContracts
 							bind:sponsoring_contracts_show
@@ -169,32 +173,13 @@
 							bind:certificates_show
 							bind:generate_runners
 						/>
-          {#if !delete_triggered}
+					</div>
-            <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-runner")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            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"
-            >{$_("save-changes")}</button
-          >
 				{/if}
 			</span>
 		</div>
 		<!--  -->
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="firstname" class="font-medium text-gray-700"
+			<label for="firstname" class="font-semibold text-gray-700"
 				>{$_("first-name")}</label
 			>
 			<input
@@ -206,7 +191,7 @@
 				class:focus:ring-red-500={!isFirstnameValid}
 				bind:value={editable.firstname}
 				name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isFirstnameValid}
 				<span
@@ -216,8 +201,8 @@
 				</span>
 			{/if}
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="middlename" class="font-medium text-gray-700"
+			<label for="middlename" class="font-semibold text-gray-700"
 				>{$_("middle-name")}</label
 			>
 			<input
@@ -226,11 +211,11 @@
 				type="text"
 				bind:value={editable.middlename}
 				name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="lastname" class="font-medium text-gray-700"
+			<label for="lastname" class="font-semibold text-gray-700"
 				>{$_("last-name")}</label
 			>
 			<input
@@ -242,7 +227,7 @@
 				class:focus:border-red-500={!isLastnameValid}
 				class:focus:ring-red-500={!isLastnameValid}
 				name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isLastnameValid}
 				<span
@@ -252,8 +237,8 @@
 				</span>
 			{/if}
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="email" class="font-medium text-gray-700"
+			<label for="email" class="font-semibold text-gray-700"
 				>{$_("e-mail-adress")}</label
 			>
 			<input
@@ -265,7 +250,7 @@
 				class:focus:border-red-500={!isEmailValid}
 				class:focus:ring-red-500={!isEmailValid}
 				name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isEmailValid}
 				<span
@@ -275,40 +260,40 @@
 				</span>
 			{/if}
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
+			<label for="phone" class="font-semibold text-gray-700"
+				>{$_("phone")}</label
+			>
 			<input
 				autocomplete="off"
 				placeholder={$_("phone")}
 				type="tel"
 				bind:value={editable.phone}
 				name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <span class="font-medium text-gray-700">{$_("group")}</span>
+			<span class="font-semibold text-gray-700">{$_("group")}</span>
-      <Select
+			<select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
+				bind:value={editable.group}
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
+			>
-          option.id.value.toString().startsWith(filterText.toLowerCase())}
+				{#each groups as g}
-        items={groups}
+					<option value={g.value.id}>{g.label}</option>
-        showChevron={true}
+				{/each}
-        placeholder={$_("search-for-an-organization-or-team-by-name-or-id")}
+			</select>
-        noOptionsMessage={$_("no-organization-or-team-found")}
-        bind:selectedValue={group}
-        on:select={(selectedValue) => {
-          editable.group = selectedValue.detail.value.id;
-        }}
-        on:clear={() => (editable.group = null)}
-      />
 		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <span class="font-medium text-gray-700">{$_("distance")}</span>
+			<span class="font-semibold text-gray-700">{$_("distance")}</span>
 			<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

@@ -1,26 +1,221 @@
 <script>
+	import {
+		RunnerOrganizationService,
+		RunnerService,
+		RunnerTeamService,
+	} from "@odit/lfk-client-js";
+	import {
+		createSvelteTable,
+		flexRender,
+		getCoreRowModel,
+		getFilteredRowModel,
+		getPaginationRowModel,
+		getSortedRowModel,
+		renderComponent,
+	} from "@tanstack/svelte-table";
+	import { onMount } from "svelte";
+	import { writable } from "svelte/store";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import InputElement from "../shared/InputElement.svelte";
+	import TableActions from "../shared/TableActions.svelte";
+	import { groupFilter } from "../shared/tablefilters";
+	import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
+	import TableBottom from "../shared/TableBottom.svelte";
+	import TableHeader from "../shared/TableHeader.svelte";
+
+	$: selectedRunners =
+		$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
+	$: selected =
+		$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
+
+	$: active_delete = undefined;
+	let dataLoaded = false;
+	export let created_via = "all";
+	export let current_runners = [];
+	$: sponsoring_contracts_show = selected.length > 0;
+	$: cards_show = selected.length > 0;
+	$: certificates_show = selected.length > 0;
+	$: teams = [];
+	$: orgs = [];
+
+	export const addRunners = (runners) => {
+		current_runners = current_runners.concat(...runners);
+		options.update((options) => ({
+			...options,
+			data: current_runners,
+		}));
+	};
+
+	//Section table
+	const columns = [
+		{
+			accessorKey: "id",
+			header: () => "id",
+			filterFn: `equalsString`,
+		},
+		{
+			accessorKey: "firstname",
+			header: () => $_("first-name"),
+			filterFn: `includesString`,
+		},
+		{
+			accessorKey: "middlename",
+			header: () => $_("middle-name"),
+			cell: (info) => {
+				if (!info || !info.getValue()) {
+					return "";
+				}
+				return info.getValue();
+			},
+			filterFn: `includesString`,
+		},
+		{
+			accessorKey: "lastname",
+			header: () => $_("last-name"),
+			filterFn: `includesString`,
+		},
+		{
+			accessorKey: "created_via",
+			header: () => "created_via",
+			filterFn: `includesString`,
+		},
+		{
+			accessorKey: "group",
+			header: () => $_("group"),
+			cell: (info) => {
+				const group = info.getValue();
+				if (group.responseType === "RUNNERORGANIZATION") {
+					return group.name;
+				}
+				return `${group.parentGroup.name} > ${group.name}`;
+			},
+			filterFn: `group`,
+			sortingFn: (rowA, rowB, col) => {
+				return rowA.original.group.name.localeCompare(rowB.original.group.name);
+			},
+		},
+		{
+			accessorKey: "distance",
+			header: () => $_("distance"),
+			sortingFn: (rowA, rowB, col) => {
+				return rowA.original.distance > rowB.original.distance;
+			},
+			cell: (info) => {
+				if (info.getValue() < 1000) {
+					return `${info.getValue()} m`;
+				}
+				return `${(info.getValue() / 1000).toFixed(1)} km`;
+			},
+			enableColumnFilter: false,
+		},
+		{
+			accessorKey: "actions",
+			header: () => $_("action"),
+			cell: (info) => {
+				return renderComponent(TableActions, {
+					detailsLink: `/runners/${info.row.original.id}`,
+					deleteAction: () => {
+						active_delete =
+							current_runners[
+								current_runners.findIndex((r) => r.id == info.row.original.id)
+							];
+					},
+					deleteEnabled:
+						store.state.jwtinfo.userdetails.permissions.includes(
+							"RUNNER:DELETE"
+						),
+				});
+			},
+			enableColumnFilter: false,
+			enableSorting: false,
+		},
+	];
+	const options = writable({
+		data: [],
+		columns: columns,
+		filterFns: {
+			group: groupFilter,
+		},
+		initialState: {
+			pagination: {
+				pageSize: 50,
+			},
+		},
+		enableRowSelection: true,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+	});
+	const table = createSvelteTable(options);
+
+	async function deleteRunner(delete_runner_id) {
+		await RunnerService.runnerControllerRemove(delete_runner_id, true);
+		current_runners = current_runners.filter((r) => r.id !== delete_runner_id);
+		options.update((options) => ({
+			...options,
+			data: current_runners,
+		}));
+		toast.success($_("runner-deleted"));
+	}
+
+	onMount(async () => {
+		RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+			teams = val;
+		});
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				orgs = val;
+			}
+		);
+
+		let page = 0;
+		while (page >= 0) {
+			const runners = await RunnerService.runnerControllerGetAll(
+				page,
+				500,
+				created_via
+			);
+			if (runners.length == 0) {
+				page = -2;
+			}
+
+			current_runners = current_runners.concat(...runners);
+			options.update((options) => ({
+				...options,
+				data: current_runners,
+			}));
+
+			dataLoaded = true;
+			page++;
+		}
+	});
 	import { _ } from "svelte-i18n";
 	import store from "../../store";
 	import AddRunnerModal from "./AddRunnerModal.svelte";
 	import ImportRunnerModal from "./ImportRunnerModal.svelte";
-  import RunnersOverview from "./RunnersOverview.svelte";
+	import toast from "svelte-french-toast";
 	$: current_runners = [];
 	export let modal_open = false;
 	export let import_modal_open = false;
-  let addRunners;
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("runners")}
 	</h4>
+	{#if created_via !== "all"}
+		<p>created_via={created_via}</p>
+	{/if}
 	{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}
 		<button
 			on:click={() => {
 				modal_open = true;
 			}}
 			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:w-auto sm:text-sm mt-1 sm:mt-0"
+			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:w-auto sm:text-sm mb-1 lg:mb-0"
 		>
 			{$_("laeufer-hinzufuegen")}
 		</button>
@@ -29,12 +224,88 @@
 				import_modal_open = true;
 			}}
 			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:w-auto sm:text-sm mt-1 sm:mt-0"
+			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:w-auto sm:text-sm mb-1 lg:mb-0"
 		>
 			{$_("import-runners")}
 		</button>
 	{/if}
-  <RunnersOverview bind:current_runners bind:addRunners />
+	<DeleteRunnerModal
+		delete_runner={active_delete}
+		modal_open={active_delete != undefined}
+		on:delete={(event) => {
+			deleteRunner(event.detail.id);
+		}}
+	/>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
+		{#if !dataLoaded}
+			<div
+				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">{$_("runners-are-being-loaded")}</p>
+				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			</div>
+		{:else}
+			<GenerateSponsoringContracts
+				bind:sponsoring_contracts_show
+				bind:generate_runners={selectedRunners}
+			/>
+			<GenerateRunnerCards
+				bind:cards_show
+				bind:generate_runners={selectedRunners}
+			/>
+			<GenerateRunnerCertificates
+				bind:certificates_show
+				bind:generate_runners={selectedRunners}
+			/>
+			<div class="overflow-x-auto">
+				<table class="w-full">
+					<thead class="border-b border-gray-400">
+						{#each $table.getHeaderGroups() as headerGroup}
+							<tr class="select-none">
+								<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
+									<InputElement
+										type="checkbox"
+										checked={$table.getIsAllRowsSelected()}
+										indeterminate={$table.getIsSomeRowsSelected()}
+										on:change={() => $table.toggleAllRowsSelected()}
+									/>
+								</th>
+								{#each headerGroup.headers as header}
+									<TableHeader {header} />
+								{/each}
+							</tr>
+						{/each}
+					</thead>
+					<tbody>
+						{#each $table.getRowModel().rows as row}
+							<tr class="odd:bg-white even:bg-gray-100">
+								<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+									<InputElement
+										type="checkbox"
+										checked={row.getIsSelected()}
+										on:change={() => row.toggleSelected()}
+									/>
+								</td>
+								{#each row.getVisibleCells() as cell}
+									<td>
+										<svelte:component
+											this={flexRender(
+												cell.column.columnDef.cell,
+												cell.getContext()
+											)}
+										/>
+									</td>
+								{/each}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+			<div class="h-2" />
+		{/if}
+	{/if}
+	<TableBottom {table} {selected} />
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}
@@ -58,3 +329,9 @@
 		}}
 	/>
 {/if}
+
+<style>
+	table tbody tr td:nth-child(2) {
+		font-family: monospace;
+	}
+</style>

src/components/runners/RunnersOverview.svelte

@@ -1,267 +0,0 @@
-<script>
-  import {
-    RunnerOrganizationService,
-    RunnerService,
-    RunnerTeamService,
-  } from "@odit/lfk-client-js";
-  import {
-    createSvelteTable,
-    flexRender,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-    renderComponent,
-  } from "@tanstack/svelte-table";
-  import { onMount } from "svelte";
-  import { _ } from "svelte-i18n";
-  import { writable } from "svelte/store";
-  import store from "../../store";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import InputElement from "../shared/InputElement.svelte";
-  import TableActions from "../shared/TableActions.svelte";
-  import { groupFilter } from "../shared/tablefilters";
-  import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
-  import TableBottom from "../shared/TableBottom.svelte";
-  import TableHeader from "../shared/TableHeader.svelte";
-
-  $: selectedRunners =
-    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
-  $: selected =
-    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
-
-  $: active_delete = undefined;
-  let dataLoaded = false;
-  export let current_runners = [];
-  $: sponsoring_contracts_show = selected.length > 0;
-  $: cards_show = selected.length > 0;
-  $: certificates_show = selected.length > 0;
-  $: teams = [];
-  $: orgs = [];
-
-  export const addRunners = (runners) => {
-    current_runners = current_runners.concat(...runners);
-    options.update((options) => ({
-      ...options,
-      data: current_runners,
-    }));
-  };
-
-  //Section table
-  const columns = [
-    {
-      accessorKey: "id",
-      header: () => "id",
-      filterFn: `equalsString`,
-    },
-    {
-      accessorKey: "firstname",
-      header: () => $_("first-name"),
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "middlename",
-      header: () => $_("middle-name"),
-      cell: (info) => {
-        if (!info || !info.getValue()) {
-          return "";
-        }
-        return info.getValue();
-      },
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "lastname",
-      header: () => $_("last-name"),
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "group",
-      header: () => $_("group"),
-      cell: (info) => {
-        const group = info.getValue();
-        if (group.responseType === "RUNNERORGANIZATION") {
-          return group.name;
-        }
-        return `${group.parentGroup.name} > ${group.name}`;
-      },
-      filterFn: `group`,
-    },
-    {
-      accessorKey: "distance",
-      header: () => $_("distance"),
-      cell: (info) => {
-        if (info.getValue() < 1000) {
-          return `${info.getValue()} m`;
-        }
-        return `${(info.getValue() / 1000).toFixed(1)} km`;
-      },
-      enableColumnFilter: false,
-    },
-    {
-      accessorKey: "actions",
-      header: () => $_("action"),
-      cell: (info) => {
-        return renderComponent(TableActions, {
-          detailsLink: `./${info.row.original.id}`,
-          deleteAction: () => {
-            active_delete =
-              current_runners[
-                current_runners.findIndex((r) => r.id == info.row.original.id)
-              ];
-          },
-          deleteEnabled:
-            store.state.jwtinfo.userdetails.permissions.includes(
-              "RUNNER:DELETE"
-            ),
-        });
-      },
-      enableColumnFilter: false,
-      enableSorting: false,
-    },
-  ];
-  const options = writable({
-    data: [],
-    columns: columns,
-    filterFns: {
-      group: groupFilter,
-    },
-    initialState: {
-      pagination: {
-        pageSize: 50,
-      },
-    },
-    enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-  const table = createSvelteTable(options);
-
-  async function deleteRunner(delete_runner_id) {
-    await RunnerService.runnerControllerRemove(delete_runner_id, true);
-    current_runners = current_runners.filter((r) => r.id !== delete_runner_id);
-    options.update((options) => ({
-      ...options,
-      data: current_runners,
-    }));
-    toast($_("runner-deleted"));
-  }
-
-  onMount(async () => {
-    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-      teams = val;
-    });
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      (val) => {
-        orgs = val;
-      }
-    );
-
-    let page = 0;
-    while (page >= 0) {
-      const runners = await RunnerService.runnerControllerGetAll(page, 500);
-      if (runners.length == 0) {
-        page = -2;
-      }
-
-      current_runners = current_runners.concat(...runners);
-      options.update((options) => ({
-        ...options,
-        data: current_runners,
-      }));
-
-      dataLoaded = true;
-      page++;
-    }
-  });
-</script>
-
-<DeleteRunnerModal
-  delete_runner={active_delete}
-  modal_open={active_delete != undefined}
-  on:delete={(event) => {
-    deleteRunner(event.detail.id);
-  }}
-/>
-{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
-  {#if !dataLoaded}
-    <div
-      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">{$_("runners-are-being-loaded")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:else}
-    <div class="h-12 mt-2">
-      <GenerateSponsoringContracts
-        bind:sponsoring_contracts_show
-        bind:generate_runners={selectedRunners}
-      />
-      <GenerateRunnerCards
-        bind:cards_show
-        bind:generate_runners={selectedRunners}
-      />
-      <GenerateRunnerCertificates
-        bind:certificates_show
-        bind:generate_runners={selectedRunners}
-      />
-    </div>
-    <div class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="border-b border-gray-400">
-          {#each $table.getHeaderGroups() as headerGroup}
-            <tr class="select-none">
-              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
-                <InputElement
-                  type="checkbox"
-                  checked={$table.getIsAllRowsSelected()}
-                  indeterminate={$table.getIsSomeRowsSelected()}
-                  on:change={() => $table.toggleAllRowsSelected()}
-                />
-              </th>
-              {#each headerGroup.headers as header}
-                <TableHeader {header} />
-              {/each}
-            </tr>
-          {/each}
-        </thead>
-        <tbody>
-          {#each $table.getRowModel().rows as row}
-            <tr class="odd:bg-white even:bg-gray-100">
-              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
-                <InputElement
-                  type="checkbox"
-                  checked={row.getIsSelected()}
-                  on:change={() => row.toggleSelected()}
-                />
-              </td>
-              {#each row.getVisibleCells() as cell}
-                <td>
-                  <svelte:component
-                    this={flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
-                  />
-                </td>
-              {/each}
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-    <div class="h-2" />
-  {/if}
-{/if}
-<TableBottom {table} {selected} />
-
-<style>
-  table tbody tr td:nth-child(2) {
-    font-family: monospace;
-  }
-</style>

src/components/scans/AddScanModal.svelte

@@ -68,14 +68,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -88,18 +88,18 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -112,18 +112,18 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-scan-fixed-only")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-nessecary-information-to-create-a-new-scan"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="donor"
@@ -131,7 +131,7 @@
                     >{$_("runner")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}
@@ -160,7 +160,7 @@
                       type="number"
                       step="1"
                       name="donation_amount_eur"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="400"
                     />
                     <span
@@ -180,13 +180,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("create")}
           </button>
@@ -195,7 +195,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

src/components/scans/DeleteScanModal.svelte

@@ -33,14 +33,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -53,20 +53,20 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
@@ -76,21 +76,21 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <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">
+              <div class="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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <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"
           >
             {$_("delete")}
           </button>
@@ -99,7 +99,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </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) => {
@@ -111,59 +111,44 @@
 				<nav class="w-full flex">
 					<ol class="list-none flex flex-row items-center justify-start">
 						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="./"
-                fill="currentColor"
+								><svg
 									xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
 									width="24"
 									height="24"
-                ><path
-                  fill="currentColor"
-                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">Scans</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
 									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
 									stroke-linecap="round"
 									stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
+									class="inline-block"
-                height="1em"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                width="1em"
+								> Scans</a
-                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">
-              <span class="mr-2">{original_data.id}</span>
-            </li>
 					</ol>
 				</nav>
 			</div>
 		</div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
 			{runner.value?.firstname}
 			{runner.value?.middlename || ""}
 			{runner.value?.lastname}
-      #{original_data.id}
+			- Scan #{original_data.id}
-      <span data-id="donation_actions_${original_data.id}">
+			<div data-id="donation_actions_${original_data.id}">
 				{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
 					{#if delete_triggered}
 						<button
 							on:click={deleteScan}
-              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:ml-3 sm:w-auto sm:"
+							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-deletion")}</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:"
+							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}
@@ -173,7 +158,7 @@
 								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:ml-3 sm:w-auto sm:"
+							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-scan")}</button
 						>
 					{/if}
@@ -184,11 +169,11 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-            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:ml-3 sm:w-auto sm:"
+						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
 					>
 				{/if}
-      </span>
+			</div>
 		</div>
 		<!--  -->
 		<div class="w-full inline-flex">
@@ -218,7 +203,7 @@
 				</label>
 				<a
 					href="../tracks"
-          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
 					>{editable.track.name}
 				</a>
 			</div>
@@ -233,7 +218,7 @@
 				>{$_("runner")}</label
 			>
 			<Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					filterRunners(label, filterText, option)}
 				items={current_runners}
@@ -266,7 +251,7 @@
 					type="number"
 					step="1"
 					name="scan_distance"
-          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
 					placeholder="400"
 				/>
 				<span

src/components/scans/ScanValid.svelte

@@ -5,12 +5,12 @@
 
 {#if valid}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
     >{$_("valid")}</span
   >
 {:else}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
     >{$_("invalid")}</span
   >
 {/if}

src/components/scans/Scans.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("scans")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}

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

@@ -72,14 +72,14 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
     }}
   >
     <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 h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -92,18 +92,18 @@
         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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -115,25 +115,25 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:mt-0">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-scanstation")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "please-provide-the-required-information-to-create-a-new-scanstation"
                   )}
                 </p>
               </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                 <div class="col-span-6">
                   <label
                     for="track"
                     class="block text-sm font-medium text-gray-700">Track</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id
@@ -161,11 +161,11 @@
                     bind:value={description}
                     type="text"
                     name="description"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
-                  <label for="enabled" class="font-medium text-gray-700"
+                  <label for="enabled" class="font-semibold text-gray-700"
                     >{$_("enabled_large")}</label
                   >
                   <br />
@@ -178,7 +178,7 @@
                       name="enabled"
                       type="checkbox"
                       checked={enabled}
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
                     />
                     {$_("this-scanstation-is")}
                     {#if enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
@@ -188,13 +188,13 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             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-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"
           >
             {$_("create")}
           </button>
@@ -203,7 +203,7 @@
               modal_open = false;
             }}
             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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel")}
           </button>

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) => {});
@@ -24,12 +24,12 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     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"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -42,18 +42,18 @@
         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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -62,11 +62,11 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("attention")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
                     "do-you-want-to-delete-this-donor-with-all-related-donations"
@@ -78,18 +78,18 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={deleteStation}
             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"
+            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"
           >
             {$_("confirm-delete-station-with-all-scans")}
           </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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel-keep-station")}
           </button>

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { _ } from "svelte-i18n";
 	import { tick } from "svelte";
-	import bwipjs from "bwip-js";
+	import { toCanvas } from "@bwip-js/browser";
 	import toast from "svelte-french-toast";
 
 	export let copy_modal_open;
@@ -51,7 +51,7 @@
 		if (bcid == "code128") {
 			codeconfig.height = 10;
 		}
-		bwipjs.toCanvas(canvas, codeconfig);
+		toCanvas(canvas, codeconfig);
 		return canvas.toDataURL("image/png");
 	}
 </script>
@@ -60,9 +60,9 @@
 	{#if valueCopy != null}
 		<textarea bind:this={areaDom}>{valueCopy}</textarea>
 	{/if}
-	<div class="fixed z-10 inset-0 overflow-y-auto">
+	<div class="fixed z-10 inset-0 overflow-y-hidden">
 		<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 h-screen text-center sm:block p-0 lg:p-4"
 		>
 			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
 				<div
@@ -75,18 +75,18 @@
 				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"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
 				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-xl">
-					<div class="sm:flex sm:items-start">
+					<div class="">
 						<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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
 							<svg
-								class="h-6 w-6 text-blue-600"
+								class="size-6 text-blue-600"
 								fill="currentColor"
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
@@ -96,11 +96,11 @@
 								/></svg
 							>
 						</div>
-						<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+						<div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
 							<h3 class="text-lg leading-6 font-medium text-gray-900">
 								{$_("token")}
 							</h3>
-							<div class="mt-2 mb-6">
+							<div class="mb-6">
 								<p class="text-sm text-gray-500">
 									{$_(
 										"the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again"
@@ -109,7 +109,7 @@
 									{$_("please-copy-the-token-and-store-it-somewhere-save")}
 								</p>
 							</div>
-							<div class="mt-2 mb-6">
+							<div class="mb-6">
 								<label
 									for="token"
 									class="block text-sm font-medium text-gray-700"
@@ -119,7 +119,7 @@
 									<p
 										name="token"
 										class:bg-green-200={copied}
-										class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+										class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
 									>
 										{new_station.key}
 									</p>
@@ -170,7 +170,7 @@
 						<img
 							class:w-[50%]={is_qrcode}
 							class:w-full={!is_qrcode}
-							class="md:w-auto mb-2 mx-auto"
+							class="w-full lg:max-w-[50vw] lg:max-h-[10rem] object-contain mb-2 mx-auto"
 							alt="Registrierungscode"
 							src={textToBase64Barcode(window.config.baseurl, is_qrcode)}
 						/>
@@ -178,17 +178,19 @@
 						<img
 							class:w-[50%]={is_qrcode}
 							class:w-full={!is_qrcode}
-							class="md:w-auto mb-2 mx-auto"
+							class="w-full lg:max-w-[50vw] lg:max-h-[10rem] object-contain mb-2 mx-auto"
 							alt="Registrierungscode"
 							src={barcode}
 						/>
 					</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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10"
+				>
 					<button
 						on:click={close}
 						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-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-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-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
 					>
 						{$_("yes-i-copied-the-token")}
 					</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) => {
@@ -69,44 +69,30 @@
 				<nav class="w-full flex">
 					<ol class="list-none flex flex-row items-center justify-start">
 						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="./"
-                fill="currentColor"
+								><svg
 									xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
 									width="24"
 									height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_("scanstation")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
 									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
 									stroke-linecap="round"
 									stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
+									class="inline-block"
-                height="1em"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                width="1em"
+								>
-                xmlns="http://www.w3.org/2000/svg"
+								{$_("scanstations")}</a
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
 							>
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">#{original_data.id}</span>
 						</li>
 					</ol>
 				</nav>
 			</div>
 		</div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
-      #{original_data.id}
+			{$_("scanstation")} #{original_data.id}<br>"{original_data.description}"
-      <span data-id="stations_actions_${editable.id}">
+			<div data-id="stations_actions_${editable.id}">
 				{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
 					{#if delete_triggered}
 						<button
@@ -139,19 +125,19 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-            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"
+						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
 					>
 				{/if}
-      </span>
+			</div>
 		</div>
 		<!--  -->
-    <div class="text-sm w-full">
+		<div class="mt-2 text-sm w-full">
-      <label for="track" class="block text-sm font-medium text-gray-700"
+			<label for="track" class="block text-sm font-semibold text-gray-700"
 				>Track</label
 			>
 			<Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				containerClasses="rounded-l-md focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					label.toLowerCase().includes(filterText.toLowerCase()) ||
 					option.value.id.toString().startsWith(filterText.toLowerCase())}
@@ -165,8 +151,8 @@
 				on:clear={() => (track = null)}
 			/>
 		</div>
-    <div class="text-sm w-full">
+		<div class="mt-2 text-sm w-full">
-      <label for="description" class="font-medium text-gray-700"
+			<label for="description" class="font-semibold text-gray-700"
 				>{$_("description")}</label
 			>
 			<input
@@ -175,11 +161,11 @@
 				type="text"
 				bind:value={editable.description}
 				name="description"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
-    <div class="text-sm w-full">
+		<div class="mt-2 text-sm w-full">
-      <label for="enabled" class="ml-1 font-medium text-gray-700"
+			<label for="enabled" class="font-semibold text-gray-700"
 				>{$_("enabled")}</label
 			>
 			<br />
@@ -192,7 +178,7 @@
 					name="enabled"
 					type="checkbox"
 					checked={editable.enabled}
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+					class="focus:ring-indigo-500 size-4 text-indigo-600 border-gray-300 rounded"
 				/>
 				{$_("this-scanstation-is")}
 				{#if editable.enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}

src/components/scanstations/ScanStations.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("scanstations")}
 	</h4>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}
@@ -111,7 +111,7 @@
 													<div class="text-sm font-medium text-gray-900">
 														<a
 															href="../tracks"
-															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
 														>
 															{s.track.name || s.track.distance + "m"}</a
 														>
@@ -132,12 +132,12 @@
 											<div class="flex items-center">
 												{#if s.enabled}
 													<span
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
 														>{$_("active")}</span
 													>
 												{:else}
 													<span
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
 														>{$_("inactive")}</span
 													>
 												{/if}
@@ -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;
@@ -210,7 +210,7 @@
 				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>
+					<b>{$_("general_promise_error")}</b>
 					{error}
 				</span>
 			</div>

src/components/settings/ConfirmProfileDeletion.svelte

@@ -25,12 +25,12 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     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"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
     >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
@@ -43,18 +43,18 @@
         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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
         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-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <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="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
               <svg
-                class="h-6 w-6 text-blue-600"
+                class="size-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -63,11 +63,11 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("attention")}
               </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                 <p class="text-sm text-gray-500">
                   {$_("do-you-really-want-to-delete-your-profile")}
                   <br />
@@ -81,18 +81,18 @@
             </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 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
           <button
             on:click={deleteMe}
             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"
+            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"
           >
             {$_("confirm-delete-my-user-profile")}
           </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"
+            class="w-full 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 hidden lg:block"
           >
             {$_("cancel-keep-my-profile")}
           </button>

src/components/settings/Settings.svelte

@@ -62,21 +62,13 @@
 </script>
 
 <ConfirmProfileDeletion bind:modal_open bind:delete_triggered />
-<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
-  <div class="text-center mb-8">
-    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-    >
-      🔨<br />{$_("settings")}
-    </h1>
-  </div>
-</div>
 <div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    <span class="text-3xl font-bold">{$_("settings")}</span>
     <div>
-      <div class="md:grid md:grid-cols-3 md:gap-6">
+      <div class="md:grid md:grid-cols-3 md:gap-2 lg:gap-6">
         <div class="md:col-span-1">
-          <div class="px-4 sm:px-0">
+          <div class="sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
               {$_("profile")}
             </h3>
@@ -91,8 +83,8 @@
           <div class="mt-5 md:mt-0 md:col-span-2">
             <div class="shadow sm:rounded-md sm:overflow-hidden">
               <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
-                <div class="text-sm w-full">
+                <div class="text-sm w-full mt-2">
-                  <label for="username" class="font-medium text-gray-700"
+                  <label for="username" class="font-semibold text-gray-700"
                     >{$_("username")}</label
                   >
                   <input
@@ -101,11 +93,11 @@
                     type="text"
                     bind:value={editable.username}
                     name="username"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
-                <div class="text-sm w-full">
+                <div class="text-sm w-full mt-2">
-                  <label for="email" class="font-medium text-gray-700"
+                  <label for="email" class="font-semibold text-gray-700"
                     >{$_("e-mail-adress")}</label
                   >
                   <input
@@ -114,7 +106,7 @@
                     type="email"
                     bind:value={editable.email}
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 {#if !isEmail(editable.email)}
@@ -123,8 +115,8 @@
                     >{$_("valid-email-is-required")}</span
                   >
                 {/if}
-                <div class="text-sm w-full">
+                <div class="text-sm w-full mt-2">
-                  <label for="firstname" class="font-medium text-gray-700"
+                  <label for="firstname" class="font-semibold text-gray-700"
                     >{$_("first-name")}</label
                   >
                   <input
@@ -133,11 +125,11 @@
                     type="text"
                     bind:value={editable.firstname}
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
-                <!-- <div class="text-sm w-full">
+                <!-- <div class="text-sm w-full mt-2">
-                  <label for="middlename" class="font-medium text-gray-700"
+                  <label for="middlename" class="font-semibold text-gray-700"
                     >{$_("middle-name")}</label
                   >
                   <input
@@ -146,11 +138,11 @@
                     type="text"
                     bind:value={editable.middlename}
                     name="middlename"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div> -->
-                <div class="text-sm w-full">
+                <div class="text-sm w-full mt-2">
-                  <label for="lastname" class="font-medium text-gray-700"
+                  <label for="lastname" class="font-semibold text-gray-700"
                     >{$_("last-name")}</label
                   >
                   <input
@@ -159,7 +151,7 @@
                     type="text"
                     bind:value={editable.lastname}
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
               </div>
@@ -169,7 +161,7 @@
                   disabled={!save_enabled}
                   class:opacity-50={!save_enabled}
                   on:click={submit}
-                  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"
+                  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>
@@ -182,9 +174,9 @@
   </div>
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
     <div>
-      <div class="md:grid md:grid-cols-3 md:gap-6">
+      <div class="md:grid md:grid-cols-3 md:gap-2 lg:gap-6">
         <div class="md:col-span-1">
-          <div class="px-4 sm:px-0">
+          <div class="sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
               {$_("password")}
             </h3>
@@ -199,7 +191,7 @@
           <div class="mt-5 md:mt-0 md:col-span-2">
             <div class="shadow sm:rounded-md sm:overflow-hidden">
               <div class="px-4 py-3 bg-gray-50 text-left sm:px-6">
-                <label for="new_password" class="font-medium text-gray-700"
+                <label for="new_password" class="font-semibold text-gray-700"
                   >{$_("new-password")}</label
                 >
                 <div class="-mt-px relative">
@@ -212,7 +204,7 @@
                     placeholder={$_("password")}
                   />
                 </div>
-                <label for="new_password" class="font-medium text-gray-700"
+                <label for="new_password" class="font-semibold text-gray-700"
                   >{$_("confirm-the-new-password")}</label
                 >
                 <div class="-mt-px relative">
@@ -233,7 +225,7 @@
                   disabled={!update_password_enabled}
                   class:opacity-50={!update_password_enabled}
                   on:click={changePassword}
-                  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"
+                  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"
                 >
                   {$_("update-password")}
                 </button>
@@ -253,9 +245,9 @@
   </div>
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
     <div>
-      <div class="md:grid md:grid-cols-3 md:gap-6">
+      <div class="md:grid md:grid-cols-3 md:gap-2 lg:gap-6">
         <div class="md:col-span-1">
-          <div class="px-4 sm:px-0">
+          <div class="sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
               {$_("danger-zone")}
             </h3>
@@ -276,7 +268,7 @@
                       on:click={() => {
                         modal_open = true;
                       }}
-                      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:ml-3 sm:w-auto sm:"
+                      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"
                       >{$_("confirm-deletion")}</button
                     >
                     <button
@@ -293,7 +285,7 @@
                         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:ml-3 sm:w-auto sm:"
+                      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"
                       >{$_("delete-profile")}</button
                     >
                   {/if}