diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/features/nostrlogin.js | 23 |
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; |