Skip to content
This repository has been archived by the owner on Aug 3, 2024. It is now read-only.

Refine the auth design; clean up the layout and styles there #1240

Merged
merged 7 commits into from
Aug 18, 2023

Conversation

falseresync
Copy link
Contributor

  • 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

pages/auth/sign-in.vue Outdated Show resolved Hide resolved
@falseresync
Copy link
Contributor Author

falseresync commented Jul 22, 2023

An example (the typos have been fixed)

@Prospector
Copy link
Member

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

@Prospector
Copy link
Member

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.

@Prospector
Copy link
Member

alsooo, I'd make the space below the header smaller than the space above it, to group it with the options it corresponds to.

@falseresync
Copy link
Contributor Author

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

@falseresync
Copy link
Contributor Author

falseresync commented Jul 22, 2023

How do these compare? (the typo is fixed)
Screenshot (21)
Screenshot (22)

@Prospector
Copy link
Member

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.

@brawaru
Copy link
Contributor

brawaru commented Jul 22, 2023

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).

@falseresync
Copy link
Contributor Author

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

If you're creating an account the third party options don't need to be shown anymore since they're irrelevant

I have figured that, but I left everything that was in the layout, and didn’t touch the code much either

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 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

@Prospector
Copy link
Member

I wouldn't use SSO on the frontend because I don't think most people would know what that means, but yeah

@Minenash
Copy link
Contributor

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

@falseresync
Copy link
Contributor Author

I have addressed several of the issues + Preview of other pages
image
image
image
image
image

@falseresync
Copy link
Contributor Author

PS should i leave the devtools in? I've tried to (unsuccessfully) locate the memory leak

@Prospector
Copy link
Member

Looks great to me, my only problem is the account creation page should not have the SSO buttons

@falseresync
Copy link
Contributor Author

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

@Minenash
Copy link
Contributor

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)

@Prospector Prospector merged commit 0ffe8ef into modrinth:master Aug 18, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

Successfully merging this pull request may close these issues.

5 participants