processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.4k stars 1.35k forks source link

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

Open BamaCharanChhandogi opened 1 month ago

BamaCharanChhandogi commented 1 month ago

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:

Expected Behavior:

image

Actual Behavior:

Screenshot 2024-09-25 015048

raclim commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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.