From 508fde10290ff10e2816a883c611ab428c8e782e Mon Sep 17 00:00:00 2001
From: fkwp <github-fkwp@w4ve.de>
Date: Fri, 18 Sep 2026 14:59:25 +0200
Subject: [PATCH] Say what the browser costs without raising its voice

- The design's second pass: the subtle ground, an outline mark and text at
  its ordinary weight, sixteen pixels in from the menu's sides like the
  grid above it. Measured against the drawing, the ground and the inset
  land on it exactly, and the padding gives the same box for the same
  number of lines.
- No longer an alert. An alert is for something that just happened; this
  was true before the menu opened and will be true after it closes, which
  is also why it cannot be dismissed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/MediaMuteAndSwitchButton.mdx   |  6 +++++
 .../MediaMuteAndSwitchButton.module.css       | 26 +++++++++++++++++++
 src/components/MediaMuteAndSwitchButton.tsx   | 10 ++++---
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/MediaMuteAndSwitchButton.mdx b/src/components/MediaMuteAndSwitchButton.mdx
index c749dddf9..499a606ed 100644
--- a/src/components/MediaMuteAndSwitchButton.mdx
+++ b/src/components/MediaMuteAndSwitchButton.mdx
@@ -45,6 +45,12 @@ It is said rather than enforced. The cost is smoothness; the reason to pay it
 is privacy; and only the person in the room knows which they would rather
 have. Everything stays choosable.
 
+Drawn quietly on purpose, to the design: the subtle ground, an outline mark and
+the text at its ordinary weight, held the same sixteen pixels from the menu's
+sides as the grid above it. Not an alert — an alert is for something that just
+happened, and this was true before the menu opened and will be true after it
+closes.
+
 <Canvas of={MenuStories.BackgroundEffectsSlowInThisBrowser} />
 
 **Being set up.** Only on the first effect of a session. The tile that was
diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index 477027a9e..111788d9c 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/src/components/MediaMuteAndSwitchButton.module.css
@@ -397,3 +397,29 @@ Please see LICENSE in the repository root for full details.
   inline-size: 20px;
   block-size: 20px;
 }
+
+/*
+ * What the browser costs, said quietly.
+ *
+ * Measured off the design: the subtle secondary ground, held the same sixteen
+ * pixels from the menu's sides as the grid above it, with the mark and the
+ * text on one line's baseline and the text at its ordinary weight. Not an
+ * alert — an alert is for something that just happened, and this was true
+ * before the menu opened and will be true after it closes.
+ */
+.effectNotice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cpd-space-3x);
+  margin: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-4x);
+  padding: var(--cpd-space-3x);
+  border-radius: var(--cpd-space-2x);
+  background: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-text-primary);
+  font: var(--cpd-font-body-md-regular);
+}
+
+.effectNotice > svg {
+  flex-shrink: 0;
+  color: var(--cpd-color-icon-secondary);
+}
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index cbc97bdc4..ee12ae4c6 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -33,6 +33,7 @@ import {
   PlusIcon,
   CheckCircleSolidIcon,
   CloseIcon,
+  InfoIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -815,9 +816,12 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             // Never both at once: a refusal is about what the user just did and
             // wins the space, where this is about the browser and will still be
             // true next time. Not dismissible for the same reason — there is
-            // nothing to dismiss, only something to know.
-            <div role="none" className={styles.effectError}>
-              <Alert type="info" title={backgroundEffectNotice} />
+            // nothing to dismiss, only something to know, and it is drawn to be
+            // read once rather than to interrupt: a subtle ground, an outline
+            // mark and text at its ordinary weight, as the design has it.
+            <div role="none" className={styles.effectNotice}>
+              <InfoIcon width={20} height={20} />
+              <span>{backgroundEffectNotice}</span>
             </div>
           )}
         {toggles.length > 0 && <hr />}