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

@@ -144,7 +144,10 @@
       </div>
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
-      <div data-id="contact_actions_${editable.id}">
+      {original_data.firstname}
+      {original_data.middlename || ""}
+      {original_data.lastname}
+      <span data-id="contact_actions_${editable.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
           {#if delete_triggered}
             <button
@@ -181,7 +184,7 @@
             >{$_("save-changes")}</button
           >
         {/if}
-      </div>
+      </span>
     </div>
     <!--  -->
     <div class="text-sm w-full">
@@ -197,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
@@ -217,7 +220,7 @@
         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">
@@ -233,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
@@ -256,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
@@ -277,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
@@ -293,7 +296,7 @@
         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}>
@@ -338,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
@@ -358,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">
@@ -374,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
@@ -397,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/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 w-full"
         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 w-full"
           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 w-full"
           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 w-full"
           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 w-full"
           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 w-full"
           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 w-full"
           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 w-full"
           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 w-full"
           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 w-full"
           href="/contacts/"
         >
           <svg
@@ -235,7 +235,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
         <a
           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 w-full"
           href="/scanstations/"
         >
           <svg
@@ -257,7 +257,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
         <a
           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 w-full"
           href="/statsclients/"
         >
           <svg
@@ -279,7 +279,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
         <a
           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 w-full"
           href="/users/"
         >
           <svg
@@ -300,7 +300,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
         <a
           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 w-full"
           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 w-full"
         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 w-full"
         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 w-full"
         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/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

@@ -173,19 +173,19 @@
         {$_("fixed-donation")}:
         {amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
       {/if}
-      <div data-id="donation_actions_${original_data.id}">
+      <span 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}
@@ -195,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}
@@ -206,11 +206,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>
@@ -249,7 +249,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={current_donors}
@@ -272,7 +272,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={current_runners}
@@ -302,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

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

@@ -144,20 +144,19 @@
       {original_data.firstname}
       {original_data.middlename || ""}
       {original_data.lastname}
-			<div data-id="donor_actions_${editable.id}">
+      <span data-id="donor_actions_${editable.id}">
-				<p class="text-base">Aktionen</p>
         {#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}
@@ -167,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}
@@ -178,11 +177,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>
@@ -239,7 +238,7 @@
         class:focus:ring-red-500={!isFirstnameValid}
         bind:value={editable.firstname}
         name="firstname"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-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
@@ -259,7 +258,7 @@
         type="text"
         bind:value={editable.middlename}
         name="middlename"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-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=" w-full">
@@ -275,7 +274,7 @@
         class:focus:border-red-500={!isLastnameValid}
         class:focus:ring-red-500={!isLastnameValid}
         name="lastname"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-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
@@ -298,7 +297,7 @@
         class:focus:border-red-500={!isEmailValid}
         class:focus:ring-red-500={!isEmailValid}
         name="email"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-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
@@ -319,7 +318,7 @@
         class:focus:ring-red-500={!isPhoneValidOrEmpty}
         bind:value={editable.phone}
         name="phone"
-				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-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
@@ -359,7 +358,7 @@
           bind:value={editable.address.address1}
           type="text"
           name="address1"
-					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-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
@@ -379,7 +378,7 @@
           bind:value={editable.address.address2}
           type="text"
           name="address2"
-					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-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">
@@ -395,7 +394,7 @@
           bind:value={editable.address.postalcode}
           type="text"
           name="zipcode"
-					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-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
@@ -418,7 +417,7 @@
           bind:value={editable.address.city}
           type="text"
           name="city"
-					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-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/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

@@ -178,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
@@ -198,7 +198,7 @@
         type="text"
         bind:value={editable.description}
         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-8">
@@ -216,7 +216,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/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
@@ -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

@@ -285,7 +285,7 @@
         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">
@@ -293,7 +293,7 @@
         >{$_("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())}
@@ -332,7 +332,7 @@
             <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}
@@ -399,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
@@ -421,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">
@@ -437,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
@@ -460,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

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) => {});
     }
@@ -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) => {});
     }
@@ -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) => {});
     }
@@ -70,13 +77,11 @@
           o.id,
           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/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

@@ -144,22 +144,8 @@
       {original_data.firstname}
       {original_data.middlename || ""}
       {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>
-						<p class="text-base">Aktionen</p>
           {#if delete_triggered}
             <button
               on:click={deleteRunner}
@@ -173,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;
@@ -182,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}
@@ -191,8 +190,6 @@
             >{$_("save-changes")}</button
           >
         {/if}
-					</div>
-				{/if}
       </span>
     </div>
     <!--  -->
@@ -209,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
@@ -229,7 +226,7 @@
         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">
@@ -245,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
@@ -268,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
@@ -286,13 +283,13 @@
         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">
       <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())}

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

@@ -151,19 +151,19 @@
       {runner.value?.middlename || ""}
       {runner.value?.lastname}
       #{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}
@@ -173,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}
@@ -184,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">
@@ -233,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}
@@ -266,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/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,7 +161,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 class="col-span-6">

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

@@ -105,7 +105,8 @@
       </div>
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
-      <div data-id="stations_actions_${editable.id}">
+      #{original_data.id}
+      <span data-id="stations_actions_${editable.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
           {#if delete_triggered}
             <button
@@ -142,7 +143,7 @@
             >{$_("save-changes")}</button
           >
         {/if}
-      </div>
+      </span>
     </div>
     <!--  -->
     <div class="text-sm w-full">
@@ -150,7 +151,7 @@
         >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.toString().startsWith(filterText.toLowerCase())}
@@ -174,7 +175,7 @@
         type="text"
         bind:value={editable.description}
         name="description"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-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">

src/components/settings/Settings.svelte

@@ -101,7 +101,7 @@
                     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">
@@ -114,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)}
@@ -133,7 +133,7 @@
                     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">
@@ -146,7 +146,7 @@
                     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">
@@ -159,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>

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

@@ -113,7 +113,7 @@
       >
       <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/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

@@ -250,7 +250,7 @@
         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">
@@ -258,7 +258,7 @@
         >{$_("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())}
@@ -277,7 +277,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.id.value.toString().startsWith(filterText.toLowerCase())}

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

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

@@ -225,7 +225,7 @@
         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">
@@ -238,7 +238,7 @@
         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">
@@ -251,7 +251,7 @@
         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">
@@ -264,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)}
@@ -283,7 +283,7 @@
         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">
@@ -291,7 +291,7 @@
       <!-- 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}
@@ -317,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}