-
Notifications
You must be signed in to change notification settings - Fork 155
Refine the auth design; clean up the layout and styles there #1240
Refine the auth design; clean up the layout and styles there #1240
Conversation
falseresync
commented
Jul 22, 2023
- Cleaner, more hierarchical design
- The SSO buttons are more slick and far more accessible: colorful buttons might have been pretty, but also pretty hard to read, and quite distracting
- Fixed the layout of "Forgot password?" link
- Fixed several typos
- Removed a lot of dead styles
- Restructured the layout a bit to get rid of some unnecessary nesting
- Made use of iconified inputs everywhere
Overall, I really like it, but I'd probably change the second heading to "Sign in with a password". The "or" is kinda implied by it being a second heading and "manually" doesn't really make sense for describing signing in with a password instead of third party auth |
Also, spacing above the continue button should be the same as between the text fields, and I'd right-top-align the "Forgot password?" text. |
alsooo, I'd make the space below the header smaller than the space above it, to group it with the options it corresponds to. |
I actually did the spacing around all continue buttons like that on purpose, and perhaps not right-top align, but right-middle; I like the or, it feels like a more continuous leaflet, or a sentence that you kind of unwrap block by block |
If you're creating an account the third party options don't need to be shown anymore since they're irrelevant. I just still don't like the awkward larger space above the Continue, feels like it's splitting off from the form it should be attached to, and the vertically centered "Forgot password" thing seems kinda tossed in there without any real intention, which is why I'd suggest top-right aligning it below the password field. The main reason I don't like the "or" is it feels really weird to start a heading off with a lowercase, and it's just really redundant. It made sense when it was stylized as a divider but not when you just have two headings. |
I'm still not sure why y'all insist on using one column layout when you can just have two — one for providers, and the other one for manual sign in / sign up (or vice versa). |
It’s easier to code
I have figured that, but I left everything that was in the layout, and didn’t touch the code much either
I if there’s no space, then right alignment would make sense, I see that; I have put the space there to split it up intentionally. Mostly to split it up from whatever’s below it The “or” thing could be just a matter of taste really, but it makes some sense given that “Continue with” is also a broken-off part of sentence. To be completely consistent that could be replaced with “Sign in with SSO” or similar |
I wouldn't use SSO on the frontend because I don't think most people would know what that means, but yeah |
Also, in most of modrinth, the main action button is on the right side. It's weird that it's on the left in this case. I think the continue/ forget password should be swapped. I also think there should be space between the two options instead of squished together |
PS should i leave the devtools in? I've tried to (unsuccessfully) locate the memory leak |
Looks great to me, my only problem is the account creation page should not have the SSO buttons |
I think that many users, even developers, won't immediately recognize that they don't have to create an account manually. I think these should remain on the Sign Up page as well |
Imo the continue button looks weird being that wide. Also the sign in button not being consistent. (Not sure why the action buttons are on the left when it's pretty standard to put them on the right) |
…ine-auth-design # Conflicts: # pages/auth.vue # pages/auth/sign-up.vue # pages/auth/welcome.vue