Fix#3241 - Icon Alignment issue in Password Field

[PratyushSawan]

Fixes #3241

Changes:

Previously, a top margin of 4px was added to the eye icon, which aligned it centrally on some screens but wasn’t consistent for all users. I added a few lines of adjustments to ensure consistency across all screen aspect ratios.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

Changes OUTPUTS:
OUTPUT 1:

OUTPUT 2:

[PratyushSawan]

@raclim i creating this new PR, because in the last PR #3262 I missed and create a PR directly from the develop branch.

Waiting for your review.

Thank you

[raclim]

Thanks so much for working on this! I think this works!

Maybe one issue is that the focus indicators are still slightly misaligned within the input, which I think was mentioned in the associated issue. I'm not sure how much of a major concern this might be though.

One other alternative solution I had in mind was transforming the Y axis for the svg:

.form__eye__icon {
  font-size: #{math.div(30, $base-font-size)}rem;
  position: absolute;
  right: 0px;
  
  & svg {
    transform: translateY(10%);
  }
}

Open to suggestions or ideas on what you might prefer!

[PratyushSawan]

Hi @raclim Thanks for the feedback. Added those changes and here the output.

Thank you

[raclim]

Awesome! I think this overall looks good to me! I'm going to merge this in, but please feel free to follow up with any additional changes!