From e1d529a660ef0fa9dfdc78e5d3c414bacc13b2ae Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Fri, 6 Mar 2026 21:33:05 +0100
Subject: [PATCH] style: use theme colors for sync status icon

Replace green/blue/yellow/red with palette colors: --primary for synced,
--primary with opacity for syncing, --text-muted for offline, muted red
for error.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/SyncIndicator.svelte | 8 ++++----
 todo.md                                 | 5 +++++
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 todo.md

diff --git a/src/lib/components/SyncIndicator.svelte b/src/lib/components/SyncIndicator.svelte
index 5b92f19..93c07a2 100644
--- a/src/lib/components/SyncIndicator.svelte
+++ b/src/lib/components/SyncIndicator.svelte
@@ -46,12 +46,12 @@
 
 <div class="flex items-center" title="Sync status: {status}" data-testid="sync-indicator">
 	{#if displayStatus === 'synced'}
-		<CloudCheck class="h-5 w-5 text-green-500" />
+		<CloudCheck class="h-5 w-5 text-[var(--primary)]" />
 	{:else if displayStatus === 'syncing'}
-		<CloudSync class="h-5 w-5 text-blue-500" />
+		<CloudSync class="h-5 w-5 text-[var(--primary)] opacity-60" />
 	{:else if displayStatus === 'offline'}
-		<CloudOff class="h-5 w-5 text-yellow-500" />
+		<CloudOff class="h-5 w-5 text-[var(--text-muted)]" />
 	{:else}
-		<CloudAlert class="h-5 w-5 text-red-500" />
+		<CloudAlert class="h-5 w-5 text-[#b44]" />
 	{/if}
 </div>
diff --git a/todo.md b/todo.md
new file mode 100644
index 0000000..5e6697f
--- /dev/null
+++ b/todo.md
@@ -0,0 +1,5 @@
+- [x] use colors for the cloud status icon that fit more into the colour scheme
+- [x] do we actually have a colour palette and theme ?
+- [ ] choose diffent icon for the background colour
+- [ ] make sure we use only lucid icons everywhere
+- [ ]