feat: add logo and polish icon presentation

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

extension/src/popup/components/setup-wizard.ts

@@ -9,6 +9,7 @@ import { escapeHtml } from '../popup';
 export function renderSetupWizard(app: HTMLElement): void {
   app.innerHTML = `
     <div class="pad" style="padding-top:24px;text-align:center;">
+      <img class="brand-logo" src="icons/idfoto-logo.svg" alt="">
       <div class="brand" style="font-size:16px;margin-bottom:4px;">idfoto</div>
       <p class="secondary" style="margin-bottom:20px;">two-factor vault</p>
 

extension/src/popup/components/unlock.ts

@@ -8,6 +8,7 @@ export function renderUnlock(app: HTMLElement): void {
 
   app.innerHTML = `
     <div class="pad" style="text-align:center; padding-top:40px;">
+      <img class="brand-logo" src="icons/idfoto-logo.svg" alt="">
       <div class="brand">idfoto</div>
       <p class="muted" style="margin:8px 0 24px;">two-factor vault</p>
       <div class="form-group">

extension/src/popup/styles.css

@@ -39,6 +39,13 @@ body {
   letter-spacing: 1px;
 }
 
+.brand-logo {
+  display: block;
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 8px;
+}
+
 .label {
   font-size: 11px;
   font-weight: 600;

extension/src/setup/setup.ts

@@ -109,6 +109,7 @@ function render(): void {
 
   app.innerHTML = `
     <div class="pad" style="padding-top:12px;">
+      <img class="brand-logo" src="icons/idfoto-logo.svg" alt="" style="margin-bottom:12px;">
       <div class="brand" style="margin-bottom:4px;">idfoto vault setup</div>
       ${progressHtml}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}