From 03527e7dc4610c05d6e2f1cf713b3103c9955fa8 Mon Sep 17 00:00:00 2001
From: Evan Reichard <evan@reichard.io>
Date: Sun, 17 May 2026 20:35:33 -0400
Subject: [PATCH] style(frontend): refine chat theme accents

---
 frontend/public/pages/chats.html  | 48 +++++++++++++++----------------
 frontend/public/pages/images.html | 10 +++----
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/frontend/public/pages/chats.html b/frontend/public/pages/chats.html
index 4264ca1..9b40c9a 100644
--- a/frontend/public/pages/chats.html
+++ b/frontend/public/pages/chats.html
@@ -69,7 +69,7 @@
                         ></div>
                         <button
                           @click.stop="deleteChat($event, chat.id)"
-                          class="opacity-0 group-hover:opacity-100 focus:opacity-100 shrink-0 p-1 -mr-1 text-primary-400 hover:text-tertiary-600 hover:bg-tertiary-100 rounded transition-opacity"
+                          class="opacity-0 group-hover:opacity-100 focus:opacity-100 shrink-0 p-1 -mr-1 text-primary-400 hover:text-tertiary-600 hover:bg-tertiary-100 rounded transition-opacity cursor-pointer"
                           title="Delete chat"
                           aria-label="Delete chat"
                         >
@@ -137,10 +137,10 @@
         <template x-for="message in currentChatMessages" :key="message.id">
           <div :class="['mb-4', message.role === 'user' ? 'text-right' : 'text-left']">
             <div
-              :class="['inline-block px-4 py-3 text-left rounded-lg max-w-[95%] md:max-w-[85%]',
+              :class="['inline-block px-4 py-3 text-left rounded-lg max-w-[95%] md:max-w-[85%] border shadow-sm',
                 message.role === 'user'
-                  ? 'bg-primary-100 text-primary-900 rounded-br-none'
-                  : 'bg-primary-200 text-primary-900 rounded-bl-none'
+                  ? 'bg-primary-100/75 border-primary-300/30 text-primary-900 rounded-br-none'
+                  : 'bg-primary-200/65 border-primary-300/40 text-primary-900 rounded-bl-none'
               ]"
             >
               <div
@@ -160,15 +160,15 @@
                 @click="expanded = !expanded"
                 @keydown.enter.prevent="expanded = !expanded"
                 @keydown.space.prevent="expanded = !expanded"
-                class="mb-3 rounded-md border-l-2 border-primary-500/60 bg-primary-100/35 px-3 py-2 ring-1 ring-primary-400/20 cursor-pointer"
+                class="mb-3 rounded-md border-l-2 border-secondary-500/60 bg-secondary-100/35 px-3 py-2 ring-1 ring-secondary-400/20 cursor-pointer"
               >
-                <div class="flex items-center gap-2 text-xs font-medium text-primary-700 transition-colors">
+                <div class="flex items-center gap-2 text-xs font-medium text-secondary-700 transition-colors">
                   <span x-text="expanded ? '▾' : '▸'"></span>
                   <span>Reasoning</span>
                 </div>
                 <div
                   x-show="expanded"
-                  class="prose mt-2 max-w-none text-xs text-primary-700 opacity-90 prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
+                  class="prose mt-2 max-w-none text-xs text-secondary-700 opacity-90 prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
                   x-html="renderMarkdown(message.thinking)"
                 ></div>
               </div>
@@ -177,8 +177,8 @@
                 x-show="message.role === 'assistant' && message.status === 'streaming' && !message.thinking && !message.content"
                 class="flex items-center gap-2 py-1"
               >
-                <div class="h-4 w-4 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"></div>
-                <span class="text-xs text-primary-600">Thinking...</span>
+                <div class="h-4 w-4 animate-spin rounded-full border-2 border-secondary-500 border-t-transparent"></div>
+                <span class="text-xs text-secondary-600">Thinking...</span>
               </div>
 
               <div
@@ -191,8 +191,8 @@
                 <div class="text-[10px] opacity-60" x-text="new Date(message.created_at).toLocaleTimeString()"></div>
                 <div
                   x-show="message.role === 'assistant' && ['stopped', 'error', 'failed'].includes(message.status)"
