Fix Styles

src/components/DashboardComponent.svelte

@@ -37,13 +37,9 @@
     <p>{t("status.loading")}</p>
 {:then user}
     <UserInfo {user} />
-    <hr>
+    <SWButton onclick={() => uploadOpen = true}>
-
+        {t("dashboard.schematic.upload")}
-    <div class="flex flex-col justify-center">
+    </SWButton>
-        <SWButton on:click={() => uploadOpen = true}>
-            {t("dashboard.schematic.upload")}
-        </SWButton>
-    </div>
 {:catch error}
     <p>error: {error.message}</p>
 {/await}

src/components/styled/SWButton.svelte

@@ -18,19 +18,17 @@
   -->
 
 <script lang="ts">
-  import { createBubbler } from 'svelte/legacy';
-
-  const bubble = createBubbler();
     import "@styles/button.css"
 
-  interface Props {
+    interface Props {
-    type?: "primary" | "ghost" | "gray";
+        type?: "primary" | "ghost" | "gray";
-    children?: import('svelte').Snippet;
+        children: import('svelte').Snippet;
-  }
+        onclick: () => void;
+    }
 
-  let { type = "primary", children }: Props = $props();
+    let { type = "primary", onclick, children }: Props = $props();
 </script>
 
-<button onclick={bubble('click')} class="btn" class:btn-gray={type === "gray"} class:btn-text={type === "ghost"}>
+<button onclick={onclick} class="btn" class:btn-gray={type === "gray"} class:btn-text={type === "ghost"}>
-    {@render children?.()}
+    {@render children()}
 </button>

src/components/styled/SWModal.svelte

@@ -18,28 +18,28 @@
   -->
 
 <script lang="ts">
-  import { run, createBubbler, stopPropagation } from 'svelte/legacy';
+    import {onMount} from "svelte";
-
-  const bubble = createBubbler();
-    import {createEventDispatcher, onMount} from "svelte";
 
   interface Props {
     title: string;
     open: boolean;
     children?: import('svelte').Snippet;
     footer?: import('svelte').Snippet;
+    onclose?: () => void;
+    onclick?: () => void;
+
   }
 
   let {
     title,
     open = $bindable(),
     children,
-    footer
+    footer,
+      onclose = () => {},
+      onclick = () => {}
   }: Props = $props();
     let internalOpen = $state(open);
 
-    const dispatch = createEventDispatcher();
-
 
     let dialog: HTMLDialogElement = $state();
 
@@ -53,52 +53,30 @@
     function close() {
         open = false;
         internalOpen = false;
-        dispatch("close");
+        onclose()
     }
-    run(() => {
+
-    if (open && !internalOpen) {
+    $effect(() => {
-          dialog.showModal();
+        if (open && !internalOpen) {
-          internalOpen = true;
+            dialog.showModal();
-      } else if (!open && internalOpen) {
+            internalOpen = true;
-          dialog.close();
+        } else if (!open && internalOpen) {
-          internalOpen = false;
+            dialog.close();
-      }
+            internalOpen = false;
-  });
+        }
+    })
 </script>
 
-<dialog bind:this={dialog} onclose={close} oncancel={close} onclick={() => dialog.close()} aria-hidden="true">
+<dialog bind:this={dialog} onclose={close} oncancel={close} onclick={() => dialog.close()} aria-hidden="true" class="max-h-full max-w-md w-full rounded-lg shadow-lg dark:bg-neutral-800 dark:text-neutral-100">
-    <div onclick={stopPropagation(bubble('click'))} aria-hidden="true">
+    <div onclick={onclick} aria-hidden="true">
-        <div class="spaced bordered">
+        <div class="p-6 border-b border-neutral-200 dark:border-neutral-700">
-            <h1>{title}</h1>
+            <h1 class="text-4xl font-bold">{title}</h1>
         </div>
-        <div class="spaced main bordered">
+        <div class="p-6 main border-b border-neutral-200 dark:border-neutral-700">
             {@render children?.()}
         </div>
-        <div class="footer spaced" onclick={() => dialog.close()} aria-hidden="true">
+        <div class="flex mx-4 my-2 p-6" onclick={() => dialog.close()} aria-hidden="true">
             {@render footer?.()}
         </div>
     </div>
 </dialog>
-
-<style lang="scss">
-  h1 {
-    @apply text-4xl font-bold;
-  }
-
-  dialog {
-    @apply max-h-full max-w-md w-full rounded-lg shadow-lg
-        dark:bg-neutral-800 dark:text-neutral-100;
-  }
-
-  .spaced {
-    @apply p-6;
-  }
-
-  .bordered {
-    @apply border-b border-neutral-200 dark:border-neutral-700;
-  }
-
-  .footer {
-    @apply flex mx-4 my-2;
-  }
-</style>

src/pages/index.astro

@@ -168,7 +168,7 @@ const prefixColorMap: {
                         <Card extraClasses={`pt-8 pb-10 px-8 w-fit shadow-md ${prefixColorMap[prefix]}`} client:idle>
                             <figure class="flex flex-col items-center" style="width: 150px">
                                 <figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
-                                <Image src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
+                                <Image src={`https://vzge.me/bust/150/${v.uuid}`}
                                     class="transition duration-300 ease-in-out hover:scale-110 hover:backdrop-blur-lg hover:drop-shadow-2xl"
                                     alt={v.name + "s bust"} width="150" height="150"/>
                             </figure>