From 9519632e76fcd88acf662f348de818c5d9c69eb7 Mon Sep 17 00:00:00 2001
From: Thibault Dody <thibault.dody@gmail.com>
Date: Mon, 20 Apr 2026 09:04:30 -0400
Subject: [PATCH] fix: swap legacy indigo to ink tokens on header logo + Save
 Snapshot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three sites from the early color-audit were still on the pre-modernization
indigo palette. Realign them with the new ink/accent tokens:

- App.tsx header logo tile: bg-gradient-to-br from-indigo-600 to-purple-600
  → bg-ink (solid, matches the editorial tone)
- SnapshotButton trigger: px-3 py-1.5 bg-indigo-600 text-white rounded-lg
  text-sm font-medium → caps px-4 py-2 border border-rule-strong rounded
  hover:bg-paper (matches sibling Duplicate / History secondary buttons
  in the scenario action row)
- SnapshotButton in-dialog confirm: bg-indigo-600 → caps px-5 py-2 bg-ink
  text-canvas rounded hover:opacity-90 (matches Save changes primary)

Also drops the camera emoji from the trigger label so the action row
reads consistently — none of the adjacent buttons use icons.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx                                   |  2 +-
 .../src/components/PropertyDetail/SnapshotButton.tsx   | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c5aeb55..b992605 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -38,7 +38,7 @@ function App() {
             <header className="bg-white dark:bg-slate-800 border-b border-slate-100 dark:border-slate-700">
               <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
                 <Link to="/" className="flex items-center gap-2.5 hover:opacity-80 transition-opacity">
-                  <div className="bg-gradient-to-br from-indigo-600 to-purple-600 rounded-lg w-7 h-7" />
+                  <div className="bg-ink rounded-lg w-7 h-7" />
                   <span className="text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
                     STR Profitability Calculator
                   </span>
diff --git a/frontend/src/components/PropertyDetail/SnapshotButton.tsx b/frontend/src/components/PropertyDetail/SnapshotButton.tsx
index 59c2087..aa4e651 100644
--- a/frontend/src/components/PropertyDetail/SnapshotButton.tsx
+++ b/frontend/src/components/PropertyDetail/SnapshotButton.tsx
@@ -49,10 +49,11 @@ export function SnapshotButton({ propertyId, scenarioId, dirty = false, onPersis
   return (
     <>
       <button
+        type="button"
         onClick={() => setShowDialog(true)}
-        className="px-3 py-1.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium flex items-center gap-1.5"
+        className="caps px-4 py-2 border border-rule-strong rounded hover:bg-paper transition-colors"
       >
-        <span>📸</span> Save Snapshot
+        Save Snapshot
       </button>
 
       {showDialog && (
@@ -92,11 +93,12 @@ export function SnapshotButton({ propertyId, scenarioId, dirty = false, onPersis
                 Cancel
               </button>
               <button
+                type="button"
                 onClick={handleSave}
                 disabled={saving}
-                className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 text-sm font-medium"
+                className="caps px-5 py-2 bg-ink text-canvas rounded hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
               >
-                {saving ? "Saving..." : dirty ? "Save changes & Snapshot" : "Save"}
+                {saving ? "Saving…" : dirty ? "Save changes & Snapshot" : "Save"}
               </button>
             </div>
           </div>