Improve display of connected accounts and avatars.

[duckinator]

Improve the display of Connected Accounts and avatars.

Some notes:

• If an account is not linked it'll show the generic avatar instead of nothing (Only show actually connected accounts #2196).
• Things without images: these seem to be special cased anyway (Bitcoin, Balanced), and thus don't need to be handled, as far as I know.
• Although I advocated for having the avatar be the smaller one, after trying that, the avatars proved to look horrible, so I made them the larger of the two pictures.

Closes #2154.

[chadwhitacre]

Nice! Can we tighten up the layout a bit?

1. Part of what was going on in the original mock is that the text name of the platform was right next to the logo for the platform.
2. Another thing was that the whitespace above and below the avatar was equal. The avatar was centered between the borders.
3. The platform logo is positioned such that the white circle around the logo touches the bottom border.
4. The baseline of the platform username is centered between the borders (baseline extended would run through the "x" at right)

[chadwhitacre]

Also, I don't think we should show the generic avatar for unconnected accounts. After all, it's a Gittip avatar, so it's odd to have it represent an unknown Venmo (e.g.) account. I think we should show the platform logo in the large square and drop the round img entirely for this case.

[duckinator]

@whit537 but shouldn't unconnected accounts not be shown at all, thus making it a nonissue?

[chadwhitacre]

@duckinator Currently we show them on one's own profile, with an "Add" button.

[duckinator]

@whit537 there was a bit of an issue with it covering up too much of the image. For your avatar, it'd probably cover like half of your face. :P

I tweaked it a bit (more whitespace above and below it, and moved the icon a bit further off of the avatar), but can't seem to make it look nice if I do that. Thoughts?

[clone1018]

I like it, and it works well for me, @duckinator is this ready?

[duckinator]

@clone1018 I'm still doing some CSS cleanup and such locally. Got a bit distracted by other things yesterday. :)

I'll finish it up and @mention you with a final screenshot when it's ready!

[clone1018]

Do you think you can fit in a fix for #2271 ? I started on one and then realized this PR would conflict :(

[clone1018]

This easiest fix would be removing position: absolute;

[duckinator]

I'll take a look after finishing cleaning up the slight CSS mess I have left. :)

[duckinator]

Looks like my code made that even more broken, and fixing that should also fix #2271 lol

[chadwhitacre]

@duckinator I'd still like to see the changes I mentioned at #2265 (comment). If the platform logo is too big we can shrink it a little bit, but the four points I made there still apply afaict.

[duckinator]

Sorry for kind of falling off the radar with this. Planning to rebase it off master and pick it back up later today.

[clone1018]

I can't wait!

[duckinator]

Rebased.

I have no clue why it decided to list all of the crap from master here.

Can I throw git out of a window, now?

[seanlinsley]

@duckinator what commands did you run?

[duckinator]

It would appear that I somehow managed to rebase before fetching master. DON'T EVEN KNOW.

[chadwhitacre]

IRC re: git shenanigans, ftr.

[seanlinsley]

BTW @duckinator this needs to be rebased on master. There's a merge conflict, likely because of #2307

[Changaco]

I have rebased this on master and made it look more like the original mockup.

[duckinator]

Thanks @Changaco!