Missing Label and Icon for Search Bar Component

[PR4NJ41]

What is happening?

The search bar component on many pages like explore and search Campaigns is currently lacking a text label or accompanying icon, which is essential for providing clear guidance to users regarding its purpose and functionality.

The search bar used earlier looked like this:

Currently it looks like this:

To reproduce the behavior:

• Go to https://outreachdashboard.wmflabs.org/explore
• Or go to https://outreachdashboard.wmflabs.org/campaigns

[PR4NJ41]

@ragesoss Sir, In order to fix this, should I use icon (as earlier) or add 'search' label as in article finder?

[prathamVaidya]

@PR4NJ41 Thanks for finding this out. This issue is because of changes done on articles searchbar https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5741. I didn't know search-bar class inside _article_finder.styl was reused at other search bars too. We can either separate the CSS of article searchbar or use the same changes on all the search bars.

If we choose to keep the new CSS. It'll only need removing some extra inline CSS in search_bar.jsx and adding a white svg search icon. And it will look like this :

<div className="search-bar" style={{ position: 'relative' }}>
      <input type="text" name={name} placeholder={placeholder} ref={ref} defaultValue={value} onKeyUp={onEnter}/>
      <button className="" onClick={onClickHandler}><i className="icon-search-white" /><span style={{ padding: '0 5px' }}>Search</span></button>
</div>

Also, new style also supports autocomplete UI for searchbar. @ragesoss

[PR4NJ41]

@prathamVaidya Yes, I am aware of it. I was waiting for the final confirmation from @ragesoss before making a PR.

[ragesoss]

@PR4NJ41 good catch. I think the icon like before is best.

[PR4NJ41]

@ragesoss Thanks Sir. I will fix it. Also in article finder the current design should remain intact ?

[ragesoss]

@ragesoss Thanks Sir. I will fix it. Also in article finder the current design should remain intact ?

Yes