From e9bb291f83d81b030a98f6c63677801b69bff58f Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Wed, 4 Feb 2026 16:01:26 +0000
Subject: [PATCH] fix(templates): use amber outline style for secondary action
 buttons

- Update btn-adjust CSS from white/stone to amber border with transparent bg
- Apply consistent amber-500 border, amber-700 text across all action buttons
- Affected pages: roasters, roasts, home, cafes, check-in, brews
---
 templates/cafes.html    | 2 +-
 templates/home.html     | 8 ++++----
 templates/roasters.html | 4 ++--
 templates/roasts.html   | 4 ++--
 templates/styles.css    | 8 ++++----
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/templates/cafes.html b/templates/cafes.html
index 9c396a6..d8232b9 100644
--- a/templates/cafes.html
+++ b/templates/cafes.html
@@ -209,7 +209,7 @@
             type="button"
             id="locate-btn"
             onclick="locateUser(this)"
-            class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
+            class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
           >
             <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5z" clip-rule="evenodd" />
diff --git a/templates/home.html b/templates/home.html
index 99ffdbf..828c697 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -42,7 +42,7 @@
   <button
     type="button"
     data-on:click="$_showScan = !$_showScan; !$_showScan && ($_scanExtracted = false, $_extracting = false, $_extractError = '', $_scanError = '')"
-    class="flex items-center justify-center gap-3 rounded-lg border-2 border-amber-400 bg-amber-50 px-6 py-5 text-lg font-semibold text-amber-800 shadow-sm transition hover:bg-amber-100 hover:border-amber-500"
+    class="flex items-center justify-center gap-3 rounded-lg border-2 border-amber-500 px-6 py-5 text-lg font-semibold text-amber-700 shadow-sm transition hover:bg-amber-50"
   >
     <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
       <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
@@ -52,7 +52,7 @@
   {% endif %}
   <a
     href="/check-in"
-    class="flex items-center justify-center gap-3 rounded-lg border-2 border-amber-400 bg-amber-50 px-6 py-5 text-lg font-semibold text-amber-800 shadow-sm transition hover:bg-amber-100 hover:border-amber-500"
+    class="flex items-center justify-center gap-3 rounded-lg border-2 border-amber-500 px-6 py-5 text-lg font-semibold text-amber-700 shadow-sm transition hover:bg-amber-50"
   >
     <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
       <path d="M15.993 1.385a1.87 1.87 0 0 1 2.623 2.622l-4.03 5.27a12.75 12.75 0 0 1-4.223 3.358 7.724 7.724 0 0 1-2.71.832 2.14 2.14 0 0 1-.588-.085 1.07 1.07 0 0 1-.725-.723 2.14 2.14 0 0 1-.083-.588 7.724 7.724 0 0 1 .832-2.71 12.75 12.75 0 0 1 3.358-4.223l5.27-4.03.176.177-.176-.177Z" />
@@ -91,7 +91,7 @@
         <button
           type="button"
           onclick="document.getElementById('scan-photo').click()"
-          class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
+          class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-4 py-3 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
         >
           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
@@ -108,7 +108,7 @@
           />
           <button
             type="submit"
-            class="rounded-md border border-amber-400 bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
+            class="rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
           >
             Go
           </button>
diff --git a/templates/roasters.html b/templates/roasters.html
index 68fcabb..d36cfc9 100644
--- a/templates/roasters.html
+++ b/templates/roasters.html
@@ -48,7 +48,7 @@
         <button
           type="button"
           onclick="document.getElementById('roaster-photo').click()"
-          class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
+          class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
         >
           <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
@@ -65,7 +65,7 @@
           />
           <button
             type="submit"
-            class="rounded-md border border-amber-400 bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
+            class="rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
           >
             Go
           </button>
diff --git a/templates/roasts.html b/templates/roasts.html
index 7b172e1..548c4b8 100644
--- a/templates/roasts.html
+++ b/templates/roasts.html
@@ -62,7 +62,7 @@
         <button
           type="button"
           onclick="document.getElementById('roast-photo').click()"
-          class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
+          class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
         >
           <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
@@ -79,7 +79,7 @@
           />
           <button
             type="submit"
-            class="rounded-md border border-amber-400 bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
+            class="rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
           >
             Go
           </button>
diff --git a/templates/styles.css b/templates/styles.css
index 49c5f46..6ec1bff 100644
--- a/templates/styles.css
+++ b/templates/styles.css
@@ -34,15 +34,15 @@ a {
   align-items: center;
   justify-content: center;
   border-radius: 0.375rem;
-  border: 1px solid rgba(120, 113, 108, 0.3);
-  background-color: white;
-  color: rgba(87, 83, 78, 1);
+  border: 1px solid rgba(245, 158, 11, 1);
+  background-color: transparent;
+  color: rgba(180, 83, 9, 1);
   font-weight: 700;
   transition: background-color 150ms ease;
 }
 
 .btn-adjust:hover {
-  background-color: rgba(245, 245, 244, 1);
+  background-color: rgba(255, 251, 235, 1);
 }
 
 /* Timeline layout */