UI Issue - Add bank account

[DomiiBunn]

When wanting to add multiple bank accounts the UI toast confirming the account add covers the add button thus slowing the users interaction with the app.

As a sugestion move the toast down (might look bad)

Move the add account button into the account section (will look better)

[zachgoll]

@justinfar any thoughts on this? I've also noticed the same—we've got a lot of controls sitting in the top-right corner of the app, which is also where the toast shows.

[DomiiBunn]

I think that bottom right might look ok and not cover anything of importance

[justinfar]

Not totally opposed to moving the notification to the bottom right, but it may be occupied by a chat bubble which we'll use for customer support (i.e in the previous version of the app we were using Intercom which occupied that space)

A counter suggestion to this would probably be to add a shortcut (i.e N) for common actions which in this case would be adding a New account.

Sidenote, the toast that's shown in the screenshot looks to be a bit off spec (fixed height and not horizontally aligned )

[zachgoll]

Yeah that's a good point about Intercom—I'd imagine we'll have something like that for the hosted version and we definitely don't want to be flashing notifications there. And I agree that keyboard shortcuts will be a huge benefit and for many users, the preferred way to do things quickly.

That said, is there a reason we can't put them in the top-middle / bottom-middle? That generally wouldn't block anything, but may violate design principles (I'm not very good in that area).

Ultimately, not a huge deal either way and we'll get that vertical spacing fixed in the UI.

[zachgoll]

Another option—what if instead of that auto-progress indicator, we just put an "X" so the user can close it on-demand? It would still automatically disappear after 3-5 seconds.

[justinfar]

Top middle wouldn't be such a bad idea (although I'd rather have notifications be something that doesn't take up the middle portion of the screen and reserve that only for UI since there may be fixed elements within the main container). Another thing is that the main part of the UI is offset from the left, so having something that's centred (and not offset) will feel a bit off.

Bottom middle has the same issue, in that we use that space for the bulk action bar

I'm more inclined to keeping it in the same space top right region, introducing an "x" so it can be closed and then we can follow up with adding shortcuts across the app at some point so that actions feel faster

Similar to something like this:

wdyt?

CleanShot.2024-06-19.at.15.24.22.mp4

[zachgoll]

Yeah that makes sense about the centering looking weird since we've got the sidebar.

I like your solution here!

[zachgoll]

This is being tracked and implemented here, so closing out:

#890