From a5525c3291b325e17012bc62feb503bbdd519469 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Mon, 3 Aug 2026 07:57:05 -0700 Subject: Onboarding: the nostr mark heads the nostr steps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 72px, centered above the question (and the sign-in step), with a purple glow and a slow float — the one place in the flow that isn't the coinos brand, so it should look like nostr. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01Wvj4aoeMZwA7VUGdJP9Swi --- src/app.js | 3 +++ src/features/nostrlogin.js | 2 ++ src/style.css | 5 +++++ 3 files changed, 10 insertions(+) diff --git a/src/app.js b/src/app.js index 67ab086..9264197 100644 --- a/src/app.js +++ b/src/app.js @@ -8,6 +8,7 @@ import { Wallet, newMnemonic, isValidMnemonic, accountXpubFor, cacheKeyFor, utxo import { qrSvg } from './qr.js'; import { makeSearcher, resultRows, searchable, punkUrl } from './recipient-search.js'; import { npubOf } from './nostr.js'; +import { NOSTR_MARK } from './features/nostrlogin.js'; import { scanQr } from './scan.js'; import { dataSources, getSource, setSource, getNetwork, setNetwork, NETWORKS } from './api.js'; import { buildFeatures } from './features/index.js'; @@ -2059,6 +2060,7 @@ function onboardScreen() { } if (o.step === 'nostr') { return page([ + h('div', { class: 'onb-mark', html: NOSTR_MARK }), title(t('onbNostrTitle')), h('p', { class: 'muted', style: 'margin:0' }, t('onbNostrBody')), h('button', { class: 'btn-primary btn-block', style: 'padding:14px', onClick: () => { @@ -2077,6 +2079,7 @@ function onboardScreen() { } if (o.step === 'signin') { return page([ + h('div', { class: 'onb-mark', html: NOSTR_MARK }), title(t('onbSigninTitle')), featureHook('unlockExtra') || h('div', { class: 'notice err' }, 'nostr login unavailable'), h('button', { class: 'linklike small', onClick: () => { o.step = 'nostr'; render(); } }, t('back')), diff --git a/src/features/nostrlogin.js b/src/features/nostrlogin.js index 35db691..777a11e 100644 --- a/src/features/nostrlogin.js +++ b/src/features/nostrlogin.js @@ -20,6 +20,8 @@ import { const OSTRICH = ''; +export const NOSTR_MARK = OSTRICH; + export function nostrLoginFeature(ctx) { const { h, ui, render, wallet, toast, copyBtn } = ctx; diff --git a/src/style.css b/src/style.css index 562db92..78192a3 100644 --- a/src/style.css +++ b/src/style.css @@ -507,3 +507,8 @@ body::after { .tour-card { position: fixed; left: 50%; transform: translateX(-50%); width: min(90vw, 360px); background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); z-index: 81; } @media (prefers-reduced-motion: reduce) { .onb-confetti i { animation: none; display: none; } } .onb-check { width: 96px; height: 96px; font-size: 52px; align-self: center; margin: 6px 0; } +/* the nostr mark heading the sign-in steps: big, centered, gently afloat */ +.onb-mark { align-self: center; margin-bottom: -4px; animation: mark-float 4.5s ease-in-out infinite; } +.onb-mark svg { width: 72px; height: 72px; filter: drop-shadow(0 8px 22px rgba(184, 79, 232, .35)); } +@keyframes mark-float { 50% { transform: translateY(-6px); } } +@media (prefers-reduced-motion: reduce) { .onb-mark { animation: none; } } -- cgit v1.2.3