Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Login/register view improvements #1752

Merged
merged 3 commits into from Jul 22, 2020

Conversation

dennisreimann
Copy link
Member

@dennisreimann dennisreimann commented Jul 17, 2020

Continuation for #1712 – also addresses #1710.

Consistently aligned the texts centered and moved the Tor URL button below the form. I went with a button with a light outline, because copying the URL is a button action rather than a link.

ping @pavlenex @dstrukt

light

dark

This is what the buttons looks like highlighted.

button

Consistently aligned the texts centered and moved the Tor URL button below the form.
@pavlenex
Copy link
Contributor

pavlenex commented Jul 17, 2020

Good idea about the button coloring, less focused and better. 👍

We still need to clean up bottom section. It's BTCPay Server not BTCPAYSERVER SUPPORTERS and that tooltip makes no sense to me anymore.

@dstrukt What's your view on:

  • Tor Button (position and colors)
  • Supporters section, how can we clean it up
  • We really need to change that font and perhaps iron out the text, the font looks really bad imo.

@dennisreimann
Copy link
Member Author

dennisreimann commented Jul 17, 2020

This is what it'd look like using our default font Open Sans.

login

@Kukks
Copy link
Member

Kukks commented Jul 18, 2020

@dennisreimann
Copy link
Member Author

dennisreimann commented Jul 18, 2020

@Kukks I agree as it would also be a better position in regards to the reading and action flow, because you'd want to switch to Tor before maybe filling out the form and finding the button below.

I'd make it a small button and leave out the border then, to make it not too prominent though (see bordered version below). I think I like this best.

Sidenote: These screenshots also contain the non-uppercased version of the headline, so that we can discuss this too.

nb-dark

nb-light

Highlighted:

highlighted


Alternativ: Button with border (not as good imho)

login

@NicolasDorier
Copy link
Contributor

NicolasDorier commented Jul 18, 2020

fuck

image

@dennisreimann
Copy link
Member Author

dennisreimann commented Jul 18, 2020

@NicolasDorier Pardon, sir?

@pavlenex
Copy link
Contributor

pavlenex commented Jul 18, 2020

Draft is dorieryolomerge protection mechanism. 😄

@dennisreimann
Copy link
Member Author

dennisreimann commented Jul 18, 2020

Yes, we learned our lessons here 😂

@pavlenex
Copy link
Contributor

pavlenex commented Jul 18, 2020

@dennisreimann Can you push latest changes to the PR?
I like first two examples you mentioned here and would like to preview them in dev env to get a better feeling.

