diff options
| -rw-r--r-- | src/app.js | 9 | ||||
| -rw-r--r-- | src/style.css | 2 |
2 files changed, 9 insertions, 2 deletions
@@ -2285,9 +2285,17 @@ function onboardScreen() { if (o.step === 'avatar') { const me = (featureHook('nostrLoginIdentity') || {}).pubkey || (wallet.nostrPubkey && wallet.nostrPubkey()); const sel = o.avatar; + // The big avatar IS the selection: it shows exactly what Continue will + // publish — a picked punk, an upload, or the pubkey-derived default. + const preview = sel || (me ? punkUrl(me) : null); return page([ title(t('onbAvatarTitle')), h('p', { class: 'muted', style: 'margin:0' }, t('onbAvatarBody')), + preview ? h('img', { + class: 'onb-avatar', src: preview, alt: '', + style: ui.onbBusy ? 'opacity:.5' : '', + onError: (e) => { e.target.style.visibility = 'hidden'; }, + }) : null, h('div', { class: 'onb-punks', 'data-keep-scroll': 'punks' }, ...PUNK_PICKS.map((n) => h('img', { @@ -2305,7 +2313,6 @@ function onboardScreen() { try { o.avatar = await onbUpload(f); } catch (err) { ui.onbError = err.message; } ui.onbBusy = false; render(); } })), - o.avatar ? h('img', { class: 'onb-preview', src: o.avatar, alt: '' }) : null, ui.onbError ? h('div', { class: 'notice err' }, ui.onbError) : null, h('button', { class: 'btn-primary btn-block', style: 'padding:14px', disabled: ui.onbBusy, onClick: async () => { ui.onbBusy = true; ui.onbError = ''; render(); diff --git a/src/style.css b/src/style.css index b029e97..9e0e1bd 100644 --- a/src/style.css +++ b/src/style.css @@ -551,7 +551,7 @@ body::after { .onb-punk { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: 3px solid transparent; transition: transform .15s, border-color .15s; } .onb-punk:hover { transform: scale(1.08); } .onb-punk.sel { border-color: var(--accent); transform: scale(1.08); } -.onb-preview { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; align-self: center; box-shadow: var(--shadow); } +.onb-avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; align-self: center; box-shadow: var(--shadow); transition: opacity .15s; } .onb-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; } .onb-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; opacity: .9; animation: confetti-fall 2.8s ease-in forwards; } .onb-confetti i:nth-child(4n) { background: #f7931a; } |