From 138321450118eeaba78a3ba147b5b66398eca283 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= <canaltinova@gmail.com>
Date: Mon, 24 Aug 2026 01:20:08 +0200
Subject: [PATCH] Fix dark mode contrast of the warning icons in the publish
 panel

The warning indicators next to the publish panel checkboxes were img
elements using warning.svg, which has a hardcoded black fill and stayed
black on dark backgrounds.

This commit renders them as spans with a background image instead, so
they can switch to the light variant (warning-light.svg, already used by
the photon message bars) in dark mode.
---
 src/components/app/MenuButtons/Publish.css | 6 ++++++
 src/components/app/MenuButtons/Publish.tsx | 8 ++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/app/MenuButtons/Publish.css b/src/components/app/MenuButtons/Publish.css
index 4d6d4ca9b1..059d7c8713 100644
--- a/src/components/app/MenuButtons/Publish.css
+++ b/src/components/app/MenuButtons/Publish.css
@@ -57,6 +57,7 @@
   --internal-upload-percentage-foreground-color: var(--blue-60);
   --internal-upload-bar-background-color: var(--grey-40);
   --internal-upload-bar-inner-background-color: var(--blue-50);
+  --internal-warning-indicator-icon: url(../../../../res/img/svg/warning.svg);
 }
 
 :root.dark-mode {
@@ -80,6 +81,7 @@
     --internal-upload-percentage-foreground-color: var(--blue-60);
     --internal-upload-bar-background-color: var(--grey-40);
     --internal-upload-bar-inner-background-color: var(--blue-50);
+    --internal-warning-indicator-icon: url(../../../../res/img/svg/warning-light.svg);
   }
 }
 
@@ -115,7 +117,11 @@
 }
 
 .publishPanelDataChoicesIndicator {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
   margin-left: 8px;
+  background: var(--internal-warning-indicator-icon) center no-repeat;
   vertical-align: middle;
 }
 
diff --git a/src/components/app/MenuButtons/Publish.tsx b/src/components/app/MenuButtons/Publish.tsx
index 413b8c49f6..2f18ecc147 100644
--- a/src/components/app/MenuButtons/Publish.tsx
+++ b/src/components/app/MenuButtons/Publish.tsx
@@ -36,8 +36,6 @@ import explicitConnect, {
   type ConnectedProps,
 } from 'firefox-profiler/utils/connect';
 
-import WarningImage from 'firefox-profiler-res/img/svg/warning.svg';
-
 import type {
   Profile,
   CheckedSharingOptions,
@@ -231,9 +229,8 @@ class PublishPanelImpl extends React.PureComponent<PublishProps, {}> {
                     id="MenuButtons--publish--renderCheckbox-label-private-browsing-warning-image"
                     attrs={{ title: true }}
                   >
-                    <img
+                    <span
                       className="publishPanelDataChoicesIndicator"
-                      src={WarningImage}
                       title="This profile contains private browsing data"
                     />
                   </Localized>
@@ -247,9 +244,8 @@ class PublishPanelImpl extends React.PureComponent<PublishProps, {}> {
                     id="MenuButtons--publish--renderCheckbox-label-argument-values-warning-image"
                     attrs={{ title: true }}
                   >
-                    <img
+                    <span
                       className="publishPanelDataChoicesIndicator"
-                      src={WarningImage}
                       title="This profile contains function argument values recorded from the page, which may include personal data"
                     />
                   </Localized>