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:
+10
-2
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user