From eeee4271c228bf61a425cff42c3ba5844aae3a3f Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:13:03 +0500
Subject: [PATCH 01/10] feat(browser): brand-teal report dialog with a
 paper-plane send icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Match the refreshed look: white uppercase title and close icon, bordered rounded card
and fields, the viewer's brand teal (#60B4C4, #3A8A99 on the light page) as the accent
and in the logo, a send icon instead of the SEND text (accessible name kept), and a
footer with the version under 'Powered by Bugsee'.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/browser/src/report-dialog-styles.ts | 70 ++++++++++----------
 packages/browser/src/report-dialog.test.ts   | 27 +++++++-
 packages/browser/src/report-dialog.ts        | 23 +++++--
 3 files changed, 77 insertions(+), 43 deletions(-)

diff --git a/packages/browser/src/report-dialog-styles.ts b/packages/browser/src/report-dialog-styles.ts
index b99198a6..d3821d53 100644
--- a/packages/browser/src/report-dialog-styles.ts
+++ b/packages/browser/src/report-dialog-styles.ts
@@ -12,8 +12,9 @@
 //   /* or inside the shadow root: showReportDialog({ css: '.bugsee-reporting-dialog-send { … }' }) */
 //
 // Colours are the mobile SDKs' (Android `ColorConstants`, iOS `BugseeTheme`): the light page is #EDF1F6
-// with white fields, the dark page #121212, the accent red #FF5858, the severity icons green/amber/
-// salmon/red/dark-red. Two deliberate adjustments for the web, both for contrast: the light text is a
+// with white fields, the dark page #121212, the accent was red #FF5858 (now the viewer's brand teal), the severity icons green/amber/
+// salmon/red/dark-red. The accent is the viewer's brand teal (#60B4C4; #3A8A99 on the light page, the
+// viewer's AA-contrast variant). Two deliberate adjustments for the web, both for contrast: the light text is a
 // shade darker than Android's #637E99 (4.2:1 on white) and the dark field is #262626 rather than #777777.
 
 /** The prefix of every class, part and custom property the dialog exposes. */
@@ -35,13 +36,13 @@ export const REPORT_DIALOG_CSS = `
   --${p}field-border: rgba(153, 153, 153, 0.4);
   --${p}text: #4F6A85;
   --${p}hint: #8497AB;
-  --${p}accent: #FF5858;
+  --${p}accent: #3A8A99;
   --${p}error: #C62828;
   --${p}severity-active: #182433;
   --${p}severity-idle: #637E99;
   --${p}shade: rgba(0, 0, 0, 0.55);
   --${p}shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
-  --${p}radius: 8px;
+  --${p}radius: 12px;
   font: 17px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 }
 :host([data-theme='dark']) {
@@ -51,6 +52,7 @@ export const REPORT_DIALOG_CSS = `
   --${p}field-border: #555555;
   --${p}text: #FFFFFF;
   --${p}hint: #B4B4B4;
+  --${p}accent: #60B4C4;
   --${p}error: #FF8A80;
   --${p}severity-active: #FFFFFF;
   --${p}severity-idle: #B4B4B4;
@@ -63,6 +65,7 @@ export const REPORT_DIALOG_CSS = `
     --${p}field-border: #555555;
     --${p}text: #FFFFFF;
     --${p}hint: #B4B4B4;
+    --${p}accent: #60B4C4;
     --${p}error: #FF8A80;
     --${p}severity-active: #FFFFFF;
     --${p}severity-idle: #B4B4B4;
@@ -103,6 +106,7 @@ export const REPORT_DIALOG_CSS = `
   max-height: 100%;
   margin: auto;
   background: ${v('page')};
+  border: 1px solid ${v('field-border')};
   border-radius: ${v('radius')};
   box-shadow: ${v('shadow')};
   overflow: hidden;
@@ -113,17 +117,17 @@ export const REPORT_DIALOG_CSS = `
   align-items: center;
   gap: 8px;
   height: 56px;
-  padding: 0 8px 0 4px;
+  padding: 0 8px 0 8px;
   flex: none;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 }
 .${p}title {
   flex: 1;
   margin: 0;
   text-align: center;
   font-size: 17px;
-  font-weight: 600;
-  color: ${v('accent')};
+  font-weight: 700;
+  text-transform: uppercase;
+  color: ${v('text')};
 }
 .${p}close {
   width: 44px;
@@ -132,25 +136,23 @@ export const REPORT_DIALOG_CSS = `
   border: 0;
   border-radius: 50%;
   background: none;
