[Due for payment 2025-03-13] [$250] [iOS Safari]Header logo appears incorrect in darkmode

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: n/a
Reproducible in staging?: n/a
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dubielzyk-expensify
Slack conversation (hyperlinked to channel name): expensify bug

Action Performed:

Device set to darkmode

1. Go to help.expensify.com
2. Observe the header for expensify logo

Expected Result:

Expensify logo should appear correctly as "ExpensifyHelp"

Actual Result:

Appears Help placed over Expensify

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021890470171128267221
• Upwork Job ID: 1890470171128267221
• Last Price Increase: 2025-02-14

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @rushatgabhane

[melvin-bot]

Triggered auto assignment to @michaelkwardrop (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[michaelkwardrop]

There isn't an overlap, but agree the color needs to be adjusted. Going to flag with our design team and handle internally as this gets into branding territory.

[michaelkwardrop]

Reopening because I see that @dubielzyk-expensify reported this!

[michaelkwardrop]

Discussing in Slack ^

[bernhardoj]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-15 04:15:32 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Expensify help logo color is not correct in dark mode.

What is the root cause of that problem?

The logo is an SVG file that has a style that changes based on the color scheme (dark/light).

App/docs/assets/images/expensify-help.svg

Line 1 in cd3fb6d

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 189 30" style="enable-background:new 0 0 189 30" xml:space="preserve"><style type="text/css">.st0{fill:#002e22}@media(prefers-color-scheme: dark){.st0{fill:#E7ECE9}}.st1{fill:#03d47c}</style><g><g><path d="M0,23.1h13.9V19H5.1v-3.8h7.1V11H5.1V7.4h8.8V3.3H0V23.1z" class="st0"/><path d="M31.1,7.7H25l-2,3.7l-2.1-3.7h-6.3l5.1,7.5l-5.5,8h6.1l2.4-4.1l2.4,4.1h6.3l-5.5-8L31.1,7.7z" class="st0"/><path d="M40.8,7.3L40.8,7.3c-1.7,0-3.2,0.7-4.2,2V7.7h-4.7v22h5v-7.7c0.9,0.9,2.3,1.5,3.9,1.5c4.1,0,6.9-3.1,6.9-8.1 C47.7,10.5,45,7.3,40.8,7.3L40.8,7.3z M39.7,19.4c-1.9,0-3-1.5-3-4s1.1-4,3-4c1.9,0,3,1.4,3,4S41.5,19.4,39.7,19.4z" class="st0"/><path d="M56.4,19.6c-1.5,0-2.7-0.9-3-3.1h10.6v-0.7c0-4.8-2.7-8.5-7.9-8.5c-3.7,0-7.9,2-7.9,8.1 c0,4.9,3.2,8.1,8.1,8.1c2.9,0,6.6-1.1,7.7-5.6h-5.1C58.9,18.7,58.2,19.6,56.4,19.6L56.4,19.6z M56.2,11c1.4,0,2.4,0.8,2.6,2.6 h-5.2C54,11.6,55,11,56.2,11L56.2,11z" class="st0"/><path d="M73.9,7.3c-1.7,0-3.2,0.8-4.2,2.2V7.7h-4.7v15.4h5v-8.6c0-2.1,1.1-3,2.4-3c1.5,0,2.3,0.6,2.3,3v8.6h5v-9 C79.7,9.2,77.7,7.3,73.9,7.3L73.9,7.3z" class="st0"/><path d="M97.9,0.7c-1.5,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.5,0,2.6-1.2,2.6-2.6C100.5,1.8,99.5,0.7,97.9,0.7z" class="st0"/><path d="M100.4,7.7h-5v15.4h5V7.7z" class="st0"/><path d="M88.9,13.5l-1.2-0.3c-1.3-0.3-1.8-0.9-1.8-1.4c0-0.8,0.7-1.4,1.9-1.4c1.5,0,2.2,0.5,2.2,1.9h4.3 c-0.1-3.2-2-5.1-6.8-5.1c-4.1,0-6.6,1.5-6.6,5c0,2.7,1.8,3.9,6,4.9l1.2,0.3c1.3,0.3,1.8,0.9,1.8,1.5c0,0.8-0.8,1.2-2.1,1.2 c-1.7,0-2.5-0.6-2.7-2h-4.9c0.3,3.7,2.9,5.6,7.4,5.6c4.5,0,7.2-1.7,7.2-5.1C94.9,15.7,93.1,14.4,88.9,13.5L88.9,13.5z" class="st0"/><path d="M119.9,7.7L119.9,7.7l-2.8,9.4l-2.7-9.4h-6.5V7.2c0-1.3,0.9-2.5,2.4-2.5h0.7V0.6h-1c-4.3,0.1-7.1,3.1-7.1,6.9 v0.2h-1.9v4.5h1.9v10.8h5V12.3h2.8l3.7,10.4l-0.6,1.6c-0.5,1.2-1,1.5-2,1.5c-0.5,0-1.1,0-1.8-0.2l-0.3,4.1 c0.7,0.2,1.7,0.3,2.9,0.3c3,0,4.5-1.3,6-5.2L125,7.7L119.9,7.7L119.9,7.7z" class="st0"/></g><g><path d="M144.5,23.1c2.7,0,4.3-0.3,4.3-1.1c0-0.7-0.7-0.9-2.1-0.9c-0.4-0.1-0.5-1.5-0.5-3.2V6.9 c0-1.7,0.1-3.1,0.5-3.2c1.5-0.1,2.1-0.3,2.1-0.9c0-0.9-1.6-1.2-4.3-1.2c-2.8,0-4.4,0.3-4.4,1.2c0,0.6,0.7,0.8,2.1,0.9 c0.4,0.1,0.5,1.6,0.5,3.2v3.9c-0.1,0.3-0.3,0.4-1.1,0.4h-8.5c-0.8,0-1-0.1-1.1-0.4V6.9c0-1.7,0.1-3.1,0.5-3.2 c1.5-0.1,2.1-0.3,2.1-0.9c0-0.9-1.6-1.2-4.4-1.2c-2.7,0-4.3,0.3-4.3,1.2c0,0.6,0.7,0.8,2.1,0.9c0.4,0.1,0.4,1.6,0.4,3.2v10.9 c0,1.7-0.1,3.1-0.4,3.2c-1.5,0.1-2.1,0.3-2.1,0.9c0,0.8,1.6,1.1,4.3,1.1c2.8,0,4.4-0.3,4.4-1.1c0-0.7-0.7-0.9-2.1-0.9 c-0.4-0.1-0.5-1.5-0.5-3.2v-4.3c0.1-0.3,0.3-0.4,1.1-0.4h8.5c0.8,0,0.9,0.1,1.1,0.4v4.2c0,1.7-0.1,3.1-0.5,3.2 c-1.5,0.1-2.1,0.3-2.1,0.9C140.1,22.8,141.7,23.1,144.5,23.1z" class="st1"/><path d="M156.3,23.4c2.7,0,4.6-1.2,5.7-2.5c0.7-0.7,1-1.5,1-2c0-0.5-0.2-0.8-0.6-0.8c-0.3,0-0.5,0.2-0.8,0.5 c-0.9,0.9-2.2,1.9-4.3,1.9c-3,0-4.8-2.1-5-5.3h8.8c1.2,0,1.8-0.9,1.8-2.2c0-2.6-2.3-5.2-6.1-5.2c-4.1,0-7.5,3.3-7.5,8.1 C149.3,20.3,152.1,23.4,156.3,23.4z M152.4,13.6c0.4-2.6,2-4.2,4.3-4.2c2.1,0,3.4,1.4,3.4,3c0,0.8-0.5,1.2-1.5,1.2L152.4,13.6z" class="st1"/><path d="M167.6,23.1c2.3,0,3.7-0.3,3.7-1.1c0-0.6-0.6-0.7-1.7-0.8c-0.3-0.1-0.4-1.2-0.4-3.1V7.5 c0-2.1,0.1-3.8,0.1-4.8c0-1.1-0.2-1.6-1-1.6c-0.8,0-3,0.5-4.1,1c-0.4,0.2-0.6,0.4-0.6,0.8c0,0.4,0.4,0.7,2,0.8 c0.4,0.2,0.4,1.9,0.4,3.3V18c0,2.1,0,3-0.4,3.1c-1.1,0.1-1.7,0.2-1.7,0.8C163.9,22.8,165.2,23.1,167.6,23.1z" class="st1"/><path d="M175.7,28.6c2.9,0,4.4-0.2,4.4-1.1c0-0.6-0.6-0.7-2.3-0.9c-0.4-0.2-0.5-1.2-0.5-3.1v-1.9c1,1,2.6,1.7,4.6,1.7 c4.2,0,7.1-3.4,7.1-8.1c0-4.6-2.6-7.5-6.1-7.5c-2.5,0-4.7,1.5-5.6,3.6c0-0.8,0-1.4,0-1.8c0-1.1-0.2-1.6-1-1.6c-0.8,0-3,0.5-4,1 c-0.4,0.2-0.6,0.5-0.6,0.8c0,0.4,0.4,0.7,1.9,0.8c0.4,0.2,0.4,2,0.4,3.2v9.7c0,2.1-0.1,3-0.4,3.1c-1.2,0.1-1.8,0.3-1.8,0.9 C171.9,28.3,173.3,28.6,175.7,28.6z M177.3,16.2c0-4.4,2.2-6.2,4.3-6.2c2.3,0,4,2.2,4,5.9c0,3.6-1.6,5.8-4.2,5.8 C179.1,21.7,177.3,20.2,177.3,16.2z" class="st1"/></g></g></svg>

However, this doesn't work in Safari: https://bugs.webkit.org/show_bug.cgi?id=199134.

What changes do you think we should make in order to solve the problem?

We have 3 options.

First, instead of showing the SVG through img tag, put the SVG directly without embedding it through img. We will add the class="logo" to the SVG tag. But this isn't enough.

Curtently, there is a code to replace all svg width and height to 16.

App/docs/assets/js/main.js

Lines 122 to 132 in fbcd7dd

	function changeSVGViewBoxGoogle() {
	// Get all inline Google SVG elements on the page
	const svgsGoogle = document.querySelectorAll('svg');
	Array.from(svgsGoogle).forEach((svg) => {
	// Set the viewBox attribute to '0 0 13 13' to make the svg fit in the mobile view
	svg.setAttribute('viewBox', '0 0 20 20');
	svg.setAttribute('height', '16');
	svg.setAttribute('width', '16');
	});
	}

It was added in #24299. All of our own SVG is shown through img and this will be the first one where we directly use the SVG. To ignore the SVG, we can add a new property like data-source="local", then update the querySelectorAll so it ignores the SVG with data-source attribute.

const svgsGoogle = document.querySelectorAll('svg:([data-source])');

Second, use object tag with img role instead of img.

<object type="image/svg+xml"
    title="Example SVG image with dark mode support"
    data="/assets/images/expensify-help.svg"
    role="img"
    style="pointer-events:none"
    class="logo"></object>

Third, prepare the SVG for both dark and light variants. Then, we will use the light variant in light mode, and dark variant in dark mode.

We can either use picture and source sets.

<picture>
    <source srcset="/assets/images/expensify-help-dark.svg" media="(prefers-color-scheme: dark)">
    <img src="/assets/images/expensify-help.svg" class="logo">
</picture>

Or programmatically change it using JS.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[rushatgabhane]

@bernhardoj do you know why using the <object> tag works? and <img> does not.

im trying to understand any regressions that might happen if we use <object>

[rushatgabhane]

in any case, your proposal LGTM! Assuming it goes external.

🎀 👀 🎀

(slack)

[melvin-bot]

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rushatgabhane]

Shawn suggested in the thread that

instead of using an tag, you would just literally paste the contents of the .svg file into the header.html document. Then that exposes the exact fill layer (which would have some kind of .class on it) that we need to modify depending on the theme.

@bernhardoj let me know what do you think