fix(brand): header shows a plain white C + gold dot on the blue bar

The header is already blue, so the app-icon-in-a-white-pill looked like blue→white→blue→white nesting. Use a transparent mark (mark-light.svg: white C + gold dot) placed directly on the blue header (home/index/connect/dashboard), dropping the white background + padding. share.html keeps the full app icon (it's a light card, not the blue bar). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-02 17:26:22 +05:30
parent 952242f62b
commit 7674c456f2
5 changed files with 11 additions and 6 deletions
@@ -76,7 +76,7 @@
 <script>if(new URLSearchParams(location.search).get('embed')==='1')document.documentElement.classList.add('embed');</script>
 <a href="/home" id="homeLink"><span data-ic="arrowLeft" data-sz="16"></span> Home</a>
 <div class="topbar" id="topbar">
-  <div class="brandrow"><img src="/icon-192.png" alt="" style="height:46px;width:auto;max-width:190px;border-radius:8px;object-fit:contain;background:#fff;padding:5px 12px;image-rendering:-webkit-optimize-contrast" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'logo',textContent:'B'}))"><div class="brand">Biz <span>Connect</span></div></div>
+  <div class="brandrow"><img src="/mark-light.svg" alt="" style="height:46px;width:auto;max-width:190px;border-radius:8px;object-fit:contain;image-rendering:-webkit-optimize-contrast" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'logo',textContent:'B'}))"><div class="brand">Biz <span>Connect</span></div></div>
  <div class="agentchip" id="agentChip"></div>
 </div>
 <div class="topbar2" id="bar"><span id="barStatus"></span><button id="endBtn">End session</button></div>
@@ -92,7 +92,7 @@
 </head>
 <body>
 <header>
-  <div class="brandrow"><img src="/icon-192.png" alt="" style="height:46px;width:auto;max-width:190px;border-radius:8px;object-fit:contain;background:#fff;padding:5px 12px;image-rendering:-webkit-optimize-contrast" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'logo',textContent:'B'}))"><div class="brand">Biz <span class="y">Connect</span> <span class="tag">· Dashboard</span></div></div>
+  <div class="brandrow"><img src="/mark-light.svg" alt="" style="height:46px;width:auto;max-width:190px;border-radius:8px;object-fit:contain;image-rendering:-webkit-optimize-contrast" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'logo',textContent:'B'}))"><div class="brand">Biz <span class="y">Connect</span> <span class="tag">· Dashboard</span></div></div>
  <div class="row" id="hdrRight"></div>
 </header>
 <main id="app"></main>
@@ -760,7 +760,7 @@
 <body>
 <script src="/icons.js?v=4"></script>
 <script src="https://cdn.jsdelivr.net/npm/@twemoji/api@15.1.0/dist/twemoji.min.js" crossorigin="anonymous"></script>
-<script>window.__BUILD='2026-07-02-batch34';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD);
+<script>window.__BUILD='2026-07-02-batch35';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD);
 // Render modern (Twemoji) emojis in place of the OS's flat ones. No-op if the CDN didn't load
 // (emojis stay as plain Unicode). (#5)
 function twemojify(el){ try{ if(el && window.twemoji) window.twemoji.parse(el, { folder:'svg', ext:'.svg' }); }catch(_){} }</script>
@@ -769,7 +769,7 @@ function twemojify(el){ try{ if(el && window.twemoji) window.twemoji.parse(el, {
 <header>
  <div class="brandrow">
    <button class="navtoggle" id="navToggle" title="Toggle menu" aria-label="Toggle menu"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button>
-    <img src="/icon-192.png" alt="" style="height:46px;width:auto;max-width:190px;border-radius:8px;object-fit:contain;background:#fff;padding:5px 12px;image-rendering:-webkit-optimize-contrast" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'logo',textContent:'B'}))">
+    <img src="/mark-light.svg" alt="" style="height:46px;width:auto;max-width:190px;border-radius:8px;object-fit:contain;image-rendering:-webkit-optimize-contrast" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'logo',textContent:'B'}))">
    <div class="brand">Biz <span class="y">Connect</span></div>
  </div>
  <div id="hdrRight"></div>
@@ -2845,7 +2845,7 @@ async function renderLogin(){
  const aw=document.getElementById('authwrap'); aw.style.display='flex';
  let regOpen=false; try{ regOpen=(await (await fetch('/api/setup-state')).json()).registrationOpen; }catch(_){}
  aw.innerHTML=`<div class="authcard">
-    <div class="auth-brand"><img src="/icon-192.png" alt="Biz Connect"><div class="wm">Biz <b>Connect</b></div></div>
+    <div class="auth-brand"><img src="/mark-light.svg" alt="Biz Connect"><div class="wm">Biz <b>Connect</b></div></div>
    <h1>Welcome back</h1>
    <div class="sub">Sign in to access chats, screen share and connect.</div>
    ${regOpen?`<div class="authtabs">
@@ -55,7 +55,7 @@
 <body>
 <header>
  <div class="brandrow">
-    <img src="/icon-192.png" alt="" style="height:40px;width:auto;max-width:170px;border-radius:8px;object-fit:contain;background:#fff;padding:4px 10px" onerror="this.style.display='none'">
+    <img src="/mark-light.svg" alt="" style="height:40px;width:auto;max-width:170px;border-radius:8px;object-fit:contain" onerror="this.style.display='none'">
    <div class="brand">Biz <span>Connect</span></div>
  </div>
  <div class="hdr-right">
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Biz Connect">
+  <!-- White C + gold dot on a transparent background — for placing directly on the blue header -->
+  <path d="M40 10 A22 22 0 1 0 40 54" fill="none" stroke="#ffffff" stroke-width="9" stroke-linecap="round"/>
+  <circle cx="40" cy="32" r="6.5" fill="#FFC708"/>
+</svg>