Every door gets its crest: the four-colour G for Google, a person-and-key mark for passkeys, sized and padded to stand level with the ostrich

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_019eA8JRq9Wr7z2fRQk99HLi

1 files changed, 17 insertions, 6 deletions

diff --git a/src/features/nostrlogin.js b/src/features/nostrlogin.js
index fa6627b..a76e40c 100644
--- a/src/features/nostrlogin.js
+++ b/src/features/nostrlogin.js
@@ -263,18 +263,29 @@ export function nostrLoginFeature(ctx) {
     }
   }
 
+  // The official four-colour "G" (brand-fixed colours, not themed).
+  const GOOGLE_MARK = '<svg width="19" height="19" style="display:block" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>';
+  // Person + key, stroke style matching the app's other line icons.
+  const PASSKEY_MARK = '<svg width="19" height="19" style="display:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="7" r="4"/><path d="M3 21v-1a5 5 0 0 1 5-5h4"/><circle cx="17.5" cy="14.5" r="2.5"/><path d="M17.5 17v5l2-1.7"/></svg>';
+
+  const markedLabel = (mark, label) =>
+    h('span', { style: 'display:flex;align-items:center;justify-content:center;gap:8px' },
+      h('span', { style: 'display:flex;flex-shrink:0', html: mark }),
+      label);
+
   // Google + passkey, with their transient status rows — shared between the
   // collapsed front-door card and the expanded signer list.
-  function externalButtons(run) {
+  function externalButtons(run, big = false) {
     const hasPasskey = typeof window !== 'undefined' && !!window.PublicKeyCredential && !!navigator.credentials;
+    const pad = big ? 'padding:14px' : '';
     return [
-      h('button', { class: 'btn-block', disabled: ui.nostrLoginBusy,
-        onClick: () => googleLogin(run) }, t('nlGoogle')),
+      h('button', { class: 'btn-block', style: pad, disabled: ui.nostrLoginBusy,
+        onClick: () => googleLogin(run) }, markedLabel(GOOGLE_MARK, t('nlGoogle'))),
       ui.nostrLoginStatus ? h('div', { class: 'row gap6', style: 'align-items:center;justify-content:center' },
         h('span', { class: 'spinner sm' }), h('span', { class: 'small muted' }, ui.nostrLoginStatus)) : null,
       hasPasskey
-        ? h('button', { class: 'btn-block', disabled: ui.nostrLoginBusy,
-            onClick: () => passkeyLogin(run) }, t('nlPasskey'))
+        ? h('button', { class: 'btn-block', style: pad, disabled: ui.nostrLoginBusy,
+            onClick: () => passkeyLogin(run) }, markedLabel(PASSKEY_MARK, t('nlPasskey')))
         : null,
       ui.passkeyOffer
         ? h('div', { class: 'row gap6', style: 'align-items:center' },
@@ -579,7 +590,7 @@ export function nostrLoginFeature(ctx) {
     // the Nostr button steps into the wizard's signer list.
     frontDoorSignin() {
       return h('div', { class: 'col', style: 'gap:8px' },
-        ...externalButtons(loginWith),
+        ...externalButtons(loginWith, true),
         h('button', { class: 'btn-block', style: 'padding:14px', onClick: () => {
           if (ui.onb) ui.onb.step = 'signin';
           ui.nostrLoginOpen = true;