-  color: ${v('accent')};
+  color: ${v('text')};
   cursor: pointer;
 }
 .${p}close-icon { display: block; width: 100%; height: 100%; fill: currentColor; }
 .${p}send {
-  min-width: 64px;
-  height: 40px;
-  padding: 0 16px;
+  width: 48px;
+  height: 48px;
+  padding: 8px;
   border: 0;
-  border-radius: 3px;
+  border-radius: 50%;
   background: none;
   color: ${v('accent')};
-  font: inherit;
-  font-size: 16px;
-  font-weight: 600;
   cursor: pointer;
 }
+.${p}send-icon { display: block; width: 100%; height: 100%; fill: currentColor; }
 .${p}send:disabled { opacity: 0.5; cursor: default; }
-.${p}close:hover, .${p}send:hover:not(:disabled) { background: rgba(255, 88, 88, 0.1); }
+.${p}close:hover, .${p}send:hover:not(:disabled) { background: rgba(128, 128, 128, 0.15); }
 
 .${p}body {
   display: flex;
@@ -180,10 +182,10 @@ export const REPORT_DIALOG_CSS = `
   color: ${v('text')};
   background: ${v('field')};
   border: 1px solid ${v('field-border')};
-  border-radius: 2px;
+  border-radius: 8px;
 }
 .${p}input::placeholder { color: ${v('hint')}; opacity: 1; }
-textarea.${p}input { min-height: 7.5em; resize: vertical; }
+textarea.${p}input { min-height: 8.2em; resize: vertical; }
 .${p}input:focus-visible { outline: 2px solid ${v('accent')}; outline-offset: 1px; }
 .${p}input[aria-invalid='true'] { border-color: ${v('error')}; }
 .${p}error { min-height: 0; margin: 0; font-size: 13px; color: ${v('error')}; }
@@ -221,25 +223,23 @@ textarea.${p}input { min-height: 7.5em; resize: vertical; }
 .${p}severity-blocker .${p}severity-icon { color: #8C0101; }
 
 .${p}footer-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: center;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 12px 12px;
+  column-gap: 10px;
+  padding: 0 12px 14px;
   flex: none;
 }
-.${p}version { margin: 0; font-size: 12px; color: ${v('hint')}; }
-.${p}powered {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: ${v('hint')};
-  text-decoration: none;
-}
-.${p}powered:hover { color: ${v('text')}; text-decoration: underline; }
-.${p}powered:focus-visible { outline: 2px solid ${v('accent')}; outline-offset: 2px; border-radius: 2px; }
-.${p}logo { display: block; height: 14px; width: auto; }
+/* The link has no box of its own: its logo and text are laid out on the footer grid, with the version
+   line under the text. */
+.${p}powered { display: contents; font-size: 16px; color: ${v('hint')}; text-decoration: none; }
+.${p}logo { grid-column: 1; grid-row: 1 / span 2; display: block; height: 30px; width: auto; }
+.${p}powered-text { grid-column: 2; grid-row: 1; font-size: 16px; color: ${v('hint')}; }
+.${p}version { grid-column: 2; grid-row: 2; margin: 0; font-size: 12px; color: ${v('hint')}; opacity: 0.6; }
+.${p}powered:hover .${p}powered-text { color: ${v('text')}; text-decoration: underline; }
+.${p}powered:focus-visible .${p}powered-text,
+.${p}powered:focus-visible .${p}logo { outline: 2px solid ${v('accent')}; outline-offset: 2px; border-radius: 2px; }
 
 .${p}confirm {
   position: absolute;
diff --git a/packages/browser/src/report-dialog.test.ts b/packages/browser/src/report-dialog.test.ts
index 3b3ab4f8..6f9403a4 100644
--- a/packages/browser/src/report-dialog.test.ts
+++ b/packages/browser/src/report-dialog.test.ts
@@ -13,6 +13,7 @@ import {
   type ReportDialogUiOptions,
 } from './report-dialog';
 import { DEFAULT_REPORT_DIALOG_STRINGS } from './report-dialog-strings';
+import { REPORT_DIALOG_CSS } from './report-dialog-styles';
 
 const UI: ReportDialogUiOptions = {
   summaryRequired: false,
@@ -262,6 +263,26 @@ describe('layout', () => {
     }
   });
 
+  it('shows the send action as a paper-plane icon with an accessible name, not text', () => {
+    const { show } = harness();
+    void show();
+    const send = q('[data-action="send"]');
+    expect(send.textContent).toBe('');
+    expect(send.getAttribute('aria-label')).toBe('Send');
+    expect(send.getAttribute('title')).toBe('Send');
+    const icon = send.querySelector('svg.bugsee-reporting-dialog-send-icon');
+    expect(icon?.getAttribute('aria-hidden')).toBe('true');
+    expect(icon?.querySelector('path')?.getAttribute('fill-rule')).toBe('evenodd');
+    expect(icon?.querySelector('path')?.getAttribute('d')?.length).toBeGreaterThan(20);
+  });
+
+  it('uses the brand teal as the accent, with the AA variant on the light page', () => {
+    const css = REPORT_DIALOG_CSS;
+    expect(css).toContain('--bugsee-reporting-dialog-accent: #3A8A99');
+    expect(css.match(/--bugsee-reporting-dialog-accent: #60B4C4/g)).toHaveLength(2); // dark + auto
+    expect(css.toLowerCase()).not.toContain('#ff5858');
+  });
+
   it('shows the SDK version in the footer', () => {
     const { show } = harness();
     void show();
@@ -273,7 +294,7 @@ describe('layout', () => {
     const { show } = harness();
     void show({ strings: { send: 'Absenden', summaryPlaceholder: 'Kurzfassung' } });
 
-    expect(q('[data-action="send"]').textContent).toBe('Absenden');
+    expect(q('[data-action="send"]').getAttribute('aria-label')).toBe('Absenden');
     expect(field('summary').placeholder).toBe('Kurzfassung');
     expect(field('description').placeholder).toBe(
       DEFAULT_REPORT_DIALOG_STRINGS.descriptionPlaceholder,
@@ -479,7 +500,7 @@ describe('sending', () => {
     expect(upload).toHaveBeenCalledTimes(1);
     expect(q<HTMLButtonElement>('[data-action="send"]').disabled).toBe(true);
     expect(field('summary').disabled).toBe(true);
-    expect(q('[data-action="send"]').textContent).toBe('Sending…');
+    expect(q('[data-action="send"]').getAttribute('aria-label')).toBe('Sending…');
 
     finish({ ok: false });
     expect(await pending).toEqual({ ok: false });
@@ -699,7 +720,7 @@ describe('powered-by link', () => {
     expect(logo?.getAttribute('viewBox')).toBe('0 0 495 252');
     expect(logo?.getAttribute('aria-hidden')).toBe('true');
     // the brand mark, not a placeholder: its red body and white eye
-    expect(logo?.querySelector('path')?.parentElement?.getAttribute('fill')).toBe('#ff5858');
+    expect(logo?.querySelector('path')?.parentElement?.getAttribute('fill')).toBe('#60b4c4');
     expect(logo?.querySelector('ellipse')?.getAttribute('fill')).toBe('#fff');
     // bottom of the card: after every field, and after the version line
     const after = (a: Element, b: Element): boolean =>
diff --git a/packages/browser/src/report-dialog.ts b/packages/browser/src/report-dialog.ts
index 27076ed5..9ee192ab 100644
--- a/packages/browser/src/report-dialog.ts
+++ b/packages/browser/src/report-dialog.ts
@@ -106,10 +106,13 @@ const SVG_NS = 'http://www.w3.org/2000/svg';
 // Material "bug_report" and "close" glyphs (Apache-2.0).
 const BUG_PATH =
   'M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z';
+// A paper plane with a folded wing, drawn for this dialog (even-odd: the second subpath is the fold).
+const SEND_PATH =
+  'M2.5 11.3 21.5 3.3 18 20.5 12.4 16.1 9.6 19.2 9.1 13.9ZM10.2 13.5 17.2 7.6 11 14.6Z';
 const CLOSE_PATH =
   'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
-// The Bugsee mark (brand red body, white eye) — the same artwork as the viewer's logo.svg.
+// The Bugsee mark (brand teal body, white eye) — the same artwork as the viewer's logo.svg.
 const LOGO_BODY =
   'm102 251.9h30.4v-31h10v31.1h30.4v-31h40v31.1h30.4v-31h10v31.1h33.7c-2.8-9.2-4.3-19-4.3-29.1 0-55.4 45.2-100.4 100.9-100.4 40.6 0 75.6 23.9 91.6 58.3h19.1c-17.6-59.2-56.5-109.3-108-141.4 1.7-7.8.2-15.9-3.9-22.6-7.7.3-15.1 3.5-20.6 9.1-33.1-15.9-70.2-24.8-109.5-24.8-139.3 0-252.3 112.3-252.3 250.9h82v-31h20v31.1zm240-149.5c13.9 0 25.2-11.2 25.2-25.1s-11.3-25.1-25.2-25.1-25.2 11.2-25.2 25.1 11.3 25.1 25.2 25.1zm9.1-7c5.6 0 10.1-4.5 10.1-10s-4.5-10-10.1-10-10.1 4.5-10.1 10 4.5 10 10.1 10zm-20.7-43.3';
 const LOGO_HORN =
@@ -251,7 +254,8 @@ function showDialog(
   const setBusy = (value: boolean): void => {
     busy = value;
     refs.send.disabled = value;
-    refs.send.textContent = value ? strings.sending : strings.send;
+    refs.send.setAttribute('aria-label', value ? strings.sending : strings.send);
+    refs.send.title = value ? strings.sending : strings.send;
     for (const control of Object.values(refs.fields)) {
       control.disabled = value;
     }
@@ -509,9 +513,16 @@ function build(
   hook(close, 'close');
   close.setAttribute('data-action', 'cancel');
   close.append(icon(CLOSE_PATH, 'close-icon'));
-  const send = make('button', { type: 'submit' }, strings.send);
+  const send = make('button', {
+    type: 'submit',
+    'aria-label': strings.send,
+    title: strings.send,
+  });
   hook(send, 'send');
   send.setAttribute('data-action', 'send');
+  const sendIcon = icon(SEND_PATH, 'send-icon');
+  sendIcon.querySelector('path')?.setAttribute('fill-rule', 'evenodd');
+  send.append(sendIcon);
   const bar = make('div');
   hook(bar, 'bar');
   const title = make('h2', { id: titleId }, strings.title);
@@ -635,7 +646,7 @@ function build(
     eye.setAttribute(name, value);
   }
   const brand = doc.createElementNS(SVG_NS, 'g');
-  brand.setAttribute('fill', '#ff5858');
+  brand.setAttribute('fill', '#60b4c4');
   for (const d of [LOGO_BODY, LOGO_HORN]) {
     const shape = doc.createElementNS(SVG_NS, 'path');
     shape.setAttribute('d', d);
@@ -646,7 +657,9 @@ function build(
   const powered = make('a', { href: BUGSEE_URL, target: '_blank', rel: 'noopener noreferrer' });
   hook(powered, 'powered');
   powered.setAttribute('data-powered', '');
-  powered.append(logo, doc.createTextNode(strings.poweredBy));
+  const poweredText = make('span', {}, strings.poweredBy);
+  hook(poweredText, 'powered-text');
+  powered.append(logo, poweredText);
   const footerRow = make('div');
   hook(footerRow, 'footer-row');
   footerRow.append(version, powered);

From 1704e24be47ee54776c1e83a24e9e322e630846d Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:17:05 +0500
Subject: [PATCH 02/10] fix(browser): keep the anteater logo brand red
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/browser/src/report-dialog.test.ts | 2 +-
 packages/browser/src/report-dialog.ts      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/browser/src/report-dialog.test.ts b/packages/browser/src/report-dialog.test.ts
index 6f9403a4..0a4dc3d0 100644
--- a/packages/browser/src/report-dialog.test.ts
+++ b/packages/browser/src/report-dialog.test.ts
@@ -720,7 +720,7 @@ describe('powered-by link', () => {
     expect(logo?.getAttribute('viewBox')).toBe('0 0 495 252');
     expect(logo?.getAttribute('aria-hidden')).toBe('true');
     // the brand mark, not a placeholder: its red body and white eye
-    expect(logo?.querySelector('path')?.parentElement?.getAttribute('fill')).toBe('#60b4c4');
+    expect(logo?.querySelector('path')?.parentElement?.getAttribute('fill')).toBe('#ff5858');
     expect(logo?.querySelector('ellipse')?.getAttribute('fill')).toBe('#fff');
     // bottom of the card: after every field, and after the version line
     const after = (a: Element, b: Element): boolean =>
diff --git a/packages/browser/src/report-dialog.ts b/packages/browser/src/report-dialog.ts
index 9ee192ab..91a0f9bc 100644
--- a/packages/browser/src/report-dialog.ts
+++ b/packages/browser/src/report-dialog.ts
@@ -112,7 +112,7 @@ const SEND_PATH =
 const CLOSE_PATH =
   'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
-// The Bugsee mark (brand teal body, white eye) — the same artwork as the viewer's logo.svg.
+// The Bugsee mark (brand red body, white eye) — the same artwork as the viewer's logo.svg.
 const LOGO_BODY =
   'm102 251.9h30.4v-31h10v31.1h30.4v-31h40v31.1h30.4v-31h10v31.1h33.7c-2.8-9.2-4.3-19-4.3-29.1 0-55.4 45.2-100.4 100.9-100.4 40.6 0 75.6 23.9 91.6 58.3h19.1c-17.6-59.2-56.5-109.3-108-141.4 1.7-7.8.2-15.9-3.9-22.6-7.7.3-15.1 3.5-20.6 9.1-33.1-15.9-70.2-24.8-109.5-24.8-139.3 0-252.3 112.3-252.3 250.9h82v-31h20v31.1zm240-149.5c13.9 0 25.2-11.2 25.2-25.1s-11.3-25.1-25.2-25.1-25.2 11.2-25.2 25.1 11.3 25.1 25.2 25.1zm9.1-7c5.6 0 10.1-4.5 10.1-10s-4.5-10-10.1-10-10.1 4.5-10.1 10 4.5 10 10.1 10zm-20.7-43.3';
 const LOGO_HORN =
@@ -646,7 +646,7 @@ function build(
     eye.setAttribute(name, value);
   }
   const brand = doc.createElementNS(SVG_NS, 'g');
-  brand.setAttribute('fill', '#60b4c4');
+  brand.setAttribute('fill', '#ff5858');
   for (const d of [LOGO_BODY, LOGO_HORN]) {
     const shape = doc.createElementNS(SVG_NS, 'path');
     shape.setAttribute('d', d);

From d3ed613df0680758f0547b5baa058f0fec1de6a4 Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:18:02 +0500
Subject: [PATCH 03/10] feat(browser): send icon as a rounded arrowhead with a
 slit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/browser/src/report-dialog-styles.ts | 10 +++++++++-
 packages/browser/src/report-dialog.test.ts   |  7 ++++++-
 packages/browser/src/report-dialog.ts        |  7 +++----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/browser/src/report-dialog-styles.ts b/packages/browser/src/report-dialog-styles.ts
index d3821d53..6a97d178 100644
--- a/packages/browser/src/report-dialog-styles.ts
+++ b/packages/browser/src/report-dialog-styles.ts
@@ -150,7 +150,15 @@ export const REPORT_DIALOG_CSS = `
   color: ${v('accent')};
   cursor: pointer;
 }
