UX: Visual adjustments to login/signup forms (#28680)

This adds several improvements to the signup/login forms. Some of them include:

- Added a minimal signup progress bar design for mobile.
- Made the signup/login modals full height on mobile.
- Improved the activation, account creation, and login-required pages on mobile.
- Removed the subheader and emoji from the welcome component.
- Removed most input instructions.
- Used consistent font size for text below the inputs.
- Displayed input instructions only when the field is focused.
- Improved the vertical alignment of input labels.
- Increased the spacing between inputs.
- Fixed label positioning for custom fields.
- Moved the "(optional)" text for the name input outside the instructions.
- Disabled buttons during login to prevent layout shifts.
- Reused the CTA component for modals as well.
- Matched the invite CTA styles with the signup form.

---------

Co-authored-by: Jan Cernik <jancernik12@gmail.com>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
This commit is contained in:
chapoi
2024-10-25 14:34:59 +02:00
committed by GitHub
parent edd114aee2
commit 8ac1f6ad9a
23 changed files with 481 additions and 282 deletions

View File

@@ -1771,12 +1771,13 @@ en:
action: "Click here to activate your account"
already_done: "Sorry, this account confirmation link is no longer valid. Perhaps your account is already active?"
please_continue: "Your new account is confirmed; you will be redirected to the home page."
continue_button: "Continue to %{site_name}"
continue_button: "Finish!"
welcome_to: "Welcome to %{site_name}!"
approval_required: "A moderator must manually approve your new account before you can access this forum. You'll get an email when your account is approved!"
name:
title: "Name"
title_optional: "Name (optional)"
instructions: "Your full name (optional)"
instructions_required: "Your full name"
required: "Please enter a name"
@@ -2348,7 +2349,6 @@ en:
create_account:
header_title: "Welcome!"
subheader_title: "Let's create your account"
disclaimer: "By registering, you agree to the <a href='%{privacy_link}' target='blank'>privacy policy</a> and <a href='%{tos_link}' target='blank'>terms of service</a>."
title: "Sign Up"
failed: "Something went wrong, perhaps this email is already registered, try the forgot password link"
@@ -2396,7 +2396,6 @@ en:
login:
header_title: "Welcome back"
subheader_title: "Log in to your account"
title: "Log In"
username: "User"
password: "Password"
@@ -2498,7 +2497,6 @@ en:
success: "Your account has been created and you're now logged in."
name_label: "Name"
password_label: "Password"
existing_user_can_redeem: "Redeem your invitation to a topic or group."
password_reset:
continue: "Continue to %{site_name}"