2c9a1a9d8c4e
fix: pairing method selection — drop redundant body copy, replace twin orange buttons with warm icon cards (audio-wave + monitor), description per option (v4.0.4)
- time
- 2026-06-18 16:15 UTC · 4 months ago
- machine
- koh2
- agent
- claude-opus-4-8
- session
- sync hub pairing ux redesign
- parent
- 27a185c00aef
↓ peach-browser-2c9a1a9d.tar.gzatlas at this save
files changed2 files
src/popup/styles/popup.css+24 −5src/popup/views/ChirpSync.tsx+24 −9src/popup/styles/popup.css+24 −5
@@ -1048,14 +1048,33 @@10481048 display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 8px;10491049 }10501050 .peach-pair-method {1051- display: flex; flex-direction: column; align-items: flex-start; gap: 2px;1052- width: 100%; text-align: left;1051+ display: flex; align-items: center; gap: 12px;1052+ width: 100%; text-align: left; cursor: pointer;1053+ padding: 12px; border-radius: 10px;1054+ background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1055+ border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);1056+ color: var(--peach-text);1057+ font-family: inherit;1058+ transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;10531059 }1060+.peach-pair-method:hover {1061+ border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);1062+ background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 80%, var(--peach-accent) 20%);1063+}1064+.peach-pair-method:active { transform: translateY(1px); }1065+.peach-pair-method-icon {1066+ flex-shrink: 0;1067+ width: 32px; height: 32px;1068+ display: flex; align-items: center; justify-content: center;1069+ border-radius: 8px;1070+ color: var(--peach-text);1071+ background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1072+}1073+.peach-pair-method-text {1074+ display: flex; flex-direction: column; gap: 2px; min-width: 0;1075+}10541076 .peach-pair-method-title { font-size: 0.875rem; font-weight: 600; }10551077 .peach-pair-method-sub { font-size: 0.6875rem; color: var(--peach-t2); }1056-.peach-chirp-pair-start--desktop {1057- border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1058-}10591078 10601079 /* Breach badge */10611080 .peach-breach-badge {src/popup/views/ChirpSync.tsx+24 −9
@@ -618,19 +618,34 @@618618 <div class="peach-chirp-copy-host">619619 <div class="peach-chirp-copy">620620 <div class="peach-chirp-headline">How do you want to pair?</div>621- <div class="peach-chirp-sub">622- In the same room? Use a chirp. Pairing with the Peach desktop helper? Enter its code.623- </div>624621 </div>625622 </div>626623 <div class="peach-pair-method-list">627- <button class="peach-pair-method peach-chirp-pair-start" onClick={() => startChirpFlow()}>628- <span class="peach-pair-method-title">Same room</span>629- <span class="peach-pair-method-sub">Chirp — audio</span>624+ <button class="peach-pair-method" onClick={() => startChirpFlow()}>625+ <span class="peach-pair-method-icon" aria-hidden="true">626+ <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">627+ <path d="M3 8 L6 8 L10.5 4 L10.5 16 L6 12 L3 12 Z" />628+ <path d="M14 7.5 Q15.6 10 14 12.5" />629+ <path d="M16.4 5.5 Q19 10 16.4 14.5" opacity="0.5" />630+ </svg>631+ </span>632+ <span class="peach-pair-method-text">633+ <span class="peach-pair-method-title">Same room</span>634+ <span class="peach-pair-method-sub">Chirp — plays an inaudible sound</span>635+ </span>630636 </button>631- <button class="peach-pair-method peach-chirp-pair-start peach-chirp-pair-start--desktop" onClick={() => startDesktopFlow()}>632- <span class="peach-pair-method-title">Desktop helper</span>633- <span class="peach-pair-method-sub">enter code</span>637+ <button class="peach-pair-method" onClick={() => startDesktopFlow()}>638+ <span class="peach-pair-method-icon" aria-hidden="true">639+ <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">640+ <rect x="2" y="4" width="16" height="10" rx="1.4" />641+ <path d="M7 17 L13 17" />642+ <path d="M9 14 L9 17 M11 14 L11 17" />643+ </svg>644+ </span>645+ <span class="peach-pair-method-text">646+ <span class="peach-pair-method-title">Desktop helper</span>647+ <span class="peach-pair-method-sub">Enter the code shown by peach-sync</span>648+ </span>634649 </button>635650 </div>636651 <div class="peach-chirp-action">