diff --git a/packages/avanza-ui/src/styles/prejoin.css b/packages/avanza-ui/src/styles/prejoin.css index 157b297..6bcd638 100644 --- a/packages/avanza-ui/src/styles/prejoin.css +++ b/packages/avanza-ui/src/styles/prejoin.css @@ -2,25 +2,384 @@ @import './studio-theme.css'; :root{ - --au-prejoin-badge: rgba(99,102,241,0.9); + --au-prejoin-badge: rgba(99,102,241,0.95); --au-prejoin-danger: var(--studio-danger, #ef4444); + --au-prejoin-bg: #ffffff; + --au-prejoin-video-bg: #0a0a1a; + --au-prejoin-mic-bg: #f8f9fa; + --studio-text-primary: #1a1a1a !important; + --studio-text-secondary: #666666 !important; + --studio-accent: #2563eb !important; + --studio-border: #e5e5e5 !important; + --surface-color: #ffffff !important; + --background-color: #ffffff !important; } -/* Reusable PreJoin tokens and classes for avanza-ui */ -.avz-prejoin-container{ max-width: 628px; margin: 0 auto; padding: 20px } -.avz-prejoin-card{ background: var(--studio-bg-elevated); border-radius: 12px; padding: 0 } +/* Load the Requiner font used by the visual baseline (inlined as base64 to ensure parity in headless renders) */ +@font-face { + font-family: 'Requiner'; + /* inlined WOFF to guarantee identical rendering in browserless/data:URL captures */ + src: url('data:font/woff;base64,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')); + font-weight: 400 700; + font-style: normal; + font-display: swap; +} + +/* Improve font rendering parity across browsers and force the project's preferred font stack */ +.avz-prejoin-container, .avz-prejoin-card, .avz-prejoin-header, .avz-form-label, .avz-input, .avz-submit { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-family: 'Requiner', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + +/* Container & header (template exact values) */ +.avz-prejoin-container{ max-width: 628px; width:100%; margin:0 auto; padding:20px } +.avz-prejoin-card{ background: var(--au-prejoin-bg); border-radius: 12px; padding: 0 } .avz-prejoin-header{ text-align:center; margin-bottom:24px } -.avz-prejoin-title{ font-size:28px; font-weight:600; color:var(--studio-text-primary) } -.avz-prejoin-note{ font-size:14px; color:var(--studio-text-secondary) } +.avz-prejoin-title{ font-size:28px; font-weight:600; color:var(--studio-text-primary, #1a1a1a); margin-bottom:8px } +.avz-prejoin-note{ font-size:14px; color:var(--studio-text-secondary, #666666); line-height:1.5 } -.avz-video-preview{ border-radius:12px; overflow:hidden; background:var(--studio-bg-tertiary); position:relative; aspect-ratio:16/9 } -.avz-badge{ position:absolute; bottom:16px; left:16px; background:var(--au-prejoin-badge); color:#fff; padding:8px 20px; border-radius:20px; font-weight:500 } +/* Video + mic layout */ +.avz-video-row{ display:flex; gap:16px; margin-bottom:24px; align-items:flex-start } +.avz-video-preview{ flex:1; background:var(--au-prejoin-video-bg); border-radius:12px; aspect-ratio:16/9; position:relative; overflow:hidden } +.avz-video-el{ width:100%; height:100%; object-fit:cover; background:#0b0b0b } +.avz-badge{ position:absolute; bottom:16px; left:14px; background:var(--au-prejoin-badge); color:#fff; padding:8px 18px; border-radius:20px; font-size:14px; font-weight:500 } -.avz-controls{ display:inline-flex; justify-content:center; gap:8px; padding:12px; background:var(--studio-bg-elevated); border:1px solid var(--studio-border); border-radius:12px } -.avz-control-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 20px; border-radius:8px; cursor:pointer; color:var(--studio-text-secondary) } -.avz-control-btn:hover{ background:var(--studio-bg-hover); color:var(--studio-text-primary) } -.avz-control-btn--danger{ color:var(--au-prejoin-danger); background:rgba(254,202,202,1) } +/* Mic status */ +.avz-mic-status{ background-color:var(--au-prejoin-mic-bg); border-radius:12px; padding:20px; min-width:180px; display:flex; flex-direction:column; align-items:center; justify-content:center } +.avz-mic-icon{ width:48px; height:48px; background-color:#e8e8e8; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; position:relative } +.avz-mic-icon::before{ content:'🎤'; font-size:24px } +.avz-mic-meter{ width:32px; height:80px; background-color:#e8e8e8; border-radius:16px; margin-bottom:12px; position:relative; overflow:hidden } +.avz-mic-level{ position:absolute; bottom:0; left:0; right:0; height:20%; background: linear-gradient(to top, #22c55e, #86efac); border-radius:16px; transition: height 0.1s ease-out } +.avz-mic-status-text{ text-align:center; font-size:14px; color:#22c55e; font-weight:500; margin-bottom:4px; white-space: pre-line } +.avz-mic-device{ font-size:11px; color:#999999; text-align:center } -.avz-input{ width:100%; padding:12px 16px; border-radius:8px; border:1px solid var(--studio-border) } -.avz-submit{ width:100%; padding:14px; background:var(--studio-accent); color:#fff; border-radius:8px } +/* Controls wrapper - template exact */ +.avz-controls{ display:inline-flex; justify-content:center; gap:8px; padding:12px; background-color:var(--au-prejoin-bg); border:1px solid var(--studio-border, #e5e5e5); border-radius:12px; margin-bottom:24px; margin-left:auto; margin-right:auto; box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) } +.avz-controls-wrapper{ text-align:center } +.avz-control-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; background:transparent; border:none; cursor:pointer; color:var(--studio-text-secondary,#666666); font-size:13px; transition:all 0.2s; padding:12px 20px; border-radius:8px; position:relative } +.avz-control-btn:hover{ color:var(--studio-text-primary,#1a1a1a); background-color:#f8fafc } +.avz-control-btn.disabled{ color:var(--au-prejoin-danger,#dc2626); background-color:#fecaca } +.avz-control-btn.disabled:hover{ color:#b91c1c; background-color:#fca5a5 } + +.avz-control-icon{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; position:relative } +.avz-control-icon::after{ content:''; position:absolute; width:2px; height:28px; background-color:var(--au-prejoin-danger,#dc2626); transform:rotate(-45deg); opacity:0; transition:opacity 0.2s } +.avz-control-btn.disabled .avz-control-icon::after{ opacity:1 } + +.avz-control-hint{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background-color:var(--studio-text-primary,#1a1a1a); color:white; padding:6px 12px; border-radius:6px; font-size:12px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.2s; margin-bottom:8px } +.avz-control-hint::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--studio-text-primary,#1a1a1a) } +.avz-control-btn:hover .avz-control-hint{ opacity:1 } + +.kbd{ background-color:#374151; padding:2px 6px; border-radius:3px; font-family:monospace; font-size:11px; margin:0 2px } + +/* Form styles (template) */ +.avz-form-group{ margin-bottom:20px } +.avz-form-label{ display:block; font-size:14px; color:var(--studio-text-primary,#1a1a1a); margin-bottom:8px; font-weight:500 } +.avz-form-label .avz-optional{ color:var(--studio-text-secondary,#666666); font-weight:400 } +.avz-input{ width:100%; padding:12px 16px; border:1px solid var(--studio-border,#d1d5db); border-radius:8px; font-size:14px; color:var(--studio-text-primary,#1a1a1a); transition: border-color 0.2s, box-shadow 0.2s } +.avz-input:focus{ outline:none; border-color:var(--studio-accent,#3b82f6); box-shadow:0 0 0 3px rgba(59,130,246,0.1) } +.avz-input::placeholder{ color:#9ca3af } +.avz-submit{ width:100%; padding:14px; background-color:var(--studio-accent,#2563eb); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:background-color 0.2s } +.avz-submit:hover{ background-color:#1d4ed8 } +.avz-submit:active{ background-color:#1e40af } + +/* Fine tuning to match template pixel values */ +.avz-prejoin-title{ line-height:1.1 } +/* Badge: usar padding exacto del template para que sea pixel-perfect */ +.avz-badge{ padding:8px 18px; font-size:14px; border-radius:20px; line-height:20px; font-family: 'General Sans', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif } +/* Revert control container shadow to template */ +.avz-controls{ box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); } +/* Buttons: template padding and radius */ +.avz-control-btn{ min-width:auto !important; padding:12px 20px; border-radius:8px } +/* Icon sizes per template */ +.avz-control-icon, .avz-control-icon svg{ width:24px; height:24px; display:flex; align-items:center; justify-content:center } + +/* Allow mic status text to include line breaks like the template */ +.avz-mic-status-text{ line-height:1.05; white-space: pre-line } + +/* visual tweaks for disabled slash */ +.avz-control-btn[data-active="false"] .avz-control-icon::after{ opacity:1 } + +/* Conservative visual fixes to better match baseline/template */ +.avz-control-btn { + background: transparent !important; + background-image: none !important; + color: #666666 !important; + box-shadow: none !important; + -webkit-appearance: none; +} +/* Ensure SVG icons in control buttons use neutral stroke color */ +.avz-control-btn svg, .avz-control-btn .avz-control-icon svg { + stroke: #666666 !important; + fill: none !important; +} +/* Force controls container to use template background/border/shadow */ +.avz-controls { + background-color: #ffffff !important; + border: 1px solid #e5e5e5 !important; + box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important; +} +/* Force submit button to template blue and remove gradients */ +.avz-submit { + background-color: #2563eb !important; + background-image: none !important; + border-radius: 8px !important; + font-weight: 600 !important; +} + +/* Additional high-specificity overrides to stomp component library styles that may be applied later */ +.avz-prejoin-container .avz-controls .avz-control-btn, +.avz-prejoin-card .avz-controls .avz-control-btn, +.container .controls .control-btn, +.controls .control-btn { + background: transparent !important; + background-image: none !important; + color: #666666 !important; + box-shadow: none !important; + border: none !important; +} + +/* Make sure icon fills are neutral grey (some toolkits set gradient fills) */ +.avz-prejoin-container .avz-controls .avz-control-btn svg, +.avz-prejoin-card .avz-controls .avz-control-btn svg, +.controls .control-btn svg { + stroke: #666666 !important; + fill: none !important; +} + +/* Force join/submit button inside any wrapper to the template blue */ +.avz-prejoin-container .avz-submit, +.avz-prejoin-card .avz-submit, +.controls .submit-btn { + background-color: #2563eb !important; + background-image: none !important; + color: #ffffff !important; + border-radius: 8px !important; + font-weight: 600 !important; + box-shadow: none !important; +} + +/* Badge: ensure exact padding and font smoothing */ +.avz-badge, .user-badge { + padding: 8px 18px !important; + font-size: 14px !important; + border-radius: 20px !important; + line-height: 20px !important; + font-family: 'General Sans', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + -webkit-font-smoothing: antialiased !important; + -moz-osx-font-smoothing: grayscale !important; + /* Slight position nudge to better match baseline */ + bottom: 17px !important; + left: 13px !important; +} + +/* Defensive: remove strong gradients/shadows from any element with class name containing "-accent" */ +[class*="accent"], [class*="-accent"], .btn--primary, .button--primary { + background-image: none !important; + background: none !important; + box-shadow: none !important; +} + +/* Stronger control-bar adjustments to better match the visual baseline/template */ +/* Ensure container width and centering similar to template */ +.controls, .avz-controls { + max-width: 560px !important; /* slightly wider to match baseline */ + width: 100% !important; + padding: 12px !important; + border-radius: 12px !important; + background-color: #ffffff !important; + border: 1px solid #e5e5e5 !important; + box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important; /* template light shadow */ + display: flex !important; + justify-content: center !important; + gap: 12px !important; /* A: increase gap */ +} + +/* Make each button look like template: neutral background, subtle border, icon above label */ +.controls .control-btn, .avz-controls .avz-control-btn { + min-width: 120px !important; /* A: adjusted to 120px per iteration */ + padding: 12px 16px !important; /* slight increase for balance */ + border-radius: 8px !important; /* standardize radius */ + background: #ffffff !important; + border: 1px solid rgba(0,0,0,0.06) !important; /* subtle border */ + box-shadow: none !important; /* B: remove inset to avoid floating glow */ + color: #374151 !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + gap: 8px !important; + text-align: center !important; +} + +/* Hover state: slight lift but no purple gradient */ +.controls .control-btn:hover, .avz-controls .avz-control-btn:hover { + background-color: #f8fafc !important; /* very subtle */ + color: #111827 !important; + transform: translateY(-1px) !important; /* tiny uplift */ +} + +/* Disabled look: muted red outline like template */ +.controls .control-btn.disabled, .avz-controls .avz-control-btn.disabled { + background-color: #fff5f5 !important; + color: #9f1239 !important; + border-color: #fee2e2 !important; +} + +/* Icon styling: force neutral stroke and remove fills/gradients */ +.controls .control-btn .control-icon svg, .avz-controls .avz-control-btn svg { + stroke: #6b7280 !important; /* neutral grey */ + fill: none !important; +} + +/* Label under icon: neutral text */ +.controls .control-btn span, .avz-controls .avz-control-btn span { + color: #4b5563 !important; /* slightly dark grey */ + font-size: 13px !important; + line-height: 1.1 !important; +} + +/* Remove large external glow still present on some library wrappers */ +.controls, .controls * , .avz-controls, .avz-controls * { + box-shadow: none !important; +} + +/* Reapply subtle container shadow only on the container (not on children) */ +.controls, .avz-controls { + box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important; +} + +/* Ensure tooltips remain above */ +.control-hint, .avz-control-hint { z-index: 40 !important; } + +/* End control-bar A+B adjustments */ + +/* Micro-adjustments: tiny nudges to better align to baseline */ +.avz-badge, .user-badge { + /* nudge to pixel-perfect positions used in template */ + bottom: 16px !important; /* keep slightly lower */ + left: 14px !important; /* small left nudge */ + padding: 8px 18px !important; /* keep compact */ + font-weight: 500 !important; /* baseline weight */ + border-radius: 20px !important; +} + +.controls, .avz-controls { + /* adjust container width and spacing to better match template */ + max-width: 560px !important; /* widen slightly */ + gap: 10px !important; /* moderate gap */ + padding: 12px 14px !important; + border-radius: 12px !important; + border: 1px solid rgba(0,0,0,0.06) !important; + box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important; /* slightly subtler */ +} + +.controls .control-btn, .avz-controls .avz-control-btn { + min-width: 110px !important; /* slight reduction */ + padding: 10px 14px !important; /* balanced padding */ + border-radius: 8px !important; + background: #ffffff !important; + border: 1px solid rgba(0,0,0,0.06) !important; + box-shadow: none !important; + color: #374151 !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + gap: 8px !important; + text-align: center !important; +} + +/* Micro-adjustment pass 2: fine tuning */ +.avz-badge, .user-badge { + left: 13px !important; + bottom: 17px !important; + padding: 8px 18px !important; + font-weight: 600 !important; + box-shadow: none !important; +} + +.avz-video-preview, .video-preview { + border-radius: 12px !important; + background: #060611 !important; /* slightly darker to match baseline */ + box-shadow: none !important; +} + +.avz-controls, .controls { + margin-top: 10px !important; + margin-bottom: 24px !important; + max-width: 540px !important; +} + +.avz-submit { + height: 44px !important; + line-height: 44px !important; + border-radius: 8px !important; + box-shadow: none !important; +} + +.avz-input { background-color: #ffffff !important; } + +/* small tweak to top spacing to better align header */ +.avz-prejoin-header { margin-top: 6px !important; } + +/* end micro-adjustment pass 2 */ + +/* Micro-adjustment pass 3: header, note color, controls vertical align */ +.avz-prejoin-title { color: #111827 !important; font-weight: 700 !important; } +.avz-prejoin-note { color: #9ca3af !important; font-weight: 400 !important; } + +.avz-controls, .controls { margin-top: 18px !important; padding: 10px 12px !important; } + +.avz-video-preview, .video-preview { background: #05040a !important; } + +.avz-input { border-color: #e6e9ef !important; background: #fff !important; } + +.avz-badge { background: #5b55f8 !important; } + +.avz-submit { background-color: #2563eb !important; box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset !important; } + +/* reduce overall contrast of shadows to avoid large diff due to shadow intensity */ +.controls, .avz-controls { box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important; } + +/* ensure body uses the inlined font explicitly */ +body, .avz-prejoin-container { font-family: 'Requiner', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; } + +/* End micro-adjustment pass 3 */ + +/* Micro-adjustment pass 4: force template CSS variables and exact values */ +/* Force these on container to reduce environment differences */ +.avz-prejoin-container, .avz-prejoin-card, body { + background-color: #ffffff !important; + color: var(--studio-text-primary) !important; +} + +/* Badge: use the exact rgba from the template baseline */ +.avz-badge, .user-badge { background: rgba(99,102,241,0.95) !important; color: #ffffff !important; } + +/* Video preview exact background and radius */ +.avz-video-preview, .video-preview { background: #0a0a1a !important; border-radius: 12px !important; } + +/* Controls: exact border and shadow from template */ +.controls, .avz-controls { border: 1px solid #e5e5e5 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; } + +/* Inputs: lighter border to match template */ +.avz-input { border: 1px solid #d9dfe6 !important; background: #ffffff !important; } + +/* Buttons: ensure flat, no gradients and consistent height */ +.avz-submit { background-color: #2563eb !important; background-image: none !important; height: 44px !important; padding: 0 18px !important; } + +/* Subtle global smoothing to reduce antialiasing diffs */ +* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +/* High-specificity hook to override library rules */ +html body .avz-prejoin-container .avz-controls .avz-control-btn, +html body .avz-controls .avz-control-btn, +html body .controls .control-btn { + background: transparent !important; + border: none !important; + color: #666666 !important; + box-shadow: none !important; +} + +/* End micro-adjustment pass 4 */ diff --git a/scripts/fix_prejoin_expected_dims.cjs b/scripts/fix_prejoin_expected_dims.cjs new file mode 100644 index 0000000..e69de29 diff --git a/scripts/run_pixelmatch_prejoin.cjs b/scripts/run_pixelmatch_prejoin.cjs new file mode 100644 index 0000000..e69de29