-                  :class="message.status === 'stopped' ? 'bg-primary-300/50 text-primary-700' : 'bg-tertiary-100 text-tertiary-700'"
-                  class="px-2 py-0.5 rounded-full text-[10px] font-medium"
+                  :class="message.status === 'stopped' ? 'bg-red-500/15 text-red-700 ring-red-500/20' : 'bg-red-600 text-white ring-red-700/20'"
+                  class="px-2 py-0.5 rounded-full text-[10px] font-medium ring-1"
                   x-text="message.status === 'stopped' ? 'Stopped' : 'Error'"
                 ></div>
               </div>
@@ -200,11 +200,11 @@
 
             <div
               x-show="message.role === 'assistant' && message.stats"
-              class="flex items-center gap-1 py-2 flex-wrap justify-start text-primary-700"
+              class="flex items-center gap-1 py-2 flex-wrap justify-start text-primary-600"
             >
               <div
                 x-show="message.stats?.prompt_tokens || message.stats?.generated_tokens"
-                class="group relative px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full cursor-help"
+                class="group relative px-2 py-0.5 text-[10px] bg-primary-200/40 rounded-full cursor-help"
               >
                 <span x-text="`${(message.stats?.prompt_tokens || 0) + (message.stats?.generated_tokens || 0)} tokens`"></span>
                 <div class="invisible group-hover:visible absolute bottom-full left-1/2 -translate-x-1/2 m-2 px-2 py-1 bg-gray-900 text-white text-[10px] rounded whitespace-nowrap pointer-events-none grid grid-cols-[auto_1fr] gap-x-2">
@@ -217,17 +217,17 @@
 
               <span
                 x-show="message.stats?.prompt_per_second"
-                class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
+                class="px-2 py-0.5 text-[10px] bg-primary-200/40 rounded-full"
                 x-text="`${message.stats?.prompt_per_second.toFixed(1)} ppt/s`"
               ></span>
               <span
                 x-show="message.stats?.generated_per_second"
-                class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
+                class="px-2 py-0.5 text-[10px] bg-primary-200/40 rounded-full"
                 x-text="`${message.stats?.generated_per_second.toFixed(1)} tgt/s`"
               ></span>
               <span
                 x-show="message.stats?.time_to_first_token"
-                class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
+                class="px-2 py-0.5 text-[10px] bg-primary-200/40 rounded-full"
                 x-text="`${(message.stats?.time_to_first_token / 1000).toFixed(2)}s TTFT`"
               ></span>
             </div>
@@ -237,12 +237,12 @@
 
       <!-- Sticky Input Bar -->
       <div
-        class="sticky bottom-0 pt-2 bg-primary-50"
+        class="sticky bottom-0 pt-2 bg-primary-50/95"
         style="padding-bottom: max(0.5rem, env(safe-area-inset-bottom));"
       >
         <form
           @submit.prevent="sendMessage"
-          class="flex flex-col gap-2 p-3 bg-primary-50 rounded-2xl border border-primary-200"
+          class="flex flex-col gap-2 p-3 bg-primary-100/35 rounded-2xl border border-primary-300/40 shadow-sm"
         >
             <input
               x-ref="fileInput"
@@ -285,7 +285,7 @@
             ></textarea>
 
             <div class="flex items-center gap-2">
-              <div class="relative min-w-0 flex-shrink inline-flex items-center pl-7 pr-6 py-1 bg-primary-200/70 hover:bg-primary-300 border border-primary-200 rounded-full transition-colors">
+              <div class="relative min-w-0 flex-shrink inline-flex items-center pl-7 pr-6 py-1 bg-primary-100/60 hover:bg-primary-200/70 border border-primary-300/50 rounded-full transition-colors">
                 <span
                   class="text-primary-900 text-xs font-medium truncate pointer-events-none"
                   x-text="(models.find(m => m.id === selectedModel)?.name) || selectedModel || 'Select Model'"
@@ -312,9 +312,9 @@
                 type="button"
                 @click="thinkingEnabled = !thinkingEnabled"
                 :class="thinkingEnabled
