text cleanups, StatCard improvements

2023-04-27 08:29:07 +02:00 · 2023-04-27 08:29:07 +02:00 · a2f9dbbe01
parent 8b922309b9
commit a2f9dbbe01
26 changed files with 96 additions and 67 deletions
--- a/src/App.svelte
+++ b/src/App.svelte
@ -22,7 +22,7 @@
    name: "lfk_admin",
    version: 1.0,
    storeName: "lfk_admin",
-    description: "LfK! admin dashbaord",
+    description: "LfK! admin dashboard",
  });
  window.onunhandledrejection = (event) => {
    if (event.reason.toString() == "Error: Unauthorized") {
--- a/src/components/auth/Login.svelte
+++ b/src/components/auth/Login.svelte
@ -129,14 +129,14 @@
        </button>
      </div>
    </div>
-    <div class="mt-2">
+    <!-- <div class="mt-2">
      <a
        href="/forgot_password"
        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
      >
        {$_("forgot_password")}
      </a>
-    </div>
+    </div> -->
  </div>
 </div>
 <Footer />
--- a/src/components/contacts/ContactsOverview.svelte
+++ b/src/components/contacts/ContactsOverview.svelte
@ -69,7 +69,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr class="odd:bg-white even:bg-gray-100" data-rowid="team_{t.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="team_{t.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
--- a/src/components/dashboard/Dashboard.svelte
+++ b/src/components/dashboard/Dashboard.svelte
@ -20,7 +20,7 @@
  >
    <a href="/" class="flex items-center px-4 py-5">
      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
-      <h3 class="text-lg">Lauf für Kaya! Admin</h3>
+      <h3 class="text-lg font-bold">LfK!Admin</h3>
    </a>
    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
      <a
--- a/src/components/dashboard/MainDashContent.svelte
+++ b/src/components/dashboard/MainDashContent.svelte
@ -7,19 +7,14 @@
  const stats_promise = StatsService.statsControllerGet();
 </script>

-<div class="p-5 overflow-x-hidden">
-  <h1 class="text-3xl leading-tight">
-    <span class="font-extrabold">{$_("dashboard-title")}</span>
-    <span>
-      -
-      {$_("dashboard-greeting")},
-      <span class="text-blue-500"
-        >{store.state.jwtinfo.userdetails.firstname}
-        {store.state.jwtinfo.userdetails.lastname}</span
-      ></span
+<div class="p-2 md:p-5 overflow-x-hidden">
+  <h1 class="text-3xl leading-tight mb-4">
+    {$_("dashboard-greeting")},
+    <span class="text-blue-500"
+      >{store.state.jwtinfo.userdetails.firstname}
+      {store.state.jwtinfo.userdetails.lastname}</span
    >
  </h1>
-  <h1>{$_("general-stats")}</h1>
  {#await stats_promise}
    <div
      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
@ -30,7 +25,7 @@
    </div>
  {:then stats}
    <div
-      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
+      class="grid gap-2 grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 sm:gap-4"
    >
      <StatCard
        title={$_("runners")}
@ -103,24 +98,35 @@
      </StatCard>
      <StatCard
        title={$_("average-donation")}
-        value={`${(stats.average_donation / 100).toFixed(2)} €`}
+        value={`${parseFloat(stats.average_donation / 100).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}`}
        href="/donations/"
      >
        <svg
-          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          width="24"
          height="24"
-          ><path fill="none" d="M0 0h24v24H0z" />
+          fill="currentColor"
+          width="24"
+          ><path d="M0 0h24v24H0z" fill="none" />
          <path
-            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("total-donations")}
-        value={`${(stats.total_donation / 100).toFixed(2)} €`}
+        value={`${parseFloat(stats.total_donation / 100).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}`}
        href="/donations/"
      >
        <svg
@ -136,7 +142,7 @@
      </StatCard>
      <StatCard
        title={$_("total-distance")}
-        value={`${stats.total_distance / 1000} km`}
+        value={`${stats.total_distance / 1000}km`}
        href="/scans/"
      >
        <svg
@ -152,7 +158,13 @@
      </StatCard>
      <StatCard
        title={$_("average-distance")}
-        value={`${(stats.average_distance / 1000).toFixed(2)} km`}
+        value={`${parseFloat(stats.average_distance / 1000).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}km`}
        href="/scans/"
      >
        <svg
--- a/src/components/dashboard/StatCard.svelte
+++ b/src/components/dashboard/StatCard.svelte
@ -13,7 +13,7 @@
        <div class="text-xs uppercase font-normal text-grey-500">
          {title}
        </div>
-        <div class="text-xl font-bold">{value}</div>
+        <div class="text-xl font-bold font-mono">{value}</div>
      </div>
      <slot />
    </div>
--- a/src/components/donations/DonationDetail.svelte
+++ b/src/components/donations/DonationDetail.svelte
@ -6,7 +6,7 @@
    DonorService,
    RunnerService,
  } from "@odit/lfk-client-js";
-  
+
  import PromiseError from "../base/PromiseError.svelte";
  import Select from "svelte-select";
  let data_loaded = false;
--- a/src/components/donors/DonorDetail.svelte
+++ b/src/components/donors/DonorDetail.svelte
@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  import store from "../../store";
  import { DonorService, DonationService } from "@odit/lfk-client-js";
-  
+
  import PromiseError from "../base/PromiseError.svelte";
  import isEmail from "validator/es/lib/isEmail";
  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
--- a/src/components/groups/GroupDetail.svelte
+++ b/src/components/groups/GroupDetail.svelte
@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  import store from "../../store";
  import { UserGroupService } from "@odit/lfk-client-js";
-  
+
  import PromiseError from "../base/PromiseError.svelte";
  let data_loaded = false;
  export let params;
@ -215,7 +215,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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
        />
      </div>
      {#each original_data.permissions as p}
--- a/src/components/groups/GroupPermissions.svelte
+++ b/src/components/groups/GroupPermissions.svelte
@ -173,7 +173,7 @@
            {#each allpermissions as p}
              {#if !(grantedPermissions.filter((o) => p.target == o.target && p.action == o.action).length > 0)}
                <p
-                  class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
+                  class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
                >
                  {p.target + ":" + p.action}
                  <button
@ -206,7 +206,7 @@
          >
            {#each grantedPermissions as p}
              <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
+                class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
              >
                {p.target + ":" + p.action}
                <button
--- a/src/components/groups/UserGroupsOverview.svelte
+++ b/src/components/groups/UserGroupsOverview.svelte
@ -62,7 +62,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr class="odd:bg-white even:bg-gray-100" data-rowid="user_{group.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="user_{group.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@ -4,7 +4,7 @@
    RunnerOrganizationService,
  } from "@odit/lfk-client-js";
  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  
+
  import store from "../../store";
  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
@ -109,7 +109,7 @@
  }
  async function copy() {
    if (!editable.registrationKey) {
-      toast.error($_("you-have-to-save-your-changes-to-generate-a-link"))
+      toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
      return;
    }
    valueCopy = registrationLink;
@ -124,7 +124,7 @@
      toast($_("copied-link-to-clipboard"));
      copied = true;
    } catch (err) {
-      toast.error($_("error-whyile-copying-to-clipboard"))
+      toast.error($_("error-whyile-copying-to-clipboard"));
    }
    // we can notifi by event or storage about copy status
    valueCopy = null;
--- a/src/components/scans/ScanDetail.svelte
+++ b/src/components/scans/ScanDetail.svelte
@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  import store from "../../store";
  import { RunnerService, ScanService } from "@odit/lfk-client-js";
-  
+
  import PromiseError from "../base/PromiseError.svelte";
  import Select from "svelte-select";
  let data_loaded = false;
--- a/src/components/scanstations/CopyScanStationTokenModal.svelte
+++ b/src/components/scanstations/CopyScanStationTokenModal.svelte
@ -159,7 +159,7 @@
                id="codeswitch"
                type="checkbox"
                bind:checked={is_qrcode}
-                class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
+                class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200"
              />
              <label for="codeswitch" class="text-md text-gray-900 ml-3"
                >QR-Code</label
--- a/src/components/scanstations/ScanStationDetail.svelte
+++ b/src/components/scanstations/ScanStationDetail.svelte
@ -2,7 +2,7 @@
  import { t, _ } from "svelte-i18n";
  import store from "../../store";
  import { ScanStationService, TrackService } from "@odit/lfk-client-js";
-  
+
  import PromiseError from "../base/PromiseError.svelte";
  import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
  import Select from "svelte-select";
--- a/src/components/scanstations/ScanStationsOverview.svelte
+++ b/src/components/scanstations/ScanStationsOverview.svelte
@ -80,7 +80,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr class="odd:bg-white even:bg-gray-100" data-rowid="station_{s.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="station_{s.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
--- a/src/components/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  import isEmail from "validator/es/lib/isEmail";
  import { MeService } from "@odit/lfk-client-js";
-  
+
  import ConfirmProfileDeletion from "./ConfirmProfileDeletion.svelte";
  import PasswordStrength, {
    password_strong_enough_and_equal,
@ -100,7 +100,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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
                  />
                </div>
                <div class="text-sm w-full">
@ -113,7 +113,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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
                  />
                </div>
                {#if !isEmail(editable.email)}
@ -132,7 +132,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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
                  />
                </div>
                <!-- <div class="text-sm w-full">
@ -145,7 +145,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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
                  />
                </div> -->
                <div class="text-sm w-full">
@ -158,7 +158,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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
                  />
                </div>
              </div>
--- a/src/components/statsclients/StatsClientsOverview.svelte
+++ b/src/components/statsclients/StatsClientsOverview.svelte
@ -74,7 +74,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr class="odd:bg-white even:bg-gray-100" data-rowid="station_{c.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="station_{c.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@ -5,7 +5,7 @@
    RunnerTeamService,
  } from "@odit/lfk-client-js";
  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  
+
  import store from "../../store";
  import Select from "svelte-select";
  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
--- a/src/components/teams/TeamsOverview.svelte
+++ b/src/components/teams/TeamsOverview.svelte
@ -122,7 +122,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr class="odd:bg-white even:bg-gray-100" data-rowid="team_{t.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="team_{t.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <input
                      bind:checked={t.is_selected}
--- a/src/components/users/UserDetail.svelte
+++ b/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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
      />
    </div>
    <!-- <div class="text-sm w-full">
@ -238,7 +238,7 @@
        type="text"
        bind:value={editable_userdata.middlename}
        name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
      />
    </div> -->
    <div class="text-sm w-full">
@ -251,7 +251,7 @@
        type="text"
        bind:value={editable_userdata.lastname}
        name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
      />
    </div>
    <div class="text-sm w-full">
@ -264,7 +264,7 @@
        type="email"
        bind:value={editable_userdata.email}
        name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
      />
    </div>
    {#if !isEmail(editable_userdata.email)}
@ -283,7 +283,7 @@
        type="text"
        bind:value={editable_userdata.username}
        name="username"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
      />
    </div>
    <div class="text-sm w-full">
@ -291,7 +291,7 @@
      <!-- svelte-ignore a11y-no-onchange -->
      <select
        bind:value={usergroups_array}
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
        multiple
      >
        {#each allgroups as g}
@ -317,7 +317,7 @@
          placeholder={$_("search-for-permission")}
          type="text"
          bind:value={search_permission}
-          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
+          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
        />
      </div>
      {#each original_data.permissions as p}
--- a/src/components/users/UserPermissions.svelte
+++ b/src/components/users/UserPermissions.svelte
@ -184,7 +184,7 @@
            {#each allpermissions as p}
              {#if !(grantedPermissions.filter((o) => p.target == o.target && p.action == o.action).length > 0)}
                <p
-                  class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
+                  class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
                >
                  {p.target + ":" + p.action}
                  <button
@ -217,7 +217,7 @@
          >
            {#each grantedPermissions as p}
              <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
+                class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
              >
                {p.target + ":" + p.action}
                <button
@ -256,7 +256,7 @@
          >
            {#each inheritedPermissions as p}
              <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
+                class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
              >
                {p.target + ":" + p.action}
              </p>
--- a/src/components/users/Users.svelte
+++ b/src/components/users/Users.svelte
@ -22,7 +22,6 @@
      </button>
    {/if}
  </span>
-  <p class="mb-8 text-lg text-gray-500">{$_("manage-admin-users")}</p>
  <UsersOverview bind:current_users />
 </section>

--- a/src/components/users/UsersOverview.svelte
+++ b/src/components/users/UsersOverview.svelte
@ -85,7 +85,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr class="odd:bg-white even:bg-gray-100" data-rowid="user_{u.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="user_{u.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
--- a/src/locales/de.json
+++ b/src/locales/de.json
@ -205,7 +205,7 @@
    "edit": "Bearbeiten",
    "edit-a-card": "Läuferkarte bearbeiten",
    "edit-permissions": "Berechtigungen bearbeiten",
-    "email_address_or_username": "E-Mail-Adresse/ Benutzername",
+    "email_address_or_username": "E-Mail-Adresse",
    "enabled": "aktiviert",
    "enabled_large": "Aktiviert",
    "english": "Englisch",
@ -388,7 +388,7 @@
    "scanstation": "Scanner Station",
    "scanstation-added": "Station wurde erstellt",
    "scanstation-is-being-added": "Scannerstation wird angelegt...",
-    "scanstations": "Scanner Stationen",
+    "scanstations": "Scanner",
    "scanstations-are-being-loaded": "Scannerstationen werden geladen...",
    "search-for-an-organization-by-name-or-id": "Suche eine Organisation (via Name oder #ID)",
    "search-for-an-organization-or-team-by-name-or-id": "Suche eine Organisation oder ein Team (via Name oder #ID)",
@ -411,7 +411,7 @@
    "statsclient": "StatsClient",
    "statsclient-deleted": "Statsclient wurde gelöscht",
    "statsclient-is-being-added": "Statsclient wird angelegt...",
-    "statsclients": "Statsclient (aka Beamershow)",
+    "statsclients": "StatsClients",
    "statsclients-are-being-loaded": "Statsclients werden geladen",
    "status": "Status",
    "stuff-that-could-harm-your-profile": "Einstellungen, die deinem Profil nachhaltig schaden können",
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -205,7 +205,7 @@
    "edit": "Edit",
    "edit-a-card": "Edit a card",
    "edit-permissions": "edit permissions",
-    "email_address_or_username": "Email / username",
+    "email_address_or_username": "Email",
    "enabled": "enabled",
    "enabled_large": "Enabled",
    "english": "English",
@ -411,7 +411,7 @@
    "statsclient": "statsclient",
    "statsclient-deleted": "Deleted statsclient",
    "statsclient-is-being-added": "Statsclient is being added...",
-    "statsclients": "Statsclients (aka Beamershow)",
+    "statsclients": "Statsclients",
    "statsclients-are-being-loaded": "Loading statsclients",
    "status": "Status",
    "stuff-that-could-harm-your-profile": "Stuff that could harm your profile",