Return to Question

I managed to create a usable screen to manage credentials. It's a bit tricky, because users can set login/password pair, as well as Facebook. However, a user could have just facebook, just login/pass, or both (all linked to the same account).

Here is what it looks like when both user/pass pair and Facebook are linked:

Here is what it looks like when login/pass are linked, but Facebook isn't:

Here is what it looks like when only Facebook is linked:

The screens are "usable" (meaning that they pass some rather strict usability tests I ran this morning) mainly thanks to @plainclothes who gave some important feedback. However... now that usability is done, I really want this form to look pretty.

I think the main issue is that it needs separation for the three different sections. if I use <hr>s, they get confused with the input fields. And I could't find anything in material that would tell me how to face this.

Ideas will be amazingly welcome. I have no aesthetic taste...

I managed to create a usable screen to manage credentials. It's a bit tricky, because users can set login/password pair, as well as Facebook. However, a user could have just facebook, just login/pass, or both (all linked to the same account).

Here is what it looks like when both user/pass pair and Facebook are linked:

Here is what it looks like when login/pass are linked, but Facebook isn't:

Here is what it looks like when only Facebook is linked:

The screens are "usable" (meaning that they pass some rather strict usability tests I ran this morning) mainly thanks to @plainclothes who gave some important feedback. However... now that usability is done, I really want this form to look pretty.

I think the main issue is that it needs separation for the three different sections. if I use <hr>s, they get confused with the input fields. And I could't find anything in material that would tell me how to face this.

Ideas will be amazingly welcome. I have no aesthetic taste...