forked from wrenn/wrenn
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.
This commit is contained in:
@ -21,10 +21,11 @@
|
|||||||
let inputEl = $state<HTMLInputElement | undefined>(undefined);
|
let inputEl = $state<HTMLInputElement | undefined>(undefined);
|
||||||
let listEl = $state<HTMLUListElement | undefined>(undefined);
|
let listEl = $state<HTMLUListElement | undefined>(undefined);
|
||||||
|
|
||||||
// Snapshots have fixed CPU/RAM from the snapshot state — users cannot override.
|
// Resolve selected template for type indicator + snapshot locking
|
||||||
let selectedIsSnapshot = $derived(
|
let selectedTemplate = $derived(
|
||||||
templates.find((t) => t.name === createForm.template)?.type === 'snapshot'
|
templates.find((t) => t.name === createForm.template)
|
||||||
);
|
);
|
||||||
|
let selectedIsSnapshot = $derived(selectedTemplate?.type === 'snapshot');
|
||||||
|
|
||||||
let filtered = $derived.by(() => {
|
let filtered = $derived.by(() => {
|
||||||
const q = templateQuery.toLowerCase();
|
const q = templateQuery.toLowerCase();
|
||||||
@ -133,7 +134,8 @@
|
|||||||
onkeydown={(e) => { if (e.key === 'Escape' && !creating) onclose(); }}
|
onkeydown={(e) => { if (e.key === 'Escape' && !creating) onclose(); }}
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
<div class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both; box-shadow: var(--shadow-dialog)">
|
<div class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: fadeUp 0.2s ease both; box-shadow: var(--shadow-dialog)">
|
||||||
|
<div class="p-6">
|
||||||
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">Launch Capsule</h2>
|
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">Launch Capsule</h2>
|
||||||
<p class="mt-1 text-ui text-[var(--color-text-tertiary)]">Configure resources and launch. The VM will be ready in under a second.</p>
|
<p class="mt-1 text-ui text-[var(--color-text-tertiary)]">Configure resources and launch. The VM will be ready in under a second.</p>
|
||||||
|
|
||||||
@ -148,6 +150,9 @@
|
|||||||
<div class="relative">
|
<div class="relative">
|
||||||
<label class="mb-1.5 block text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="create-template">Template</label>
|
<label class="mb-1.5 block text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="create-template">Template</label>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
|
{#if selectedTemplate}
|
||||||
|
<span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-1.5 w-1.5 rounded-full {selectedTemplate.type === 'snapshot' ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-blue)]'}"></span>
|
||||||
|
{/if}
|
||||||
<input
|
<input
|
||||||
bind:this={inputEl}
|
bind:this={inputEl}
|
||||||
id="create-template"
|
id="create-template"
|
||||||
@ -162,7 +167,7 @@
|
|||||||
onblur={handleInputBlur}
|
onblur={handleInputBlur}
|
||||||
onkeydown={handleInputKeydown}
|
onkeydown={handleInputKeydown}
|
||||||
disabled={creating}
|
disabled={creating}
|
||||||
class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] py-2 pl-3 pr-8 font-mono text-ui text-[var(--color-text-bright)] outline-none placeholder:text-[var(--color-text-muted)] transition-colors duration-150 focus:border-[var(--color-accent)] disabled:opacity-60"
|
class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] py-2 pr-8 font-mono text-ui text-[var(--color-text-bright)] outline-none placeholder:text-[var(--color-text-muted)] transition-colors duration-150 focus:border-[var(--color-accent)] disabled:opacity-60 {selectedTemplate ? 'pl-7' : 'pl-3'}"
|
||||||
placeholder="Search templates..."
|
placeholder="Search templates..."
|
||||||
/>
|
/>
|
||||||
<!-- Chevron -->
|
<!-- Chevron -->
|
||||||
@ -304,6 +309,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -42,7 +42,8 @@
|
|||||||
onclick={handleClose}
|
onclick={handleClose}
|
||||||
onkeydown={(e) => { if (e.key === 'Escape') handleClose(); }}
|
onkeydown={(e) => { if (e.key === 'Escape') handleClose(); }}
|
||||||
></div>
|
></div>
|
||||||
<div class="relative w-full max-w-[380px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both">
|
<div class="relative w-full max-w-[380px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: fadeUp 0.2s ease both; box-shadow: var(--shadow-dialog)">
|
||||||
|
<div class="p-6">
|
||||||
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">Destroy Capsule</h2>
|
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">Destroy Capsule</h2>
|
||||||
<p class="mt-2 text-ui text-[var(--color-text-tertiary)]">
|
<p class="mt-2 text-ui text-[var(--color-text-tertiary)]">
|
||||||
Terminate <span class="font-mono text-[var(--color-text-secondary)]">{capsuleId}</span> and destroy all data inside it. This cannot be undone.
|
Terminate <span class="font-mono text-[var(--color-text-secondary)]">{capsuleId}</span> and destroy all data inside it. This cannot be undone.
|
||||||
@ -77,6 +78,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -50,7 +50,7 @@
|
|||||||
onkeydown={(e) => { if (e.key === 'Escape') handleClose(); }}
|
onkeydown={(e) => { if (e.key === 'Escape') handleClose(); }}
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
<div class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] overflow-hidden" style="animation: fadeUp 0.2s ease both; box-shadow: var(--shadow-dialog)">
|
<div class="relative w-full max-w-[420px] overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: fadeUp 0.2s ease both; box-shadow: var(--shadow-dialog)">
|
||||||
<div class="flex items-center gap-4 border-b border-[var(--color-border)] bg-[var(--color-bg-3)] px-6 py-5">
|
<div class="flex items-center gap-4 border-b border-[var(--color-border)] bg-[var(--color-bg-3)] px-6 py-5">
|
||||||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--radius-input)] bg-[var(--color-accent)]/15 text-[var(--color-accent)] shadow-[0_0_12px_var(--color-accent-glow)]">
|
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--radius-input)] bg-[var(--color-accent)]/15 text-[var(--color-accent)] shadow-[0_0_12px_var(--color-accent-glow)]">
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
|||||||
@ -521,11 +521,9 @@
|
|||||||
></div>
|
></div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] shadow-dialog"
|
class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]"
|
||||||
style="animation: fadeUp 0.18s cubic-bezier(0.25,1,0.5,1) both"
|
style="animation: fadeUp 0.2s ease both; box-shadow: var(--shadow-dialog)"
|
||||||
>
|
>
|
||||||
<!-- Danger accent edge -->
|
|
||||||
<div class="h-[2px] rounded-t-[var(--radius-card)] bg-gradient-to-r from-transparent via-[var(--color-red)] to-transparent"></div>
|
|
||||||
|
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<h2 class="font-serif text-heading leading-tight tracking-[-0.02em] text-[var(--color-text-bright)]">Delete snapshot</h2>
|
<h2 class="font-serif text-heading leading-tight tracking-[-0.02em] text-[var(--color-text-bright)]">Delete snapshot</h2>
|
||||||
@ -563,7 +561,7 @@
|
|||||||
<button
|
<button
|
||||||
onclick={handleDelete}
|
onclick={handleDelete}
|
||||||
disabled={deleting}
|
disabled={deleting}
|
||||||
class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-red)] px-5 py-2.5 text-ui font-semibold text-white transition-all duration-200 hover:shadow-[0_0_16px_rgba(207,129,114,0.25)] hover:brightness-110 disabled:opacity-50"
|
class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-red)] px-5 py-2 text-ui font-semibold text-white transition-all duration-150 hover:brightness-110 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
|
||||||
>
|
>
|
||||||
{#if deleting}
|
{#if deleting}
|
||||||
<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
@ -591,16 +589,14 @@
|
|||||||
></div>
|
></div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] shadow-dialog"
|
class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]"
|
||||||
style="animation: fadeUp 0.18s cubic-bezier(0.25,1,0.5,1) both"
|
style="animation: fadeUp 0.2s ease both; box-shadow: var(--shadow-dialog)"
|
||||||
>
|
>
|
||||||
<!-- Top accent edge -->
|
|
||||||
<div class="h-[2px] rounded-t-[var(--radius-card)] bg-gradient-to-r from-transparent via-[var(--color-accent)] to-transparent"></div>
|
|
||||||
|
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<h2 class="font-serif text-heading leading-tight tracking-[-0.02em] text-[var(--color-text-bright)]">Launch Capsule</h2>
|
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">Launch Capsule</h2>
|
||||||
<p class="mt-1.5 text-ui text-[var(--color-text-tertiary)]">
|
<p class="mt-1 text-ui text-[var(--color-text-tertiary)]">
|
||||||
Configure resources and launch a new capsule from this snapshot.
|
Configure resources and launch a new capsule from this template.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{#if launchError}
|
{#if launchError}
|
||||||
@ -695,7 +691,7 @@
|
|||||||
<button
|
<button
|
||||||
onclick={handleLaunch}
|
onclick={handleLaunch}
|
||||||
disabled={launching}
|
disabled={launching}
|
||||||
class="group flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2.5 text-ui font-semibold text-white transition-all duration-200 hover:shadow-[0_0_20px_var(--color-accent-glow-mid)] hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0 disabled:hover:shadow-none"
|
class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2 text-ui font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
|
||||||
>
|
>
|
||||||
{#if launching}
|
{#if launching}
|
||||||
<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
|||||||
Reference in New Issue
Block a user