#5492 Search account by name

[desfero]

Adds a search field to filter accounts either by name or address. Fixes #5492 (except search by token names). But default search is hidden until the user adds 5 accounts.

It may require some 🎨design 🎨 changes but that's up to maintainers.

Demo

[desfero]

Found a bug with renderScrollButton, will fix tomorrow, hold on with the review, please.

[desfero]

@Gudahtt ready for a review again

[cjeria]

Cool feature! I'd suggest adding a little more padding (8px) inside the search field (we are using a 4px spacing system for our UI - check it out here) and a search icon for better affordance.

Suggestion - I think we should add a conditional that would hide this feature if the user has less than 4 accounts. Having this feature on by default would add unnecessary clutter to this view. I would also suggest adding a switch in settings to turn in on/off (off by default though and on if > 4 accounts).

[desfero]

Hey @cjeria thanks for a review, it's already hidden until we reach a point of 5 accounts.

I will do UI changes today. But do we really need some switch to turn it off? Isn't it enough to just hide if there are fewer than 5 accounts (like we do now)?

[cjeria]

I'm just noticing you mentioned the conditional in your comment, sorry about that! Let's try this feature without the switch and we'll keep an eye out for any feedback from our users @desfero. Could also you post another screenshot when you've made those changes, please?

[desfero]

Hey @cjeria, sorry for taking so long, here is the screenshot with updated padding to 8px

Let me know if it's ok please.

[Gudahtt]

Looks good! There are a couple more changes I'd like, but nothing important (e.g. the comment in selectors.js is still unaddressed)

[Gudahtt]

Thanks! This looks good to me.

[cjeria]

Sorry for the delayed response @desfero

The new spacing definitely looks better! For added polish, I had suggested including a search icon to make it clear there's a search bar up there (see screenshot).

So my suggested improvements are:

• Add search icon (grey by default, white on focus)
• Make bottom highlight (bottom border) color to white #FFFFFF

[Gudahtt]

Hey @desfero - would you prefer one of us implement these last couple of changes? I'd be happy to finish this off if you're busy.

[desfero]

Hey @Gudahtt last week for me was quite busy with a lot of high priority work, I will try to add a search icon today or tomorrow.

[Gudahtt]

Sure, no rush! Just wanted to offer help, as I'm looking forward to seeing this merged.

[cjeria]

If it makes it any easier, we've been using free fontawesome icons in the product. Here's a link to the regular weight option if you'd like to go this route https://fontawesome.com/icons/search?style=regular

[desfero]

@cjeria I have used one that was already used somewhere else (probably token search). Here how it looks right now:

@cjeria @Gudahtt let me know if it's okay for you both :)

[cjeria]

LGTM!

[Gudahtt]

This looks great, thanks @desfero !

I've pulled out a couple of things into separate PRs (#7626 and #7628 ), and I've rebased this against develop. I think this is ready to merge now.

[whymarrh]

This is a solid addition, thanks @desfero! (And thanks @Gudahtt for jumping in as well!)