From b5865f00e96391a80fcf6166611e5e6ffaa8a5c8 Mon Sep 17 00:00:00 2001
From: George Raptis <georapbox@gmail.com>
Date: Wed, 18 Sep 2019 10:34:24 +0300
Subject: [PATCH] toggle preview image src instead of havingtwo images

Co-authored-by: timvisee <tim@visee.me>
---
 app/ui/archiveTile.js | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
index 83382164..2028a980 100644
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@@ -48,12 +48,12 @@ function password(state) {
           ${state.translate('addPassword')}
         </label>
       </div>
-      <div class="relative inline-block">
+      <div class="relative inline-block my-1">
         <input
           id="password-input"
           class="${state.archive.password
             ? ''
-            : 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
+            : 'invisible'} border rounded focus:border-blue-60 leading-normal py-1 pl-2 pr-8 h-8 dark:bg-grey-80"
           autocomplete="off"
           maxlength="${MAX_LENGTH}"
           type="password"
@@ -67,15 +67,14 @@ function password(state) {
           type="button"
           class="${state.archive.password
             ? ''
-            : 'invisible'} absolute top-0 right-0 p-2"
+            : 'invisible'} absolute top-0 right-0 w-8 h-8"
           onclick="${onPasswordPreviewButtonclicked}"
         >
-          <img src="assets/eye.svg" width="22" height="22" />
           <img
-            src="assets/eye-off.svg"
+            src="${assets.get('eye.svg')}"
             width="22"
             height="22"
-            class="${state.archive.password ? '' : 'hidden'}"
+            class="m-auto"
           />
         </button>
       </div>
@@ -89,19 +88,15 @@ function password(state) {
 
   function onPasswordPreviewButtonclicked(event) {
     event.preventDefault();
-    const target = event.currentTarget;
     const input = document.getElementById('password-input');
-    const eyeOn = target.querySelector('img:first-child');
-    const eyeOff = target.querySelector('img:last-child');
+    const eyeIcon = event.currentTarget.querySelector('img');
 
     if (input.type === 'password') {
       input.type = 'text';
-      eyeOn.classList.add('hidden');
-      eyeOff.classList.remove('hidden');
+      eyeIcon.src = assets.get('eye-off.svg');
     } else {
       input.type = 'password';
-      eyeOn.classList.remove('hidden');
-      eyeOff.classList.add('hidden');
+      eyeIcon.src = assets.get('eye.svg');
     }
 
     input.focus();