typeahead: Make them look like dropdown widget.

[amanagr]

This attempts to change background color and text color of typeaheads to be same as dropdown widgets we have in the app.

active typeahead color was taken from https://terpimost.github.io/compose-decomposed/

Related issue - #25116

This PR is to help us get the colors we want for the typeaheads, then we can do some of the much needed cleanup work in this space.

Here is a list of all typeaheads:

• Compose box textarea with various triggers - @,#, /, ....

• Compose box topic / DM

• Message edit box

• Search (No change)

• Playground settings > Language - http://localhost:9991/#organization/playground-settings

• Profile > Mentor - http://localhost:9991/#settings/profile

• Stream settings > Add subscribers - http://localhost:9991/#channels/21/Denmark/subscribers

[alya]

Is it easy to add a commit here that would make the poll, todo, etc. explanations not be bold, so that they are styled like pronouns? I feel like that would be a clear improvement.

[alya]

Actually, similarly for "(Notify channel)" / "(Notify topic)", and playground languages. It seems like a good approach to take for all the parentheticals in these typeaheads.

If it's non-trivial, we can pull that out into a separate issue or PR.

[alya]

It's helpful to these all alongside each other!

[alya]

The purplish text looks too faded to me, but I'm happy to try it out on CZO and see what other folks think. @terpimost FYI

[alya]

I played with the PR and didn't have any other feedback.

[terpimost]

Lets please have some space between dropdown and the target control.
This should be edge to edge:

We should give 2-3px of space:

[terpimost]

If we don't have thing on the left side, why should we reserve any space for it?

[alya]

Since @terpimost's feedback is on improvements (not regressions in the current PR), addressing these points isn't a blocker for CZO deployment. @timabbott FYI

[amanagr]

Thanks for the feedback! I added 2px gap between the typeahead and the reference.

Below feedback needs to be done in a separate PR because they will be non-localized changes and I would love to do some CSS cleanup before that.

• typeahead: Make them look like dropdown widget. #30072 (comment)
• typeahead: Make them look like dropdown widget. #30072 (comment)
• typeahead: Make them look like dropdown widget. #30072 (comment)

[timabbott]

The space on the left issue noted in #30072 (comment) is the main thing that I kinda want fixed before this goes to production.

[timabbott]

Test-deploying on chat.zulip.org

[amanagr]

before	after

before	after

before	after

before	after

Okay updated to remove the extra left padding.

[alya]

Hm, I don't quite follow the last set of before/after screenshots. The idea was just to remove the blank space on the left for the typeaheads that don't have an icon there (slash commands, languages, topics).

[amanagr]

Hm, I don't quite follow the last set of before/after screenshots. The idea was just to remove the blank space on the left for the typeaheads that don't have an icon there (slash commands, languages, topics).

I updated the screenshots for last 2 to help do a proper comparison, but I reduced left padding from 20px to 10px for all the typeaheads while making sure typeaheads with user presence circle don't break. We also use the same left padding in our stream selector dropdown in compose box, so I think it will work well.

[timabbott]

Updated deployment of this on chat.zulip.org.