From 25dc2848caa31f37a8c550d110beb2cb7672ffb8 Mon Sep 17 00:00:00 2001
From: Cristi Ciobanu <c-ciobanu@protonmail.com>
Date: Thu, 24 May 2018 00:12:37 +0200
Subject: [PATCH] changed i with button

---
 client/css/style.css             | 16 +++++-----------
 client/js/utils.js               | 11 ++++++-----
 client/views/reveal-password.tpl |  2 +-
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 92732caa..ace0d68d 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1689,34 +1689,28 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 }
 
 .password-container .reveal-password {
-	height: 37px;
-	width: 37px;
 	position: absolute;
 	top: 2px;
 	right: 15px;
-	cursor: pointer;
 }
 
-.password-container .reveal-password i {
+.password-container .reveal-password button {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: 16px;
 	color: #cdd3da;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100%;
+	padding: 10px;
 }
 
-.password-container .reveal-password i:hover {
+.password-container .reveal-password button:hover {
 	color: #79838c;
 }
 
-.password-container .reveal-password i::before {
+.password-container .reveal-password button::before {
 	content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
 	transition: color 0.2s;
 }
 
-.password-container .reveal-password.visible i::before {
+.password-container .reveal-password.visible button::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 01aa459d..ab756735 100644
--- a/client/js/utils.js
+++ b/client/js/utils.js
@@ -103,17 +103,18 @@ function togglePasswordField(elem) {
 		const $this = $(this);
 		const input = $this.closest("div").find("input");
 
-		input.attr("type") === "password" ? input.attr("type", "text") : input.attr("type", "password");
+		input.attr("type", input.attr("type") === "password" ? "text" : "password");
 
 		swapLabel($this);
+		swapLabel($this.find("button"));
 		$this.toggleClass("visible");
 	});
 }
 
-// Given a span, swap its aria-label with the content of `data-alt-label`
-function swapLabel(span) {
-	const altText = span.data("alt-label");
-	span.data("alt-label", span.attr("aria-label")).attr("aria-label", altText);
+// Given a element, swap its aria-label with the content of `data-alt-label`
+function swapLabel(element) {
+	const altText = element.data("alt-label");
+	element.data("alt-label", element.attr("aria-label")).attr("aria-label", altText);
 }
 
 function confirmExit() {
diff --git a/client/views/reveal-password.tpl b/client/views/reveal-password.tpl
index c892292d..22377b09 100644
--- a/client/views/reveal-password.tpl
+++ b/client/views/reveal-password.tpl
@@ -1,3 +1,3 @@
 <span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show password" data-alt-label="Hide password">
-  <i></i>
+    <button type="button" aria-label="Show password" data-alt-label="Hide password"></button>
 </span>