== Background
The mobile search overlay, in particular the image placeholder is not friendly with night mode. Given our work making Codex night mode friendly rather than revising the code to make it work in night mode, I think it is a good idea to align our designs for desktop and mobile a little more.
~~Rather than re-implementing the whole thing in mobile, I think it would be a good idea to revise the existing PageList markup to use Codex.~~
== User story
As a user on mobile I want a working consistent search experience with the desktop site that works in night mode.
== Requirements
[] When an article has no image the placeholder should be visible in both light and night themes.
[] The article search icon should be visible (currently not shown at all)
[] resources/mobile.pagesummary.styles/noimage.svg should be removed in favor of a Codex icon `image`
[] The designer should be happy with the alignment of icons
[] The search icon should not change color when focused (context: T356822#9614063)
[] The search in pages icon should be replaced with codex icon `articlesSearch`
~~[] The codex search bar `iconbuttonOnly` variant should be used~~
[] Inner shadow effects should be replaced with bottom borders
[] Overlay component colours should use codex design tokens
== BDD
```
Feature: Enhance Search Overlay with Proper Visuals and Functionality
Scenario: Display placeholder in search overlay for articles without images
Given the user is performing a search on Wikipedia
When the search overlay appears
And the article in the search results does not have an image
Then a placeholder image should be visible in both light and night themes for that article
Scenario: Ensure visibility of the article search icon in the search field
Given the user is on any Wikipedia page with a search field
When the user focuses on the search field
Then the search icon should be consistently visible
Scenario: Replace noimage.svg with a codex icon in search results
Given the user has initiated a search and results are displayed
When an article without an image appears in the results
Then the noimage.svg placeholder should be replaced with a codex icon image in the search overlay
Scenario: Maintain search icon color on focus
Given the user has clicked into the search field on Wikipedia
When the search field is in focus
Then the color of the search icon should not change
Scenario: Replace 'search in pages' icon with 'articlesSearch' Codex icon
Given the user is using the search functionality on Wikipedia
When the search overlay is active
Then the 'search in pages' icon should be replaced with the 'articlesSearch' Codex icon in the overlay
Scenario: Update search overlay icons to be properly aligned
Given new icons are used in the search overlay
When the search overlay is displayed
Then all icons should be properly aligned as per the design specifications
Scenario: Replace inner shadow effects with bottom borders in search overlay
Given the search overlay is visible
When the user examines the overlay elements
Then inner shadows should be replaced with bottom borders
Scenario: Use codex design tokens for overlay component colors
Given the search overlay is active
When the overlay is displayed
Then all overlay component colors should utilize codex design tokens
```
== Test Steps
__Test Case 1: Placeholder Visibility in Search Overlay__
Open the Wikipedia search and type a query that includes articles known to lack images.
**AC1:** Confirm that a placeholder image is visible for each article without images in light theme.
Switch to night theme and perform the same search.
**AC2:** Confirm the same placeholder is still visible in the search overlay for each article without images.
__Test Case 2: Article Search Icon Visibility__
Access any Wikipedia page that includes a search field.
**AC3:** Ensure the article search icon is visible when the search field is focused.
__Test Case 3: Replace noimage.svg with Codex Icon__
Perform a search to generate results that include articles without images.
**AC4:** Verify that in the search overlay, the `noimage.svg` is replaced with a Codex icon for articles without images.
__Test Case 4: Maintain Search Icon Color on Focus__
Click into the search field at the top of any Wikipedia page.
**AC5:** Check that the color of the search icon does not change upon being focused.
__Test Case 5: Replace 'Search in Pages' Icon__
Use the search field on Wikipedia to perform a search.
**AC6:** Confirm that the 'search in pages' icon in the search overlay is replaced with the 'articlesSearch' Codex icon.
__Test Case 6: Proper Alignment of Icons in Search Overlay__
Trigger the search overlay by performing a search.
**AC7:** Inspect the alignment of all icons within the overlay, including search and placeholder icons, ensuring they are aligned properly as per design specifications.
__Test Case 7: Inner Shadow Effects Replaced with Bottom Borders__
Activate the search overlay by using the search function.
**AC8:** Confirm that all UI elements that previously had inner shadow effects now feature bottom borders.
__Test Case 8: Codex Design Tokens for Overlay Component Colors__
Engage the search overlay through a search action.
**AC9:** Ensure that the colors of all overlay components utilize Codex design tokens, reflecting the updated design standards.
== Design
# Current experience
{F43054594}{F42301932}
# Proposed experience
{F43449858} {F43679974}
[[ https://www.figma.com/file/Og4IQcJIjIwedsEL1L0O4u/night-mode-minerva-search?type=design&node-id=0%3A1&mode=dev | Dev-mode Figma file for inspecting colours
]]
== Acceptance criteria
- [] resources/mobile.pagesummary.styles/noimage.svg should be removed in favor of a Codex icon `image`
- [] Colours match design spec
- [] no colour contrast errors
== Communication criteria - does this need an announcement or discussion?
- Add communication criteria