diff --git a/app/base.css b/app/base.css index cf0f0bf0..b7230147 100644 --- a/app/base.css +++ b/app/base.css @@ -34,7 +34,6 @@ body { position: relative; } -pre, input, select, textarea, @@ -43,13 +42,6 @@ button { margin: 0; } -pre { - font-family: monospace; - font-size: 18px; - font-weight: 600; - display: inline-block; -} - a { text-decoration: none; } @@ -69,7 +61,7 @@ a { .btn { font-size: 15px; font-weight: 500; - color: white; + color: var(--primaryControlFGColor); cursor: pointer; text-align: center; background: var(--primaryControlBGColor); @@ -113,7 +105,7 @@ a { background: var(--primaryControlBGColor); border-radius: 0 6px 6px 0; border: 1px solid var(--primaryControlBGColor); - color: white; + color: var(--primaryControlFGColor); cursor: pointer; /* Force flat button look */ @@ -177,7 +169,7 @@ a { } .progressSection__text { - color: rgba(0, 0, 0, 0.5); + color: var(--lightTextColor); letter-spacing: -0.4px; margin-top: 24px; margin-bottom: 74px; diff --git a/app/fileManager.js b/app/fileManager.js index 7513d42d..b8892272 100644 --- a/app/fileManager.js +++ b/app/fileManager.js @@ -130,9 +130,13 @@ export default function(state, emitter) { emitter.on('password', async ({ password, file }) => { try { + state.settingPassword = true; + render(); await file.setPassword(password); state.storage.writeFile(file); metrics.addedPassword({ size: file.size }); + await delay(1000); + state.settingPassword = false; } catch (err) { console.error(err); } diff --git a/app/main.css b/app/main.css index 9c7c5dba..81459568 100644 --- a/app/main.css +++ b/app/main.css @@ -5,7 +5,6 @@ @import './templates/passwordInput/passwordInput.css'; @import './templates/downloadPassword/downloadPassword.css'; @import './templates/setPasswordSection/setPasswordSection.css'; -@import './templates/changePasswordSection/changePasswordSection.css'; @import './templates/footer/footer.css'; @import './templates/fxPromo/fxPromo.css'; @import './templates/selectbox/selectbox.css'; diff --git a/app/pages/blank.js b/app/pages/blank.js index ec104ac3..edaadcac 100644 --- a/app/pages/blank.js +++ b/app/pages/blank.js @@ -1,6 +1,5 @@ const html = require('choo/html'); module.exports = function() { - const div = html`
`; - return div; + return html`
`; }; diff --git a/app/pages/completed/index.js b/app/pages/completed/index.js index 88ba37e3..8d60dd47 100644 --- a/app/pages/completed/index.js +++ b/app/pages/completed/index.js @@ -3,7 +3,7 @@ const progress = require('../../templates/progress'); const { fadeOut } = require('../../utils'); module.exports = function(state, emit) { - const div = html` + return html`
${state.translate('downloadFinish')} @@ -23,6 +23,4 @@ module.exports = function(state, emit) { await fadeOut('.page'); emit('pushState', '/'); } - - return div; }; diff --git a/app/pages/download/index.js b/app/pages/download/index.js index f17cf5c7..149eca10 100644 --- a/app/pages/download/index.js +++ b/app/pages/download/index.js @@ -13,7 +13,7 @@ module.exports = function(state, emit) { ${state.translate('deletePopupCancel')} `; - const div = html` + return html`
${state.translate('downloadingPageProgress', { @@ -39,5 +39,4 @@ module.exports = function(state, emit) { btn.remove(); emit('cancel'); } - return div; }; diff --git a/app/pages/legal.js b/app/pages/legal.js index 5b086ce7..b140a78b 100644 --- a/app/pages/legal.js +++ b/app/pages/legal.js @@ -1,17 +1,8 @@ const html = require('choo/html'); const raw = require('choo/html/raw'); -function replaceLinks(str, urls) { - let i = -1; - const s = str.replace(/([^<]+)<\/a>/g, (m, v) => { - i++; - return `${v}`; - }); - return `
${s}
`; -} - module.exports = function(state) { - const div = html` + return html` `; - return div; }; + +function replaceLinks(str, urls) { + let i = 0; + const s = str.replace( + /([^<]+)<\/a>/g, + (m, v) => `${v}` + ); + return `
${s}
`; +} diff --git a/app/pages/notFound/index.js b/app/pages/notFound/index.js index f8b32291..f12bbe37 100644 --- a/app/pages/notFound/index.js +++ b/app/pages/notFound/index.js @@ -2,7 +2,7 @@ const html = require('choo/html'); const assets = require('../../../common/assets'); module.exports = function(state) { - const div = html` + return html`
${state.translate('expiredPageHeader')}
@@ -15,5 +15,4 @@ module.exports = function(state) { ${state.translate('sendYourFilesLink')}
`; - return div; }; diff --git a/app/pages/preview/index.js b/app/pages/preview/index.js index 8c9f9d1d..3cc306e6 100644 --- a/app/pages/preview/index.js +++ b/app/pages/preview/index.js @@ -20,7 +20,7 @@ module.exports = function(state, pageAction) { if (!pageAction) { return info; } - const div = html` + return html`
${title} @@ -38,5 +38,4 @@ module.exports = function(state, pageAction) { ${info}
`; - return div; }; diff --git a/app/pages/share/index.js b/app/pages/share/index.js index 1180b3cb..2454bf32 100644 --- a/app/pages/share/index.js +++ b/app/pages/share/index.js @@ -3,41 +3,18 @@ const html = require('choo/html'); const raw = require('choo/html/raw'); const assets = require('../../../common/assets'); const notFound = require('../notFound'); -const changePasswordSection = require('../../templates/changePasswordSection'); const setPasswordSection = require('../../templates/setPasswordSection'); const selectbox = require('../../templates/selectbox'); const deletePopup = require('../../templates/popup'); const { allowedCopy, delay, fadeOut } = require('../../utils'); -function expireInfo(file, translate, emit) { - const hours = Math.floor(EXPIRE_SECONDS / 60 / 60); - const el = html`
${raw( - translate('expireInfo', { - downloadCount: '', - timespan: translate('timespanHours', { num: hours }) - }) - )}
`; - const select = el.querySelector('select'); - const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0)); - const t = num => translate('downloadCount', { num }); - const changed = value => emit('changeLimit', { file, value }); - select.parentNode.replaceChild( - selectbox(file.dlimit || 1, options, t, changed), - select - ); - return el; -} - module.exports = function(state, emit) { const file = state.storage.getFileById(state.params.id); if (!file) { return notFound(state, emit); } - const passwordSection = file.hasPassword - ? changePasswordSection(state, emit) - : setPasswordSection(state, emit); - const div = html` + return html`
${expireInfo(file, state.translate, emit)}
@@ -56,7 +33,7 @@ module.exports = function(state, emit) { title="${state.translate('copyUrlFormButton')}" onclick=${copyLink}>${state.translate('copyUrlFormButton')}
- ${passwordSection} + ${setPasswordSection(state, emit)}
`; + const select = el.querySelector('select'); + const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0)); + const t = num => translate('downloadCount', { num }); + const changed = value => emit('changeLimit', { file, value }); + select.parentNode.replaceChild( + selectbox(file.dlimit || 1, options, t, changed), + select + ); + return el; +} diff --git a/app/pages/share/share.css b/app/pages/share/share.css index 84d3af2e..392e3db7 100644 --- a/app/pages/share/share.css +++ b/app/pages/share/share.css @@ -40,7 +40,6 @@ line-height: 23px; font-weight: 300; padding-left: 10px; - padding-right: 10px; } .copySection__url:disabled { @@ -53,6 +52,10 @@ padding-bottom: 4px; } +.input--copied { + border-color: var(--successControlBGColor); +} + .inputBtn--copied, .inputBtn--copied:hover { background: var(--successControlBGColor); diff --git a/app/pages/unsupported/index.js b/app/pages/unsupported/index.js index 7f70311c..99937cfd 100644 --- a/app/pages/unsupported/index.js +++ b/app/pages/unsupported/index.js @@ -1,24 +1,6 @@ const html = require('choo/html'); const assets = require('../../../common/assets'); -function outdatedStrings(state) { - return { - title: state.translate('notSupportedHeader'), - description: state.translate('notSupportedOutdatedDetail'), - button: state.translate('updateFirefox'), - explainer: state.translate('uploadPageExplainer') - }; -} - -function unsupportedStrings(state) { - return { - title: state.translate('notSupportedHeader'), - description: state.translate('notSupportedDetail'), - button: state.translate('downloadFirefoxButtonSub'), - explainer: state.translate('uploadPageExplainer') - }; -} - module.exports = function(state) { let strings = {}; let why = ''; @@ -46,7 +28,7 @@ module.exports = function(state) { ${strings.button}
`; } - const div = html` + return html`
${strings.title}
@@ -64,5 +46,22 @@ module.exports = function(state) { ${strings.explainer}
`; - return div; }; + +function outdatedStrings(state) { + return { + title: state.translate('notSupportedHeader'), + description: state.translate('notSupportedOutdatedDetail'), + button: state.translate('updateFirefox'), + explainer: state.translate('uploadPageExplainer') + }; +} + +function unsupportedStrings(state) { + return { + title: state.translate('notSupportedHeader'), + description: state.translate('notSupportedDetail'), + button: state.translate('downloadFirefoxButtonSub'), + explainer: state.translate('uploadPageExplainer') + }; +} diff --git a/app/pages/unsupported/unsupported.css b/app/pages/unsupported/unsupported.css index c4c9cb91..8f22443a 100644 --- a/app/pages/unsupported/unsupported.css +++ b/app/pages/unsupported/unsupported.css @@ -9,7 +9,7 @@ font-size: 13px; line-height: 23px; text-align: center; - color: #7d7d7d; + color: var(--lightTextColor); margin: 0 auto 23px; } @@ -23,7 +23,7 @@ box-shadow: 0 5px 3px rgb(234, 234, 234); font-family: 'Fira Sans', 'segoe ui', sans-serif; font-weight: 500; - color: #fff; + color: var(--primaryControlFGColor); font-size: 26px; display: flex; justify-content: center; diff --git a/app/pages/upload/index.js b/app/pages/upload/index.js index 15e5d81f..7d5f7d76 100644 --- a/app/pages/upload/index.js +++ b/app/pages/upload/index.js @@ -5,7 +5,7 @@ const { bytes } = require('../../utils'); module.exports = function(state, emit) { const transfer = state.transfer; - const div = html` + return html`
${state.translate('uploadingPageProgress', { @@ -36,5 +36,4 @@ module.exports = function(state, emit) { btn.textContent = state.translate('uploadCancelNotification'); emit('cancel'); } - return div; }; diff --git a/app/pages/welcome/index.js b/app/pages/welcome/index.js index af24dad8..a0581e41 100644 --- a/app/pages/welcome/index.js +++ b/app/pages/welcome/index.js @@ -7,7 +7,7 @@ const { bytes, fadeOut } = require('../../utils'); module.exports = function(state, emit) { // the page flickers if both the server and browser set 'effect--fadeIn' const fade = state.layout ? '' : 'effect--fadeIn'; - const div = html` + return html`
${state.translate('uploadPageHeader')}
@@ -82,5 +82,4 @@ module.exports = function(state, emit) { await fadeOut('#page-one'); emit('upload', { file, type: 'click' }); } - return div; }; diff --git a/app/templates/changePasswordSection/changePasswordSection.css b/app/templates/changePasswordSection/changePasswordSection.css deleted file mode 100644 index fea7c090..00000000 --- a/app/templates/changePasswordSection/changePasswordSection.css +++ /dev/null @@ -1,29 +0,0 @@ -.changePasswordSection { - padding: 10px 0; - align-self: left; - max-width: 100%; - overflow-wrap: break-word; -} - -.btn--reset { - width: 80px; - height: 30px; - background: #fff; - border-color: rgba(12, 12, 13, 0.3); - margin-top: 5px; - margin-left: 15px; - margin-bottom: 12px; - line-height: 24px; - color: #313131; -} - -.btn--reset:hover { - background: #efeff1; -} - -@media (max-device-width: 520px), (max-width: 520px) { - .changePasswordSection { - align-self: center; - min-width: 95%; - } -} diff --git a/app/templates/changePasswordSection/index.js b/app/templates/changePasswordSection/index.js deleted file mode 100644 index 82746dbe..00000000 --- a/app/templates/changePasswordSection/index.js +++ /dev/null @@ -1,52 +0,0 @@ -const html = require('choo/html'); -const raw = require('choo/html/raw'); -const passwordInput = require('../passwordInput'); - -module.exports = function(state, emit) { - const file = state.storage.getFileById(state.params.id); - - return html`
- ${passwordSpan(file.password)} - - ${passwordInput( - state.translate('unlockInputPlaceholder'), - state.translate('changePasswordButton'), - changePassword - )} -
`; - - function passwordSpan(password) { - password = password || '●●●●●'; - const span = html`${raw( - state.translate('passwordResult', { - password: '
'
-      })
-    )}`;
-    const masked = span.querySelector('.passwordMask');
-    masked.textContent = password.replace(/./g, '●');
-    return span;
-  }
-
-  function changePassword(event) {
-    event.preventDefault();
-    const password = document.getElementById('password-input').value;
-    if (password.length > 0) {
-      emit('password', { password, file });
-    }
-    return false;
-  }
-
-  function toggleResetInput(event) {
-    const form = event.target.parentElement.querySelector('form.passwordInput');
-    const input = document.getElementById('password-input');
-    if (form.style.visibility === 'hidden' || form.style.visibility === '') {
-      form.style.visibility = 'visible';
-      input.focus();
-    } else {
-      form.style.visibility = 'hidden';
-    }
-  }
-};
diff --git a/app/templates/downloadButton/index.js b/app/templates/downloadButton/index.js
index ff95c0e3..e1cac538 100644
--- a/app/templates/downloadButton/index.js
+++ b/app/templates/downloadButton/index.js
@@ -1,15 +1,13 @@
 const html = require('choo/html');
 
 module.exports = function(state, emit) {
+  return html`
+    `;
+
   function download(event) {
     event.preventDefault();
     emit('download', state.fileInfo);
   }
-
-  return html`
-  

-    
-  
`;
 };
diff --git a/app/templates/file/file.css b/app/templates/file/file.css
index 10344257..c20d667c 100644
--- a/app/templates/file/file.css
+++ b/app/templates/file/file.css
@@ -1,7 +1,7 @@
 .fileData {
   font-size: 15px;
   vertical-align: top;
-  color: #4a4a4a;
+  color: var(--lightTextColor);
   padding: 17px 19px 0;
   line-height: 23px;
   position: relative;
diff --git a/app/templates/file/index.js b/app/templates/file/index.js
index ba91b00b..2d7d8937 100644
--- a/app/templates/file/index.js
+++ b/app/templates/file/index.js
@@ -3,30 +3,13 @@ const assets = require('../../../common/assets');
 const number = require('../../utils').number;
 const deletePopup = require('../popup');
 
-function timeLeft(milliseconds, state) {
-  const minutes = Math.floor(milliseconds / 1000 / 60);
-  const hours = Math.floor(minutes / 60);
-  if (hours >= 1) {
-    return state.translate('expiresHoursMinutes', {
-      hours,
-      minutes: minutes % 60
-    });
-  } else if (hours === 0) {
-    if (minutes === 0) {
-      return state.translate('expiresMinutes', { minutes: '< 1' });
-    }
-    return state.translate('expiresMinutes', { minutes });
-  }
-  return null;
-}
-
 module.exports = function(file, state, emit) {
   const ttl = file.expiresAt - Date.now();
   const remainingTime =
     timeLeft(ttl, state) || state.translate('linkExpiredAlt');
   const downloadLimit = file.dlimit || 1;
   const totalDownloads = file.dtotal || 0;
-  const row = html`
+  return html`
   
     
       ${file.name}
@@ -84,6 +67,21 @@ module.exports = function(file, state, emit) {
     emit('delete', { file, location: 'upload-list' });
     emit('render');
   }
-
-  return row;
 };
+
+function timeLeft(milliseconds, state) {
+  const minutes = Math.floor(milliseconds / 1000 / 60);
+  const hours = Math.floor(minutes / 60);
+  if (hours >= 1) {
+    return state.translate('expiresHoursMinutes', {
+      hours,
+      minutes: minutes % 60
+    });
+  } else if (hours === 0) {
+    if (minutes === 0) {
+      return state.translate('expiresMinutes', { minutes: '< 1' });
+    }
+    return state.translate('expiresMinutes', { minutes });
+  }
+  return null;
+}
diff --git a/app/templates/fileList/fileList.css b/app/templates/fileList/fileList.css
index ce147b08..da520289 100644
--- a/app/templates/fileList/fileList.css
+++ b/app/templates/fileList/fileList.css
@@ -7,7 +7,7 @@
 
 .fileList__header {
   font-size: 16px;
-  color: #858585;
+  color: var(--lightTextColor);
   font-weight: lighter;
   text-align: left;
   background: rgba(0, 148, 251, 0.05);
diff --git a/app/templates/fileList/index.js b/app/templates/fileList/index.js
index 43edbe4d..80c7c28d 100644
--- a/app/templates/fileList/index.js
+++ b/app/templates/fileList/index.js
@@ -2,9 +2,8 @@ const html = require('choo/html');
 const file = require('../file');
 
 module.exports = function(state, emit) {
-  let table = '';
   if (state.storage.files.length) {
-    table = html`
+    return html`
     
@@ -31,5 +30,4 @@ module.exports = function(state, emit) {
     

       
         

     `;
   }
-  return table;
 };
diff --git a/app/templates/footer/footer.css b/app/templates/footer/footer.css
index 4d5ba5d6..8c9a9239 100644
--- a/app/templates/footer/footer.css
+++ b/app/templates/footer/footer.css
@@ -20,7 +20,7 @@
 }
 
 .legalSection__link {
-  color: #858585;
+  color: var(--lightTextColor);
   opacity: 0.9;
   white-space: nowrap;
   margin-right: 2vw;
@@ -31,7 +31,7 @@
 }
 
 .legalSection__link:visited {
-  color: #858585;
+  color: var(--lightTextColor);
 }
 
 .legalSection__mozLogo {
diff --git a/app/templates/fxPromo/index.js b/app/templates/fxPromo/index.js
index 07ac8616..1b0532d5 100644
--- a/app/templates/fxPromo/index.js
+++ b/app/templates/fxPromo/index.js
@@ -2,9 +2,6 @@ const html = require('choo/html');
 const assets = require('../../../common/assets');
 
 module.exports = function(state, emit) {
-  function clicked() {
-    emit('experiment', { cd3: 'promo' });
-  }
   let classes = 'fxPromo';
   switch (state.promo) {
     case 'blue':
@@ -30,4 +27,8 @@ module.exports = function(state, emit) {
           >Download Firefox now ≫
       

     
`;
+
+  function clicked() {
+    emit('experiment', { cd3: 'promo' });
+  }
 };
diff --git a/app/templates/header/header.css b/app/templates/header/header.css
index c321b627..91b6ad04 100644
--- a/app/templates/header/header.css
+++ b/app/templates/header/header.css
@@ -59,7 +59,7 @@
   border-radius: 3px;
   border: 1px solid var(--primaryControlBGColor);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  color: #fff;
+  color: var(--primaryControlFGColor);
   cursor: pointer;
   display: block;
   float: right;
@@ -85,7 +85,7 @@
 }
 
 .feedback:active {
-  background-color: #0277d8;
+  background-color: var(--primaryControlHoverColor);
 }
 
 @media (max-device-width: 520px), (max-width: 520px) {
diff --git a/app/templates/header/index.js b/app/templates/header/index.js
index 304c7532..246f2e95 100644
--- a/app/templates/header/index.js
+++ b/app/templates/header/index.js
@@ -11,6 +11,28 @@ const assets = require('../../../common/assets');
   string with the value from package.json. 🤢
 */
 const version = require('../../../package.json').version || 'VERSION';
+const browser = browserName();
+
+module.exports = function(state) {
+  return html`

+  
+  
+
`;
+};
 
 function browserName() {
   try {
@@ -34,26 +56,3 @@ function browserName() {
     return 'unknown';
   }
 }
-
-const browser = browserName();
-
-module.exports = function(state) {
-  return html`

-  
-  
-
`;
-};
diff --git a/app/templates/passwordInput/index.js b/app/templates/passwordInput/index.js
index daba9752..368d8c67 100644
--- a/app/templates/passwordInput/index.js
+++ b/app/templates/passwordInput/index.js
@@ -1,26 +1,54 @@
 const html = require('choo/html');
 
-module.exports = function(placeholder, action, submit) {
+module.exports = function(file, state, emit) {
+  const setting = state.settingPassword;
+  const formClass = file.hasPassword
+    ? 'passwordInput'
+    : 'passwordInput passwordInput--hidden';
+  const inputClass = setting ? 'input input--copied' : 'input input--noBtn';
+  const btnClass = setting
+    ? 'inputBtn inputBtn--loading'
+    : 'inputBtn inputBtn--hidden';
+  const action = file.hasPassword
+    ? state.translate('changePasswordButton')
+    : state.translate('addPasswordButton');
   return html`
+  

     

       
+        placeholder="${
+          file.hasPassword
+            ? passwordPlaceholder(file.password)
+            : state.translate('unlockInputPlaceholder')
+        }">
       
+        ${setting ? 'disabled' : ''}
+        class="${btnClass}"
+        value="${setting ? '' : action}">
     

+    
${message(
+      setting,
+      file.hasPassword,
+      state.translate('passwordIsSet')
+    )}

+  

   `;
 
   function inputChanged() {
+    const pwdmsg = document.querySelector('.passwordInput__msg');
+    if (pwdmsg) {
+      pwdmsg.textContent = '';
+    }
     const resetInput = document.getElementById('password-input');
     const resetBtn = document.getElementById('password-btn');
     if (resetInput.value.length > 0) {
@@ -31,4 +59,24 @@ module.exports = function(placeholder, action, submit) {
       resetInput.classList.add('input--noBtn');
     }
   }
+
+  function setPassword(event) {
+    event.preventDefault();
+    const password = document.getElementById('password-input').value;
+    if (password.length > 0) {
+      emit('password', { password, file });
+    }
+    return false;
+  }
 };
+
+function passwordPlaceholder(password) {
+  return password ? password.replace(/./g, '●') : '●●●●●●●●●●●●';
+}
+
+function message(setting, pwd, deflt) {
+  if (setting || !pwd) {
+    return '';
+  }
+  return deflt;
+}
diff --git a/app/templates/passwordInput/passwordInput.css b/app/templates/passwordInput/passwordInput.css
index 2a0146c2..390a570f 100644
--- a/app/templates/passwordInput/passwordInput.css
+++ b/app/templates/passwordInput/passwordInput.css
@@ -3,16 +3,42 @@
   display: flex;
   flex-wrap: nowrap;
   width: 80%;
-  padding: 10px 5px;
+  padding: 10px 5px 5px;
+}
+
+.passwordInput__msg {
+  height: 100px;
+  margin: 0 5px;
+  font-size: 15px;
+  color: var(--lightTextColor);
 }
 
 .passwordInput--hidden {
   visibility: hidden;
 }
 
+.inputBtn--loading {
+  background-image: url('../assets/spinner.svg');
+  background-position: center;
+  background-size: 30px 30px;
+  background-repeat: no-repeat;
+  background-color: var(--successControlBGColor);
+  border: 1px solid var(--successControlBGColor);
+  color: var(--successControlFGColor);
+  width: 10em;
+}
+
+.inputBtn--loading:hover {
+  background-color: var(--successControlBGColor);
+}
+
 @media (max-device-width: 520px), (max-width: 520px) {
   .passwordInput {
     flex-direction: column;
     width: inherit;
   }
+
+  .inputBtn--loading {
+    width: inherit;
+  }
 }
diff --git a/app/templates/popup/index.js b/app/templates/popup/index.js
index 9af1106a..969115f4 100644
--- a/app/templates/popup/index.js
+++ b/app/templates/popup/index.js
@@ -1,14 +1,6 @@
 const html = require('choo/html');
 
 module.exports = function(msg, confirmText, cancelText, confirmCallback) {
-  function hide(e) {
-    e.stopPropagation();
-    const popup = document.querySelector('.popup.popup--show');
-    if (popup) {
-      popup.classList.remove('popup--show');
-    }
-  }
-
   return html`
   

     

@@ -23,4 +15,12 @@ module.exports = function(msg, confirmText, cancelText, confirmCallback) {
       

     

   
`;
+
+  function hide(e) {
+    e.stopPropagation();
+    const popup = document.querySelector('.popup.popup--show');
+    if (popup) {
+      popup.classList.remove('popup--show');
+    }
+  }
 };
diff --git a/app/templates/popup/popup.css b/app/templates/popup/popup.css
index 6ac17f81..3ced13ef 100644
--- a/app/templates/popup/popup.css
+++ b/app/templates/popup/popup.css
@@ -2,8 +2,8 @@
   visibility: hidden;
   min-width: 204px;
   min-height: 105px;
-  background-color: #fff;
-  color: #000;
+  background-color: var(--pageBGColor);
+  color: var(--textColor);
   border: 1px solid #d7d7db;
   padding: 15px 24px;
   box-sizing: content-box;
@@ -82,7 +82,7 @@
 }
 
 .popup__yes {
-  color: #fff;
+  color: var(--primaryControlFGColor);
   background-color: var(--primaryControlBGColor);
   border-radius: 5px;
   padding: 5px 25px;
diff --git a/app/templates/progress/index.js b/app/templates/progress/index.js
index f679fe41..74e273d0 100644
--- a/app/templates/progress/index.js
+++ b/app/templates/progress/index.js
@@ -9,7 +9,7 @@ const circumference = 2 * Math.PI * radius;
 module.exports = function(progressRatio) {
   const dashOffset = (1 - progressRatio) * circumference;
   const percentComplete = percent(progressRatio);
-  const div = html`
+  return html`
   

     
   

   `;
-  return div;
 };
diff --git a/app/templates/selectbox/index.js b/app/templates/selectbox/index.js
index 40d32e26..51393035 100644
--- a/app/templates/selectbox/index.js
+++ b/app/templates/selectbox/index.js
@@ -5,6 +5,25 @@ module.exports = function(selected, options, translate, changed) {
   const id = `select-${Math.random()}`;
   let x = selected;
 
+  return html`
+  

+    

+      ${translate(selected)}
+      
+        
+      
+    

+    
    
+      ${options.map(
+        i => html`
+            
  • ${number(i)}
    • `
+      )}
+    

+  
`;
+
   function close() {
     const ul = document.getElementById(id);
     const body = document.querySelector('body');
@@ -37,21 +56,4 @@ module.exports = function(selected, options, translate, changed) {
     }
     close();
   }
-  return html`
-    

-      

-        ${translate(selected)}
-        
-          
-        
-      

-      
    
-        ${options.map(
-          i =>
-            html`
  • ${number(
-              i
-            )}
    • `
-        )}
-      

-    
`;
 };
diff --git a/app/templates/selectbox/selectbox.css b/app/templates/selectbox/selectbox.css
index b5a5eef7..2cacc960 100644
--- a/app/templates/selectbox/selectbox.css
+++ b/app/templates/selectbox/selectbox.css
@@ -15,7 +15,7 @@
   left: 0;
   padding: 0;
   margin: 40px 0;
-  background-color: white;
+  background-color: var(--pageBGColor);
   border: 1px solid rgba(12, 12, 13, 0.3);
   border-radius: 4px;
   box-shadow: 1px 2px 4px rgba(12, 12, 13, 0.3);
diff --git a/app/templates/setPasswordSection/index.js b/app/templates/setPasswordSection/index.js
index f2cd2429..1883ad5c 100644
--- a/app/templates/setPasswordSection/index.js
+++ b/app/templates/setPasswordSection/index.js
@@ -3,10 +3,13 @@ const passwordInput = require('../passwordInput');
 
 module.exports = function(state, emit) {
   const file = state.storage.getFileById(state.params.id);
-  const div = html`
+
+  return html`
   

     

       
     

-    ${passwordInput(
-      state.translate('unlockInputPlaceholder'),
-      state.translate('addPasswordButton'),
-      addPassword
-    )}
+    ${passwordInput(file, state, emit)}
   
`;
 
-  function addPassword(event) {
-    event.preventDefault();
-    const password = document.getElementById('password-input').value;
-    if (password.length > 0) {
-      emit('password', { password, file });
-    }
-    return false;
-  }
-
   function togglePasswordInput(e) {
     const unlockInput = document.getElementById('password-input');
     const boxChecked = e.target.checked;
@@ -44,6 +34,4 @@ module.exports = function(state, emit) {
       unlockInput.value = '';
     }
   }
-
-  return div;
 };
diff --git a/app/templates/setPasswordSection/setPasswordSection.css b/app/templates/setPasswordSection/setPasswordSection.css
index ac97bdc9..a8c46524 100644
--- a/app/templates/setPasswordSection/setPasswordSection.css
+++ b/app/templates/setPasswordSection/setPasswordSection.css
@@ -11,7 +11,7 @@
 
 .checkbox__input {
   position: absolute;
-  visibility: collapse;
+  opacity: 0;
 }
 
 .checkbox__label {
@@ -31,12 +31,13 @@
   border-radius: 2px;
 }
 
+.checkbox__input:focus + .checkbox__label::before,
 .checkbox:hover .checkbox__label::before {
   border: 1px solid var(--primaryControlBGColor);
 }
 
 .checkbox__input:checked + .checkbox__label {
-  color: #000;
+  color: var(--textColor);
 }
 
 .checkbox__input:checked + .checkbox__label::before {
@@ -44,6 +45,19 @@
   background-position: 2px 1px;
 }
 
+.checkbox__input:disabled + .checkbox__label {
+  cursor: auto;
+}
+
+.checkbox__input:disabled + .checkbox__label::before {
+  background-image: url('../assets/check-16.svg');
+  background-repeat: no-repeat;
+  background-size: 18px 18px;
+  border-color: var(--successControlBGColor);
+  background-color: var(--successControlBGColor);
+  cursor: auto;
+}
+
 @media (max-device-width: 520px), (max-width: 520px) {
   .setPasswordSection {
     align-self: center;
diff --git a/assets/spinner.svg b/assets/spinner.svg
new file mode 100644
index 00000000..004a3566
--- /dev/null
+++ b/assets/spinner.svg
@@ -0,0 +1,17 @@
+
+
+    
+        
+            
+            
+                
+            
+        
+    
+
\ No newline at end of file
diff --git a/public/locales/en-US/send.ftl b/public/locales/en-US/send.ftl
index 93af284b..f0509943 100644
--- a/public/locales/en-US/send.ftl
+++ b/public/locales/en-US/send.ftl
@@ -113,3 +113,5 @@ enableJavascript = Please enable JavaScript and try again.
 expiresHoursMinutes = { $hours }h { $minutes }m
 # A short representation of a countdown timer containing the number of minutes remaining as digits, example "56m"
 expiresMinutes = { $minutes }m
+# A short status message shown when a password is successfully set
+passwordIsSet = Password set