peach-browser / history

a3b65b7baf9c

SyncInfoSheet component + CSS (backdrop, sheet-up animation, handle, title, points, actions)

time
2026-05-09 01:55 UTC · 5 months ago
machine
koh2
parent
02819433296b

↓ peach-browser-a3b65b7b.tar.gzatlas at this save

files changed2 files src/popup/components/SyncInfoSheet.tsx+49 −0src/popup/styles/popup.css+105 −0
src/popup/components/SyncInfoSheet.tsx+49 −0 
@@ -0,0 +1,49 @@1+import { Component } from 'solid-js';2+3+interface SyncInfoSheetProps {4+  onGotIt: () => void;5+  onLearnPro: () => void;6+}7+8+export const SyncInfoSheet: Component<SyncInfoSheetProps> = (props) => {9+  return (10+    <div class="peach-sync-info-backdrop" onClick={props.onGotIt}>11+      <div12+        class="peach-sync-info-sheet"13+        onClick={e => e.stopPropagation()}14+      >15+        <div class="peach-sync-info-handle" />16+17+        <h2 class="peach-sync-info-title">How Peach Sync works</h2>18+19+        <div class="peach-sync-info-body">20+          <p class="peach-sync-info-point">21+            <span class="peach-sync-info-icon">⇄</span>22+            You can transfer your vault to another device for free —23+            scan a code and your passwords move over instantly.24+          </p>25+          <p class="peach-sync-info-point">26+            <span class="peach-sync-info-icon">✦</span>27+            Continuous sync across multiple devices — keeping everything28+            up to date automatically — requires Peach Pro.29+          </p>30+        </div>31+32+        <div class="peach-sync-info-actions">33+          <button34+            class="peach-btn peach-btn--accent peach-btn--full"35+            onClick={props.onGotIt}36+          >37+            Got it38+          </button>39+          <button40+            class="peach-sync-info-pro-link"41+            onClick={props.onLearnPro}42+          >43+            Learn about Pro →44+          </button>45+        </div>46+      </div>47+    </div>48+  );49+};

view file

src/popup/styles/popup.css+105 −0 
@@ -7513,3 +7513,108 @@75137513   width: 100%;75147514   margin-top: auto;75157515 }7516+7517+/* ============================================================7518+   Sync info sheet7519+   ============================================================ */7520+7521+.peach-sync-info-backdrop {7522+  position: fixed;7523+  inset: 0;7524+  z-index: 200;7525+  background: rgba(0, 0, 0, 0.55);7526+  display: flex;7527+  align-items: flex-end;7528+  animation: peach-fade-in 200ms ease forwards;7529+}7530+7531+@keyframes peach-fade-in {7532+  from { opacity: 0; }7533+  to   { opacity: 1; }7534+}7535+7536+.peach-sync-info-sheet {7537+  width: 100%;7538+  background: var(--peach-bg-card, var(--peach-bg));7539+  border-top-left-radius: 20px;7540+  border-top-right-radius: 20px;7541+  padding: 12px 24px 32px;7542+  display: flex;7543+  flex-direction: column;7544+  gap: 20px;7545+  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7546+}7547+7548+@keyframes peach-sheet-up {7549+  from { transform: translateY(100%); }7550+  to   { transform: translateY(0); }7551+}7552+7553+.peach-sync-info-handle {7554+  width: 36px;7555+  height: 4px;7556+  border-radius: 2px;7557+  background: var(--peach-border);7558+  margin: 0 auto 4px;7559+  flex-shrink: 0;7560+}7561+7562+.peach-sync-info-title {7563+  font-family: 'Cormorant Garamond', serif;7564+  font-style: italic;7565+  font-size: 26px;7566+  font-weight: 600;7567+  color: var(--peach-t0);7568+  margin: 0;7569+  line-height: 1.2;7570+}7571+7572+.peach-sync-info-body {7573+  display: flex;7574+  flex-direction: column;7575+  gap: 14px;7576+}7577+7578+.peach-sync-info-point {7579+  display: flex;7580+  gap: 12px;7581+  align-items: flex-start;7582+  font-size: 14px;7583+  color: var(--peach-t2);7584+  line-height: 1.6;7585+  margin: 0;7586+}7587+7588+.peach-sync-info-icon {7589+  color: var(--peach-accent);7590+  font-size: 16px;7591+  flex-shrink: 0;7592+  margin-top: 1px;7593+}7594+7595+.peach-sync-info-actions {7596+  display: flex;7597+  flex-direction: column;7598+  gap: 12px;7599+  margin-top: 4px;7600+}7601+7602+.peach-sync-info-pro-link {7603+  background: none;7604+  border: none;7605+  font-size: 13px;7606+  color: var(--peach-t3);7607+  cursor: pointer;7608+  padding: 0;7609+  font-family: inherit;7610+  text-align: center;7611+  transition: color 150ms ease;7612+}7613+7614+.peach-sync-info-pro-link:hover {7615+  color: var(--peach-accent);7616+}7617+7618+.peach-btn--full {7619+  width: 100%;7620+}

view file