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>
This commit is contained in:
2026-09-04 19:53:25 +01:00
co-authored by Claude Sonnet 5
parent afdd53ec4c
commit 25c2e69afe
2 changed files with 11 additions and 3 deletions
+10 -2
View File
@@ -765,7 +765,8 @@ h1 {
font-size: 1rem; font-size: 1rem;
} }
button[type="submit"] { button[type="submit"],
.btn-primary {
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@@ -775,7 +776,14 @@ button[type="submit"] {
cursor: pointer; 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; opacity: 0.6;
cursor: progress; cursor: progress;
} }
+1 -1
View File
@@ -56,7 +56,7 @@ async function onPasskeyLogin() {
<h1>Log in</h1> <h1>Log in</h1>
<template v-if="passkeySupported"> <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' }} {{ passkeySubmitting ? 'Waiting for your passkey' : 'Log in with a passkey' }}
</button> </button>
<p v-if="passkeyError" class="form-error">{{ passkeyError }}</p> <p v-if="passkeyError" class="form-error">{{ passkeyError }}</p>