From d6d4f52ca0ef41b7665c80601efacc86e9886a2e Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Wed, 26 Aug 2026 22:15:35 -0700 Subject: 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 Claude-Session: https://claude.ai/code/session_019eA8JRq9Wr7z2fRQk99HLi --- src/features/nostrlogin.js | 23 +++++++++++++++++------ 1 file 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 = ''; + // Person + key, stroke style matching the app's other line icons. + const PASSKEY_MARK = ''; + + 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; -- cgit v1.2.3