← back to Rentv Sheet Enrich
Draft drawer: contact data on a white card (crisp links, not blue-on-black); fix broken Contact-via control -> real mail/LinkedIn/phone SVG icons + full-width segmented control
e2b2b9e5deef5d02350f0c6bf563e127b56cf844 · 2026-08-13 16:15:19 -0700 · Steve Abrams
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit e2b2b9e5deef5d02350f0c6bf563e127b56cf844
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Aug 13 16:15:19 2026 -0700
Draft drawer: contact data on a white card (crisp links, not blue-on-black); fix broken Contact-via control -> real mail/LinkedIn/phone SVG icons + full-width segmented control
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
public_live/index.html | 17 +++++++++++++----
1 file changed, 13 insertions(+), 4 deletions(-)
diff --git a/public_live/index.html b/public_live/index.html
index 54e8fda..f3350b2 100644
--- a/public_live/index.html
+++ b/public_live/index.html
@@ -126,8 +126,14 @@
#d-fields a{word-break:break-all}
#drawer.open{transform:none} #drawer header{position:static;background:var(--panel2)}
.dbody{padding:15px;overflow:auto;flex:1} .dbody h2{margin:0 0 2px;font-size:18px} .dbody .sub{color:var(--dim);font-size:13px;margin-bottom:12px}
- .fieldgrid{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin-bottom:12px} .fieldgrid .k{color:var(--dim)}
+ /* contact data on a light card so email/phone/LinkedIn are crisp + readable in BOTH themes */
+ .fieldgrid{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px;margin-bottom:14px;background:#ffffff;color:#1a2230;border:1px solid #d3dbe4;border-radius:10px;padding:11px 13px}
+ .fieldgrid .k{color:#5c6b7a;font-weight:500}
+ .fieldgrid a{color:#1a66c2;text-decoration:none;font-weight:600;word-break:break-all} .fieldgrid a:hover{text-decoration:underline}
.drow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:9px 0} label.lbl{color:var(--dim);font-size:12px;min-width:60px}
+ /* Contact-via: clean full-width segmented control with real icons + dividers */
+ #chanseg{display:flex;flex:1;min-width:220px} #chanseg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 8px;font-size:12px}
+ #chanseg button+button{border-left:1px solid var(--line)} #chanseg button svg{width:14px;height:14px}
textarea{width:100%;min-height:300px;flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:11px;font:inherit;line-height:1.5;resize:vertical}
.dbody{display:flex;flex-direction:column}
.subj{width:100%;margin-bottom:8px} .actions{display:flex;gap:8px;flex-wrap:wrap;padding:11px 15px;border-top:1px solid var(--line);background:var(--panel2)} .actions .primary{background:var(--accent);color:#04121f;font-weight:700;border:0}
@@ -163,7 +169,7 @@
<h2 id="d-company">—</h2><div class="sub" id="d-who">—</div>
<div class="fieldgrid" id="d-fields"></div>
<div class="drow"><label class="lbl">Contact via</label>
- <div class="seg" id="chanseg"><button data-c="email">✉ Email</button><button data-c="linkedin">in LinkedIn</button><button data-c="phone">☎ Phone</button></div></div>
+ <div class="seg" id="chanseg"><button data-c="email">Email</button><button data-c="linkedin">LinkedIn</button><button data-c="phone">Phone</button></div></div>
<div class="drow"><label class="lbl">Purpose</label>
<select id="purpose"><option value="partnership">Partnership / intro</option><option value="sponsorship">Conference sponsorship</option><option value="speaker">Speaker / panel invite</option><option value="followup">Follow-up</option></select>
<label class="lbl">Tone</label><select id="tone"><option value="warm">Warm</option><option value="direct">Direct</option><option value="formal">Formal</option></select>
@@ -449,6 +455,7 @@ function cardsHTML(rows,mode){
function badge(ic,v){return `<span class="badge${v?' ok':''}">${ic}${v?' ✓':''}</span>`}
// real inline-SVG icons (inherit currentColor, scale to text) — not emoji glyphs
const ICON={
+ mail:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>',
phone:'<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.28-.28.68-.36 1.02-.24 1.12.4 2.33.62 3.58.62.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.4 21 3 13.6 3 4.4c0-.55.45-1 1-1h3.4c.55 0 1 .45 1 1 0 1.25.22 2.46.62 3.58.12.34.04.74-.24 1.02l-2.18 2.18z"/></svg>',
web:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.8 2.6 15.2 0 18M12 3c-2.6 2.8-2.6 15.2 0 18"/></svg>',
li:'<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5 2.5 2.5 0 0 0 4.98 3.5zM3 9h4v12H3zM9 9h3.8v1.64h.05c.53-1 1.83-2.06 3.77-2.06 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.07 1.4-2.07 2.85V21H9z"/></svg>'};
@@ -565,9 +572,11 @@ async function saveCell(td){ editing=false; const v=td.textContent.trim(); if(v=
function openDraft(ri){curRow=ri;const c=contact(DATA.rows[ri]);
$('#d-company').textContent=c.company||'(no company)';$('#d-who').textContent=[c.name,c.position].filter(Boolean).join(' · ')||'—';
const F=$('#d-fields');F.innerHTML='';const add=(k,v,l)=>{if(!v)return;F.insertAdjacentHTML('beforeend',`<div class="k">${k}</div><div>${l?`<a href="${esc(l)}" target="_blank" rel="noopener">${esc(v)}</a>`:esc(v)}</div>`)};
- add('Email',c.email,c.email?'mailto:'+c.email:'');add('Phone',c.phone,c.phone?'tel:'+c.phone.replace(/[^0-9+]/g,''):'');add('LinkedIn',c.liC?'Contact':(c.liCo?'Company':''),c.liC||c.liCo);add('Marketing/VP',[c.mvpN,c.mvpP].filter(Boolean).join(' — '),c.mvpL);
+ add('Email',c.email,c.email?'mailto:'+c.email:'');add('Phone',c.phone,c.phone?'tel:'+c.phone.replace(/[^0-9+]/g,''):'');
+ add('LinkedIn',c.liC?'Contact profile':(c.liCo?'Company page':''),c.liC||c.liCo);add('Marketing/VP',[c.mvpN,c.mvpP].filter(Boolean).join(' — '),c.mvpL);
const av={email:!!c.email,linkedin:!!(c.liC||c.mvpL||c.liCo),phone:!!c.phone};
- $$('#chanseg button').forEach(b=>b.classList.toggle('chdis',!av[b.dataset.c]));
+ const chIcon={email:ICON.mail,linkedin:ICON.li,phone:ICON.phone}, chLbl={email:'Email',linkedin:'LinkedIn',phone:'Phone'};
+ $$('#chanseg button').forEach(b=>{const k=b.dataset.c; b.innerHTML=chIcon[k]+'<span>'+chLbl[k]+'</span>'; b.classList.toggle('chdis',!av[k]);});
curChan=av[curChan]?curChan:(av.email?'email':av.linkedin?'linkedin':av.phone?'phone':'email');
syncChan();regen();$('#scrim').style.display='block';$('#drawer').classList.add('open');
}
← c5739ce Live console: theme-aware interaction colors (no more black-
·
back to Rentv Sheet Enrich
·
Live console: turn OFF grouping (removes the unwanted black 5e82fcf →