feat: improve input readability

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-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="400"
                     />
                     <span

src/components/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-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}

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-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}

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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -231,7 +231,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -250,7 +250,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -270,7 +270,7 @@
                     name="team"
                     multiple
                     bind:value={selected_team}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   >
                     {#each teams as team}
                       <option value={team.id}>
@@ -300,7 +300,7 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isPhoneValidOrEmpty}
                     <span
@@ -328,7 +328,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span
@@ -371,7 +371,7 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -394,7 +394,7 @@
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
                   <div class="col-span-6">
@@ -413,7 +413,7 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -439,7 +439,7 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span

src/components/contacts/ContactDetail.svelte

@@ -144,10 +144,7 @@
       </div>
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_data.firstname}
+      <div data-id="contact_actions_${editable.id}">
-      {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
@@ -184,7 +181,7 @@
             >{$_("save-changes")}</button
           >
         {/if}
-      </span>
+      </div>
     </div>
     <!--  -->
     <div class="text-sm w-full">
@@ -200,7 +197,7 @@
         class:focus:ring-red-500={!isFirstnameValid}
         bind:value={editable.firstname}
         name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
       {#if !isFirstnameValid}
         <span
@@ -220,7 +217,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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
     <div class="text-sm w-full">
@@ -236,7 +233,7 @@
         class:focus:border-red-500={!isLastnameValid}
         class:focus:ring-red-500={!isLastnameValid}
         name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
       {#if !isLastnameValid}
         <span
@@ -259,7 +256,7 @@
         class:focus:border-red-500={!isEmailValid}
         class:focus:ring-red-500={!isEmailValid}
         name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
       {#if !isEmailValid}
         <span
@@ -280,7 +277,7 @@
         class:focus:ring-red-500={!isPhoneValidOrEmpty}
         bind:value={editable.phone}
         name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
       {#if !isPhoneValidOrEmpty}
         <span
@@ -296,7 +293,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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       >
         {#each teams as team}
           <option value={team.id}>
@@ -341,7 +338,7 @@
           bind:value={editable.address.address1}
           type="text"
           name="address1"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         />
         {#if !isAddress1Valid}
           <span
@@ -361,7 +358,7 @@
           bind:value={editable.address.address2}
           type="text"
           name="address2"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         />
       </div>
       <div class="col-span-6">
@@ -377,7 +374,7 @@
           bind:value={editable.address.postalcode}
           type="text"
           name="zipcode"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         />
         {#if !iszipcodevalid}
           <span
@@ -400,7 +397,7 @@
           bind:value={editable.address.city}
           type="text"
           name="city"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         />
         {#if !iscityvalid}
           <span

src/components/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"
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 				href="/"
 			>
 				<svg
@@ -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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/runners/"
 				>
 					<svg
@@ -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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/teams/"
 				>
 					<svg
@@ -85,7 +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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/orgs/"
 				>
 					<svg
@@ -106,7 +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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/donors/"
 				>
 					<svg
@@ -127,7 +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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/donations/"
 				>
 					<svg
@@ -148,7 +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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/tracks/"
 				>
 					<svg
@@ -169,7 +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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/cards/"
 				>
 					<svg
@@ -191,8 +191,8 @@
 			{/if}
 			{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
 				<a
-          class:activenav={$router.path === "/scans/"}
+					class:activenav={$router.path.includes("/scans/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/scans/"
 				>
 					<svg
@@ -213,8 +213,8 @@
 			{/if}
 			{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
 				<a
-          class:activenav={$router.path === "/contacts/"}
+					class:activenav={$router.path.includes("/contacts/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/contacts/"
 				>
 					<svg
@@ -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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/scanstations/"
 				>
 					<svg
@@ -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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/statsclients/"
 				>
 					<svg
@@ -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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/users/"
 				>
 					<svg
@@ -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"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 					href="/groups/"
 				>
 					<svg
@@ -320,7 +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"
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 				href="/settings/"
 			>
 				<svg
@@ -339,7 +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"
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 				href="/about/"
 			>
 				<svg
@@ -358,7 +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"
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 				on:click={() => {
 					AuthService.authControllerLogout();
 					logout();
@@ -390,11 +390,21 @@
 				}}
 				class="block btn btn-light md:hidden"
 			>
-        <span class="sr-only">Menu</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+				<span class="sr-only">Menu</span><svg
-          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+					xmlns="http://www.w3.org/2000/svg"
-        </svg>
+					fill="none"
-        </button
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="size-6"
 				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+					/>
+				</svg>
+			</button>
 			<span class="inline-block">
 				<img src="/lfk-logo.png" alt="Logo" class="h-8 inline-block" />
 				<span class="text-lg font-bold">LfK!Admin</span>

src/components/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-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterDonors(label, filterText, option)}
                     items={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-gray-500 rounded-md p-2"
+                      containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                       itemFilter={(label, filterText, option) =>
                         filterDonors(label, filterText, option)}
                       items={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-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="2.00"
                     />
                     <span

src/components/donations/DonationDetail.svelte

@@ -173,19 +173,19 @@
         {$_("fixed-donation")}:
         {amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
       {/if}
-      <span data-id="donation_actions_${original_data.id}">
+      <div data-id="donation_actions_${original_data.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
           {#if delete_triggered}
             <button
               on:click={deleteDonation}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
               >{$_("confirm-deletion")}</button
             >
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
               }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
               >{$_("cancel")}</button
             >
           {/if}
@@ -195,7 +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:ml-3 sm:w-auto sm:"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
               >{$_("delete-donation")}</button
             >
           {/if}
@@ -206,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:ml-3 sm:w-auto sm:"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
             >{$_("save-changes")}</button
           >
         {/if}
-      </span>
+      </div>
     </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-gray-500 rounded-md p-2"
+        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         itemFilter={(label, filterText, option) =>
           filterDonors(label, filterText, option)}
         items={current_donors}
@@ -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-gray-500 rounded-md p-2"
+          containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
           itemFilter={(label, filterText, option) =>
             filterDonors(label, filterText, option)}
           items={current_runners}
@@ -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-gray-500 p-2"
+          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 p-2"
           placeholder="2.00"
         />
         <span

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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -219,7 +219,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -238,7 +238,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -264,7 +264,7 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isPhoneValidOrEmpty}
                     <span
@@ -292,7 +292,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span
@@ -335,7 +335,7 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -358,7 +358,7 @@
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
                   <div class="col-span-6">
@@ -377,7 +377,7 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -403,7 +403,7 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span

src/components/donors/DonorDetail.svelte

@@ -144,19 +144,20 @@
 			{original_data.firstname}
 			{original_data.middlename || ""}
 			{original_data.lastname}
-      <span data-id="donor_actions_${editable.id}">
+			<div 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:ml-3 sm:w-auto sm:"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
 							>{$_("confirm-deletion")}</button
 						>
 						<button
 							on:click={() => {
 								delete_triggered = !delete_triggered;
 							}}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
 							>{$_("cancel")}</button
 						>
 					{/if}
@@ -166,7 +167,7 @@
 								delete_triggered = true;
 							}}
 							type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
 							>{$_("delete-donor")}</button
 						>
 					{/if}
@@ -177,11 +178,11 @@
 						class:opacity-50={!save_enabled}
 						type="button"
 						on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
 						>{$_("save-changes")}</button
 					>
 				{/if}
-      </span>
+			</div>
 		</div>
 		<!--  -->
 		<div>
@@ -238,7 +239,7 @@
 				class:focus:ring-red-500={!isFirstnameValid}
 				bind:value={editable.firstname}
 				name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="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"
 			/>
 			{#if !isFirstnameValid}
 				<span
@@ -258,7 +259,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-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
 		<div class=" w-full">
@@ -274,7 +275,7 @@
 				class:focus:border-red-500={!isLastnameValid}
 				class:focus:ring-red-500={!isLastnameValid}
 				name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="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"
 			/>
 			{#if !isLastnameValid}
 				<span
@@ -297,7 +298,7 @@
 				class:focus:border-red-500={!isEmailValid}
 				class:focus:ring-red-500={!isEmailValid}
 				name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="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"
 			/>
 			{#if !isEmailValid}
 				<span
@@ -318,7 +319,7 @@
 				class:focus:ring-red-500={!isPhoneValidOrEmpty}
 				bind:value={editable.phone}
 				name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="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"
 			/>
 			{#if !isPhoneValidOrEmpty}
 				<span
@@ -358,7 +359,7 @@
 					bind:value={editable.address.address1}
 					type="text"
 					name="address1"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="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"
 				/>
 				{#if !isAddress1Valid}
 					<span
@@ -378,7 +379,7 @@
 					bind:value={editable.address.address2}
 					type="text"
 					name="address2"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="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"
 				/>
 			</div>
 			<div class="col-span-6">
@@ -394,7 +395,7 @@
 					bind:value={editable.address.postalcode}
 					type="text"
 					name="zipcode"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="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"
 				/>
 				{#if !iszipcodevalid}
 					<span
@@ -417,7 +418,7 @@
 					bind:value={editable.address.city}
 					type="text"
 					name="city"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+					class="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"
 				/>
 				{#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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isNameValid}
                     <span
@@ -152,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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
               </div>

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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
       {#if !isGroupnameValid}
         <span
@@ -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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
     <div class="text-sm w-full mt-8">
@@ -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-gray-500 rounded-md p-2"
+          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         />
       </div>
       {#each original_data.permissions as p}

src/components/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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isOrgnameValid}
                     <span
@@ -196,7 +196,7 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -219,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-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
                   <div class="col-span-6">
@@ -238,7 +238,7 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -264,7 +264,7 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span

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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
     <div class="text-sm w-full">
@@ -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-gray-500 rounded-md p-2"
+        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         itemFilter={(label, filterText, option) =>
           label.toLowerCase().includes(filterText.toLowerCase()) ||
           option.value.id.toString().startsWith(filterText.toLowerCase())}
@@ -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-gray-500 p-2"
+                class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
               >
                 {#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-gray-500 rounded-md p-2"
+              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
             />
             {#if !isAddress1Valid}
               <span
@@ -421,7 +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-gray-500 rounded-md p-2"
+              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
             />
           </div>
           <div class="col-span-6">
@@ -437,7 +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-gray-500 rounded-md p-2"
+              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
             />
             {#if !iszipcodevalid}
               <span
@@ -460,7 +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-gray-500 rounded-md p-2"
+              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
             />
             {#if !iscityvalid}
               <span

src/components/pdf_generation/GenerateRunnerCards.svelte

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

src/components/pdf_generation/GenerateRunnerCertificates.svelte

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

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
 	import {
 		RunnerOrganizationService,
 		RunnerTeamService,
@@ -8,26 +8,17 @@
 	import { init } from "@paralleldrive/cuid2";
 	import toast from "svelte-french-toast";
 	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
+	const documentServer = new DocumentServer(
-
+		config.baseurl_documentserver,
+		config.documentserver_key
+	);
 
 	export let sponsoring_contracts_show = false;
 	export let generate_runners = [];
 	export let generate_orgs = [];
 	export let generate_teams = [];
-  $: sponsoring_contracts_download_open = false;
-  document.addEventListener("click", function (e) {
-    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) {
@@ -56,11 +47,13 @@
 			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
 				t.id
 			);
-      documentServer.generateContracts(runners, locale)
+			documentServer
+				.generateContracts(runners, locale)
 				.then((blob) => {
-          download(blob, `${$_("sponsorings")}_${
+					download(
-            t.name
+						blob,
-          }-${locale}-${createId()}.pdf`)
+						`${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`
+					);
 				})
 				.catch((err) => {});
 		}
@@ -77,11 +70,13 @@
 					o.id,
 					true
 				);
-      await documentServer.generateContracts(runners, locale)
+			await documentServer
+				.generateContracts(runners, locale)
 				.then((blob) => {
-          download(blob, `${$_("sponsorings")}_${
+					download(
-            o.name
+						blob,
-          }_direct-${locale}-${createId()}.pdf`)
+						`${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`
+					);
 				})
 				.catch((err) => {});
 			for (const t of o.teams) {
@@ -89,11 +84,15 @@
 				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
 					t.id
 				);
-        await documentServer.generateContracts(runners, locale)
+				await documentServer
+					.generateContracts(runners, locale)
 					.then((blob) => {
-            download(blob, `${$_("sponsorings")}_${o.name}_${
+						download(
+							blob,
+							`${$_("sponsorings")}_${o.name}_${
 								t.name
-            }-${locale}-${createId()}.pdf`)
+							}-${locale}-${createId()}.pdf`
+						);
 					})
 					.catch((err) => {});
 			}
@@ -102,9 +101,10 @@
 
 	function generateRunnerContracts(locale) {
 		toast.loading($_("generating-pdf"));
-    documentServer.generateContracts(generate_runners, locale)
+		documentServer
+			.generateContracts(generate_runners, locale)
 			.then((blob) => {
-        let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`
+				let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
 				if (generate_runners.length == 1) {
 					fileName = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
 						generate_runners[0].lastname
@@ -119,70 +119,25 @@
 </script>
 
 {#if sponsoring_contracts_show}
-  <div id="sponsoring:dropdown" class="relative inline-block">
 	<div>
-      <button
+		<p class="text-base">{$_("generate-sponsoring-contracts")}</p>
-        on:click={() => {
+		<div class="inline-flex rounded-lg shadow-2xs">
-          sponsoring_contracts_download_open =
-            !sponsoring_contracts_download_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-sponsoring-contracts")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if sponsoring_contracts_download_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="sponsoring:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
 			<button
 				on:click={() => {
 					generateSponsoringContract("de");
 				}}
-            type="submit"
+				class="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"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
 			>
-            {$_("german")}
+				DE
 			</button>
 			<button
 				on:click={() => {
 					generateSponsoringContract("en");
 				}}
-            type="submit"
+				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"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
 			>
-            {$_("english")}
+				EN
 			</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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -212,7 +212,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -231,7 +231,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -248,7 +248,7 @@
                     >{$_("team")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id
@@ -281,7 +281,7 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isPhoneValidOrEmpty}
                     <span
@@ -309,7 +309,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span

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-gray-500 rounded-md p-2"
+                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                 >
                   {#each passed_orgs as o}
                     <option value={o.id}>{o.name}</option>
@@ -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-gray-500 rounded-md p-2"
+                  containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   itemFilter={(label, filterText, option) =>
                     label.toLowerCase().includes(filterText.toLowerCase()) ||
                     option.id.value

src/components/runners/RunnerDetail.svelte

@@ -144,8 +144,22 @@
 			{original_data.firstname}
 			{original_data.middlename || ""}
 			{original_data.lastname}
-      <span data-id="runner_actions_${editable.id}">
+			<span
+				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}
@@ -159,17 +173,7 @@
 								class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
 								>{$_("cancel")}</button
 							>
-          {/if}
+						{:else}
-          <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;
@@ -178,9 +182,6 @@
 								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}
@@ -190,6 +191,8 @@
 								>{$_("save-changes")}</button
 							>
 						{/if}
+					</div>
+				{/if}
 			</span>
 		</div>
 		<!--  -->
@@ -206,7 +209,7 @@
 				class:focus:ring-red-500={!isFirstnameValid}
 				bind:value={editable.firstname}
 				name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isFirstnameValid}
 				<span
@@ -226,7 +229,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-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
 		<div class="text-sm w-full">
@@ -242,7 +245,7 @@
 				class:focus:border-red-500={!isLastnameValid}
 				class:focus:ring-red-500={!isLastnameValid}
 				name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isLastnameValid}
 				<span
@@ -265,7 +268,7 @@
 				class:focus:border-red-500={!isEmailValid}
 				class:focus:ring-red-500={!isEmailValid}
 				name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 			{#if !isEmailValid}
 				<span
@@ -283,13 +286,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-gray-500 rounded-md p-2"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 			/>
 		</div>
 		<div class="text-sm w-full">
 			<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-gray-500 rounded-md p-2"
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				itemFilter={(label, filterText, option) =>
 					label.toLowerCase().includes(filterText.toLowerCase()) ||
 					option.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-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}
@@ -160,7 +160,7 @@
                       type="number"
                       step="1"
                       name="donation_amount_eur"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="400"
                     />
                     <span

src/components/scans/ScanDetail.svelte

@@ -151,19 +151,19 @@
       {runner.value?.middlename || ""}
       {runner.value?.lastname}
       #{original_data.id}
-      <span data-id="donation_actions_${original_data.id}">
+      <div data-id="donation_actions_${original_data.id}">
         {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
           {#if delete_triggered}
             <button
               on:click={deleteScan}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
               >{$_("confirm-deletion")}</button
             >
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
               }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
               >{$_("cancel")}</button
             >
           {/if}
@@ -173,7 +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:ml-3 sm:w-auto sm:"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
               >{$_("delete-scan")}</button
             >
           {/if}
@@ -184,11 +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:ml-3 sm:w-auto sm:"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
             >{$_("save-changes")}</button
           >
         {/if}
-      </span>
+      </div>
     </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-gray-500 rounded-md p-2"
+        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         itemFilter={(label, filterText, option) =>
           filterRunners(label, filterText, option)}
         items={current_runners}
@@ -266,7 +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-gray-500 p-2"
+          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
           placeholder="400"
         />
         <span

src/components/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-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id
@@ -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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">

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-gray-500 p-2"
+										class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
 									>
 										{new_station.key}
 									</p>

src/components/scanstations/ScanStationDetail.svelte

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

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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="text-sm w-full">
@@ -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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 {#if !isEmail(editable.email)}
@@ -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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <!-- <div class="text-sm w-full">
@@ -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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div> -->
                 <div class="text-sm w-full">
@@ -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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
               </div>

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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
               </div>

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-gray-500 p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                   >
                     {new_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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       >
         {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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !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-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id

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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
     <div class="text-sm w-full">
@@ -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-gray-500 rounded-md p-2"
+        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         itemFilter={(label, filterText, option) =>
           label.toLowerCase().includes(filterText.toLowerCase()) ||
           option.value.id.toString().startsWith(filterText.toLowerCase())}
@@ -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-gray-500 rounded-md p-2"
+        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         itemFilter={(label, filterText, option) =>
           label.toLowerCase().includes(filterText.toLowerCase()) ||
           option.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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if 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-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="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-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder={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-gray-500 rounded-md p-0.5"
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 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-gray-500 rounded-md p-0.5"
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 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-gray-500 rounded-md p-0.5"
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div> -->
                 <div class="col-span-6">
@@ -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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   <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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -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-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValid}
                     <span

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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
     <!-- <div class="text-sm w-full">
@@ -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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div> -->
     <div class="text-sm w-full">
@@ -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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
     <div class="text-sm w-full">
@@ -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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
     {#if !isEmail(editable_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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div>
     <div class="text-sm w-full">
@@ -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-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         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-gray-500 rounded-md p-2"
+          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
         />
       </div>
       {#each original_data.permissions as p}