peach-browser / history

7c1bd58db8ea

danger card visual overhaul for Replace + Destroy: paired card scaffold with glyph+title+copy+CTA, --danger-tint var keyed yellow (warn) vs red (hazard), accent border + radial-gradient glow that intensifies on hover; bump v2.11.8

time
2026-04-29 01:14 UTC · 6 months ago
machine
koh2
parent
2f6adfd23117

↓ peach-browser-7c1bd58d.tar.gzatlas at this save

files changed5 files manifest.firefox.json+1 −1manifest.json+1 −1package.json+1 −1src/popup/styles/popup.css+79 −19src/popup/views/Settings.tsx+25 −16
manifest.firefox.json+1 −1 
@@ -1,7 +1,7 @@11 {22   "manifest_version": 3,33   "name": "Peach",4-  "version": "2.11.7",4+  "version": "2.11.8",55   "description": "Zero-knowledge password manager",66   "browser_specific_settings": {77     "gecko": {

view file

manifest.json+1 −1 
@@ -1,7 +1,7 @@11 {22   "manifest_version": 3,33   "name": "Peach",4-  "version": "2.11.7",4+  "version": "2.11.8",55   "description": "Zero-knowledge password manager",66   "action": {77     "default_popup": "src/popup/index.html",

view file

package.json+1 −1 
@@ -1,6 +1,6 @@11 {22   "name": "peach",3-  "version": "2.11.7",3+  "version": "2.11.8",44   "description": "Zero-knowledge password manager",55   "type": "module",66   "scripts": {

view file

src/popup/styles/popup.css+79 −19 
@@ -6073,36 +6073,96 @@60736073 }60746074 60756075 /* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6076-.peach-danger-zone {6077-  border-top: 1px solid rgba(220, 38, 38, 0.3);6078-  margin: 24px 16px 0;6079-  padding-top: 20px;6076+/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6077+ * Two severity levels: "warn" for actions that are dangerous-but-recoverable6078+ * (replacing the vault from a backup file) and "hazard" for actions that6079+ * are absolutely irreversible (Panic). Both use the same card scaffold so6080+ * they read as a pair, but the colour family signals the severity at a6081+ * glance — yellow for caution, red for don't.6082+ */6083+.peach-danger-card {6084+  --danger-tint: 235, 158, 52; /* amber */6085+  display: flex;6086+  flex-direction: column;6087+  gap: 8px;6088+  padding: 14px;6089+  margin-top: 10px;6090+  border-radius: 12px;6091+  border: 1px solid rgba(var(--danger-tint), 0.32);6092+  background:6093+    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6094+    rgba(var(--danger-tint), 0.04);6095+  box-shadow:6096+    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6097+    0 0 24px rgba(var(--danger-tint), 0.04);6098+  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;60806099 }60816100 6082-.peach-danger-zone-label {6083-  margin: 0 0 12px;6084-  font-family: "IBM Plex Mono", monospace;6085-  font-size: 10px;6086-  letter-spacing: 0.1em;6087-  color: rgba(220, 38, 38, 0.7);6101+.peach-danger-card:hover {6102+  border-color: rgba(var(--danger-tint), 0.55);6103+  box-shadow:6104+    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6105+    0 0 36px rgba(var(--danger-tint), 0.10);60886106 }60896107 6090-.peach-destroy-button {6108+.peach-danger-card--hazard {6109+  --danger-tint: 220, 38, 38; /* red */6110+}6111+6112+.peach-danger-card-head {6113+  display: flex;6114+  align-items: center;6115+  gap: 10px;6116+}6117+6118+.peach-danger-card-glyph {6119+  width: 28px;6120+  height: 28px;6121+  flex-shrink: 0;6122+  display: flex;6123+  align-items: center;6124+  justify-content: center;6125+  border-radius: 8px;6126+  background: rgba(var(--danger-tint), 0.12);6127+  color: rgba(var(--danger-tint), 0.95);6128+  font-size: 16px;6129+  line-height: 1;6130+}6131+6132+.peach-danger-card-title {6133+  margin: 0;6134+  font-size: 13px;6135+  font-weight: 600;6136+  color: rgba(var(--danger-tint), 0.92);6137+  letter-spacing: 0.01em;6138+}6139+6140+.peach-danger-card-copy {6141+  margin: 0;6142+  font-size: 11px;6143+  line-height: 1.5;6144+  color: var(--peach-t2);6145+}6146+6147+.peach-danger-card-button {60916148   width: 100%;6092-  padding: 10px;6149+  padding: 9px;6150+  margin-top: 4px;60936151   background: transparent;6094-  border: 1px solid rgba(220, 38, 38, 0.4);6152+  border: 1px solid rgba(var(--danger-tint), 0.45);60956153   border-radius: 8px;6096-  color: rgba(220, 38, 38, 0.7);6097-  font-size: 13px;6154+  color: rgba(var(--danger-tint), 0.9);6155+  font-size: 12px;6156+  font-weight: 500;6157+  letter-spacing: 0.02em;60986158   cursor: pointer;60996159   transition: background 150ms ease, border-color 150ms ease, color 150ms ease;61006160 }61016161 6102-.peach-destroy-button:hover {6103-  background: rgba(220, 38, 38, 0.08);6104-  border-color: rgba(220, 38, 38, 0.7);6105-  color: rgb(220, 38, 38);6162+.peach-danger-card-button:hover {6163+  background: rgba(var(--danger-tint), 0.10);6164+  border-color: rgba(var(--danger-tint), 0.75);6165+  color: rgb(var(--danger-tint));61066166 }61076167 61086168 /* ── Panic flow (three-step destruction) ───────────────────────────────── */

view file

src/popup/views/Settings.tsx+25 −16 
@@ -956,29 +956,38 @@956956               open957957             </button>958958           </div>959-          <div class="peach-settings-row peach-settings-row--meta" style="flex-direction:column;align-items:stretch;gap:6px">960-            <span>Replace vault from backup</span>961-            <div class="peach-restore-warning" style="margin-top:2px">962-              This will permanently replace your current vault with the backup.959+          <div class="peach-danger-card">960+            <div class="peach-danger-card-head">961+              <span class="peach-danger-card-glyph" aria-hidden="true">⟳</span>962+              <h3 class="peach-danger-card-title">Replace vault from backup</h3>963963             </div>964-            <div style="display:flex;gap:6px">965-              <button966-                class="peach-btn peach-btn--subtle peach-btn--sm"967-                onClick={() => props.onOpenFileImport?.()}968-              >969-                backup file970-              </button>971-            </div>964+            <p class="peach-danger-card-copy">965+              Wipes the current vault and restores from a backup file.966+              Recoverable only if your backup is good.967+            </p>968+            <button969+              class="peach-danger-card-button"970+              onClick={() => props.onOpenFileImport?.()}971+            >972+              Choose backup file973+            </button>972974           </div>973975 974976           <Show when={props.onOpenPanic}>975-            <div class="peach-danger-zone">976-              <p class="peach-danger-zone-label">⚠ DANGER ZONE</p>977+            <div class="peach-danger-card peach-danger-card--hazard">978+              <div class="peach-danger-card-head">979+                <span class="peach-danger-card-glyph" aria-hidden="true">⚠</span>980+                <h3 class="peach-danger-card-title">Destroy vault</h3>981+              </div>982+              <p class="peach-danger-card-copy">983+                Permanently wipes every entry, setting, and license on this984+                device. There is no recovery.985+              </p>977986               <button978-                class="peach-destroy-button"987+                class="peach-danger-card-button"979988                 onClick={() => props.onOpenPanic?.()}980989               >981-                Destroy vault990+                Begin destruction982991               </button>983992             </div>984993           </Show>

view file