-.${p}send-icon { display: block; width: 100%; height: 100%; fill: currentColor; }
+.${p}send-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linejoin: round;
+}
 .${p}send:disabled { opacity: 0.5; cursor: default; }
 .${p}close:hover, .${p}send:hover:not(:disabled) { background: rgba(128, 128, 128, 0.15); }
 
diff --git a/packages/browser/src/report-dialog.test.ts b/packages/browser/src/report-dialog.test.ts
index 0a4dc3d0..0678b765 100644
--- a/packages/browser/src/report-dialog.test.ts
+++ b/packages/browser/src/report-dialog.test.ts
@@ -272,10 +272,15 @@ describe('layout', () => {
     expect(send.getAttribute('title')).toBe('Send');
     const icon = send.querySelector('svg.bugsee-reporting-dialog-send-icon');
     expect(icon?.getAttribute('aria-hidden')).toBe('true');
-    expect(icon?.querySelector('path')?.getAttribute('fill-rule')).toBe('evenodd');
     expect(icon?.querySelector('path')?.getAttribute('d')?.length).toBeGreaterThan(20);
   });
 
+  it('rounds the send arrowhead by stroking it with round joins', () => {
+    expect(REPORT_DIALOG_CSS).toMatch(
+      /send-icon \{[^}]*stroke: currentColor;[^}]*stroke-linejoin: round;/,
+    );
+  });
+
   it('uses the brand teal as the accent, with the AA variant on the light page', () => {
     const css = REPORT_DIALOG_CSS;
     expect(css).toContain('--bugsee-reporting-dialog-accent: #3A8A99');
diff --git a/packages/browser/src/report-dialog.ts b/packages/browser/src/report-dialog.ts
index 91a0f9bc..a3b6129a 100644
--- a/packages/browser/src/report-dialog.ts
+++ b/packages/browser/src/report-dialog.ts
@@ -106,9 +106,9 @@ const SVG_NS = 'http://www.w3.org/2000/svg';
 // Material "bug_report" and "close" glyphs (Apache-2.0).
 const BUG_PATH =
   'M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z';
-// A paper plane with a folded wing, drawn for this dialog (even-odd: the second subpath is the fold).
-const SEND_PATH =
-  'M2.5 11.3 21.5 3.3 18 20.5 12.4 16.1 9.6 19.2 9.1 13.9ZM10.2 13.5 17.2 7.6 11 14.6Z';
+// A send arrowhead with a slit in its back edge. It is filled AND stroked (see `.send-icon` in the styles) so
+// the corners come out rounded.
+const SEND_PATH = 'M4.3 3.9 21.4 12.4 4.3 20.9 5.8 14 15 12.6 5.8 10.8Z';
 const CLOSE_PATH =
   'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
@@ -521,7 +521,6 @@ function build(
   hook(send, 'send');
   send.setAttribute('data-action', 'send');
   const sendIcon = icon(SEND_PATH, 'send-icon');
-  sendIcon.querySelector('path')?.setAttribute('fill-rule', 'evenodd');
   send.append(sendIcon);
   const bar = make('div');
   hook(bar, 'bar');

From ec2c650e375b60e882fc82ac4d78fc2bc5354996 Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:18:43 +0500
Subject: [PATCH 04/10] style(browser): give the send and close icons the same
 size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/browser/src/report-dialog-styles.ts |  6 +++---
 packages/browser/src/report-dialog.test.ts   | 12 ++++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/browser/src/report-dialog-styles.ts b/packages/browser/src/report-dialog-styles.ts
index 6a97d178..5f34bf1f 100644
--- a/packages/browser/src/report-dialog-styles.ts
+++ b/packages/browser/src/report-dialog-styles.ts
@@ -141,9 +141,9 @@ export const REPORT_DIALOG_CSS = `
 }
 .${p}close-icon { display: block; width: 100%; height: 100%; fill: currentColor; }
 .${p}send {
-  width: 48px;
-  height: 48px;
-  padding: 8px;
+  width: 44px;
+  height: 44px;
+  padding: 13px; /* the stroked arrowhead then measures the same as the close glyph (about 14px) */
   border: 0;
   border-radius: 50%;
   background: none;
diff --git a/packages/browser/src/report-dialog.test.ts b/packages/browser/src/report-dialog.test.ts
index 0678b765..efcbfc8a 100644
--- a/packages/browser/src/report-dialog.test.ts
+++ b/packages/browser/src/report-dialog.test.ts
@@ -1193,3 +1193,15 @@ describe('lifecycle events', () => {
     await expect(pending).resolves.toEqual({ ok: true });
   });
 });
+
+describe('toolbar buttons', () => {
+  it('give the close and send actions the same button size', () => {
+    const css = REPORT_DIALOG_CSS;
+    const box = (name: string): string => {
+      const rule = css.match(new RegExp(`\\.bugsee-reporting-dialog-${name} \\{([^}]*)\\}`));
+      return `${rule?.[1]?.match(/width: (\d+px)/)?.[1]}x${rule?.[1]?.match(/height: (\d+px)/)?.[1]}`;
+    };
+    expect(box('send')).toBe('44pxx44px');
+    expect(box('close')).toBe(box('send'));
+  });
+});

From a8cc49719193e4bd598510fe49733d6a193d3174 Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:19:08 +0500
Subject: [PATCH 05/10] style(browser): enlarge the send icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/browser/src/report-dialog-styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/browser/src/report-dialog-styles.ts b/packages/browser/src/report-dialog-styles.ts
index 5f34bf1f..b129d71f 100644
--- a/packages/browser/src/report-dialog-styles.ts
+++ b/packages/browser/src/report-dialog-styles.ts
@@ -143,7 +143,7 @@ export const REPORT_DIALOG_CSS = `
 .${p}send {
   width: 44px;
   height: 44px;
-  padding: 13px; /* the stroked arrowhead then measures the same as the close glyph (about 14px) */
+  padding: 9px; /* the arrowhead is a solid shape, so it reads smaller than the thin close glyph at the same size */
   border: 0;
   border-radius: 50%;
   background: none;

From 08976a368c5a7b0b2e0581534a353efdb87f3888 Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:19:59 +0500
Subject: [PATCH 06/10] style(browser): make the version line smaller and
 fainter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/browser/src/report-dialog-styles.ts | 2 +-
 packages/browser/src/report-dialog.test.ts   | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/browser/src/report-dialog-styles.ts b/packages/browser/src/report-dialog-styles.ts
index b129d71f..ffc7057f 100644
--- a/packages/browser/src/report-dialog-styles.ts
+++ b/packages/browser/src/report-dialog-styles.ts
@@ -244,7 +244,7 @@ textarea.${p}input { min-height: 8.2em; resize: vertical; }
 .${p}powered { display: contents; font-size: 16px; color: ${v('hint')}; text-decoration: none; }
 .${p}logo { grid-column: 1; grid-row: 1 / span 2; display: block; height: 30px; width: auto; }
 .${p}powered-text { grid-column: 2; grid-row: 1; font-size: 16px; color: ${v('hint')}; }
-.${p}version { grid-column: 2; grid-row: 2; margin: 0; font-size: 12px; color: ${v('hint')}; opacity: 0.6; }
+.${p}version { grid-column: 2; grid-row: 2; margin: 0; font-size: 10px; color: ${v('hint')}; opacity: 0.4; }
 .${p}powered:hover .${p}powered-text { color: ${v('text')}; text-decoration: underline; }
 .${p}powered:focus-visible .${p}powered-text,
 .${p}powered:focus-visible .${p}logo { outline: 2px solid ${v('accent')}; outline-offset: 2px; border-radius: 2px; }
diff --git a/packages/browser/src/report-dialog.test.ts b/packages/browser/src/report-dialog.test.ts
index efcbfc8a..1281f91f 100644
--- a/packages/browser/src/report-dialog.test.ts
+++ b/packages/browser/src/report-dialog.test.ts
@@ -1205,3 +1205,12 @@ describe('toolbar buttons', () => {
     expect(box('close')).toBe(box('send'));
   });
 });
+
+describe('version line', () => {
+  it('is small and faint next to the "Powered by" text', () => {
+    const rule =
+      REPORT_DIALOG_CSS.match(/\.bugsee-reporting-dialog-version \{([^}]*)\}/)?.[1] ?? '';
+    expect(rule).toContain('font-size: 10px');
+    expect(rule).toContain('opacity: 0.4');
+  });
+});

