Skip to content

Redesign login and signup pages - #19812

Merged
ornicar merged 7 commits into
lichess-org:masterfrom
brynjagr:brynjagr/style-login-and-register
Mar 17, 2026
Merged

Redesign login and signup pages#19812
ornicar merged 7 commits into
lichess-org:masterfrom
brynjagr:brynjagr/style-login-and-register

Conversation

@brynjagr

@brynjagr brynjagr commented Mar 16, 2026

Copy link
Copy Markdown
Contributor

Improve usability of login and signup pages, especially on mobile where small inputs and tight spacing make the forms hard to use.

Summary

  • Redesign the login and signup pages with a modern tabbed layout
  • Replace the old navigation links with tab-based switching between sign in / sign up
  • Add input clear buttons, "forgot password" link repositioned, "Or" separator with email login option
  • Style improvements: rounded inputs, better spacing, checkbox styling, responsive layout

Screenshots / Video

Screenshot 2026-03-16 at 13 52 55 Screenshot 2026-03-16 at 13 53 30
Screen.Recording.2026-03-16.at.13.55.58.mov

@brynjagr brynjagr changed the title style(auth): redesign login and signup pages Redesign login and signup pages Mar 16, 2026
@brynjagr
brynjagr force-pushed the brynjagr/style-login-and-register branch 2 times, most recently from 7505531 to c97a3db Compare March 16, 2026 13:00
@brynjagr
brynjagr marked this pull request as ready for review March 16, 2026 13:06
@ornicar

ornicar commented Mar 16, 2026

Copy link
Copy Markdown
Collaborator

That looks good, clearly an improvement from what we have.

Found some visual issues with form errors:
image
image

And I wonder if there's enough contrast for the <input> blue text.

@brynjagr
brynjagr force-pushed the brynjagr/style-login-and-register branch from 36b7575 to 6de9ddc Compare March 17, 2026 08:36
@brynjagr
brynjagr force-pushed the brynjagr/style-login-and-register branch from 6de9ddc to 0f4cbba Compare March 17, 2026 09:47
@brynjagr
brynjagr force-pushed the brynjagr/style-login-and-register branch from 0f4cbba to 16b9a56 Compare March 17, 2026 09:50
@brynjagr

Copy link
Copy Markdown
Contributor Author

@ornicar I've updated the colors to c-brag and fixed the error msg render issues:

Screen.Recording.2026-03-17.at.10.46.12.mov

@ornicar
ornicar force-pushed the brynjagr/style-login-and-register branch from 5f8a08a to 027d871 Compare March 17, 2026 18:46
Comment thread ui/bits/css/_auth.scss

body:has(.auth) .signin-or-signup {
display: none;
}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't figure out what this is about?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

It's for removing these from the header. These aren't needed when you're on the auth pages

@ornicar
ornicar merged commit 0201585 into lichess-org:master Mar 17, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants