From f4fbe17b223e99b034dd91f26fc4585056ebecf4 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 20 Feb 2026 11:42:56 -0600 Subject: [PATCH] Nicer passkey styles --- app/assets/stylesheets/credentials.css | 43 +++++++++++-------- app/assets/stylesheets/utilities.css | 29 ++++++++++++- .../users/credentials/_credential.html.erb | 11 +++-- app/views/users/credentials/edit.html.erb | 6 +-- app/views/users/credentials/index.html.erb | 33 +++++++------- 5 files changed, 77 insertions(+), 45 deletions(-) diff --git a/app/assets/stylesheets/credentials.css b/app/assets/stylesheets/credentials.css index 64e39005b..bb6db0b37 100644 --- a/app/assets/stylesheets/credentials.css +++ b/app/assets/stylesheets/credentials.css @@ -1,29 +1,34 @@ @layer components { - .passkey-icon--dark { - display: none; + .credential { + border-block-start: var(--border); + list-style: none; + + &:last-child { + border-block-end: var(--border); + } } - .passkey-icon--light { - html[data-theme="dark"] & { - display: none; - } + .credential__link { + align-items: center; + block-size: 1.75lh; + color: currentcolor; + display: flex; + gap: 1ch; + padding-inline: 1ch; - @media (prefers-color-scheme: dark) { - html:not([data-theme]) & { - display: none; + @media (any-hover: hover) { + &:hover { + background: var(--color-ink-lightest); + + .credential__arrow { + opacity: 0.66; + } } } } - .passkey-icon--dark { - html[data-theme="dark"] & { - display: inline; - } - - @media (prefers-color-scheme: dark) { - html:not([data-theme]) & { - display: inline; - } - } + .credential__arrow { + margin-inline-start: auto; + opacity: 0; } } diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 53837034c..2aa07029c 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -31,9 +31,10 @@ .txt-capitalize-first-letter::first-letter { text-transform: capitalize; } .txt-link { color: var(--color-link); text-decoration: underline; } - .font-weight-normal { font-weight: normal; } + .font-weight-normal { font-weight: 400; } + .font-weight-medium { font-weight: 500; } .font-weight-semibold { font-weight: 600; } - .font-weight-bold { font-weight: bold; } + .font-weight-bold { font-weight: 700; } .font-weight-black { font-weight: 900; } /* Flexbox and Grid */ @@ -283,4 +284,28 @@ display: none; } } + + .hide-on-dark-mode { + html[data-theme="dark"] & { + display: none; + } + + html:not([data-theme]) & { + @media (prefers-color-scheme: dark) { + display: none; + } + } + } + + .hide-on-light-mode { + html[data-theme="light"] & { + display: none; + } + + html:not([data-theme]) & { + @media (prefers-color-scheme: light) { + display: none; + } + } + } } diff --git a/app/views/users/credentials/_credential.html.erb b/app/views/users/credentials/_credential.html.erb index 38fe5cb0e..fa1e733e6 100644 --- a/app/views/users/credentials/_credential.html.erb +++ b/app/views/users/credentials/_credential.html.erb @@ -1,10 +1,9 @@ -
  • - <%= link_to edit_user_credential_path(Current.user, credential), class: "txt-ink flex align-center gap txt-medium full-width" do %> +
  • + <%= link_to edit_user_credential_path(Current.user, credential), class: "credential__link" do %> <% authenticator = credential.authenticator %> - <%= image_tag authenticator&.icon&.[](:light) || "passkeys/generic_light.svg", size: 24, class: "flex-item-no-shrink passkey-icon passkey-icon--light", aria: { hidden: true } %> - <%= image_tag authenticator&.icon&.[](:dark) || "passkeys/generic_dark.svg", size: 24, class: "flex-item-no-shrink passkey-icon passkey-icon--dark", aria: { hidden: true } %> + <%= image_tag authenticator&.icon&.[](:light) || "passkeys/generic_light.svg", size: 24, class: "flex-item-no-shrink hide-on-dark-mode", aria: { hidden: true } %> + <%= image_tag authenticator&.icon&.[](:dark) || "passkeys/generic_dark.svg", size: 24, class: "flex-item-no-shrink hide-on-light-mode", aria: { hidden: true } %> <%= credential.name.presence || "Passkey" %> - - <%= icon_tag "arrow-right", class: "txt-subtle txt-xx-small flex-item-no-shrink" %> + → <% end %>
    • diff --git a/app/views/users/credentials/edit.html.erb b/app/views/users/credentials/edit.html.erb index c8e4ddfa4..4beb0bba8 100644 --- a/app/views/users/credentials/edit.html.erb +++ b/app/views/users/credentials/edit.html.erb @@ -1,4 +1,4 @@ -<% @page_title = "Name your passkey" %> +<% @page_title = "Edit Passkey" %> <% content_for :header do %>
    @@ -15,11 +15,11 @@ <%= form_with model: @credential, scope: :credential, url: user_credential_path(Current.user, @credential), html: { class: "flex flex-column gap" } do |form| %>
    - <%= form.label :name %> + <%= form.label "Name your passkey" %> <%= form.text_field :name, autofocus: true, class: "input", placeholder: "e.g. MacBook Pro, iPhone", data: { "1p-ignore": "" }, autocomplete: "off" %>
    - <%= form.submit "Save", class: "btn btn--primary" %> + <%= form.submit "Save", class: "btn btn--link center" %> <% end %>
    diff --git a/app/views/users/credentials/index.html.erb b/app/views/users/credentials/index.html.erb index 3278f6d14..f37d8a373 100644 --- a/app/views/users/credentials/index.html.erb +++ b/app/views/users/credentials/index.html.erb @@ -13,28 +13,31 @@ data-credential-public-key-value="<%= @creation_options.as_json.to_json %>" data-credential-register-url-value="<%= user_credentials_path(Current.user) %>"> -

    Passkeys let you sign in securely without a password or email code.

    +

    Passkeys let you sign in securely without a password or email code.

    <% if @credentials.any? %> -
      +
        <%= render partial: "users/credentials/credential", collection: @credentials %>
      <% end %> -

      Your browser will prompt you to create a passkey - using your device's biometrics, PIN, or security key

      +