From 461e92e46c6ebea528ceae8783f9249b1164fd03 Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:20:26 +0500
Subject: [PATCH 07/10] style(browser): smaller version line, a bit more opaque
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/browser/src/report-dialog-styles.ts | 2 +-
 packages/browser/src/report-dialog.test.ts   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/browser/src/report-dialog-styles.ts b/packages/browser/src/report-dialog-styles.ts
index ffc7057f..048a629c 100644
--- a/packages/browser/src/report-dialog-styles.ts
+++ b/packages/browser/src/report-dialog-styles.ts
@@ -244,7 +244,7 @@ textarea.${p}input { min-height: 8.2em; resize: vertical; }
 .${p}powered { display: contents; font-size: 16px; color: ${v('hint')}; text-decoration: none; }
 .${p}logo { grid-column: 1; grid-row: 1 / span 2; display: block; height: 30px; width: auto; }
 .${p}powered-text { grid-column: 2; grid-row: 1; font-size: 16px; color: ${v('hint')}; }
-.${p}version { grid-column: 2; grid-row: 2; margin: 0; font-size: 10px; color: ${v('hint')}; opacity: 0.4; }
+.${p}version { grid-column: 2; grid-row: 2; margin: 0; font-size: 9px; color: ${v('hint')}; opacity: 0.65; }
 .${p}powered:hover .${p}powered-text { color: ${v('text')}; text-decoration: underline; }
 .${p}powered:focus-visible .${p}powered-text,
 .${p}powered:focus-visible .${p}logo { outline: 2px solid ${v('accent')}; outline-offset: 2px; border-radius: 2px; }
