== Background
Moved from {T249299}
For reference, see Alex's prototype: https://di-community-round-2.web.app/Romania
== Acceptance criteria
=== Input box
===== Layout
{F32194620}
Current issues:
[x] height of input box should be 32px
[x] font-size for placeholder & input text should be 14px
[x] search icon is slightly too large
[x] search icon right & left padding doesn't match spec
[x] placeholder text should say "Search Wikipedia"
[x] remove invisible button at the end of the input box
{F33942066}
===== Interactivity
**Hover state**
| | correct | current
| -- | -- | -- | --
| **hover** | {F33941314} | {F33941319}
| **hover (after having focused the input field)** | (same as above) | {F33941329}
Current issues:
[] the search button is not showing when hovering (before having focused the field)
[] the search box gets less wide after it has been focused
[x] upon hover (after having focused) the search button appears "outside" of the box rather than inside
[] remove tooltip over magnifying glass icon
**Active & focus states**
The **initial** transition into the active/hover state has some slight issues. I suspect this is due to with swapping the Vue component in. Going frame-by-frame here are the issues I'm seeing:
| frame # | screenshot | issue(s)
| 1 | {F33942088} |
| 2 | {F33942089} | input text shifts right by ~5px, end of input text gets clipped slightly, search button doesn't appear immediately
| 3 | {F33942092} | blue border goes away
| 4 | {F33942093} |
Final state:
| correct | {F33941327}
| current | {F33941332}
Current issues:
[x] too much spacing around the icon
[x] icon opacity should switch to 1
[] there seems to be a slight delay in the border/outline thickening, please reference OOUI demo ([[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#demo-section-inputs | link ]])
=== Search button
Current issues:
[x] font-size should be 14px
=== Results list
===== Layout
{F33941341}
Current issues:
[x] image thumbnails are too large (41x41px), should be 36x36px
[x] rows are too tall (57px), should be 54px -- I think this will resolve itself when we reduce the size of the image thumbnails
[x] There is a bottom margin on each row that should be removed (it is a rogue style coming from Vector)
{F33947454} – https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/650180
===== Interactivity
Current issues
[x] remove text underlines when hovering a row – https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/650180
===== "Search for pages containing"
Current issues
[x] hover highlight color should be gray (same as other rows) – https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/650180
[x] text should say "Search for pages containing [x]", currently it says "containing [x]"
[x] (same issue as mentioned above with margin below row)
{F33947457} – https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/650180