From ebecc6bb81043122e982dc99cbc626cd0f393051 Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Tue, 20 Feb 2018 12:21:00 -0800
Subject: [PATCH] updated download password input style

---
 .../downloadPassword/downloadPassword.css        |  8 ++++++--
 app/templates/downloadPassword/index.js          | 16 ++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/templates/downloadPassword/downloadPassword.css b/app/templates/downloadPassword/downloadPassword.css
index dd67db2d..2a4bc0a8 100644
--- a/app/templates/downloadPassword/downloadPassword.css
+++ b/app/templates/downloadPassword/downloadPassword.css
@@ -11,8 +11,12 @@
   padding: 10px 0;
 }
 
-.red {
-  color: red;
+.error {
+  color: var(--errorColor);
+}
+
+.input--error {
+  border-color: var(--errorColor);
 }
 
 @media (max-device-width: 520px), (max-width: 520px) {
diff --git a/app/templates/downloadPassword/index.js b/app/templates/downloadPassword/index.js
index e037b803..f42b71c3 100644
--- a/app/templates/downloadPassword/index.js
+++ b/app/templates/downloadPassword/index.js
@@ -2,22 +2,25 @@ const html = require('choo/html');
 
 module.exports = function(state, emit) {
   const fileInfo = state.fileInfo;
-  const label =
-    fileInfo.password === null
-      ? html`
-          <label class="red" for="password-input">
+  const invalid = fileInfo.password === null;
+  const label = invalid
+    ? html`
+          <label class="error" for="password-input">
             ${state.translate('passwordTryAgain')}
           </label>`
-      : html`
+    : html`
           <label for="password-input">
             ${state.translate('unlockInputLabel')}
           </label>`;
+  const inputClass = invalid
+    ? 'input input--noBtn input--error'
+    : 'input input--noBtn';
   const div = html`
     <div class="passwordSection">
       ${label}
       <form class="passwordForm" onsubmit=${checkPassword} data-no-csrf>
         <input id="password-input"
-          class="input input--noBtn"
+          class="${inputClass}"
           maxlength="64"
           autocomplete="off"
           placeholder="${state.translate('unlockInputPlaceholder')}"
@@ -37,6 +40,7 @@ module.exports = function(state, emit) {
   function inputChanged() {
     const input = document.getElementById('password-input');
     const btn = document.getElementById('password-btn');
+    input.classList.remove('input--error');
     if (input.value.length > 0) {
       btn.classList.remove('inputBtn--hidden');
       input.classList.remove('input--noBtn');