# TASK FOR CLAUDE (VS Code): Apply the Biz Connect brand — icons, splash, loaders, toasts
Read this whole file, then execute it. Work CONSERVATIVELY — only ADD / restyle, do NOT
refactor unrelated code. The app is live in production. Find the right spots in the CURRENT
code yourself (don't assume old names). Summarise all changes and STOP for my review before
committing anything.
Repo root: C:\BizGaze_Support\remote-access-app
Master brand assets are already placed in: brand-assets\
- app-icon-1024.png (1024 full-bleed app icon master)
- splash-2732-dark.png (2732 splash, brand blue — primary)
- splash-2732-light.png (2732 splash, white — optional light theme)
- loader-ring.svg (default spinner, light backgrounds)
- loader-orbit.svg (branded spinner, light backgrounds)
- loader-orbit-dark.svg (branded spinner, dark/overlay backgrounds)
Brand colours: blue #1F3B73, blue-dark #16294F, yellow #FFC708, gold #E0AC00.
Note: brand-assets/ is only the SOURCE. Put the GENERATED / used copies where each target
needs them — web assets under server/public/ (served over HTTP); native icons/splash into the
platform build folders (Electron / Android / iOS) as applicable.
## 1. App icons (from brand-assets/app-icon-1024.png)
Generate and place:
- Windows .ico (multi-size 16/32/48/256) — fixes the tiny/blurry taskbar icon.
- Favicon: server/public/favicon.ico + a 32px PNG; add to each page :
- PWA icons 192, 512, and a maskable 512; reference them in the web manifest, and set the
manifest "background_color" and "theme_color" to "#1F3B73".
- Native mobile icons (Android mipmap set + adaptive, iOS AppIcon set) into their folders.
## 2. Splash (from brand-assets/splash-2732-dark.png)
- Web/PWA loading + Electron splash: brand-blue background #1F3B73 with the logo centred
(use the 2732 image, or reuse the app's splash.html if present).
- Native launch screens: use the 2732 image (Android 12 SplashScreen background #1F3B73 + the
app icon; iOS LaunchScreen background #1F3B73 + centred logo). Keep native launch STATIC.
- Use splash-2732-light.png only if a light theme is supported.
## 3. Loaders (from brand-assets/loader-*.svg)
Copy the three SVGs into server/public/ (e.g. server/public/loaders/). Wire them:
- Everyday "Loading…" and in-app spinners -> loader-ring.svg
- The hero "Connecting…" moment (session connect) -> loader-orbit.svg (light) / loader-orbit-dark.svg (on dark)
Show one centered in the middle of the screen/panel while loading; hide when done. Always pair
show with hide on BOTH the success and error paths so it can never get stuck.
## 4. Branded notification toasts
Create server/public/bizconnect-toast.css with EXACTLY:
```css
/* Biz Connect — branded notification toast. BZToast.success('…') / .error / .message / .info */
.bzt-wrap{position:fixed;top:16px;right:16px;z-index:2147483600;display:flex;flex-direction:column;gap:10px;max-width:min(380px,92vw)}
@supports(top:env(safe-area-inset-top)){.bzt-wrap{top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right))}}
.bzt{display:flex;align-items:flex-start;gap:12px;background:#fff;color:#1f2430;border-radius:14px;padding:12px 14px;
box-shadow:0 12px 30px rgba(16,26,53,.20);border-left:5px solid #1F3B73;
transform:translateX(120%);opacity:0;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
.bzt.bzt-in{transform:translateX(0);opacity:1}
.bzt.success{border-left-color:#16a34a}.bzt.error{border-left-color:#b91c1c}
.bzt-badge{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1F3B73}
.bzt.success .bzt-badge{background:#16a34a}.bzt.error .bzt-badge{background:#b91c1c}
.bzt-badge svg{width:20px;height:20px}
.bzt-body{flex:1;min-width:0;padding-top:1px}
.bzt-title{font:700 13.5px/1.3 'Segoe UI',system-ui,sans-serif;color:#1F3B73;margin:0 0 1px}
.bzt.success .bzt-title{color:#15803d}.bzt.error .bzt-title{color:#b91c1c}
.bzt-msg{font:500 13px/1.4 'Segoe UI',system-ui,sans-serif;color:#3a4152;overflow-wrap:anywhere}
.bzt-x{flex:none;background:none;border:none;color:#9aa3b2;cursor:pointer;font-size:18px;line-height:1;padding:2px 4px}
.bzt-x:hover{color:#1f2430}
@media(prefers-reduced-motion:reduce){.bzt{transition:opacity .2s}}
```
Create server/public/bizconnect-toast.js with EXACTLY:
```js
/* Biz Connect toast API. Requires bizconnect-toast.css.
BZToast.success('Saved'); BZToast.error('Connection lost'); BZToast.message('Hi', {title:'Ravi'}); */
window.BZToast=(function(){
var wrap=null;
var ICON={
message:'',
info:'',
success:'',
error:''
};
function esc(s){return String(s==null?'':s).replace(/[&<>"]/g,function(c){return{'&':'&','<':'<','>':'>','"':'"'}[c];});}
function ensure(){ if(wrap) return wrap; wrap=document.createElement('div'); wrap.className='bzt-wrap'; document.body.appendChild(wrap); return wrap; }
function show(message,opts){
opts=opts||{}; var type=opts.type||'message'; var w=ensure();
var t=document.createElement('div'); t.className='bzt '+type;
t.innerHTML='
'+(ICON[type]||ICON.message)+'
'
+(opts.title?'
'+esc(opts.title)+'
':'')
+'
'+esc(message)+'
';
w.appendChild(t); requestAnimationFrame(function(){ t.classList.add('bzt-in'); });
var dur=(opts.duration==null?4000:opts.duration), timer;
function close(){ t.classList.remove('bzt-in'); setTimeout(function(){ if(t.parentNode) t.parentNode.removeChild(t); },320); clearTimeout(timer); }
t.querySelector('.bzt-x').onclick=close; if(dur>0) timer=setTimeout(close,dur); return close;
}
return { show:show,
message:function(m,o){o=o||{};o.type='message';return show(m,o);},
success:function(m,o){o=o||{};o.type='success';return show(m,o);},
error:function(m,o){o=o||{};o.type='error';return show(m,o);},
info:function(m,o){o=o||{};o.type='info';return show(m,o);} };
})();
```
Then, on every page that shows notifications (connect, share, home, dashboard, console),
include both files near the top BEFORE the page's own inline
(Load the JS via src only — never inline.)
Now REPLACE the existing toast / notification pop-ups with the branded API (keep the same
triggers and text, just route them through BZToast so they look on-brand):
- Incoming chat message -> BZToast.message(text, {title: senderName})
- A success (e.g. recording/transcript saved, agent added) -> BZToast.success('…')
- An error (connection lost, upload failed, invalid code) -> BZToast.error('…')
- Neutral info -> BZToast.info('…')
Remove the old inline toast markup/styles it replaces. Toasts appear top-right and auto-dismiss.
## 5. Verify (do not commit until I review)
- node --check any JS you extract/touch; confirm every page still loads.
- Confirm: taskbar/favicon icon is crisp, splash shows on launch, a loader appears centered
during connect/report, and notifications now use the branded toast.
- List exactly which files changed, then STOP for my review.