Find in page search bar buttons not visible

[sv-ohorvath]

Steps to reproduce

1. Switch to light-theme
2. Open a webpage
3. Open main menu>Find in page
4. Observe the buttons on the right: next/prev/close
5. Switch to the dark theme. Repeat the same steps.

Expected behavior

next/prev/close buttons are visible.

Actual behavior

next/prev/close buttons are not visible.

Device information

• Android device: Pixel 2, Android 9
• Focus version: Nightly 10/14, v94 Beta-1

[mcarare]

Actually, it seems the buttons are not visible in the dark theme either.

[channingcarter]

@Kate-Galetski Is this something you can work on?

[Kate-Galetski]

@brampitoyo

[brampitoyo]

@channingcarter I can unblock @Kate-Galetski on this issue.

@mcarare @sv-ohorvath There seems to be two separate issues here:

1. On Light Theme, the “Find in Page” UI is shown with a Dark Theme background – and vice versa.
   • Solution: match the background colour of the “Find in Page” UI with the background colour of toolbar, on both themes.
2. The previous (▲), next (▼), and close (✕) symbols are not coloured correctly
   • Solution: match the colour of the icons in this UI, to the colour of all other icons we use within the app

See table below, and note that many of the values are identical to what we already use elsewhere. Let’s try to avoid duplication as much as possible.

	Light Theme	Dark Theme
Background	Current: #000000 Proposed: Violet 05	Current: #ffffff Proposed: Ink 60
Text colour and icon fill
primary	Current: #ffffff Proposed: Ink 50	Current: #000000 Proposed: Light Grey 05
secondary E.g. the text ‘Find in page’ before you type anything	Current: #ffffff Proposed: Dark Grey 05	Current: #000000 Proposed: Light Grey 50
disabled E.g. ▲ ▼ icons if they cannot be selected	Current: ? Proposed: primary @ 40% opacity	Current: Current: ? Proposed: primary @ 40% opacity

[mcarare]

@brampitoyo The colors for icons, text, background are already fixed.
I am going to add the color for the hint and see if there is any way to change the tint for the disabled-buttons.
As a note, we do not do that in Fenix, the 0/0 colored in red is the current indicator that there are no results.

L.E.: If we still want to change the color of the buttons when no results are available we would need changes in AC.
Leaving this for @brampitoyo to decide on.

[brampitoyo]

@mcarare I’m OK with leaving the current behaviour for “no results” as is. Let’s not change that. Thanks for the heads up about this, and for fixing all the other colours!

[lobontiumira]

Verified as fixed on the latest debug build from main from 10/20 (build 11 GV 95.0a1-20211007091917), and on Beta 94.0.0-beta.2 (build 352922038 GV 94.0-20211017185800) with Lenovo Tab M10 (Android 10), and Sony Xperia Z5 Premium (Android 7.1.1).