From 19ddb1ab8b5ce7e0e92b73cf775bdf3ca95caed2 Mon Sep 17 00:00:00 2001 From: pptx704 Date: Mon, 13 Apr 2026 02:48:58 +0600 Subject: [PATCH] Normalize dialog styles across capsules and templates pages Aligned all dialog boxes to a consistent pattern: same shadow (--shadow-dialog), animation (fadeUp 0.2s ease), button sizing (py-2, duration-150), and hover effects. Added template type indicator dot to CreateCapsuleDialog combobox. Removed accent gradient bars from templates page inline dialogs. --- .../lib/components/CreateCapsuleDialog.svelte | 16 +++++++++----- .../src/lib/components/DestroyDialog.svelte | 4 +++- .../src/lib/components/SnapshotDialog.svelte | 2 +- .../routes/dashboard/templates/+page.svelte | 22 ++++++++----------- 4 files changed, 24 insertions(+), 20 deletions(-) diff --git a/frontend/src/lib/components/CreateCapsuleDialog.svelte b/frontend/src/lib/components/CreateCapsuleDialog.svelte index 6759ad9..5aba66c 100644 --- a/frontend/src/lib/components/CreateCapsuleDialog.svelte +++ b/frontend/src/lib/components/CreateCapsuleDialog.svelte @@ -21,10 +21,11 @@ let inputEl = $state(undefined); let listEl = $state(undefined); - // Snapshots have fixed CPU/RAM from the snapshot state — users cannot override. - let selectedIsSnapshot = $derived( - templates.find((t) => t.name === createForm.template)?.type === 'snapshot' + // Resolve selected template for type indicator + snapshot locking + let selectedTemplate = $derived( + templates.find((t) => t.name === createForm.template) ); + let selectedIsSnapshot = $derived(selectedTemplate?.type === 'snapshot'); let filtered = $derived.by(() => { const q = templateQuery.toLowerCase(); @@ -133,7 +134,8 @@ onkeydown={(e) => { if (e.key === 'Escape' && !creating) onclose(); }} > -
+
+

Launch Capsule

Configure resources and launch. The VM will be ready in under a second.

@@ -148,6 +150,9 @@
+ {#if selectedTemplate} + + {/if} @@ -304,6 +309,7 @@ {/if}
+
{/if} diff --git a/frontend/src/lib/components/DestroyDialog.svelte b/frontend/src/lib/components/DestroyDialog.svelte index 549b7cc..6f9ec92 100644 --- a/frontend/src/lib/components/DestroyDialog.svelte +++ b/frontend/src/lib/components/DestroyDialog.svelte @@ -42,7 +42,8 @@ onclick={handleClose} onkeydown={(e) => { if (e.key === 'Escape') handleClose(); }} >
-
+
+

Destroy Capsule

Terminate {capsuleId} and destroy all data inside it. This cannot be undone. @@ -77,6 +78,7 @@ {/if}

+
{/if} diff --git a/frontend/src/lib/components/SnapshotDialog.svelte b/frontend/src/lib/components/SnapshotDialog.svelte index fa9fec5..5d7d2dd 100644 --- a/frontend/src/lib/components/SnapshotDialog.svelte +++ b/frontend/src/lib/components/SnapshotDialog.svelte @@ -50,7 +50,7 @@ onkeydown={(e) => { if (e.key === 'Escape') handleClose(); }} > -
+
diff --git a/frontend/src/routes/dashboard/templates/+page.svelte b/frontend/src/routes/dashboard/templates/+page.svelte index b852841..155394f 100644 --- a/frontend/src/routes/dashboard/templates/+page.svelte +++ b/frontend/src/routes/dashboard/templates/+page.svelte @@ -521,11 +521,9 @@ >
- -

Delete snapshot

@@ -563,7 +561,7 @@
- -
-

Launch Capsule

-

- Configure resources and launch a new capsule from this snapshot. +

Launch Capsule

+

+ Configure resources and launch a new capsule from this template.

{#if launchError} @@ -695,7 +691,7 @@