style(layout): add RefreshCw icon to offline/retry buttons, adjust error banner color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-04-01 09:33:26 -04:00
parent 63ec7f4cc2
commit 62e1115b05

View File

@@ -10,6 +10,9 @@ import { goto, invalidateAll } from '$app/navigation';
import '../app.css'; import '../app.css';
// *** Import other supporting libraries // *** Import other supporting libraries
import {
RefreshCw,
} from '@lucide/svelte';
// Highlight JS // Highlight JS
import hljs from 'highlight.js/lib/core'; import hljs from 'highlight.js/lib/core';
@@ -352,12 +355,14 @@ $effect(() => {
{#if browser && (is_offline || api_unreachable)} {#if browser && (is_offline || api_unreachable)}
<div <div
class="preset-filled-error-500 fixed top-0 right-0 left-0 z-100 flex items-center justify-center gap-4 p-4 text-center shadow-2xl print:hidden"> class="preset-filled-error-200-800 fixed top-0 right-0 left-0 z-100 flex items-center justify-center gap-4 p-4 text-center shadow-2xl print:hidden">
<span class="text-xl font-bold" <span class="text-xl font-bold"
>{is_offline ? 'Offline' : api_error_msg}</span> >{is_offline ? 'Offline' : api_error_msg}</span>
<button <button
class="btn btn-sm preset-tonal-surface" class="btn btn-sm preset-tonal-surface"
onclick={() => window.location.reload()}>Retry</button> onclick={() => window.location.reload()}>
<RefreshCw size="1em" class="opacity-60" /> Retry
</button>
</div> </div>
{/if} {/if}
@@ -370,7 +375,9 @@ $effect(() => {
<div class="flex shrink-0 items-center gap-2"> <div class="flex shrink-0 items-center gap-2">
<button <button
class="btn btn-sm preset-tonal-surface" class="btn btn-sm preset-tonal-surface"
onclick={() => window.location.reload()}>Reload</button> onclick={() => window.location.reload()}>
<RefreshCw size="1em" class="opacity-60" /> Reload
</button>
<button <button
class="btn btn-sm preset-outlined-surface" class="btn btn-sm preset-outlined-surface"
onclick={() => { onclick={() => {