From 62e1115b054e2a571000caa73ed11095738ffbdd Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 1 Apr 2026 09:33:26 -0400
Subject: [PATCH] style(layout): add RefreshCw icon to offline/retry buttons,
 adjust error banner color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/routes/+layout.svelte | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c4fee7e2..9f8439b9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,6 +10,9 @@ import { goto, invalidateAll } from '$app/navigation';
 import '../app.css';
 
 // *** Import other supporting libraries
+import {
+    RefreshCw,
+} from '@lucide/svelte';
 
 // Highlight JS
 import hljs from 'highlight.js/lib/core';
@@ -352,12 +355,14 @@ $effect(() => {
 
 {#if browser && (is_offline || api_unreachable)}
     <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"
             >{is_offline ? 'Offline' : api_error_msg}</span>
         <button
             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>
 {/if}
 
@@ -370,7 +375,9 @@ $effect(() => {
         <div class="flex shrink-0 items-center gap-2">
             <button
                 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
                 class="btn btn-sm preset-outlined-surface"
                 onclick={() => {