diff --git a/client/css/style.css b/client/css/style.css index ace0d68d..68accabe 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1694,23 +1694,27 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ right: 15px; } -.password-container .reveal-password button { +.password-container .reveal-password span { font: normal normal normal 14px/1 FontAwesome; font-size: 16px; color: #cdd3da; - padding: 10px; + width: 37px; + height: 37px; + display: flex; + justify-content: center; + align-items: center; } -.password-container .reveal-password button:hover { +.password-container .reveal-password span:hover { color: #79838c; } -.password-container .reveal-password button::before { +.password-container .reveal-password span::before { content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */ transition: color 0.2s; } -.password-container .reveal-password.visible button::before { +.password-container .reveal-password.visible span::before { content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */ color: #ff4136; } diff --git a/client/js/utils.js b/client/js/utils.js index ab756735..aa162d71 100644 --- a/client/js/utils.js +++ b/client/js/utils.js @@ -106,7 +106,7 @@ function togglePasswordField(elem) { input.attr("type", input.attr("type") === "password" ? "text" : "password"); swapLabel($this); - swapLabel($this.find("button")); + swapLabel($this.find("span")); $this.toggleClass("visible"); }); } diff --git a/client/views/reveal-password.tpl b/client/views/reveal-password.tpl index 22377b09..f6cc9812 100644 --- a/client/views/reveal-password.tpl +++ b/client/views/reveal-password.tpl @@ -1,3 +1,3 @@ - +