hook multifile to ui

app/templates/setPasswordSection/index.js

@@ -1,25 +1,26 @@
 const html = require('choo/html');
 const passwordInput = require('../passwordInput');
 
-module.exports = function(state, emit) {
-  const file = state.storage.getFileById(state.params.id);
+module.exports = function(state) {
+  const checked = state.password ? 'checked' : '';
+  const label = state.password ? 'addPasswordLabel' : 'addPasswordMessage';
 
   return html`
   <div class="setPasswordSection">
     <div class="checkbox">
       <input
-        ${file.hasPassword ? 'disabled' : ''}
-        ${file.hasPassword || state.passwordSetError ? 'checked' : ''}
-        class="checkbox__input"
-        id="add-password"
+        class="checkbox__input" id="add-password"
         type="checkbox"
+        ${checked}
         autocomplete="off"
         onchange=${togglePasswordInput}/>
       <label class="checkbox__label" for="add-password">
-        ${state.translate('requirePasswordCheckbox')}
+        ${state.translate(label)}
       </label>
     </div>
-    ${passwordInput(file, state, emit)}
+
+    ${passwordInput(state)}
+
   </div>`;
 
   function togglePasswordInput(e) {
@@ -28,9 +29,13 @@ module.exports = function(state, emit) {
     document
       .querySelector('.passwordInput')
       .classList.toggle('passwordInput--hidden', !boxChecked);
+
+    const label = document.querySelector('.checkbox__label');
     if (boxChecked) {
+      label.innerHTML = state.translate('addPasswordLabel');
       unlockInput.focus();
     } else {
+      label.innerHTML = state.translate('addPasswordMessage');
       unlockInput.value = '';
     }
   }

app/templates/setPasswordSection/setPasswordSection.css

@@ -1,11 +1,12 @@
 .setPasswordSection {
+  display: flex;
   padding: 10px 0;
   max-width: 100%;
-  overflow-wrap: break-word;
 }
 
 .checkbox {
-  min-height: 24px;
+  flex: auto;
+  height: 24px;
 }
 
 .checkbox__input {
@@ -14,7 +15,8 @@
 }
 
 .checkbox__label {
-  line-height: 23px;
+  font-size: 13px;
+  line-height: 20px;
   cursor: pointer;
   color: var(--lightTextColor);
   user-select: none;
@@ -22,27 +24,21 @@
 
 .checkbox__label::before {
   content: '';
-  height: 20px;
-  width: 20px;
+  height: 24px;
+  width: 24px;
   margin-right: 10px;
-  margin-left: 5px;
   float: left;
-  border: 1px solid rgba(12, 12, 13, 0.3);
-  border-radius: 2px;
+  background-color: #e6e6e6;
 }
 
-.checkbox__input:focus + .checkbox__label::before,
-.checkbox:hover .checkbox__label::before {
-  border: 1px solid var(--primaryControlBGColor);
-}
-
-.checkbox__input:checked + .checkbox__label {
-  color: var(--textColor);
+.checkbox__label:hover::before {
+  background-color: #d6d6d6;
 }
 
 .checkbox__input:checked + .checkbox__label::before {
-  background-image: url('../assets/check-16-blue.svg');
-  background-position: 2px 1px;
+  background-image: url('../assets/lock.svg');
+  background-position: 2px 2px;
+  background-repeat: no-repeat;
 }
 
 .checkbox__input:disabled + .checkbox__label {
@@ -50,20 +46,13 @@
 }
 
 .checkbox__input:disabled + .checkbox__label::before {
-  background-image: url('../assets/check-16-blue.svg');
+  background-image: url('../assets/lock.svg');
   background-repeat: no-repeat;
   background-size: 26px 26px;
   border: none;
   cursor: auto;
 }
 
-@media (max-device-width: 520px), (max-width: 520px) {
-  .setPasswordSection {
-    align-self: center;
-    min-width: 95%;
-  }
-
-  .checkbox__label::before {
-    margin-left: 0;
-  }
+.setPasswordSection > .passwordInput--hidden {
+  display: none;
 }