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.

Sign up for GitHub

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

Jump to bottom

Adjust styles of the "Show password" icon #83

Closed
4 tasks done
renintw opened this issue Mar 17, 2023 · 2 comments · Fixed by #84
Closed
4 tasks done

Adjust styles of the "Show password" icon #83

renintw opened this issue Mar 17, 2023 · 2 comments · Fixed by #84
Assignees
@renintw
Labels
bug Something isn't working enhancement New feature or request ui Related to user interface
Milestone
MVP

Comments

@renintw
Copy link
Contributor

renintw commented Mar 17, 2023 •
edited
Loading

Ref: #5 (comment)

  • The "Show password" icon is better to be inside the input field.
    image
  • Have a toggled state for this icon.
    image
  • The focus style here is a bit awkward. (It could be square if the icon sat inside the input)
    image
  • The input should not be pushed when toggling state.
    Screen Capture on 2023-03-17 at 09-00-48
@renintw renintw self-assigned this Mar 17, 2023
@renintw renintw added bug Something isn't working enhancement New feature or request labels Mar 17, 2023
@renintw
Copy link
Contributor Author

renintw commented Mar 17, 2023 •
edited
Loading

@jasmussen Regarding the style of the unseen toggle, could you provide this one? Thanks.
image

It kind of aligns with the style that will be released in 6.3. (ref)
image

@renintw renintw mentioned this issue Mar 17, 2023
Merged
@jasmussen
Copy link
Collaborator

Actually I think we should go with the closed eye.

Screenshot 2023-03-17 at 08 22 38

Here's an SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#1E1E1E" d="M4.67 10.664s-2.09 1.11-2.917 1.582l.494.87 1.608-.914.002.002c.343.502.86 1.17 1.563 1.84.348.33.742.663 1.185.976L5.57 16.744l.858.515 1.02-1.701a9.1 9.1 0 0 0 4.051 1.18V19h1v-2.263a9.1 9.1 0 0 0 4.05-1.18l1.021 1.7.858-.514-1.034-1.723c.442-.313.837-.646 1.184-.977.703-.669 1.22-1.337 1.563-1.839l.002-.003 1.61.914.493-.87c-1.75-.994-2.918-1.58-2.918-1.58l-.003.005a8.29 8.29 0 0 1-.422.689 10.097 10.097 0 0 1-1.36 1.598c-1.218 1.16-3.042 2.293-5.544 2.293-2.503 0-4.327-1.132-5.546-2.293a10.099 10.099 0 0 1-1.359-1.599 8.267 8.267 0 0 1-.422-.689l-.003-.005Z"/></svg>

@renintw renintw mentioned this issue Mar 22, 2023
Merged
@StevenDufresne StevenDufresne added this to the MVP milestone Mar 23, 2023
@StevenDufresne StevenDufresne added the ui Related to user interface label Apr 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@renintw renintw

Labels
bug Something isn't working enhancement New feature or request ui Related to user interface
Projects
None yet
Milestone
MVP
Development

Successfully merging a pull request may close this issue.

Fix "show password" icon styles WordPress/wporg-two-factor
3 participants
@jasmussen @StevenDufresne @renintw