1233f69caec8
Sync screen redesign: full feature showcase for free users replacing sparse gate (v2.4.5)
- time
- 2026-04-27 14:54 UTC · 6 months ago
- machine
- koh2
- parent
- bddf8230659b
↓ peach-browser-1233f69c.tar.gzatlas at this save
files changed5 files
manifest.firefox.json+1 −1manifest.json+1 −1package.json+1 −1src/popup/styles/popup.css+5 −0src/popup/views/Settings.tsx+50 −17manifest.firefox.json+1 −1
@@ -1,7 +1,7 @@11 {22 "manifest_version": 3,33 "name": "Peach",4- "version": "2.4.4",4+ "version": "2.4.5",55 "description": "Zero-knowledge password manager",66 "browser_specific_settings": {77 "gecko": {manifest.json+1 −1
@@ -1,7 +1,7 @@11 {22 "manifest_version": 3,33 "name": "Peach",4- "version": "2.4.4",4+ "version": "2.4.5",55 "description": "Zero-knowledge password manager",66 "action": {77 "default_popup": "src/popup/index.html",package.json+1 −1
@@ -1,6 +1,6 @@11 {22 "name": "peach",3- "version": "2.4.4",3+ "version": "2.4.5",44 "description": "Zero-knowledge password manager",55 "type": "module",66 "scripts": {src/popup/styles/popup.css+5 −0
@@ -3573,6 +3573,11 @@35733573 color: var(--peach-breach);35743574 }35753575 3576+.peach-sync-hero-icon {3577+ color: var(--peach-t1);3578+ opacity: 0.85;3579+}3580+35763581 .peach-import-preview {35773582 margin-bottom: 12px;35783583 max-height: 152px;src/popup/views/Settings.tsx+50 −17
@@ -929,28 +929,61 @@929929 if (!isPro()) {930930 return (931931 <div class="peach-settings-body">932- <div class="peach-settings-group" style="position:relative">933- <div class="peach-sync-pro-gate">934- <div class="peach-sync-pro-gate-blur">935- <div class="peach-settings-row">936- <span>Status</span>937- <span class="peach-settings-value peach-settings-value--status">938- <span class="peach-sync-status-dot" style={{ background: getStatusColor(syncStatus()) }}></span>939- {getStatusLabel(syncStatus())}940- </span>932+ <div class="peach-pro-upgrade">933+ <div class="peach-pro-upgrade-hero">934+ <svg class="peach-sync-hero-icon" width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true">935+ <circle cx="9" cy="18" r="4.5" stroke="currentColor" stroke-width="1.2" opacity="0.9"/>936+ <circle cx="27" cy="18" r="4.5" stroke="currentColor" stroke-width="1.2" opacity="0.9"/>937+ <path d="M13.5 15.5C15 12 17 10 18 10C19 10 21 12 22.5 15.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>938+ <path d="M13.5 20.5C15 24 17 26 18 26C19 26 21 24 22.5 20.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>939+ <path d="M13.5 18H22.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.35"/>940+ <path d="M20 16L22.5 18L20 20" stroke="var(--peach-accent)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>941+ <path d="M16 16L13.5 18L16 20" stroke="var(--peach-accent)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>942+ </svg>943+ <h2 class="peach-pro-upgrade-title">Peach Sync</h2>944+ <p class="peach-pro-upgrade-tagline">Encrypted · peer-to-peer · local</p>945+ </div>946+947+ <div class="peach-pro-features">948+ <div class="peach-pro-feature">949+ <span class="peach-pro-feature-mark">✦</span>950+ <div class="peach-pro-feature-text">951+ <span class="peach-pro-feature-name">Always in sync</span>952+ <span class="peach-pro-feature-desc">Your vault stays current across all your devices automatically</span>941953 </div>942- <div class="peach-settings-row peach-settings-row--meta">943- <span>Last sync</span>944- <span class="peach-settings-value">{lastSyncAt() ? formatRelativeTime(lastSyncAt()) : "Never synced"}</span>954+ </div>955+ <div class="peach-pro-feature">956+ <span class="peach-pro-feature-mark">✦</span>957+ <div class="peach-pro-feature-text">958+ <span class="peach-pro-feature-name">No cloud. No relay.</span>959+ <span class="peach-pro-feature-desc">Direct device-to-device on your local network — nothing leaves your hands</span>945960 </div>946961 </div>947- <div class="peach-sync-pro-gate-overlay">948- <span class="peach-sync-pro-badge">Pro</span>949- <a href="https://peachpasswords.com/#pricing" target="_blank" rel="noopener noreferrer" class="peach-link" style="color:var(--peach-accent);font-size:13px;font-weight:500">950- Upgrade to Pro →951- </a>962+ <div class="peach-pro-feature">963+ <span class="peach-pro-feature-mark">✦</span>964+ <div class="peach-pro-feature-text">965+ <span class="peach-pro-feature-name">Tailscale supported</span>966+ <span class="peach-pro-feature-desc">Sync securely from anywhere over your private Tailscale network</span>967+ </div>952968 </div>969+ <div class="peach-pro-feature">970+ <span class="peach-pro-feature-mark">✦</span>971+ <div class="peach-pro-feature-text">972+ <span class="peach-pro-feature-name">Zero friction after setup</span>973+ <span class="peach-pro-feature-desc">Mark a network as trusted once — sync happens in the background</span>974+ </div>975+ </div>953976 </div>977+978+ <button979+ class="peach-btn peach-btn--accent peach-pro-upgrade-cta"980+ onClick={() => setActiveSection("license")}981+ >982+ Upgrade to Pro983+ </button>984+ <button class="peach-pro-key-link" onClick={() => setActiveSection("license")}>985+ Already have a key? Enter it →986+ </button>954987 </div>955988 </div>956989 );