Updates

src/components/dashboard/SchematicInfo.svelte

@@ -19,10 +19,11 @@
 
 <script lang="ts">
     import {createEventDispatcher} from "svelte";
-    import {Modal, Spinner} from "flowbite-svelte";
+    import {Spinner} from "flowbite-svelte";
     import SchematicInfoModal from "./SchematicInfoModal.svelte";
     import type {Player} from "@type/data.ts";
     import {schemRepo} from "@repo/schem.ts";
+    import SWModal from "@components/styled/SWModal.svelte";
 
     const dispatch = createEventDispatcher();
 
@@ -37,14 +38,14 @@
 </script>
 
 {#await schemInfo}
-    <Modal title="Loading" open on:close={() => dispatch("reset")}>
+    <SWModal title="Loading" open on:close={() => dispatch("reset")}>
         <Spinner />
-    </Modal>
+    </SWModal>
 {:then info}
     <SchematicInfoModal {user} {info} on:reset />
 {:catch e}
-    <Modal title="Error" open on:close={() => dispatch("reset")}>
+    <SWModal title="Error" open on:close={() => dispatch("reset")}>
         <p>{e.message}</p>
         <button class="btn !ml-auto" slot="footer" on:click={() => dispatch("reset")}>Close</button>
-    </Modal>
+    </SWModal>
 {/await}

src/components/dashboard/SchematicInfoModal.svelte

@@ -20,12 +20,12 @@
 <script lang="ts">
     import {astroI18n, t} from "astro-i18n";
     import {CheckSolid, XCircleOutline} from "flowbite-svelte-icons";
-    import {Modal} from "flowbite-svelte";
     import type {SchematicInfo} from "@type/schem.ts";
     import {createEventDispatcher} from "svelte";
     import type {Player} from "@type/data.ts";
     import dayjs from "dayjs";
     import {schemRepo} from "@repo/schem.ts";
+    import SWModal from "@components/styled/SWModal.svelte";
 
     const dispatch = createEventDispatcher();
 
@@ -39,7 +39,7 @@
     }
 </script>
 
-<Modal title={info.schem.name} autoclose open on:close={() => dispatch("reset")}>
+<SWModal title={info.schem.name} open on:close={() => dispatch("reset")}>
     <p>{t("dashboard.schematic.info.path", {path: info.path})}</p>
     <p class="flex !mt-0">
         {t("dashboard.schematic.info.replaceColor")}
@@ -76,4 +76,4 @@
         {/if}
         <button class="btn" class:!ml-auto={info.schem.owner !== user.id} on:click={() => dispatch("reset")}>{t("dashboard.schematic.info.btn.close")}</button>
     </svelte:fragment>
-</Modal>
+</SWModal>

src/components/dashboard/SchematicList.svelte

@@ -150,7 +150,7 @@
 <div class="w-full flex justify-center mt-4">
     <ul class="inline-flex">
         <li>
-            <button on:click={() => page = 0} class="btn btn-gray h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
+            <button on:click={() => page = 0} class="btn btn-gray h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
                 <span class="sr-only">Next</span>
                 <ChevronDoubleLeftOutline class="w-3 h-3" />
             </button>

src/components/dashboard/Statistics.svelte

@@ -34,14 +34,13 @@
 {#await request}
     <p>{t("status.loading")}</p>
 {:then data}
-    <p>Playtime: {new Intl.NumberFormat(astroI18n.locale, {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-    }).format(data.playtime)}h</p>
-    <p>Fights: {data.fights}</p>
+    <p>{t("dashboard.stats.playtime", {playtime: new Intl.NumberFormat(astroI18n.locale, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+        }).format(data.playtime)})}</p>
+    <p>{t("dashboard.stats.fights", {fights: data.fights})}</p>
     {#if user.perms.includes("CHECK")}
-        <p>Schematics Checked: {data.acceptedSchematics}</p>
+        <p>{t("dashboard.stats.checked", {checked: data.acceptedSchematics})}</p>
     {/if}
 {:catch error}
-    <p>error: {error}</p>
 {/await}

src/components/dashboard/UploadModal.svelte

@@ -18,9 +18,10 @@
   -->
 
 <script lang="ts">
-    import {Modal} from "flowbite-svelte";
     import {createEventDispatcher} from "svelte";
     import {schemRepo} from "@repo/schem.ts";
+    import SWModal from "@components/styled/SWModal.svelte";
+    import {t} from "astro-i18n"
 
     const dispatch = createEventDispatcher();
 
@@ -55,12 +56,12 @@
     let uploadFile: FileList | null = null;
 </script>
 
-<Modal title="Upload Schematic" bind:open autoclose outsideclose>
+<SWModal title={t("dashboard.schematic.title")} bind:open>
     <form>
         <input type="file" bind:files={uploadFile} />
     </form>
     <svelte:fragment slot="footer">
-        <button class="btn !ml-auto" on:click={upload}>Upload</button>
-        <button class="btn btn-gray" on:click={() => open = false}>Close</button>
+        <button class="btn !ml-auto" on:click={upload}>{t("dashboard.schematic.upload")}</button>
+        <button class="btn btn-gray" on:click={() => open = false}>{t("dashboard.schematic.cancel")}</button>
     </svelte:fragment>
-</Modal>
+</SWModal>

src/components/dashboard/UserInfo.svelte

@@ -24,6 +24,8 @@
     import Statistics from "./Statistics.svelte";
     import {authRepo} from "@repo/auth.ts";
     import {tokenStore} from "@repo/repo.ts";
+    import SWModal from "@components/styled/SWModal.svelte";
+    import SWButton from "@components/styled/SWButton.svelte";
 
     export let user: Player;
 
@@ -33,6 +35,7 @@
         window.location.href = l("/login")
     }
 </script>
+
 <div class="flex mb-4 flex-col md:flex-row">
     <div>
         <div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg hidden md:block