ee903becfbb0
recovery screen: remove wordmark, rune mask top/bottom bands, visible input lines, button pinned to bottom
- time
- 2026-05-05 18:24 UTC · 5 months ago
- machine
- koh2
- parent
- e67430a671b1
↓ peach-browser-ee903bec.tar.gzatlas at this save
files changed3 files
src/popup/styles/popup.css+38 −12src/popup/views/Entry.tsx+61 −50src/popup/views/RecoveryWordEntry.tsx+1 −5src/popup/styles/popup.css+38 −12
@@ -7210,21 +7210,46 @@72107210 display: flex;72117211 flex-direction: column;72127212 align-items: stretch;7213- padding: 0 20px 32px;7214- overflow-y: auto;7215- overflow-x: hidden;7213+ padding: 12px 20px 24px;7214+ overflow: hidden;72167215 }72177216 7217+.peach-recovery-nav {7218+ display: flex;7219+ align-items: center;7220+ position: relative;7221+ z-index: 1;7222+ margin-bottom: 4px;7223+}7224+7225+/* Mask runes to top and bottom bands only — keep inputs clear */7226+.peach-rune-background--recovery {7227+ -webkit-mask-image: linear-gradient(7228+ to bottom,7229+ black 0px, black 85px,7230+ transparent 110px,7231+ transparent 405px,7232+ black 430px, black 520px7233+ );7234+ mask-image: linear-gradient(7235+ to bottom,7236+ black 0px, black 85px,7237+ transparent 110px,7238+ transparent 405px,7239+ black 430px, black 520px7240+ );7241+}7242+72187243 .peach-recovery-header {72197244 text-align: center;7220- margin-bottom: 24px;7221- margin-top: 8px;7245+ margin-bottom: 16px;7246+ margin-top: 4px;72227247 }72237248 .peach-recovery-header .peach-onboarding-headline {72247249 font-size: 1.25rem;72257250 font-weight: 300;72267251 letter-spacing: 0.02em;7227- margin: 0 0 6px;7252+ margin: 0 0 4px;72287253 }72297254 .peach-recovery-header .peach-hint {72307255 font-family: "IBM Plex Mono", monospace;@@ -7238,9 +7263,9 @@72387263 .peach-recovery-grid {72397264 display: grid;72407265 grid-template-columns: repeat(2, 1fr);7241- gap: 10px 20px;7266+ gap: 12px 20px;72427267 width: 100%;7243- margin-bottom: 16px;7268+ margin-bottom: 0;72447269 }72457270 72467271 .peach-recovery-word-slot {@@ -7253,7 +7278,7 @@72537278 .peach-recovery-word-index {72547279 font-family: "IBM Plex Mono", monospace;72557280 font-size: 0.5rem;7256- color: var(--peach-t2);7281+ color: rgba(255, 255, 255, 0.35);72577282 min-width: 14px;72587283 flex-shrink: 0;72597284 text-align: right;@@ -7265,7 +7290,7 @@72657290 min-width: 0;72667291 background: transparent;72677292 border: none;7268- border-bottom: 1px solid var(--peach-t3);7293+ border-bottom: 1px solid rgba(255, 255, 255, 0.22);72697294 color: var(--peach-t0);72707295 font-family: "IBM Plex Mono", monospace;72717296 font-size: 0.6875rem;@@ -7276,7 +7301,7 @@72767301 transition: border-color 120ms ease;72777302 }72787303 .peach-recovery-word-input::placeholder {7279- color: var(--peach-t3);7304+ color: rgba(255, 255, 255, 0.18);72807305 }72817306 .peach-recovery-word-input:focus {72827307 border-bottom-color: var(--peach-accent);@@ -7284,7 +7309,8 @@72847309 72857310 .peach-recovery-submit {72867311 width: 100%;7287- margin-top: 8px;7312+ margin-top: auto;7313+ padding-top: 16px;72887314 }72897315 72907316 .peach-recovery-new-password-form {src/popup/views/Entry.tsx+61 −50
@@ -771,51 +771,63 @@771771 <Show when={entry().type !== "note" && entry().type !== "card" && !isPasskeyOnly(entry())}>772772 <section class="peach-fields" style="position:relative;z-index:1;">773773 774- {/* Username / Email */}775- <div class="peach-field-card" classList={{ "is-editing": editingField() === "username" }}>776- <span class="peach-label">{entry().username?.includes("@") ? "email" : "username"}</span>777- <Show778- when={editingField() === "username"}779- fallback={780- <div class="peach-field-value-row">781- <span782- class="peach-field-value peach-inline-clickable"783- title="Click to edit"784- onClick={() => startEdit("username", entry().username ?? "")}785- >786- {entry().username || <span style="color:var(--t2);font-style:italic;">click to add username</span>}787- </span>788- <Show when={entry().username}>774+ {/* Username — shown when set, or as the only identity field when neither is set */}775+ <Show when={entry().username || (!entry().username && !entry().email) || editingField() === "username"}>776+ <div class="peach-field-card" classList={{ "is-editing": editingField() === "username" }}>777+ <span class="peach-label">{entry().username?.includes("@") ? "email" : "username"}</span>778+ <Show779+ when={editingField() === "username"}780+ fallback={781+ <div class="peach-field-value-row">782+ <span783+ class="peach-field-value peach-inline-clickable"784+ title="Click to edit"785+ onClick={() => startEdit("username", entry().username ?? "")}786+ >787+ {entry().username || <span style="color:var(--t2);font-style:italic;">click to add username</span>}788+ </span>789+ <Show when={entry().username}>790+ <button791+ class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === "username" ? "is-copied" : ""}`}792+ onClick={(e) => void copyField(entry().username!, "username", e.currentTarget as HTMLButtonElement)}793+ aria-label="Copy username"794+ >795+ <CopyGlyph /><span class="peach-copy-sheen" />796+ </button>797+ </Show>798+ </div>799+ }800+ >801+ <div802+ class="peach-inline-field-wrap"803+ onFocusOut={(event) => handleEditorFocusOut("username", event)}804+ >805+ <input806+ class="peach-inline-input"807+ value={draft()}808+ onInput={(e) => setDraft(e.currentTarget.value)}809+ onKeyDown={onEditKeyDown}810+ ref={autoFocus}811+ disabled={saving()}812+ autocomplete="off"813+ />814+ <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />815+ <Show when={!entry().email}>789816 <button790- class={`peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-copy-btn ${copied() === "username" ? "is-copied" : ""}`}791- onClick={(e) => void copyField(entry().username!, "username", e.currentTarget as HTMLButtonElement)}792- aria-label="Copy username"817+ class="peach-add-field-btn"818+ type="button"819+ onMouseDown={(e) => e.preventDefault()}820+ onClick={() => startEdit("email", "")}793821 >794- <CopyGlyph /><span class="peach-copy-sheen" />822+ + add email795823 </button>796824 </Show>797825 </div>798- }799- >800- <div801- class="peach-inline-field-wrap"802- onFocusOut={(event) => handleEditorFocusOut("username", event)}803- >804- <input805- class="peach-inline-input"806- value={draft()}807- onInput={(e) => setDraft(e.currentTarget.value)}808- onKeyDown={onEditKeyDown}809- ref={autoFocus}810- disabled={saving()}811- autocomplete="off"812- />813- <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />814- </div>815- </Show>816- </div>826+ </Show>827+ </div>828+ </Show>817829 818- {/* Email (separate from username — for sites that require both) */}830+ {/* Email — shown when set, or when actively being added */}819831 <Show when={entry().email || editingField() === "email"}>820832 <div class="peach-field-card" classList={{ "is-editing": editingField() === "email" }}>821833 <span class="peach-label">email</span>@@ -854,20 +866,19 @@854866 autocomplete="email"855867 />856868 <InlineSaveCancelRow onSave={saveField} onCancel={cancelEdit} saving={saving()} />869+ <Show when={!entry().username}>870+ <button871+ class="peach-add-field-btn"872+ type="button"873+ onMouseDown={(e) => e.preventDefault()}874+ onClick={() => startEdit("username", "")}875+ >876+ + add username877+ </button>878+ </Show>857879 </div>858880 </Show>859881 </div>860- </Show>861-862- {/* +Add Email button — only shown when no email is set */}863- <Show when={!entry().email && editingField() !== "email"}>864- <button865- class="peach-add-field-btn"866- type="button"867- onClick={() => startEdit("email", "")}868- >869- + add email870- </button>871882 </Show>872883 873884 {/* Password */}src/popup/views/RecoveryWordEntry.tsx+1 −5
@@ -7,7 +7,6 @@77 Show,88 } from "solid-js";99 import { sendMessage } from "../App";10-import { PeachWordmark } from "../components/PeachMark";1110 import { RecoveryRuneBackground } from "../components/RecoveryRuneBackground";1211 import { getWordSuggestions } from "../../shared/recovery-words";1312 import { WORD_LIST } from "../../shared/recovery-word-list";@@ -226,7 +225,7 @@226225 >227226 <RecoveryRuneBackground />228227 229- <header class="peach-screen-header">228+ <header class="peach-screen-header peach-recovery-nav">230229 <button231230 class="peach-newvault-back"232231 type="button"@@ -244,9 +243,6 @@244243 </svg>245244 back246245 </button>247- <div class="peach-wordmark-stack">248- <PeachWordmark class="peach-wordmark-wrap" />249- </div>250246 </header>251247 252248 <Show when={step() === "words"}>