fix(ui): center dialog, add backdrop, hover states, and cursor-pointer on buttons
- Add m-auto and w-full to ensure the native <dialog> is centred - Add backdrop:bg-black/50 for dimmed overlay when modal is open - Add hover:bg-danger/80 and hover:bg-primary/80 on confirm button - Add cursor-pointer to both cancel and confirm buttons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -18,7 +18,7 @@ $effect(() => {
|
||||
|
||||
<dialog
|
||||
bind:this={dialogEl}
|
||||
class="max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg"
|
||||
class="m-auto w-full max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg backdrop:bg-black/50"
|
||||
aria-labelledby="confirm-title"
|
||||
oncancel={(e) => {
|
||||
e.preventDefault();
|
||||
@@ -42,16 +42,16 @@ $effect(() => {
|
||||
<div class="flex items-center justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="min-h-[44px] rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-muted"
|
||||
class="min-h-[44px] cursor-pointer rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-muted"
|
||||
onclick={() => service.settle(false)}
|
||||
>
|
||||
{opts.cancelLabel ?? m.btn_cancel()}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="min-h-[44px] rounded-sm px-4 py-2 text-sm font-medium transition-colors {opts.destructive
|
||||
? 'bg-danger text-danger-fg'
|
||||
: 'bg-primary text-primary-fg'}"
|
||||
class="min-h-[44px] cursor-pointer rounded-sm px-4 py-2 text-sm font-medium transition-colors {opts.destructive
|
||||
? 'bg-danger text-danger-fg hover:bg-danger/80'
|
||||
: 'bg-primary text-primary-fg hover:bg-primary/80'}"
|
||||
onclick={() => service.settle(true)}
|
||||
>
|
||||
{opts.confirmLabel ?? m.btn_confirm()}
|
||||
|
||||
Reference in New Issue
Block a user