diff options
Diffstat (limited to 'frontend/src/components/Status.svelte')
| -rw-r--r-- | frontend/src/components/Status.svelte | 14 |
1 files changed, 9 insertions, 5 deletions
diff --git a/frontend/src/components/Status.svelte b/frontend/src/components/Status.svelte index 019c224..6ae2cfb 100644 --- a/frontend/src/components/Status.svelte +++ b/frontend/src/components/Status.svelte @@ -16,12 +16,12 @@ {busyText} </div> {:else if error} - <div class="banner error" role="alert"> + <Alert variant="destructive" class="bg-[var(--danger-soft)] text-[var(--destructive)] border-[#f2c7c7]"> <span aria-hidden="true">⚠</span> <span>{error}</span> - </div> + </Alert> {:else if empty !== null && empty !== undefined && empty !== false} - <div class="state empty"> + <div class="state-empty"> <p class="empty-title">{empty}</p> {#if emptyHint}<p class="hint">{emptyHint}</p>{/if} </div> @@ -29,11 +29,15 @@ {#if warnings && warnings.length > 0} <div class="stack"> {#each warnings as w, i (i)} - <div class="banner warn"><span aria-hidden="true">△</span><span>{w}</span></div> + <Alert variant="default" class="bg-[var(--warn-soft)] text-[var(--warn)] border-[#f0ddb4]"><span aria-hidden="true">△</span><span>{w}</span></Alert> {/each} </div> {/if} +<script lang="ts" module> + import { Alert } from '$lib/components/ui/alert'; +</script> + <style> .status { color: var(--text-3); @@ -54,7 +58,7 @@ @keyframes spin { to { transform: rotate(360deg); } } - .empty { + .state-empty { text-align: center; padding: 2.2rem 1rem; border: 1px dashed var(--border-strong); |