.gitea/workflows/dev.yaml

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

.gitea/workflows/release.yaml

@@ -1,33 +0,0 @@
-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@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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,17 @@
+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,37 +2,12 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-#### [1.8.0](https://git.odit.services/lfk/frontend/compare/1.7.0...1.8.0)
-
-- 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)
-- 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,4 +1,4 @@
-FROM registry.odit.services/hub/library/node:23.10.0-alpine3.21 AS build
+FROM registry.odit.services/hub/library/node:23.2.0-alpine3.20 AS build
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
 

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.8.0-RELEASE_INFO</span
+      >RELEASE_INFO-1.7.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.8.0",
+  "version": "1.7.0",
   "type": "module",
   "scripts": {
     "i18n-order": "node order.js",
@@ -15,10 +15,10 @@
     "@odit/license-exporter": "0.2.0",
     "@sveltejs/vite-plugin-svelte": "2.1.1",
     "auto-changelog": "2.5.0",
-    "autoprefixer": "10.4.21",
+    "autoprefixer": "10.4.20",
-    "postcss": "8.5.3",
+    "postcss": "8.4.49",
-    "prettier": "3.5.3",
+    "prettier": "3.3.3",
-    "prettier-plugin-svelte": "3.3.3",
+    "prettier-plugin-svelte": "3.2.8",
     "release-it": "17.10.0",
     "svelte-select": "3.17.0",
     "tailwindcss": "3.4.15",
@@ -42,7 +42,6 @@
     }
   },
   "dependencies": {
-    "@fontsource/athiti": "^5.2.5",
     "@odit/lfk-client-js": "1.1.3",
     "@paralleldrive/cuid2": "2.2.2",
     "@tanstack/svelte-table": "8.9.1",
@@ -55,7 +54,7 @@
     "svelte-french-toast": "1.2.0",
     "svelte-i18n": "3.6.0",
     "tinro": "0.6.12",
-    "validator": "13.15.0",
+    "validator": "13.12.0",
     "xlsx": "0.18.5"
   },
   "volta": {

src/components/cards/AddCardBulkModal.svelte

@@ -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-neutral-800 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-gray-500 p-2"
                       placeholder="400"
                     />
                     <span

src/components/cards/AddCardModal.svelte

@@ -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-neutral-800 rounded-md p-2"
+                    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"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}

src/components/cards/CardDetailModal.svelte

@@ -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-neutral-800 rounded-md p-2"
+                    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"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}

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 border border-current bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
     >{$_("enabled")}</span
   >
 {:else}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 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">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
     {$_("cards")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}

src/components/contacts/AddContactModal.svelte

@@ -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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span
@@ -349,7 +349,7 @@
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-semibold text-gray-700"
+                    <label for="comments" class="font-medium 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span

src/components/contacts/ContactDetail.svelte

@@ -104,32 +104,50 @@
         <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
-								><svg
+                fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
                 width="24"
                 height="24"
-									viewBox="0 0 24 24"
+                ><path fill="none" d="M0 0h24v24H0z" />
-									fill="none"
+                <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"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-									class="inline-block"
+                class="h-3 w-3 mr-2 stroke-current"
-									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+                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
               >
-								{$_("contacts")}</a
+            </li>
+            <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-4 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_data.firstname}
       {original_data.middlename || ""}
       {original_data.lastname}
