From 029633f3d3cfae4bc181e398785204349322e575 Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Mon, 19 Feb 2018 14:02:06 -0800
Subject: [PATCH] tweaked input styles

---
 app/base.css                                          |  2 ++
 app/templates/downloadPassword/downloadPassword.css   | 11 ++---------
 app/templates/downloadPassword/index.js               |  4 ++--
 app/templates/passwordInput/passwordInput.css         |  3 +--
 .../setPasswordSection/setPasswordSection.css         |  1 -
 5 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/app/base.css b/app/base.css
index b7230147..f4e2e061 100644
--- a/app/base.css
+++ b/app/base.css
@@ -84,6 +84,7 @@ a {
 }
 
 .input {
+  flex: 2 0 auto;
   border: 1px solid var(--primaryControlBGColor);
   border-radius: 6px 0 0 6px;
   font-size: 20px;
@@ -102,6 +103,7 @@ a {
 }
 
 .inputBtn {
+  flex: auto;
   background: var(--primaryControlBGColor);
   border-radius: 0 6px 6px 0;
   border: 1px solid var(--primaryControlBGColor);
diff --git a/app/templates/downloadPassword/downloadPassword.css b/app/templates/downloadPassword/downloadPassword.css
index f6272f4f..345fd74d 100644
--- a/app/templates/downloadPassword/downloadPassword.css
+++ b/app/templates/downloadPassword/downloadPassword.css
@@ -1,6 +1,7 @@
 .passwordSection {
   text-align: left;
-  padding: 40px;
+  padding: 40px 0;
+  width: 80%;
 }
 
 .passwordForm {
@@ -10,14 +11,6 @@
   padding: 10px 0;
 }
 
-.input--password {
-  flex: 1;
-}
-
-.inputBtn--password {
-  flex: 0 1 165px;
-}
-
 .red {
   color: red;
 }
diff --git a/app/templates/downloadPassword/index.js b/app/templates/downloadPassword/index.js
index 08e41d5c..e037b803 100644
--- a/app/templates/downloadPassword/index.js
+++ b/app/templates/downloadPassword/index.js
@@ -17,7 +17,7 @@ module.exports = function(state, emit) {
       ${label}
       <form class="passwordForm" onsubmit=${checkPassword} data-no-csrf>
         <input id="password-input"
-          class="input input--password input--noBtn"
+          class="input input--noBtn"
           maxlength="64"
           autocomplete="off"
           placeholder="${state.translate('unlockInputPlaceholder')}"
@@ -25,7 +25,7 @@ module.exports = function(state, emit) {
           type="password" />
         <input type="submit"
           id="password-btn"
-          class="inputBtn inputBtn--password inputBtn--hidden"
+          class="inputBtn inputBtn--hidden"
           value="${state.translate('unlockButtonLabel')}"/>
       </form>
     </div>`;
diff --git a/app/templates/passwordInput/passwordInput.css b/app/templates/passwordInput/passwordInput.css
index 390a570f..c478530c 100644
--- a/app/templates/passwordInput/passwordInput.css
+++ b/app/templates/passwordInput/passwordInput.css
@@ -1,5 +1,4 @@
 .passwordInput {
-  align-self: left;
   display: flex;
   flex-wrap: nowrap;
   width: 80%;
@@ -25,7 +24,7 @@
   background-color: var(--successControlBGColor);
   border: 1px solid var(--successControlBGColor);
   color: var(--successControlFGColor);
-  width: 10em;
+  flex-basis: 20%;
 }
 
 .inputBtn--loading:hover {
diff --git a/app/templates/setPasswordSection/setPasswordSection.css b/app/templates/setPasswordSection/setPasswordSection.css
index a8c46524..c2cc6a9c 100644
--- a/app/templates/setPasswordSection/setPasswordSection.css
+++ b/app/templates/setPasswordSection/setPasswordSection.css
@@ -1,6 +1,5 @@
 .setPasswordSection {
   padding: 10px 0;
-  align-self: left;
   max-width: 100%;
   overflow-wrap: break-word;
 }