Style and UX fixes for push UI

[helen]

Description of the Change

Polishing style and UX bits for the push UI after adding Select All button.

I currently have 3 things left on my list of nice-to-have items for this PR:

• Better no search results state (currently shows empty box with collapsed border, should probably show a "No results" item in the box)
• Show the number of selected connections - this needs i18n consideration in whatever string, easier to just put the count in parens rather than trying to pluralize
• Add some kind of subtle indicator that a list can be scrolled, this tripped me up a few times. Example Can't use this method due to background colors, haven't found anything else, skipping for now

Before

After

Alternate Designs

n/a

Benefits

A UI that's easier to understand.

Possible Drawbacks

Not sure.

Verification Process

Local testing with various states (search, selection, distributed, clearing). I also tested keyboard nav which looks fine to me.

Checklist:

• I have read the CONTRIBUTING document.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests passed.

Applicable Issues

Fixes #577

Changelog Entry

Needs.

[helen]

New no results state:

[helen]

I'm going to leave the selected connections count for another issue/PR another day, this is ready for secondary review and merge.

[dkotter]

@helen Tested this out and this looks really good to me, definitely better then what we currently have. Did have a few comments though:

For me, the Clear link doesn't line up with the Selected Connections text:

This is more just my opinion but if you click the Select All button, wondering if we should disable that button, as clicking it again won't do anything at that point. At the moment, the button looks the same in both states:

[helen]

@dkotter Which browser are you using, and is this in the admin or on the front end? I've been checking in both Firefox and Chrome on Mac, not sure if maybe there are other factors that could be impacting this as well, since I noticed that themes on the front end can impact the CSS here. I notice your buttons are tall as well.

As for disabling the Select All button, I am not opposed to it, I just don't know if it will end up being distracting turning on and off as you filter/search for connections? It doesn't seem harmful to leave it just not doing anything, but I can certainly try it and see how it feels locally.

[dkotter]

I tested in the latest version of Chrome and Firefox (in the admin) and I see the same in both.

If I turn off the min-height and vertical-align styles, things look better to me:

Seems like those are core styles but maybe I have some other conflict here. I didn't see one at a quick glance but it's possible.

[helen]

Changing the vertical alignment led to some other issues for me but removing the min-height seems to have worked out for me in the admin, so I pushed a change for that. One more look and then let's merge?

[dkotter]

👍 That fixed it, looks good for me now