From 1e4d6646c6a9ef34d83a0e38ea5bf42f81939e50 Mon Sep 17 00:00:00 2001
From: Erica Wright <ericaewright@gmail.com>
Date: Mon, 23 Oct 2017 10:36:07 -0400
Subject: [PATCH] style password checkbox

---
 app/templates/uploadPassword.js |  8 +++---
 assets/check-16-blue.svg        |  1 +
 assets/main.css                 | 44 +++++++++++++++++++++++++++++++++
 public/locales/en-US/send.ftl   |  4 +--
 4 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 assets/check-16-blue.svg

diff --git a/app/templates/uploadPassword.js b/app/templates/uploadPassword.js
index fe589aff..a63eb42e 100644
--- a/app/templates/uploadPassword.js
+++ b/app/templates/uploadPassword.js
@@ -4,11 +4,11 @@ module.exports = function(state, emit) {
   const file = state.storage.getFileById(state.params.id);
   const div = html`
   <div class="selectPassword">
-    <div>
+    <div id="addPasswordWrapper">
       <input id="addPassword" type="checkbox" onchange=${togglePasswordInput}/>
-      <label for="addPassword">${state.translate(
-        'requirePasswordCheckbox'
-      )}</label>
+      <label for="addPassword">
+        <img src="/assets/check-16-blue.svg"/>
+        ${state.translate('requirePasswordCheckbox')}</label>
     </div>
     <form class="setPassword hidden" onsubmit=${setPassword}>
       <input id="unlock-input"
diff --git a/assets/check-16-blue.svg b/assets/check-16-blue.svg
new file mode 100644
index 00000000..a2633292
--- /dev/null
+++ b/assets/check-16-blue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#0A84FF " d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/></svg>
\ No newline at end of file
diff --git a/assets/main.css b/assets/main.css
index 90068de3..f2f52880 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -896,6 +896,50 @@ tbody {
   margin-bottom: -5px;
 }
 
+#addPasswordWrapper {
+  height: 24px;
+}
+
+#addPassword {
+  position: absolute;
+  visibility: collapse;
+}
+
+#addPasswordWrapper label {
+  line-height: 20px;
+  cursor: pointer;
+  position: relative;
+  opacity: 0.6;
+}
+
+#addPassword:checked + label {
+  opacity: 1;
+}
+
+#addPasswordWrapper label::after {
+  content: '';
+  height: 20px;
+  width: 20px;
+  margin-right: 10px;
+  margin-left: 5px;
+  float: left;
+  border: 1px solid rgba(12, 12, 13, 0.3);
+  border-radius: 2px;
+}
+
+#addPassword:not(:checked) + label > img {
+  height: 0;
+  width: 0;
+}
+
+#addPassword:checked + label > img {
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  left: -29px;
+  top: 2px;
+}
+
 @media (max-device-width: 992px), (max-width: 992px) {
   .popup .popuptext {
     left: auto;
diff --git a/public/locales/en-US/send.ftl b/public/locales/en-US/send.ftl
index 74548bc1..f85ae79e 100644
--- a/public/locales/en-US/send.ftl
+++ b/public/locales/en-US/send.ftl
@@ -85,5 +85,5 @@ footerLinkPrivacy = Privacy
 footerLinkTerms = Terms
 footerLinkCookies = Cookies
 requirePasswordCheckbox = Require a password to download this file
-addPasswordButton = Add Password
-incorrectPassword = Incorrect password. Try again?
+addPasswordButton = Add password
+passwordTryAgain = Incorrect password. Try again.