Nicer passkey styles

app/views/users/credentials/_credential.html.erb

@@ -1,10 +1,9 @@
-<li class="list-style-none margin-none" style="view-transition-name: <%= dom_id(credential) %>">
-  <%= link_to edit_user_credential_path(Current.user, credential), class: "txt-ink flex align-center gap txt-medium full-width" do %>
+<li class="credential" style="view-transition-name: <%= dom_id(credential) %>">
+  <%= 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 } %>
     <strong class="overflow-ellipsis min-width"><%= credential.name.presence || "Passkey" %></strong>
-    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
-    <%= icon_tag "arrow-right", class: "txt-subtle txt-xx-small flex-item-no-shrink" %>
+    <strong class="credential__arrow">→</strong>
   <% end %>
 </li>

app/views/users/credentials/edit.html.erb

@@ -1,4 +1,4 @@
-<% @page_title = "Name your passkey" %>
+<% @page_title = "Edit Passkey" %>
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
@@ -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| %>
     <div class="flex flex-column gap-half">
-      <strong><%= form.label :name %></strong>
+      <strong><%= form.label "Name your passkey" %></strong>
       <%= form.text_field :name, autofocus: true, class: "input", placeholder: "e.g. MacBook Pro, iPhone", data: { "1p-ignore": "" }, autocomplete: "off" %>
     </div>
 
-    <%= form.submit "Save", class: "btn btn--primary" %>
+    <%= form.submit "Save", class: "btn btn--link center" %>
   <% end %>
 
   <div class="txt-align-center">

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) %>">
 
-  <p class="margin-none-block-start"><strong>Passkeys let you sign in securely without a password or email code.</strong></p>
+  <p class="font-weight-medium margin-none-block-start">Passkeys let you sign in securely without a password or email code.</p>
 
   <% if @credentials.any? %>
-    <ul class="flex flex-column gap margin-none-block-start unpad full-width">
+    <ul class="margin-none-block-start margin-block-end-double unpad">
       <%= render partial: "users/credentials/credential", collection: @credentials %>
     </ul>
   <% end %>
 
-  <p class="txt-small pad-inline-double pad-block-half">Your browser will prompt you to create a passkey
-    using your device's biometrics, PIN, or security key</p>
+  <footer>
+    <button type="button" data-action="credential#create" data-credential-target="button" class="btn btn--link center txt-medium">
+      <%= icon_tag "add" %>
+      <span>Register a passkey</span>
+    </button>
 
-  <button type="button" data-action="credential#create" data-credential-target="button" class="btn btn--link center txt-medium">
-    <%= icon_tag "add" %>
-    <span>Register passkey</span>
-  </button>
+    <p class="txt-small txt-subtle txt-balance margin-none-block-end">
+      Your browser will prompt you to create a passkey using your device's biometrics, PIN, or security key
+    </p>
 
-  <p data-credential-target="error" class="txt-negative" hidden>
-    Something went wrong while registering your passkey.
-  </p>
+    <p data-credential-target="error" class="txt-negative" hidden>
+      Something went wrong while registering your passkey.
+    </p>
 
-  <p data-credential-target="cancelled" class="txt-subtle" hidden>
-    Passkey registration was cancelled.
-    Try again when you are ready.
-  </p>
+    <p data-credential-target="cancelled" class="txt-subtle" hidden>
+      Passkey registration was cancelled.
+      Try again when you are ready.
+    </p>
+  </footer>
 </section>