diff --git a/packages/browser/src/report-dialog.test.ts b/packages/browser/src/report-dialog.test.ts
index 1281f91f..0a08e021 100644
--- a/packages/browser/src/report-dialog.test.ts
+++ b/packages/browser/src/report-dialog.test.ts
@@ -1210,7 +1210,7 @@ describe('version line', () => {
   it('is small and faint next to the "Powered by" text', () => {
     const rule =
       REPORT_DIALOG_CSS.match(/\.bugsee-reporting-dialog-version \{([^}]*)\}/)?.[1] ?? '';
-    expect(rule).toContain('font-size: 10px');
-    expect(rule).toContain('opacity: 0.4');
+    expect(rule).toContain('font-size: 9px');
+    expect(rule).toContain('opacity: 0.65');
   });
 });

From 1ee24e91b6bd66751ce3cb74b4d63ea7a97a41ca Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:21:11 +0500
Subject: [PATCH 08/10] style(browser): make the version line more transparent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/browser/src/report-dialog-styles.ts | 2 +-
 packages/browser/src/report-dialog.test.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/browser/src/report-dialog-styles.ts b/packages/browser/src/report-dialog-styles.ts
index 048a629c..2f5b3ac3 100644
--- a/packages/browser/src/report-dialog-styles.ts
+++ b/packages/browser/src/report-dialog-styles.ts
@@ -244,7 +244,7 @@ textarea.${p}input { min-height: 8.2em; resize: vertical; }
 .${p}powered { display: contents; font-size: 16px; color: ${v('hint')}; text-decoration: none; }
 .${p}logo { grid-column: 1; grid-row: 1 / span 2; display: block; height: 30px; width: auto; }
 .${p}powered-text { grid-column: 2; grid-row: 1; font-size: 16px; color: ${v('hint')}; }