One note from viewing the screenshots:

  • If we're okay with Tor button in the top right of the form, I'd center align the "don't have an account" and "sign up" button as well as `forgot your password link" to make it consistent with the layout we have.

@dennisreimann
Copy link
Member Author

dennisreimann commented Jul 18, 2020

@pavlenex I can push this later today, wanted to wait for @dstrukt's feedback to get to something that's almost final ;)

@dennisreimann
Copy link
Member Author

dennisreimann commented Jul 18, 2020

Here's the centered version. I'd also propose making the supporter logos a tad bit smaller (60 vs. 75 px height), because otherwise they weigh too heavy imho. Don't know if that's ok though?!

centered

@Zaxounette
Copy link
Member

Zaxounette commented Jul 18, 2020

I haven't seen anyone comment on this particular part in either of the issues or this PR, so i'll go with it:

The Is Administrator checkbox on the Create Account page.

If I recall correctly, the very first account created after server setup is automatically an admin and for futur administrators, the first Admin can create the accounts in Server Settings, So why the checkbox ?

Am I missing something ?

@dstrukt
Copy link
Member

dstrukt commented Jul 19, 2020

Sorry, I'm always lagging behind a bit, busy week -- not sure where you guys find the time!


@Zaxounette The "is Admin" is only on this mock AFAIA, it's not seen by your average person.


Suggestions:

  • Remove the green dash above and below. It's not add much in terms of visual division, it's just adding noise (imo) and unnecessary height to the view, if we're trying to conserve space.

  • Change "BTCPay Server Supporters" to "Our Supporters" ..it's cleaner, we already know the product is from the title, no need to be redundant.

  • Reduce the wording for the "Don't have an account?" and "Login" bits (refer to mock)

  • The borders around and in the form elements are too dark (will edit to provide colors). It makes the elements look a bit "aged", less modern -- if we keep them.

  • Needs more padding (we're using a spacing system, correct? I would double it) between the sponsor product logo and the title of the sponsor company.

  • Reduce the logos to 50 x 50px (or 48 x 48 .. not sure what sizing system we're working with, mine are 50 in the mock), and add more spacing in between them so that the entire component stays centered. They're currently too large.

  • View all supporters should probably be a green link or at least green on hover.


Opinions:

  • The copy Tor URL button looks better without the outline. I understand that there is an action behind this without that additional visual information, and it's a fairly common pattern. You can make the cursor a pointer element, and could even change the text to "Copied URL" when pressed to indicate button action.

  • Similarly, the "sign up" button could easily be a text link on the create account page. That's a very common pattern and would actually look better (imo) and cleaner.

  • I know we also list the description in both views, but does it make sense to keep it in the Login view? If the user has signed up and created the account they probably already have an idea of what this product is...unless we're trying to beat it into their head.


I started to mock up the login page last night and update the sign up screen to show a really clean view, but it's been a busy week and I'm not 100% done incorporating everything -- the Tor element is an outlier.

This is WIP, revisiting a few things today, but I hope my suggestions can help push some of this further.

Login01

Login02

Signup01

Signup02

@pavlenex
Copy link
Contributor

pavlenex commented Jul 19, 2020

@Zaxounette that is only for dev env.
Spot on feedback as always @dstrukt 🔥 I agree with everything pointed out, way cleaner, except for 5 supporters. We currently have 6 and can't really limit it to a fixed number.

@pavlenex pavlenex added this to In progress in 0.08 Miles-stone Jul 19, 2020
@dennisreimann
Copy link
Member Author

dennisreimann commented Jul 19, 2020

Updated and pushed.

Login

login-light

login-dark

Register

register-light

register-dark

Error pages

Also adapted them, as they are using the same layout.

error-light

error-dark

@pavlenex
Copy link
Contributor

pavlenex commented Jul 20, 2020

tACK 🚀

@dstrukt
Copy link
Member

dstrukt commented Jul 20, 2020

Damn, this is looking great @dennisreimann! Nice work!

Only small nit-picky things from me would be:

  • the left and right padding around the form element
  • the text under the main CTA (signup, etc..) for the secondary action is a bit small, might want to step it up to an equivalent value (from 14pt to 16pt?)

Otherwise, looks good to me, excited to see this live!

Might have some additional nit-picky things then too :)

@dennisreimann dennisreimann mentioned this pull request Jul 20, 2020
@dennisreimann
Copy link
Member Author

dennisreimann commented Jul 20, 2020

Thanks for the feedback – done :)

So fresh, so nice :D

register

login

@dennisreimann dennisreimann marked this pull request as ready for review Jul 20, 2020
@dennisreimann
Copy link
Member Author

dennisreimann commented Jul 21, 2020

@NicolasDorier It's all yours now, smash that button 😆

@bolatovumar
Copy link
Contributor

bolatovumar commented Jul 22, 2020

Tested it locally on my end and looks good.

@NicolasDorier
Copy link
Contributor

NicolasDorier commented Jul 22, 2020

FINALLY

@NicolasDorier NicolasDorier merged commit ca8d830 into btcpayserver:master Jul 22, 2020
3 checks passed
0.08 Miles-stone automation moved this from In progress to Done Jul 22, 2020
@pavlenex pavlenex mentioned this pull request Jul 22, 2020
@dennisreimann dennisreimann deleted the login branch Jul 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

7 participants