From 25c2e69afecc991dd585181d97bf7732a28152bd Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <aneurin@aneur.in>
Date: Fri, 4 Sep 2026 19:53:25 +0100
Subject: [PATCH] Style the passkey login button to match the email sign-in
 button

Introduce a .btn-primary class carrying the same look as
button[type="submit"] (accent fill, full width, centered), and apply
it to the passkey button on LoginView -- previously unstyled since it
is type="button", not type="submit".

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/src/style.css           | 12 ++++++++++--
 web/src/views/LoginView.vue |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index 36833f3..c0c0585 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -765,7 +765,8 @@ h1 {
   font-size: 1rem;
 }
 
-button[type="submit"] {
+button[type="submit"],
+.btn-primary {
   padding: 0.6rem 1rem;
   border: none;
   border-radius: 8px;
@@ -775,7 +776,14 @@ button[type="submit"] {
   cursor: pointer;
 }
 
-button[type="submit"]:disabled {
+.btn-primary {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+button[type="submit"]:disabled,
+.btn-primary:disabled {
   opacity: 0.6;
   cursor: progress;
 }
diff --git a/web/src/views/LoginView.vue b/web/src/views/LoginView.vue
index 7aba731..8a6da79 100644
--- a/web/src/views/LoginView.vue
+++ b/web/src/views/LoginView.vue
@@ -56,7 +56,7 @@ async function onPasskeyLogin() {
     <h1>Log in</h1>
 
     <template v-if="passkeySupported">
-      <button type="button" :disabled="passkeySubmitting" @click="onPasskeyLogin">
+      <button type="button" class="btn-primary" :disabled="passkeySubmitting" @click="onPasskeyLogin">
         {{ passkeySubmitting ? 'Waiting for your passkey…' : 'Log in with a passkey' }}
       </button>
       <p v-if="passkeyError" class="form-error">{{ passkeyError }}</p>