Design of disconnect buttons

[zbynekwinkler]

How did we end up with this?

Does anyone else think those disconnect buttons are ugly?

[chadwhitacre]

@zwn Yes, that's ugly. I decided not to hold up #1976 further, since we're changing the design of that section in #2053 anyway. Here's a screenshot from #2053 (comment) :

[Changaco]

How did we end up with this?

I had to change them because what you had done wasn't displaying correctly when I tested it.

Yes, that's ugly. I decided not to hold up #1976 further, since we're changing the design of that section in #2053 anyway.

It's also the reason I didn't try to make #1976 look better in the first place.

[seanlinsley]

I think this is sufficiently resolved by #2053, so I'm closing this ticket to lower the ticket clutter.

[chadwhitacre]

Reopening because #2053 is way too big. We need smaller bites.

IRC cc: @ESWAT

[chadwhitacre]

Things we want here that are also on #2053 and the screenshot above:

• horizontal lines instead of vertical
• add/remove knobs on the right instead of left, and appropriately sized

Things that are on #2053 and the above screenshot that we don't want:

• grouping -- too complicated, we'll do that later
• loss of avatar imgs on account elsewhere profiles
• changes to UX for Balanced and Bitcoin items -- again, we'll tackle that later

[ESWAT]

Cool. Assigned and I’ll take a look soon.

[chadwhitacre]

Awesome, thanks @ESWAT. :-)

[ESWAT]

Questions:

1. Should the Credit Card & Bank Account links be separated like in coinbase or should we keep the existing look?
2. Not sure what you mean by this: add/remove knobs on the right instead of left, and appropriately sized

[chadwhitacre]

@ESWAT

Should the Credit Card & Bank Account links be separated like in coinbase or should we keep the existing look?

Keep existing. That's what I meant by "changes to UX for Balanced and Bitcoin items -- again, we'll tackle that later."

Not sure what you mean by this: add/remove knobs on the right instead of left, and appropriately sized

Basically, something more like #2103 (comment) than #2103 (comment). Zat help?

[ESWAT]

Cool, makes sense. This is what I have now. Just need to make some tweaks in the responsive views of it…

[chadwhitacre]

@ESWAT Looking good. Couple points ...

Can we make the avatar images bigger? I think they're hard to see when they're that small.

With that, I guess we move "TWITTER" to the right of the bigger avatar? In which case should it go back underneath "INFILEXFIL (INFIL / EXFIL)"?

[ESWAT]

Yeah, originally tried putting the avatars beside both.

Using the original avatar size, it didn’t seem balanced, so scrapped that…

This looks a little better but less room for text and it just looks a bit weird to me.

I’m more impartial to the original solution because of the tighter association between the avatar and the username but I can see why the bigger avatar is more appealing.

Any further thoughts? If there’s a strong opinion of using the bigger avatar I’ll use the second solution.

[chadwhitacre]

Hmm ... or do we shrink and overlay the platform icon in the connected case? Something like ...

[seanlinsley]

😍 I like your suggestion @whit537

[ESWAT]

Hmm, I love that idea! The circular badge fits well with the gittip logo too. I’ll explore this further.

[chadwhitacre]

:-)

And then in the disconnected case we drop the None and simply have TWITTER, GITHUB, etc. middle-aligned, with the larger square GitHub logo occupying the space that the avatar occupies in the connected case.

[chadwhitacre]

@ESWAT Though, honestly, #2103 (comment) is enough of a win that we should probably make a PR for that stage of the game and get that reviewed, merged and deployed. Then we can do #2103 (comment) in a separate PR.

Chew your food 32 times! Small, digestible PRs for the win! :-)

[ESWAT]

Closing this and making a new Issue to improve the Account + Avatar section, per @whit537’s comment.