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

Icon Alignment Issue in Password Field – Adjust Eye Icon Vertical Centering #3241

Open
BamaCharanChhandogi opened this issue Sep 24, 2024 · 3 comments · May be fixed by #3263
Open

Icon Alignment Issue in Password Field – Adjust Eye Icon Vertical Centering #3241

BamaCharanChhandogi opened this issue Sep 24, 2024 · 3 comments · May be fixed by #3263

Comments

@BamaCharanChhandogi
Copy link
Contributor

Increasing Access

Design Improvements.

Feature enhancement details

In the login form's password field, the visibility toggle (eye icon) is not properly vertically centered. This causes a slight misalignment, affecting the overall visual layout of the password input field.

Steps to Reproduce:

  • Navigate to the login form.
  • Inspect the password field.
  • Observe that the eye icon is not vertically aligned in the middle of the input field.

Expected Behavior:

image

Actual Behavior:

Screenshot 2024-09-25 015048

@raclim
Copy link
Collaborator

raclim commented Sep 26, 2024

Thanks for raising this issue!

The current behavior was intentionally changed to center the eye icon within the input field. If we implement the suggested updates as shown in the Expected Behavior image, the eye icon becomes a little higher from the center.

Maybe instead of changing the positioning of the icon, it might be worth looking into changing the icon's size or looking for a different graphic?

@BamaCharanChhandogi
Copy link
Contributor Author

Thanks for raising this issue!

The current behavior was intentionally changed to center the eye icon within the input field. If we implement the suggested updates as shown in the Expected Behavior image, the eye icon becomes a little higher from the center.

Maybe instead of changing the positioning of the icon, it might be worth looking into changing the icon's size or looking for a different graphic?

Have you checked #3242 PR?

@raclim
Copy link
Collaborator

raclim commented Sep 26, 2024

Yes, I took a look at it! I feel that your PR faces the dilemma that I was touching on—although the eye icon is technically aligned, visually it appears a little off center and is more skewed towards the top of the input field.

Screenshot 2024-09-26 at 11 50 33 AM

I personally prefer keeping the CSS for the eye icon as is for now, but I'm open to suggestions of other ways of changing it.

@raclim raclim added the Area:CSS label Oct 3, 2024
Harshit-7373 added a commit to Harshit-7373/p5.js-web-editor that referenced this issue Oct 22, 2024
Icon Alignment Issue in Password Field – Adjust Eye Icon Vertical Centering processing#3241

github-7373
@Harshit-7373 Harshit-7373 mentioned this issue Oct 22, 2024
4 tasks
@Jatin24062005 Jatin24062005 mentioned this issue Oct 22, 2024
4 tasks
raclim added a commit to Jatin24062005/p5.js-web-editor that referenced this issue Nov 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment