1831287 - [Unified Search] Search button color contrast should be increased in private browsing mode for the difference to be visible

Status: VERIFIED FIXED

(Firefox for Android :: Search, enhancement, P2)

Description

[Lorand Janos]

Attachment: asb.jpeg

Steps to reproduce

1. Open the app and go to Private Browsing.
2. Check the Search button.

Expected behavior

The color contrast of the Search button is visible compared to the search/address bar. There is a frame around the button like it is in normal browsing.

Actual behavior

The color contrast is not visible. No frame is visible.

Device information

• Firefox version: Nightly 114.0a1
• Android device model: Google Pixel 7
• Android OS version: 13

Any additional information?

Comment 1

[Lorand Janos]

Attachment: InkedImage_LI.jpg

Comment 2

[Lorand Janos]

Attachment: Inkedsb_LI.jpg

Comment 3

[Verdi [:verdi] Best to slack me]

The button background in private mode should use 'layer 2' like it does in light and dark mode. Private layer 2 = #291D4F https://www.figma.com/file/pEyGeE4KV5ytYHeXMfLcEr/Mobile-Styles?type=design&node-id=1637%3A23964&t=Jreb42RUNIUpqS4A-1

Comment 4

[Chris Peterson [:cpeterson]]

This bug is not a blocker for Unified Search MVP, but it would be nice to fix.

Comment 5

[BMO Github Automation]

Attachment: [mozilla-mobile/firefox-android] Bug 1831287 - Adjust private mode searchbar color (#2062)

Comment 6

[Vlad Dreghici [:vdreghici]]

(In reply to Verdi [:verdi] Best to slack me from comment #3)

The button background in private mode should use 'layer 2' like it does in light and dark mode. Private layer 2 = #291D4F https://www.figma.com/file/pEyGeE4KV5ytYHeXMfLcEr/Mobile-Styles?type=design&node-id=1637%3A23964&t=Jreb42RUNIUpqS4A-1

According to the figma doc provided here, the Private layer 2 was correctly set to #291D4F (Ink50). The actual issue is with the layer 3, which in the doc is #1D1133 (Ink90) but in the actual code is set to #291D4F (Ink50). I have added a PR that changes the color of layer 3 to the correct one from the figma design. Let me know if this is ok from UX perspective. Thanks!

Comment 7

[cwong]

(In reply to Vlad Dreghici [:vdreghici] from comment #6)

(In reply to Verdi [:verdi] Best to slack me from comment #3)

The button background in private mode should use 'layer 2' like it does in light and dark mode. Private layer 2 = #291D4F https://www.figma.com/file/pEyGeE4KV5ytYHeXMfLcEr/Mobile-Styles?type=design&node-id=1637%3A23964&t=Jreb42RUNIUpqS4A-1

According to the figma doc provided here, the Private layer 2 was correctly set to #291D4F (Ink50). The actual issue is with the layer 3, which in the doc is #1D1133 (Ink90) but in the actual code is set to #291D4F (Ink50). I have added a PR that changes the color of layer 3 to the correct one from the figma design. Let me know if this is ok from UX perspective. Thanks!

Hi, design systems/UX here. Please update Layer 3 to #1D1133 (Ink90). Thank you!

Comment 8

[BMO Github Automation]

Authored by https://github.com/DreVla
https://github.com/mozilla-mobile/firefox-android/commit/a7acd0094b9320dffe6f89387b246b09a83e7efb
[main] Bug 1831287 - Update Private Mode color scheme

Comment 9

[Lorand Janos]

Verified as fixed on the latest Nightly 115.0a1 (2023-05-22) build.
The color contrast between the Search button and the search/address bar is visible in private browsing mode.
Device used: Google Pixel 7 (Android 14)
Marking as verified for 115.

Comment 10

[Lorand Janos]

Attachment: Screenshot_20230522-101559.png