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
3 files src/popup/styles/popup.css+38 −12src/popup/views/Entry.tsx+61 −50src/popup/views/RecoveryWordEntry.tsx+1 −5
src/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 {

view file

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 */}

view file

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"}>

view file