-.${p}version { grid-column: 2; grid-row: 2; margin: 0; font-size: 9px; color: ${v('hint')}; opacity: 0.65; }
+.${p}version { grid-column: 2; grid-row: 2; margin: 0; font-size: 9px; color: ${v('hint')}; opacity: 0.3; }
 .${p}powered:hover .${p}powered-text { color: ${v('text')}; text-decoration: underline; }
 .${p}powered:focus-visible .${p}powered-text,
 .${p}powered:focus-visible .${p}logo { outline: 2px solid ${v('accent')}; outline-offset: 2px; border-radius: 2px; }
diff --git a/packages/browser/src/report-dialog.test.ts b/packages/browser/src/report-dialog.test.ts
index 0a08e021..40b4a232 100644
--- a/packages/browser/src/report-dialog.test.ts
+++ b/packages/browser/src/report-dialog.test.ts
@@ -1211,6 +1211,6 @@ describe('version line', () => {
     const rule =
       REPORT_DIALOG_CSS.match(/\.bugsee-reporting-dialog-version \{([^}]*)\}/)?.[1] ?? '';
     expect(rule).toContain('font-size: 9px');
-    expect(rule).toContain('opacity: 0.65');
+    expect(rule).toContain('opacity: 0.3');
   });
 });

From 3632859b078e25012c1eeb7d197ec2f5beb2a792 Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:39:40 +0500
Subject: [PATCH 09/10] test(e2e): the dialog card radius is 12px now
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/instrumentation-tests/test/report-dialog.e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/instrumentation-tests/test/report-dialog.e2e.ts b/packages/instrumentation-tests/test/report-dialog.e2e.ts
index 6247b190..62a54406 100644
--- a/packages/instrumentation-tests/test/report-dialog.e2e.ts
+++ b/packages/instrumentation-tests/test/report-dialog.e2e.ts
@@ -312,7 +312,7 @@ describe('client.showReportDialog() — REAL Chromium end to end', () => {
         radius: getComputedStyle(root.querySelector('.bugsee-reporting-dialog-card') as Element)
           .borderRadius,
       }));
