Improve search bar UI in stream topic view

[alya]

trafficstars

We should make a couple of small improvements to the search bar for topics in the stream topic view:

1. Change the placeholder text to "Search topics" for clarity.
2. Bump up the contrast on the placeholder text, which is quite difficult to see right now

[AlaaElden98]

Hi @natalson, Sorry I didn't notice your comment and I worked on the first part of this issue, you can work on the second part and if you need any help please ask. One more thing, don't wait until someone assigns you, claim the issue and start working on it. Again I'm sorry, I should have checked the comment section before working on this.

[anishwar-007]

Is there any way ,i can work on this issue?

[Jumeb]

I would like to try out this task.

[AlaaElden98]

@alya

2. Bump up the contrast on the placeholder text, which is quite difficult to see right now

I see that we use placeholderTextColor={HALF_COLOR} and HALF_COLOR = 'hsla(0, 0%, 50%, 0.5)'; I have 2 questions here : 1- Do we need to bump up the contrast on the placeholder text of all search placeholders, or only the one in the topic list? 2- By 'Bump up the contrast' do you mean to make it more obvious by increasing color darkness?

I have made some changes (see screenshots below), if this is what we want I will open a PR.

The original Edit 1 : color = 'hsla(0, 0%, 50%, 0.75) Edit 2 : color = 'hsla(0, 0%, 50%, 1)

[alya]

1. Good question! I think it should be consistent with the placeholder in Search, and perhaps others are too low-contrast as well.
2. Yes, for light mode. We'd go in the other direction for dark mode.

Could you please do the following?

1. Post screenshots showing more of the surrounding context, and showing both light mode and dark mode.
2. Do the above for all the placeholders you think we should consider changing.

The first edit or something around there seems promising, but it's hard to tell without being able to see more of the surrounding text. Thanks!

[AlaaElden98]

1- The changes I made are within the Input component, this means that the placeholder for every place we use Input will change (Compose box, search input, user name, and password inputs, etc).

2 - Screenshots before and after the changes in most places we use Input :

• Search - light mode

Dark mode

• Search topics - light mode

Dark mode

• Compose box

[alya]

Awesome, this is super helpful @AlaaElden98 ! I think both of the new versions (light and dark) look pretty good in all the contexts above. Please ago ahead and submit a PR.

[ArchitJain1201]

@alya Can you assign me this issue ?

[rutujapate]

@alya can you assign this issue to me

[alya]

@rutujapate Please start by reviewing the attached PR and commenting on whether it looks good or if any changes should be made.

[aritroCoder]

Hello I want to contribute in this issue, but I am having a issue while trying to do yarn install it says

$ bash tools/postinstall
node_modules/.bin/jetify: 12: node: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Can you suggest how to fix this? I have also tried yarn install --force but result was same

[alya]

@aritroCoder Please ask for help in the #mobile-team stream in the Zulip development community.

[codewithbharat]

@alya is this issue still open..... If's yes I would like to work on it.