search

ONEARMY / community-platform

A platform to build useful communities that aim to tackle global problems
https://platform.onearmy.earth
MIT License
1.13k stars 381 forks source link

[feature request] Add an icon to the search bar component #3857

Open dalibormrska opened 1 week ago

dalibormrska commented 1 week ago

Is your feature request related to a problem? Please describe. The search box currently has no clear indication that it is a search box apart from the placeholder text. It might take more time for users to recognise that it is a search box. It is a standard UI design practice to have the search icon, users are used to that.

Describe the solution you'd like

image

I would be advocating here for having a search icon on the right side of the input field for easier recognition. Nowadays it is not needed to have a separate button beside, but the icon would be a great help, should be clickable, but not a must (in edge cases for example on mobile after you type and the keyboard gets buggy and does not open, it is good for the user to have the option to run the search with the button).

I don't know if the search icon is present in the codebase, I saw one in the design documentation, but it is too thick. Look at how other icons look and how are they implemented, especially the one for password input (which is quite awfully off-centered). Find a suitable icon, try to keep the size of the icon that you pick consistent with the others, eventually all of them will need a design rework later on.

image

Then this updated search component should be present in all the places where it is used (How-Tos, Research, Questions, Old map, New map).

Think about edge cases... When the icon touches the text for example...

image

Describe alternatives you've considered If you are up for deepdive into the input components and how they are used across, from a design and structure point of view, I really like the solution such as this of having one input component where you can turn on the prefix or suffix and change them. So that there can be the icon of an eye for password inputs and search icon for search box. I would not touch the textarea though, since there is another feature being worked on involving textarea adjustments.

Additional context

image
kk7188048 commented 1 week ago

can you suggest me how to see this issue?

benfurber commented 1 week ago

Hi @kk7188048, welcome! Can you say more about the guidance you're looking for?

LahuenGR commented 1 week ago

Hello hey hi! First timmer here, working on this issue ❤ pleased to help