p5.js-web-editor
p5.js-web-editor copied to clipboard
processing
Icon Alignment Issue in Password Field – Adjust Eye Icon Vertical Centering
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:
Actual Behavior:
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?
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?
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.
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.