-                  ? 'bg-primary-600 text-white border-primary-600 hover:bg-primary-700'
-                  : 'bg-transparent text-primary-500 border-primary-300 hover:bg-primary-200/70'"
-                class="relative h-7 w-7 rounded-full border transition-colors flex items-center justify-center flex-shrink-0"
+                  ? 'bg-secondary-600 text-white border-secondary-600 hover:bg-secondary-700'
+                  : 'bg-transparent text-secondary-500 border-secondary-300 hover:bg-secondary-200/70'"
+                class="relative h-7 w-7 rounded-full border transition-colors flex items-center justify-center flex-shrink-0 cursor-pointer"
                 :title="thinkingEnabled ? 'Thinking on' : 'Thinking off'"
                 :aria-pressed="thinkingEnabled ? 'true' : 'false'"
                 aria-label="Toggle thinking"
@@ -345,7 +345,7 @@
               <button
                 type="button"
                 @click="$refs.fileInput.click()"
-                class="h-7 w-7 bg-primary-200/70 text-primary-700 rounded-full transition-colors flex items-center justify-center flex-shrink-0 hover:bg-primary-300"
+                class="h-7 w-7 bg-primary-100/70 text-primary-700 border border-primary-300/50 rounded-full transition-colors flex items-center justify-center flex-shrink-0 hover:bg-primary-200/70"
                 title="Attach Image"
                 aria-label="Attach Image"
               >
@@ -477,7 +477,7 @@
                   ></div>
                   <button
                     @click.stop="deleteChat($event, chat.id)"
-                    class="shrink-0 p-1 -mr-1 text-primary-400 hover:text-tertiary-600 hover:bg-tertiary-100 rounded transition-colors"
+                    class="shrink-0 p-1 -mr-1 text-primary-400 hover:text-tertiary-600 hover:bg-tertiary-100 rounded transition-colors cursor-pointer"
                     title="Delete chat"
                     aria-label="Delete chat"
                   >
diff --git a/frontend/public/pages/images.html b/frontend/public/pages/images.html
index aa3ef0f..6a79cb4 100644
--- a/frontend/public/pages/images.html
+++ b/frontend/public/pages/images.html
@@ -146,13 +146,13 @@
             </div>
             <span
               @click="clearMask"
-              class="mt-2 px-3 py-1 cursor-pointer bg-primary-200 text-primary-700 rounded hover:bg-primary-600 hover:text-white text-center transition-colors"
+              class="mt-2 px-3 py-1 cursor-pointer bg-tertiary-100 text-tertiary-700 rounded hover:bg-tertiary-600 hover:text-white text-center transition-colors"
             >
               Clear Mask
             </span>
             <span
               @click="cancelEdit"
-              class="mt-2 px-3 py-1 cursor-pointer bg-primary-200 text-primary-700 rounded hover:bg-primary-600 hover:text-white text-center transition-colors"
+              class="mt-2 px-3 py-1 cursor-pointer bg-tertiary-100 text-tertiary-700 rounded hover:bg-tertiary-600 hover:text-white text-center transition-colors"
             >
               Cancel
             </span>
@@ -164,7 +164,7 @@
         type="submit"
         x-bind:disabled="loading || !selectedModel"
         :class="loading || !selectedModel ? 'cursor-not-allowed' : 'cursor-pointer'"
-        class="inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-primary-50 bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 gap-2 transition-colors"
+        class="inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-primary-50 bg-secondary-600 hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500 disabled:opacity-50 gap-2 transition-colors"
       >
         <span
           x-text="loading ? '' : editMode ? 'Edit Image' : 'Generate Image'"
@@ -200,7 +200,7 @@
     >
       <template x-for="(image, index) in generatedImages" :key="index">
         <div
-          class="flex flex-col gap-2 break-inside-avoid border border-primary-200 rounded-lg p-2 mb-2 h-full bg-primary-100 hover:border-primary-300 transition-colors shadow"
+          class="flex flex-col gap-2 break-inside-avoid border border-secondary-200 rounded-lg p-2 mb-2 h-full bg-secondary-50/60 hover:border-secondary-300 transition-colors shadow"
         >
           <button
             @click="deleteImage(image.name)"
@@ -215,7 +215,7 @@
             class="rounded-lg shadow-sm max-w-full h-auto cursor-pointer hover:opacity-90 transition-opacity"
           />
           <span
-            class="text-xs text-primary-500 bg-primary-200 px-2 py-1 rounded flex justify-center"
+            class="text-xs text-secondary-700 bg-secondary-100 px-2 py-1 rounded flex justify-center"
             x-text="image.date"
           ></span>
         </div>