-			<div data-id="contact_actions_${editable.id}">
+      <span data-id="contact_actions_${editable.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
           {#if delete_triggered}
             <button
@@ -166,11 +184,11 @@
             >{$_("save-changes")}</button
           >
         {/if}
-			</div>
+      </span>
     </div>
     <!--  -->
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="firstname" class="font-semibold text-gray-700"
+      <label for="firstname" class="font-medium text-gray-700"
         >{$_("first-name")}</label
       >
       <input
@@ -182,7 +200,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-neutral-800 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-gray-500 rounded-md p-2"
       />
       {#if !isFirstnameValid}
         <span
@@ -192,8 +210,8 @@
         </span>
       {/if}
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="middlename" class="font-semibold text-gray-700"
+      <label for="middlename" class="font-medium text-gray-700"
         >{$_("middle-name")}</label
       >
       <input
@@ -202,11 +220,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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="lastname" class="font-semibold text-gray-700"
+      <label for="lastname" class="font-medium text-gray-700"
         >{$_("last-name")}</label
       >
       <input
@@ -218,7 +236,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-neutral-800 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-gray-500 rounded-md p-2"
       />
       {#if !isLastnameValid}
         <span
@@ -228,8 +246,8 @@
         </span>
       {/if}
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="email" class="font-semibold text-gray-700"
+      <label for="email" class="font-medium text-gray-700"
         >{$_("e-mail-adress")}</label
       >
       <input
@@ -241,7 +259,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-neutral-800 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-gray-500 rounded-md p-2"
       />
       {#if !isEmailValid}
         <span
@@ -251,8 +269,8 @@
         </span>
       {/if}
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
+      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
       <input
         autocomplete="off"
         placeholder={$_("phone")}
@@ -262,7 +280,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-neutral-800 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-gray-500 rounded-md p-2"
       />
       {#if !isPhoneValidOrEmpty}
         <span
@@ -272,13 +290,13 @@
         </span>
       {/if}
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<span class="font-semibold text-gray-700">{$_("groups")}</span>
+      <span class="font-medium 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-neutral-800 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-gray-500 rounded-md p-2"
       >
         {#each teams as team}
           <option value={team.id}>
@@ -304,7 +322,7 @@
         />
       </div>
       <div class="ml-3 text-sm">
-				<label for="comments" class="font-semibold text-gray-700"
+        <label for="comments" class="font-medium text-gray-700"
           >{$_("address")}</label
         >
       </div>
@@ -323,7 +341,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-neutral-800 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-gray-500 rounded-md p-2"
         />
         {#if !isAddress1Valid}
           <span
@@ -343,7 +361,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-neutral-800 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-gray-500 rounded-md p-2"
         />
       </div>
       <div class="col-span-6">
@@ -359,7 +377,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-neutral-800 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-gray-500 rounded-md p-2"
         />
         {#if !iszipcodevalid}
           <span
@@ -382,7 +400,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-neutral-800 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-gray-500 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">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
     {$_("contacts")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}

src/components/contacts/ContactsOverview.svelte

@@ -86,21 +86,20 @@
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
-											<div
+                      <div class="ml-4">
-												class="text-sm font-medium text-gray-900 gap-0.5 flex flex-wrap"
+                        <div class="text-sm font-medium text-gray-900">
-											>
                           {#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 border border-current"
+                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
                                   >{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 border border-current"
+                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
                                   >{g.parentGroup.name}
                                   &gt;
                                   {g.name}</a
@@ -112,6 +111,7 @@
                           {/if}
                         </div>
                       </div>
+                    </div>
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">

src/components/dashboard/Dashboard.svelte

@@ -25,7 +25,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 w-full font-semibold"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
         href="/"
       >
         <svg
@@ -43,7 +43,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
         <a
           class:activenav={$router.path === "/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"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/runners/"
         >
           <svg
@@ -64,7 +64,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
         <a
           class:activenav={$router.path === "/teams/"}
-					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/teams/"
         >
           <svg
@@ -85,7 +85,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 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/orgs/"
         >
           <svg
@@ -106,7 +106,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 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/donors/"
         >
           <svg
@@ -127,7 +127,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 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/donations/"
         >
           <svg
@@ -148,7 +148,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 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/tracks/"
         >
           <svg
@@ -169,7 +169,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 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/cards/"
         >
           <svg
@@ -191,8 +191,8 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
         <a
-					class:activenav={$router.path.includes("/scans/")}
+          class:activenav={$router.path === "/scans/"}
-					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/scans/"
         >
           <svg
@@ -213,8 +213,8 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
         <a
-					class:activenav={$router.path.includes("/contacts/")}
+          class:activenav={$router.path === "/contacts/"}
-					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/contacts/"
         >
           <svg
@@ -234,8 +234,8 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
         <a
-					class:activenav={$router.path.includes("/scanstations/")}
+          class:activenav={$router.path === "/scanstations/"}
-					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/scanstations/"
         >
           <svg
@@ -256,8 +256,8 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
         <a
-					class:activenav={$router.path.includes("/statsclients/")}
+          class:activenav={$router.path === "/statsclients/"}
-					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/statsclients/"
         >
           <svg
@@ -278,8 +278,8 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
         <a
-					class:activenav={$router.path.includes("/users/")}
+          class:activenav={$router.path === "/users/"}
-					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/users/"
         >
           <svg
@@ -299,8 +299,8 @@
       {/if}
       {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
         <a
-					class:activenav={$router.path.includes("/groups/")}
+          class:activenav={$router.path === "/groups/"}
-					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
           href="/groups/"
         >
           <svg
@@ -320,7 +320,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 w-full font-semibold"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
         href="/settings/"
       >
         <svg
@@ -339,7 +339,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 w-full font-semibold"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
         href="/about/"
       >
         <svg
@@ -358,7 +358,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 w-full font-semibold"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
         on:click={() => {
           AuthService.authControllerLogout();
           logout();
@@ -390,21 +390,11 @@
         }}
         class="block btn btn-light md:hidden"
       >
-				<span class="sr-only">Menu</span><svg
+        <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">
-					xmlns="http://www.w3.org/2000/svg"
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-					fill="none"
-					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>
+        </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,7 +7,7 @@
 </script>
 
 <div class="p-2 md:p-5 overflow-x-hidden">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
     {$_("dashboard-greeting")} <span class="text-blue-500"
       >{store.state.jwtinfo.userdetails.firstname}
       {store.state.jwtinfo.userdetails.lastname}</span

src/components/donations/AddDonationModal.svelte

@@ -192,7 +192,7 @@
                     >{$_("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-neutral-800 rounded-md p-2"
+                    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"
                     itemFilter={(label, filterText, option) =>
                       filterDonors(label, filterText, option)}
                     items={donors}
@@ -212,7 +212,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-neutral-800 rounded-md p-2"
+                      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"
                       itemFilter={(label, filterText, option) =>
                         filterDonors(label, filterText, option)}
                       items={runners}
@@ -244,7 +244,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:text-sm border-gray-300 border bg-gray-50 text-neutral-800 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-gray-500 p-2"
                       placeholder="2.00"
                     />
                     <span

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";
@@ -121,32 +121,46 @@
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
-			<div class="mt-2 w-full">
+      <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">
-							<a class="mr-2" href="./"
+              <svg
-								><svg
+                fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
                 width="24"
                 height="24"
-									viewBox="0 0 24 24"
+                ><path fill="none" d="M0 0h24v24H0z" />
-									fill="none"
+                <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"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-									class="inline-block"
+                class="h-3 w-3 mr-2 stroke-current"
-									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+                height="1em"
-								>
+                width="1em"
-								{$_("donations")}</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-4 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_data.donor.firstname}
       {original_data.donor.middlename || ""}
       {original_data.donor.lastname}
@@ -159,20 +173,19 @@
         {$_("fixed-donation")}:
         {amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
       {/if}
-			[#{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("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:w-auto sm:text-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:ml-3 sm:w-auto 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:text-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:"
               >{$_("cancel")}</button
             >
           {/if}
@@ -182,7 +195,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:w-auto sm:text-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:ml-3 sm:w-auto sm:"
               >{$_("delete-donation")}</button
             >
           {/if}
@@ -193,15 +206,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:ml-3 sm:w-auto sm:"
             >{$_("save-changes")}</button
           >
         {/if}
-			</div>
+      </span>
     </div>
     <!--  -->
     <div>
-			<span class="font-semibold text-gray-700"
+      <span class="font-medium text-gray-700"
         >{$_("total-donation-amount")}:</span
       >
       <span
@@ -210,33 +223,33 @@
           .toLocaleString("de-DE", { valute: "EUR" })}€</span
       >
       |
-			<span class="font-semibold text-gray-700">{$_("paid-amount")}:</span>
+      <span class="font-medium text-gray-700">{$_("paid-amount")}:</span>
       <span
         >{(editable.paidAmount / 100)
           .toFixed(2)
           .toLocaleString("de-DE", { valute: "EUR" })}€</span
       >
       |
-			<span class="font-semibold text-gray-700">{$_("status")}:</span>
+      <span class="font-medium text-gray-700">{$_("status")}:</span>
       {#if editable.status == "PAID"}
         <span
-					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
+          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
           >{$_("paid")}</span
         >
       {:else}
         <span
-					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
+          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
           >{$_("open")}</span
         >
       {/if}
     </div>
     <br />
-		<div class=" mt-2 w-full">
+    <div class=" w-full">
-			<label for="donor" class="block font-semibold text-gray-700"
+      <label for="donor" class="block font-medium 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-neutral-800 rounded-md p-2"
+        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"
         itemFilter={(label, filterText, option) =>
           filterDonors(label, filterText, option)}
         items={current_donors}
@@ -254,12 +267,12 @@
       />
     </div>
     {#if original_data.responseType == "DISTANCEDONATION"}
-			<div class=" mt-2 w-full">
+      <div class=" w-full">
-				<label for="donor" class="block font-semibold text-gray-700"
+        <label for="donor" class="block font-medium 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-neutral-800 rounded-md p-2"
+          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"
           itemFilter={(label, filterText, option) =>
             filterDonors(label, filterText, option)}
           items={current_runners}
@@ -273,8 +286,8 @@
         />
       </div>
     {/if}
-		<div class=" mt-2 w-full">
+    <div class=" w-full">
-			<label for="lastname" class="font-semibold text-gray-700">
+      <label for="lastname" class="font-medium text-gray-700">
         {#if original_data.responseType == "DISTANCEDONATION"}
           {$_("amount-per-kilometer")}
         {:else}{$_("donation-amount")}{/if}
@@ -289,7 +302,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-neutral-800 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-gray-500 p-2"
           placeholder="2.00"
         />
         <span
@@ -305,8 +318,8 @@
         </span>
       {/if}
     </div>
-		<div class="mt-2 w-full">
+    <div class="w-full">
-			<label for="token" class="block font-semibold text-gray-700"
+      <label for="token" class="block text-sm font-medium text-gray-700"
         >{$_("paid-amount")}</label
       >
       <div

src/components/donations/DonationDonor.svelte

@@ -9,7 +9,7 @@
   <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 border border-current"
+      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
       >{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 border border-current"
+      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
       >{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 border border-current bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
     >{$_("paid")}</span
   >
 {:else}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
     >{$_("open")}</span
   >
 {/if}

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">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
     {$_("donations")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}

src/components/donors/AddDonorModal.svelte

@@ -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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span
@@ -313,7 +313,7 @@
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-semibold text-gray-700"
+                    <label for="comments" class="font-medium 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span

src/components/donors/DonorDetail.svelte

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

src/components/general/About.svelte

@@ -97,7 +97,7 @@
 {/if}
 <!-- /// -->
 <section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
 		{$_("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">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
 		{$_("credits")}
 	</h4>
 	<p class="text-left">{$_("oss_credit_description")}</p>

src/components/groups/AddGroupModal.svelte

@@ -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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if !isNameValid}
                     <span
@@ -152,7 +152,7 @@
                     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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div>
               </div>

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,32 +88,46 @@
       <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">
-							<a class="mr-2" href="../"
+              <svg
-								><svg
+                class="flex-shrink-0 w-5 h-5 mr-2"
-									xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
                 width="24"
                 height="24"
-									viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
-									fill="none"
+                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"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-									class="inline-block"
+                class="h-3 w-3 mr-2 stroke-current"
-									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+                height="1em"
-								>
+                width="1em"
-								{$_("groups")}</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">{editable.name}</span>
+            </li>
           </ol>
         </nav>
       </div>
     </div>
-		<div class="mb-4 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
-			{editable.name}
+      {original_data.name}
-			<div data-id="group_actions_${editable.id}">
+      <span data-id="group_actions_${editable.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
           {#if delete_triggered}
             <button
@@ -150,12 +164,11 @@
             >{$_("save-changes")}</button
           >
         {/if}
-			</div>
+      </span>
     </div>
     <!--  -->
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="title" class="font-semibold text-gray-700">{$_("name")}</label
+      <label for="title" class="font-medium text-gray-700">{$_("name")}</label>
-			>
       <input
         autocomplete="off"
         placeholder={$_("name")}
@@ -165,7 +178,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-neutral-800 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-gray-500 rounded-md p-2"
       />
       {#if !isGroupnameValid}
         <span
@@ -175,8 +188,8 @@
         </span>
       {/if}
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="groupdescription" class="font-semibold text-gray-700"
+      <label for="firstname" class="font-medium text-gray-700"
         >{$_("description")}</label
       >
       <input
@@ -184,28 +197,26 @@
         placeholder={$_("description")}
         type="text"
         bind:value={editable.description}
-				name="groupdescription"
+        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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full mt-8">
-			<p class="font-semibold mb-4">
+      <p class="font-medium 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
         >
-			</div>
+      </p>
       <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-neutral-800 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-gray-500 rounded-md p-2"
         />
       </div>
       {#each original_data.permissions as p}

src/components/groups/GroupPermissions.svelte

@@ -133,8 +133,10 @@
         </nav>
       </div>
     </div>
-    <div class="mb-4 text-3xl font-extrabold">
+    <div class="mb-8 text-3xl font-extrabold">
-      <div>
+      {$_("permissions")}:
+      {original_data.name}
+      <span>
         {#if promises.length === 0}
           <button
             disabled={save_enabled}
@@ -151,7 +153,7 @@
             >{$_("applying-changes")}</button
           >
         {/if}
-      </div>
+      </span>
     </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">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
     {$_("user-groups")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}

src/components/orgs/AddOrgModal.svelte

@@ -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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if !isOrgnameValid}
                     <span
@@ -174,7 +174,7 @@
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-semibold text-gray-700"
+                    <label for="comments" class="font-medium 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-neutral-800 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-gray-500 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -219,7 +219,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-neutral-800 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-gray-500 rounded-md p-2"
                     />
                   </div>
                   <div class="col-span-6">
@@ -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-neutral-800 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-gray-500 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -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-neutral-800 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-gray-500 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span

src/components/orgs/OrgDetail.svelte

@@ -3,17 +3,18 @@
     GroupContactService,
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
-	import toast from "svelte-french-toast";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-	import { _ } from "svelte-i18n";
+  import toast from 'svelte-french-toast'
-	import { tick } from "svelte";
+
-	import Select from "svelte-select";
   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 GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import { tick } from "svelte";
-	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
   $: delete_triggered = false;
   $: address_valid_or_none =
     (isAddress1Valid && iszipcodevalid && iscityvalid) ||
@@ -24,6 +25,7 @@
   let contacts = [];
   let valueCopy = null;
   let areaDom;
+  let copied = false;
   export let params;
   $: editable = {};
   $: contact = {};
@@ -121,6 +123,7 @@
         throw new Error();
       }
       toast($_("copied-link-to-clipboard"));
+      copied = true;
     } catch (err) {
       toast.error($_("error-whyile-copying-to-clipboard"));
     }
@@ -145,34 +148,8 @@
 <ConfirmOrgDeletion bind:modal_open bind:delete_org />
 {#if data_loaded}
   <section class="container p-5">
-		<div class="flex flex-row mb-4">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
-			<div class="w-full">
+      {original_object.name}
-				<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}]
       <span data-id="org_actions_${editable.id}">
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show
@@ -229,23 +206,94 @@
         {/if}
       </span>
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="flex flex-row mb-4">
-			<label for="name" class="font-semibold text-gray-700">{$_("name")}</label>
+      <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">
+      <label for="name" class="font-medium 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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="contact" class="font-semibold text-gray-700"
+      <label for="contact" class="font-medium 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-neutral-800 rounded-md p-2"
+        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"
         itemFilter={(label, filterText, option) =>
           label.toLowerCase().includes(filterText.toLowerCase()) ||
           option.value.id.toString().startsWith(filterText.toLowerCase())}
@@ -273,18 +321,18 @@
         <div class="ml-3 text-sm">
           <label
             for="toggle_selfservice_feature"
-						class="font-semibold text-gray-700"
+            class="font-medium text-gray-700"
             >{$_("selfservice-registration")}</label
           >
         </div>
       </div>
       <div>
         {#if editable.registrationEnabled}
-					<div class="text-sm w-full mt-2">
+          <div class="text-sm w-full">
             <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-neutral-800 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-gray-500 p-2"
               >
                 {#if editable.registrationKey}
                   {registrationLink}
@@ -330,7 +378,7 @@
             <div class="ml-3 text-sm">
               <label
                 for="toggle_address_checkbox"
-								class="font-semibold text-gray-700">{$_("address")}</label
+                class="font-medium text-gray-700">{$_("address")}</label
               >
             </div>
           </div>
@@ -351,7 +399,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-neutral-800 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-gray-500 rounded-md p-2"
             />
             {#if !isAddress1Valid}
               <span
@@ -373,7 +421,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-neutral-800 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-gray-500 rounded-md p-2"
             />
           </div>
           <div class="col-span-6">
@@ -389,7 +437,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-neutral-800 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-gray-500 rounded-md p-2"
             />
             {#if !iszipcodevalid}
               <span
@@ -412,7 +460,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-neutral-800 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-gray-500 rounded-md p-2"
             />
             {#if !iscityvalid}
               <span
@@ -423,12 +471,10 @@
             {/if}
           </div>
         {/if}
-				<div class="text-sm w-full mt-2">
+        <div class="text-sm w-full">
-					<span class="font-semibold text-gray-700">{$_("distance")}</span>
+          <span class="font-medium text-gray-700">{$_("distance")}</span>
           <br />
-					<span class="text-gray-700"
+          <span class="text-gray-700">{(original_object.total_distance / 1000).toFixed(2)} km</span>
-						>{(original_object.total_distance / 1000).toFixed(2)} km</span
-					>
         </div>
       </div>
     </div>

src/components/orgs/OrgOverview.svelte

@@ -136,13 +136,16 @@
                   </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 />
@@ -153,14 +156,16 @@
                           {/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 border border-current"
+                              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
@@ -168,6 +173,7 @@
                           {:else}{$_("no-contact-specified")}{/if}
                         </div>
                       </div>
+                    </div>
                   </td>
                   {#if active_deletes[o.id] === true}
                     <td

src/components/orgs/Orgs.svelte

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

src/components/pdf_generation/DocumentServer.ts

@@ -26,26 +26,24 @@ 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(
+        const response = await fetch(`${this.baseUrl}/v1/pdfs/cards?key=${this.apiKey}`, {
-      `${this.baseUrl}/v1/pdfs/cards?key=${this.apiKey}`,
+            method: 'POST',
-      {
-        method: "POST",
             headers: {
-          "Content-Type": "application/json",
+                'Content-Type': 'application/json',
             },
             body: JSON.stringify({
                 locale,
                 cards: generateCards,
             }),
-      },
+        });
-    );
 
         const blob = await response.blob();
         return blob;
@@ -55,7 +53,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,
@@ -67,25 +65,23 @@ 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(
+        const response = await fetch(`${this.baseUrl}/v1/pdfs/contracts?key=${this.apiKey}`, {
-      `${this.baseUrl}/v1/pdfs/contracts?key=${this.apiKey}`,
+            method: 'POST',
-      {
-        method: "POST",
             headers: {
-          "Content-Type": "application/json",
+                'Content-Type': 'application/json',
             },
             body: JSON.stringify({
                 locale,
                 runners: generateRunners,
             }),
-      },
+        });
-    );
 
         const blob = await response.blob();
         return blob;
@@ -106,11 +102,10 @@ class DocumentServer {
                     parent_group: {
                         id: runners[i]?.group?.parentGroup?.id,
                         name: runners[i]?.group?.parentGroup?.name,
-          },
+                    }
                 },
                 distance: runners[i].distance,
-        distance_donations: runners[i].distanceDonations.map(
+                distance_donations: runners[i].distanceDonations.map((distanceDonation: any) =>{
-          (distanceDonation: any) => {
                     return {
                             id: distanceDonation.id,
                             amount: distanceDonation.amount,
@@ -120,27 +115,24 @@ 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(
+        const response = await fetch(`${this.baseUrl}/v1/pdfs/certificates?key=${this.apiKey}`, {
-      `${this.baseUrl}/v1/pdfs/certificates?key=${this.apiKey}`,
+            method: 'POST',
-      {
-        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/GenerateRunnerCards.svelte

@@ -1,25 +1,31 @@
 <script>
-	import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } 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(
+  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
-		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);
@@ -34,6 +40,8 @@
   }
 
   function generateRunnerCards(locale) {
+    cards_dropdown_open = false;
+
     if (generate_orgs.length > 0) {
       generateOrgCards(locale);
     } else if (generate_teams.length > 0) {
@@ -47,8 +55,7 @@
 
   function generateCards(locale) {
     toast.loading($_("generating-pdf"));
-		documentServer
+    documentServer.generateCards(generate_cards, locale)
-			.generateCards(generate_cards, locale)
       .then((blob) => {
         download(blob, `${$_("runnercards")}-${locale}-${createId()}.pdf`);
       })
@@ -70,8 +77,7 @@
       }
       cards.push(card);
     }
-		documentServer
+    documentServer.generateCards(cards, locale)
-			.generateCards(cards, locale)
       .then((blob) => {
         let fileName = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
         if (generate_runners.length == 1) {
@@ -102,13 +108,11 @@
         }
         cards.push(card);
       }
-			documentServer
+      documentServer.generateCards(cards, locale)
-				.generateCards(cards, locale)
         .then((blob) => {
-					download(
+          download(blob, `${$_("runnercards")}_${
-						blob,
+            t.name
-						`${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`
+          }-${locale}-${createId()}.pdf`)
-					);
         })
         .catch((err) => {});
     }
@@ -125,7 +129,7 @@
       let runners =
         await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
           o.id,
-					false
+          true
         );
       let cards = [];
       for (let runner of runners) {
@@ -137,13 +141,11 @@
         }
         cards.push(card);
       }
-			await documentServer
+      await documentServer.generateCards(cards, locale)
-				.generateCards(cards, locale)
         .then((blob) => {
-					download(
+          download(blob, `${$_("runnercards")}_${
-						blob,
+            o.name
-						`${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`
+          }_direct-${locale}-${createId()}.pdf`)
-					);
         })
         .catch((err) => {});
       for (const t of o.teams) {
@@ -161,15 +163,11 @@
           }
           cards.push(card);
         }
-				await documentServer
+        await documentServer.generateCards(cards, locale)
-					.generateCards(cards, locale)
           .then((blob) => {
-						download(
+            download(blob, `${$_("runnercards")}_${o.name}_${
-							blob,
-							`${$_("runnercards")}_${o.name}_${
               t.name
-							}-${locale}-${createId()}.pdf`
+            }-${locale}-${createId()}.pdf`)
-						);
           })
           .catch((err) => {});
       }
@@ -178,25 +176,69 @@
 </script>
 
 {#if cards_show}
+  <div id="cards:dropdown" class="relative inline-block">
     <div>
-		<p class="text-base">{$_("generate-runnercards")}</p>
+      <button
-		<div class="inline-flex rounded-lg shadow-2xs">
+        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");
             }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+            type="submit"
+            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"
           >
-				DE
+            {$_("german")}
           </button>
           <button
             on:click={() => {
               generateRunnerCards("en");
             }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+            type="submit"
+            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"
           >
-				EN
+            {$_("english")}
           </button>
         </div>
       </div>
     {/if}
+  </div>
+{/if}

src/components/pdf_generation/GenerateRunnerCertificates.svelte

@@ -9,17 +9,26 @@
   import toast from "svelte-french-toast";
   import DocumentServer from "./DocumentServer";
   const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-	const documentServer = new DocumentServer(
+  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
-		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) {
@@ -50,10 +59,9 @@
         current_donations.filter((d) => d.runner?.id == runner.id) || [];
       certificateRunners.push(runner);
     }
-		documentServer
+    documentServer.generateCertificates(certificateRunners, locale)
-			.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,14 +87,12 @@
           current_donations.filter((d) => d.runner?.id == runner.id) || [];
         certificateRunners.push(runner);
       }
-			documentServer
+      documentServer.generateCertificates(certificateRunners, locale)
-				.generateCertificates(certificateRunners, locale)
         .then((blob) => {
           count++;
-					download(
+          download(blob, `${$_("certificates")}_${
-						blob,
+            t.name
-						`${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`
+          }-${locale}-${createId()}.pdf`)
-					);
         })
         .catch((err) => {});
     }
@@ -104,7 +110,7 @@
       let runners =
         await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
           o.id,
-					false
+          true
         );
       let certificateRunners = [];
       for (let runner of runners) {
@@ -112,13 +118,11 @@
           current_donations.filter((d) => d.runner?.id == runner.id) || [];
         certificateRunners.push(runner);
       }
-			await documentServer
+      await documentServer.generateCertificates(certificateRunners, locale)
-				.generateCertificates(certificateRunners, locale)
         .then((blob) => {
-					download(
+          download(blob, `${$_("certificates")}_${
-						blob,
+            o.name
-						`${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`
+          }-${locale}-${createId()}.pdf`)
-					);
         })
         .catch((err) => {});
       for (const t of o.teams) {
@@ -132,15 +136,11 @@
             current_donations.filter((d) => d.runner?.id == runner.id) || [];
           certificateRunners.push(runner);
         }
-				await documentServer
+        await documentServer.generateCertificates(certificateRunners, locale)
-					.generateCertificates(certificateRunners, locale)
           .then((blob) => {
-						download(
+            download(blob, `${$_("certificates")}_${o.name}_${
-							blob,
-							`${$_("certificates")}_${o.name}_${
               t.name
-							}-${locale}-${createId()}.pdf`
+            }-${locale}-${createId()}.pdf`)
-						);
             if (
               count === o.teams.length &&
               count_orgs === generate_orgs.length
@@ -156,25 +156,69 @@
 </script>
 
 {#if certificates_show}
+  <div id="certificates:dropdown" class="relative inline-block">
     <div>
-		<p class="text-base">{$_("generate-runner-certificates")}</p>
+      <button
-		<div class="inline-flex rounded-lg shadow-2xs">
+        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");
             }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+            type="submit"
+            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"
           >
-				DE
+            {$_("german")}
           </button>
           <button
             on:click={() => {
               generateCertificates("en");
             }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+            type="submit"
+            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"
           >
-				EN
+            {$_("english")}
           </button>
         </div>
       </div>
     {/if}
+  </div>
+{/if}

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
   import {
     RunnerOrganizationService,
     RunnerTeamService,
@@ -8,17 +8,26 @@
   import { init } from "@paralleldrive/cuid2";
   import toast from "svelte-french-toast";
   const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-	const documentServer = new DocumentServer(
+  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
-		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) {
+    if (
+      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;
+
     if (generate_orgs.length > 0) {
       generateOrgContracts(locale);
     } else if (generate_teams.length > 0) {
@@ -47,13 +56,11 @@
       const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
         t.id
       );
-			documentServer
+      documentServer.generateContracts(runners, locale)
-				.generateContracts(runners, locale)
         .then((blob) => {
-					download(
+          download(blob, `${$_("sponsorings")}_${
-						blob,
+            t.name
-						`${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`
+          }-${locale}-${createId()}.pdf`)
-					);
         })
         .catch((err) => {});
     }
@@ -68,15 +75,13 @@
       let runners =
         await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
           o.id,
-					false
+          true
         );
-			await documentServer
+      await documentServer.generateContracts(runners, locale)
-				.generateContracts(runners, locale)
         .then((blob) => {
-					download(
+          download(blob, `${$_("sponsorings")}_${
-						blob,
+            o.name
-						`${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`
+          }_direct-${locale}-${createId()}.pdf`)
-					);
         })
         .catch((err) => {});
       for (const t of o.teams) {
@@ -84,15 +89,11 @@
         let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
           t.id
         );
-				await documentServer
+        await documentServer.generateContracts(runners, locale)
-					.generateContracts(runners, locale)
           .then((blob) => {
-						download(
+            download(blob, `${$_("sponsorings")}_${o.name}_${
-							blob,
-							`${$_("sponsorings")}_${o.name}_${
               t.name
-							}-${locale}-${createId()}.pdf`
+            }-${locale}-${createId()}.pdf`)
-						);
           })
           .catch((err) => {});
       }
@@ -101,10 +102,9 @@
 
   function generateRunnerContracts(locale) {
     toast.loading($_("generating-pdf"));
-		documentServer
+    documentServer.generateContracts(generate_runners, locale)
-			.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
@@ -119,25 +119,70 @@
 </script>
 
 {#if sponsoring_contracts_show}
+  <div id="sponsoring:dropdown" class="relative inline-block">
     <div>
-		<p class="text-base">{$_("generate-sponsoring-contracts")}</p>
+      <button
-		<div class="inline-flex rounded-lg shadow-2xs">
+        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");
             }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+            type="submit"
+            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"
           >
-				DE
+            {$_("german")}
           </button>
           <button
             on:click={() => {
               generateSponsoringContract("en");
             }}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+            type="submit"
+            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"
           >
-				EN
+            {$_("english")}
           </button>
         </div>
       </div>
     {/if}
+  </div>
+{/if}

src/components/presets/Table.svelte

@@ -66,7 +66,7 @@
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
                 <span
-                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
+                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
                 >
                   Active
                 </span>

src/components/runners/AddRunnerModal.svelte

@@ -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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 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-neutral-800 rounded-md p-2"
+                    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"
                     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-neutral-800 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-gray-500 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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span

src/components/runners/ImportRunnerModal.svelte

@@ -268,7 +268,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-neutral-800 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-gray-500 rounded-md p-2"
                 >
                   {#each passed_orgs as o}
                     <option value={o.id}>{o.name}</option>
@@ -279,7 +279,7 @@
               {#if opened_from === "RunnerOverview"}
                 <p>{$_("group")}</p>
                 <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-neutral-800 rounded-md p-2"
+                  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"
                   itemFilter={(label, filterText, option) =>
                     label.toLowerCase().includes(filterText.toLowerCase()) ||
                     option.id.value

src/components/runners/RunnerDetail.svelte

@@ -100,46 +100,52 @@
         <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
-								><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"
-									viewBox="0 0 24 24"
+                ><path fill="none" d="M0 0h24v24H0z" />
-									fill="none"
+                <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"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-									class="inline-block"
+                class="h-3 w-3 mr-2 stroke-current"
-									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+                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
               >
-								{$_("runners")}</a
+            </li>
+            <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-4 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_data.firstname}
       {original_data.middlename || ""}
-			{original_data.lastname} [#{params.runnerid}]
+      {original_data.lastname}
-			<span
+      <span data-id="runner_actions_${editable.id}">
-				class="grid md:grid-cols-3 gap-1 md:gap-2"
-				data-id="runner_actions_${editable.id}"
-			>
         {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
-					<GenerateSponsoringContracts
-						bind:sponsoring_contracts_show
-						bind:generate_runners
-					/>
-					<GenerateRunnerCards bind:cards_show bind:generate_runners />
-					<GenerateRunnerCertificates
-						bind:certificates_show
-						bind:generate_runners
-					/>
-					<div>
           {#if delete_triggered}
             <button
               on:click={deleteRunner}
@@ -153,7 +159,17 @@
               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}
+          {/if}
+          <GenerateSponsoringContracts
+            bind:sponsoring_contracts_show
+            bind:generate_runners
+          />
+          <GenerateRunnerCards bind:cards_show bind:generate_runners />
+          <GenerateRunnerCertificates
+            bind:certificates_show
+            bind:generate_runners
+          />
+          {#if !delete_triggered}
             <button
               on:click={() => {
                 delete_triggered = true;
@@ -162,6 +178,9 @@
               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}
@@ -171,13 +190,11 @@
             >{$_("save-changes")}</button
           >
         {/if}
-					</div>
-				{/if}
       </span>
     </div>
     <!--  -->
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="firstname" class="font-semibold text-gray-700"
+      <label for="firstname" class="font-medium text-gray-700"
         >{$_("first-name")}</label
       >
       <input
@@ -189,7 +206,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-neutral-800 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-gray-500 rounded-md p-2"
       />
       {#if !isFirstnameValid}
         <span
@@ -199,8 +216,8 @@
         </span>
       {/if}
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="middlename" class="font-semibold text-gray-700"
+      <label for="middlename" class="font-medium text-gray-700"
         >{$_("middle-name")}</label
       >
       <input
@@ -209,11 +226,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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="lastname" class="font-semibold text-gray-700"
+      <label for="lastname" class="font-medium text-gray-700"
         >{$_("last-name")}</label
       >
       <input
@@ -225,7 +242,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-neutral-800 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-gray-500 rounded-md p-2"
       />
       {#if !isLastnameValid}
         <span
@@ -235,8 +252,8 @@
         </span>
       {/if}
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="email" class="font-semibold text-gray-700"
+      <label for="email" class="font-medium text-gray-700"
         >{$_("e-mail-adress")}</label
       >
       <input
@@ -248,7 +265,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-neutral-800 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-gray-500 rounded-md p-2"
       />
       {#if !isEmailValid}
         <span
@@ -258,21 +275,21 @@
         </span>
       {/if}
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
+      <label for="phone" class="font-medium 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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<span class="font-semibold text-gray-700">{$_("group")}</span>
+      <span class="font-medium text-gray-700">{$_("group")}</span>
       <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-neutral-800 rounded-md p-2"
+        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"
         itemFilter={(label, filterText, option) =>
           label.toLowerCase().includes(filterText.toLowerCase()) ||
           option.id.value.toString().startsWith(filterText.toLowerCase())}
@@ -287,8 +304,8 @@
         on:clear={() => (editable.group = null)}
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<span class="font-semibold text-gray-700">{$_("distance")}</span>
+      <span class="font-medium text-gray-700">{$_("distance")}</span>
       <br />
       <span class="text-gray-700">{original_data.distance / 1000} km</span>
     </div>

src/components/runners/Runners.svelte

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

src/components/scans/AddScanModal.svelte

@@ -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-neutral-800 rounded-md p-2"
+                    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"
                     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-neutral-800 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-gray-500 p-2"
                       placeholder="400"
                     />
                     <span

src/components/scans/ScanDetail.svelte

@@ -111,44 +111,59 @@
         <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
-								><svg
+                fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
                 width="24"
                 height="24"
-									viewBox="0 0 24 24"
+                ><path
-									fill="none"
+                  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"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-									class="inline-block"
+                class="h-3 w-3 mr-2 stroke-current"
-									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+                height="1em"
-								> Scans</a
+                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">{original_data.id}</span>
+            </li>
           </ol>
         </nav>
       </div>
     </div>
-		<div class="mb-4 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
       {runner.value?.firstname}
       {runner.value?.middlename || ""}
       {runner.value?.lastname}
-			- Scan #{original_data.id}
+      #{original_data.id}
-			<div data-id="donation_actions_${original_data.id}">
+      <span 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:w-auto sm:text-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:ml-3 sm:w-auto 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:text-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:"
               >{$_("cancel")}</button
             >
           {/if}
@@ -158,7 +173,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:w-auto sm:text-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:ml-3 sm:w-auto sm:"
               >{$_("delete-scan")}</button
             >
           {/if}
@@ -169,11 +184,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: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:ml-3 sm:w-auto sm:"
             >{$_("save-changes")}</button
           >
         {/if}
-			</div>
+      </span>
     </div>
     <!--  -->
     <div class="w-full inline-flex">
@@ -203,7 +218,7 @@
         </label>
         <a
           href="../tracks"
-					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
           >{editable.track.name}
         </a>
       </div>
@@ -218,7 +233,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-neutral-800 rounded-md p-2"
+        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"
         itemFilter={(label, filterText, option) =>
           filterRunners(label, filterText, option)}
         items={current_runners}
@@ -251,7 +266,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-neutral-800 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-gray-500 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 border border-current bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
     >{$_("valid")}</span
   >
 {:else}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 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">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
     {$_("scans")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}

src/components/scanstations/AddScanStationModal.svelte

@@ -133,7 +133,7 @@
                     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-neutral-800 rounded-md p-2"
+                    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"
                     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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
-                  <label for="enabled" class="font-semibold text-gray-700"
+                  <label for="enabled" class="font-medium text-gray-700"
                     >{$_("enabled_large")}</label
                   >
                   <br />

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -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-neutral-800 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-gray-500 p-2"
 									>
 										{new_station.key}
 									</p>

src/components/scanstations/ScanStationDetail.svelte

@@ -69,30 +69,44 @@
         <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
-								><svg
+                fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
                 width="24"
                 height="24"
-									viewBox="0 0 24 24"
+                ><path fill="none" d="M0 0h24v24H0z" />
-									fill="none"
+                <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"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-									class="inline-block"
+                class="h-3 w-3 mr-2 stroke-current"
-									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+                height="1em"
-								>
+                width="1em"
-								{$_("scanstations")}</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-4 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
-			{$_("scanstation")} #{original_data.id}<br>"{original_data.description}"
+      #{original_data.id}
-			<div data-id="stations_actions_${editable.id}">
+      <span data-id="stations_actions_${editable.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
           {#if delete_triggered}
             <button
@@ -129,15 +143,15 @@
             >{$_("save-changes")}</button
           >
         {/if}
-			</div>
+      </span>
     </div>
     <!--  -->
-		<div class="mt-2 text-sm w-full">
+    <div class="text-sm w-full">
-			<label for="track" class="block text-sm font-semibold text-gray-700"
+      <label for="track" class="block text-sm font-medium text-gray-700"
         >Track</label
       >
       <Select
-				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"
+        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"
         itemFilter={(label, filterText, option) =>
           label.toLowerCase().includes(filterText.toLowerCase()) ||
           option.value.id.toString().startsWith(filterText.toLowerCase())}
@@ -151,8 +165,8 @@
         on:clear={() => (track = null)}
       />
     </div>
-		<div class="mt-2 text-sm w-full">
+    <div class="text-sm w-full">
-			<label for="description" class="font-semibold text-gray-700"
+      <label for="description" class="font-medium text-gray-700"
         >{$_("description")}</label
       >
       <input
@@ -161,11 +175,11 @@
         type="text"
         bind:value={editable.description}
         name="description"
-				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"
+        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"
       />
     </div>
-		<div class="mt-2 text-sm w-full">
+    <div class="text-sm w-full">
-			<label for="enabled" class="font-semibold text-gray-700"
+      <label for="enabled" class="ml-1 font-medium text-gray-700"
         >{$_("enabled")}</label
       >
       <br />

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">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
 		{$_("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 border border-current"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
 														>
 															{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 border border-current bg-green-100 text-green-800"
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
 														>{$_("active")}</span
 													>
 												{:else}
 													<span
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
 														>{$_("inactive")}</span
 													>
 												{/if}

src/components/settings/Settings.svelte

@@ -62,13 +62,21 @@
 </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:col-span-1">
-          <div class="sm:px-0">
+          <div class="px-4 sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
               {$_("profile")}
             </h3>
@@ -83,8 +91,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 mt-2">
+                <div class="text-sm w-full">
-                  <label for="username" class="font-semibold text-gray-700"
+                  <label for="username" class="font-medium text-gray-700"
                     >{$_("username")}</label
                   >
                   <input
@@ -93,11 +101,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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div>
-                <div class="text-sm w-full mt-2">
+                <div class="text-sm w-full">
-                  <label for="email" class="font-semibold text-gray-700"
+                  <label for="email" class="font-medium text-gray-700"
                     >{$_("e-mail-adress")}</label
                   >
                   <input
@@ -106,7 +114,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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div>
                 {#if !isEmail(editable.email)}
@@ -115,8 +123,8 @@
                     >{$_("valid-email-is-required")}</span
                   >
                 {/if}
-                <div class="text-sm w-full mt-2">
+                <div class="text-sm w-full">
-                  <label for="firstname" class="font-semibold text-gray-700"
+                  <label for="firstname" class="font-medium text-gray-700"
                     >{$_("first-name")}</label
                   >
                   <input
@@ -125,11 +133,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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div>
-                <!-- <div class="text-sm w-full mt-2">
+                <!-- <div class="text-sm w-full">
-                  <label for="middlename" class="font-semibold text-gray-700"
+                  <label for="middlename" class="font-medium text-gray-700"
                     >{$_("middle-name")}</label
                   >
                   <input
@@ -138,11 +146,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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div> -->
-                <div class="text-sm w-full mt-2">
+                <div class="text-sm w-full">
-                  <label for="lastname" class="font-semibold text-gray-700"
+                  <label for="lastname" class="font-medium text-gray-700"
                     >{$_("last-name")}</label
                   >
                   <input
@@ -151,7 +159,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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div>
               </div>
@@ -176,7 +184,7 @@
     <div>
       <div class="md:grid md:grid-cols-3 md:gap-6">
         <div class="md:col-span-1">
-          <div class="sm:px-0">
+          <div class="px-4 sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
               {$_("password")}
             </h3>
@@ -191,7 +199,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-semibold text-gray-700"
+                <label for="new_password" class="font-medium text-gray-700"
                   >{$_("new-password")}</label
                 >
                 <div class="-mt-px relative">
@@ -204,7 +212,7 @@
                     placeholder={$_("password")}
                   />
                 </div>
-                <label for="new_password" class="font-semibold text-gray-700"
+                <label for="new_password" class="font-medium text-gray-700"
                   >{$_("confirm-the-new-password")}</label
                 >
                 <div class="-mt-px relative">
@@ -247,7 +255,7 @@
     <div>
       <div class="md:grid md:grid-cols-3 md:gap-6">
         <div class="md:col-span-1">
-          <div class="sm:px-0">
+          <div class="px-4 sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
               {$_("danger-zone")}
             </h3>

src/components/statsclients/AddStatsClientModal.svelte

@@ -126,7 +126,7 @@
                     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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div>
               </div>

src/components/statsclients/CopyStatsClientTokenModal.svelte

@@ -96,7 +96,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-neutral-800 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-gray-500 p-2"
                   >
                     {new_client.key}
                   </p>

src/components/statsclients/StatsClientDetail.svelte

@@ -40,30 +40,44 @@
         <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
-								><svg
+                fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
                 width="24"
                 height="24"
-									viewBox="0 0 24 24"
+                ><path fill="none" d="M0 0h24v24H0z" />
-									fill="none"
+                <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="./">{$_("statsclient")}</a><svg
                 stroke="currentColor"
+                fill="none"
                 stroke-width="2"
+                viewBox="0 0 24 24"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-									class="inline-block"
+                class="h-3 w-3 mr-2 stroke-current"
-									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+                height="1em"
-								>
+                width="1em"
-								{$_("statsclients")}</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-4 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
-			{$_("statsclient")} #{original_data.id}
+      #{original_data.id}
-			<div data-id="stations_actions_${original_data.id}">
+      <span data-id="stations_actions_${original_data.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:DELETE")}
           {#if delete_triggered}
             <button
@@ -90,16 +104,16 @@
             >
           {/if}
         {/if}
-			</div>
+      </span>
     </div>
     <!--  -->
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="description" class="font-semibold text-gray-700"
+      <label for="description" class="font-medium text-gray-700"
         >{$_("description")}</label
       >
       <p
         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-neutral-800 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-gray-500 rounded-md p-2"
       >
         {original_data.description}
       </p>

src/components/statsclients/StatsClients.svelte

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

src/components/teams/AddTeamModal.svelte

@@ -141,7 +141,7 @@
                     bind:this={teamname_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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if !isTeamNameValid}
                     <span
@@ -158,7 +158,7 @@
                     >{$_("organization")}</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-neutral-800 rounded-md p-2"
+                    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"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id

src/components/teams/TeamDetail.svelte

@@ -5,7 +5,7 @@
     RunnerTeamService,
   } from "@odit/lfk-client-js";
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
-	import toast from "svelte-french-toast";
+  import toast from 'svelte-french-toast'
 
   import store from "../../store";
   import Select from "svelte-select";
@@ -108,37 +108,8 @@
 <ConfirmTeamDeletion bind:modal_open bind:delete_team />
 {#if data_loaded}
   <section class="container p-5">
-		<div class="flex flex-row mb-4">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
-			<div class="w-full">
+      {original.name}
-				<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
-								>
-								{$_("teams")}</a
-							>
-						</li>
-					</ol>
-				</nav>
-			</div>
-		</div>
-		<div class="mb-4 text-3xl font-extrabold leading-tight">
-			{#if group}
-				{group.label}{" > "}
-			{/if}
-			{original.name} [#{params.teamid}]
       <span data-id="org_actions_${teamdata.id}">
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show
@@ -198,23 +169,96 @@
         {/if}
       </span>
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="flex flex-row mb-4">
-			<label for="name" class="font-semibold text-gray-700">Name</label>
+      <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
+                class="flex-shrink-0 w-5 h-5 mr-2"
+                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
+              >
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">Teams</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">Team-Details #{params.teamid}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="text-sm w-full">
+      <label for="name" class="font-medium text-gray-700">Name</label>
       <input
         autocomplete="off"
         placeholder="Name"
         type="text"
         bind:value={teamdata.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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="contact" class="font-semibold text-gray-700"
+      <label for="contact" class="font-medium 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-neutral-800 rounded-md p-2"
+        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"
         itemFilter={(label, filterText, option) =>
           label.toLowerCase().includes(filterText.toLowerCase()) ||
           option.value.id.toString().startsWith(filterText.toLowerCase())}
@@ -228,12 +272,12 @@
         on:clear={() => (teamdata.contact = null)}
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="org" class="font-semibold text-gray-700"
+      <label for="org" class="font-medium text-gray-700"
         >{$_("organization")}</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-neutral-800 rounded-md p-2"
+        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"
         itemFilter={(label, filterText, option) =>
           label.toLowerCase().includes(filterText.toLowerCase()) ||
           option.id.value.toString().startsWith(filterText.toLowerCase())}
@@ -247,8 +291,8 @@
         on:clear={() => (teamdata.parentGroup = null)}
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<span class="font-semibold text-gray-700">{$_("distance")}</span>
+      <span class="font-medium text-gray-700">{$_("distance")}</span>
       <br />
       <span class="text-gray-700"
         >{(original.total_distance / 1000).toFixed(2)} km</span

src/components/teams/Teams.svelte

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

src/components/teams/TeamsOverview.svelte

@@ -135,31 +135,36 @@
                   </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">
                           {t.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 t.parentGroup}
                             <a
                               href="../orgs/{t.parentGroup.id}"
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
                               >{t.parentGroup.name}</a
                             >
                           {:else}{$_("no-organization-specified")}{/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 t.contact}
                             <a
                               href="../contacts/{t.contact.id}"
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
                               >{t.contact.firstname}
                               {t.contact.middlename || ""}
                               {t.contact.lastname}</a
@@ -167,6 +172,7 @@
                           {:else}{$_("no-contact-specified")}{/if}
                         </div>
                       </div>
+                    </div>
                   </td>
                   {#if active_deletes[t.id] === true}
                     <td

src/components/tracks/AddTrackModal.svelte

@@ -139,7 +139,7 @@
                     bind:this={trackname_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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if isTracknameValid}
                     <span
@@ -164,7 +164,7 @@
                       bind:value={tracklength}
                       type="number"
                       name="track_length_m"
-                      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"
+                      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"
                       placeholder="1000"
                     />
                     <span
@@ -195,7 +195,7 @@
                       bind:value={track_min_duration}
                       type="number"
                       name="track_min_duration"
-                      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"
+                      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"
                       placeholder={smart_track_min_duration_placeholder}
                     />
                     <span

src/components/tracks/TracksOverview.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
     {$_("tracks")}
   </h4>
   <button
@@ -101,7 +101,7 @@
                     <div class="ml-4">
                       {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
                         <input
-                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-0.5"
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5"
                           type="text"
                           value={t.name}
                           on:input={(e) => {
@@ -124,7 +124,7 @@
                     <div class="ml-4">
                       {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
                       <input
-                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-0.5"
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5"
                           type="number"
                           value={t.distance}
                           on:input={(e) => {
@@ -147,7 +147,7 @@
                     <div class="ml-4">
                       {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
                       <input
-                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-0.5"
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5"
                           type="number"
                           value={t.minimumLapTime}
                           on:input={(e) => {

src/components/users/AddUserModal.svelte

@@ -156,7 +156,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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -179,7 +179,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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div> -->
                 <div class="col-span-6">
@@ -198,7 +198,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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -224,7 +224,7 @@
                     bind:this={password_input}
                     type="password"
                     name="password"
-                    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"
+                    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"
                   />
                   <PasswordStrength
                     bind:password_change={password_input_value}
@@ -243,7 +243,7 @@
                     bind:this={username_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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -259,7 +259,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-neutral-800 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-gray-500 rounded-md p-2"
                   />
                   {#if !isEmailValid}
                     <span

src/components/users/UserDetail.svelte

@@ -115,28 +115,46 @@
         <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
-								><svg
+                class="flex-shrink-0 w-5 h-5 mr-2"
-									xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
                 width="24"
                 height="24"
+                xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-									fill="none"
+                ><path
+                  fill="currentColor"
+                  d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z"
+                /></svg
+              >
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">{$_("users")}</a><svg
                 stroke="currentColor"
+                fill="none"
                 stroke-width="2"
+                viewBox="0 0 24 24"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-									class="inline-block"
+                class="h-3 w-3 mr-2 stroke-current"
-									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+                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
               >
-								{$_("users")}</a
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2"
+                >{original_data.firstname}
+                {original_data.lastname}</span
               >
             </li>
           </ol>
         </nav>
       </div>
     </div>
-		<div class="mb-4 text-3xl font-extrabold">
+    <div class="mb-8 text-3xl font-extrabold">
       {original_data.firstname}
       {original_data.lastname}
       <span data-id="user_actions_${editable_userdata.id}">
@@ -179,7 +197,7 @@
       </span>
     </div>
     <div class="mt-3 text-sm w-full">
-			<label for="enabled" class="font-semibold text-gray-700"
+      <label for="enabled" class="ml-1 font-medium text-gray-700"
         >{$_("active")}?</label
       >
       <br />
@@ -197,8 +215,8 @@
         {$_("set-the-user-active-inactive")}
       </p>
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="firstname" class="font-semibold text-gray-700"
+      <label for="firstname" class="font-medium text-gray-700"
         >{$_("first-name")}</label
       >
       <input
@@ -207,11 +225,11 @@
         type="text"
         bind:value={editable_userdata.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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
-		<!-- <div class="text-sm w-full mt-2">
+    <!-- <div class="text-sm w-full">
-      <label for="middlename" class="font-semibold text-gray-700"
+      <label for="middlename" class="font-medium text-gray-700"
         >{$_("middle-name")}</label
       >
       <input
@@ -220,11 +238,11 @@
         type="text"
         bind:value={editable_userdata.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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div> -->
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="lastname" class="font-semibold text-gray-700"
+      <label for="lastname" class="font-medium text-gray-700"
         >{$_("last-name")}</label
       >
       <input
@@ -233,11 +251,11 @@
         type="text"
         bind:value={editable_userdata.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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="email" class="font-semibold text-gray-700"
+      <label for="email" class="font-medium text-gray-700"
         >{$_("e-mail-adress")}</label
       >
       <input
@@ -246,7 +264,7 @@
         type="email"
         bind:value={editable_userdata.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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
     {#if !isEmail(editable_userdata.email)}
@@ -255,8 +273,8 @@
         >{$_("valid-email-is-required")}</span
       >
     {/if}
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<label for="username" class="font-semibold text-gray-700"
+      <label for="username" class="font-medium text-gray-700"
         >{$_("username")}</label
       >
       <input
@@ -265,15 +283,15 @@
         type="text"
         bind:value={editable_userdata.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-neutral-800 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-gray-500 rounded-md p-2"
       />
     </div>
-		<div class="text-sm w-full mt-2">
+    <div class="text-sm w-full">
-			<span class="font-semibold">{$_("groups")}</span>
+      <span class="font-medium">{$_("groups")}</span>
       <!-- svelte-ignore a11y-no-onchange -->
       <select
         bind:value={usergroups_array}
-				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"
+        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"
         multiple
       >
         {#each allgroups as g}
@@ -299,7 +317,7 @@
           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-neutral-800 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-gray-500 rounded-md p-2"
         />
       </div>
       {#each original_data.permissions as p}

src/components/users/UserPermissions.svelte

@@ -138,7 +138,7 @@
         </nav>
       </div>
     </div>
-    <div class="mb-4 text-3xl font-extrabold">
+    <div class="mb-8 text-3xl font-extrabold">
       {$_("permissions")}:
       {original_data.firstname}
       {original_data.middlename || ""}

src/components/users/Users.svelte

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

src/components/users/UsersOverview.svelte

@@ -115,11 +115,11 @@
                       >
                     {/if}
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 gap-0.5 flex flex-wrap">
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                     {#each u.groups as g}
                       <a
                         href="../groups/{g.id}"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border bg-gray-100 text-gray-800 border-current"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border bg-gray-100 text-gray-800"
                         >{g.name}</a
                       >
                     {/each}

src/main.js

@@ -1,11 +1,5 @@
 import "./style.css";
 import App from "./App.svelte";
-import "@fontsource/athiti/200.css";
-import "@fontsource/athiti/300.css";
-import "@fontsource/athiti/400.css";
-import "@fontsource/athiti/500.css";
-import "@fontsource/athiti/600.css";
-import "@fontsource/athiti/700.css";
 
 const app = new App({
   target: document.body,

src/style.css

@@ -4,7 +4,4 @@
     @apply bg-gray-300;
     @apply text-black;
 }
-* {
-  font-family: Athiti;
-}
 @tailwind utilities;

versionbuilder.js

@@ -1,10 +1,10 @@
 import fs from "fs";
 const packagejson = JSON.parse(
-  fs.readFileSync(`./package.json`, { encoding: "utf-8" }),
+  fs.readFileSync(`./package.json`, { encoding: "utf-8" })
 );
 const original = fs.readFileSync(`./index.html`, { encoding: "utf-8" });
 let out = original.replace(
   /RELEASE_INFO-(\S)+-RELEASE_INFO/gi,
-  "RELEASE_INFO-" + packagejson.version + "-RELEASE_INFO",
+  "RELEASE_INFO-" + packagejson.version + "-RELEASE_INFO"
 );
 fs.writeFileSync(`./index.html`, out);