"Find in Page" search bar text don't respect dark theme

[SimonBasca]

Steps to reproduce

1. Enable Dark theme
2. Visit a page
3. Open the hamburger menu -> Tap "Find in Page"

Expected behavior

• "Find in Page" search bar and text should have dark theme

Actual behavior

• "Find in Page" search bar and text have light theme

Device & build information

• Device: iPad Pro (15.4)
• Build version: 101.1 (10346)

Notes

Attachments:

┆Issue is synchronized with this Jira Task

[data-sync-user]

➤ Tiffanie Shakespeare commented:

Removing needs ux label. Agree all our components should match the theme set.

[github-actions[bot]]

This issue has been automatically marked as stale. Has the issue been fixed, or does it still require the community's attention? Please leave any comment to keep this issue opened. It will be closed automatically if no further update occurs in the next 30 days. Thank you for your contributions!

[lime124]

still an issue

[data-sync-user]

➤ Norberto Andres Furlan commented:

Alexandru Farcasanu can you take a look to this one?

[data-sync-user]

➤ Alexandru Farcasanu commented:

Norberto Andres Furlan based on this (https://mozilla-hub.atlassian.net/browse/FXIOS-5534 ( https://mozilla-hub.atlassian.net/browse/FXIOS-5534|smart-link )) and my investigations for this issue, seems to work fine.

I can’t see unexpected results… or maybe I am wrong? 🤔

!Simulator Screenshot - iPhone 15 Pro Max - 2024-03-19 at 13.34.38.png|width=1290,height=2796!

!Simulator Screenshot - iPhone 15 Pro Max - 2024-03-19 at 13.34.11.png|width=1290,height=2796!

Tested on main branch.

[lime124]

For some reason I'm not seeing your screenshot Alexandru. This is what I see on my iphone. In dark theme I wouldn't expect this bright white bar and the contrast between the white bar background and the number count is very low. I'll reach out to design systems for help.

[data-sync-user]

➤ Norberto Andres Furlan commented:

I agree with Tiffanie Shakespeare. For example, in Chrome, it takes the color of the keyboard. Can we do something similar Alexandru Farcasanu ?

Light Mode:

!IMG_5879.PNG|width=25%!

Dark Mode:

!IMG_5878.PNG|width=25%!

[data-sync-user]

➤ Norberto Andres Furlan commented:

Alexandru Farcasanu we will get the color codes for you soon. Lets pause it until we have them. Thanks!

[cwzilla]

Hi, design systems here :)

Could we apply the following tokens to the find in page bar?

• Border: borderPrimary
• Background: layer1
• Search text: textPrimary
• findings #: textSecondary
• Up, down, close icons: iconPrimary
• If up/down icons are disabled, use iconDisabled

Here is a Figma file for UI reference. Thanks!

[dicarobinho]

@cwzilla sure. I will be back with updates!

Here are the updates!

[cwzilla]

@dicarobinho Looks great! Thank you so much.

[data-sync-user]

➤ Andrei Bodea commented:

Verified as fixed on v9000 (40444) with iPhone 15 Pro (17.3).

[data-sync-user]

➤ Andrei Bodea commented:

Verified as fixed on v125 (40470) with iPhone 15 Pro (17.3).