-      expect(styled).toEqual({ styleElements: 0, adopted: 1, radius: '8px' });
+      expect(styled).toEqual({ styleElements: 0, adopted: 1, radius: '12px' });
       expect(violations.map((v) => v.slice(0, 300))).toEqual([]);
       await context.close();
     } finally {

From 13e6f171032d4d64e8f62586b8d0629759cb633b Mon Sep 17 00:00:00 2001
From: Alexey Karimov <krassx@gmail.com>
Date: Tue, 13 Oct 2026 17:40:30 +0500
Subject: [PATCH 10/10] style(browser): make the page shading nearly black
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 packages/browser/src/report-dialog-styles.ts | 2 +-
 packages/browser/src/report-dialog.test.ts   | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/browser/src/report-dialog-styles.ts b/packages/browser/src/report-dialog-styles.ts
index 2f5b3ac3..e7541978 100644
--- a/packages/browser/src/report-dialog-styles.ts
+++ b/packages/browser/src/report-dialog-styles.ts
@@ -40,7 +40,7 @@ export const REPORT_DIALOG_CSS = `
   --${p}error: #C62828;
   --${p}severity-active: #182433;
   --${p}severity-idle: #637E99;
-  --${p}shade: rgba(0, 0, 0, 0.55);
+  --${p}shade: rgba(0, 0, 0, 0.92);
   --${p}shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
   --${p}radius: 12px;
   font: 17px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
diff --git a/packages/browser/src/report-dialog.test.ts b/packages/browser/src/report-dialog.test.ts
index 40b4a232..c695230d 100644
--- a/packages/browser/src/report-dialog.test.ts
+++ b/packages/browser/src/report-dialog.test.ts
@@ -1214,3 +1214,12 @@ describe('version line', () => {
     expect(rule).toContain('opacity: 0.3');
   });
 });
+
+describe('page shading', () => {
+  it('is nearly black, so the page behind the dialog is barely visible', () => {
+    const alpha = REPORT_DIALOG_CSS.match(
+      /--bugsee-reporting-dialog-shade: rgba\(0, 0, 0, ([\d.]+)\)/,
+    )?.[1];
+    expect(Number(alpha)).toBeGreaterThanOrEqual(0.9);
+  });
+});