hook multifile to ui

app/templates/downloadButton/downloadButton.css

@@ -1,6 +1,20 @@
 .btn--download {
-  width: 180px;
-  height: 44px;
-  margin-top: 20px;
-  margin-bottom: 30px;
+  margin: 0 0 13px;
+}
+
+.btn--complete,
+.btn--complete:hover {
+  background-color: var(--successControlBGColor);
+}
+
+.btn--blueStripes {
+  background: repeating-linear-gradient(
+    -65deg,
+    #3282f2 0,
+    #3282f2 17px,
+    #3c87eb 17px,
+    #3c87eb 30px
+  );
+  background-size: 300% 300%;
+  animation: barberpole 12s linear infinite;
 }

app/templates/downloadButton/index.js

@@ -1,13 +1,36 @@
 const html = require('choo/html');
+const percent = require('../../utils').percent;
 
 module.exports = function(state, emit) {
+  const downloadState = state.transfer.state;
+  const progress = percent(state.transfer.progressRatio);
+
+  let btnText = '';
+  let btnClass = '';
+
+  if (downloadState === 'complete') {
+    btnText = state.translate('downloadFinish');
+    btnClass = 'btn--complete';
+  } else if (downloadState === 'decrypting') {
+    btnText = state.translate('decryptingFile');
+    btnClass = 'btn--blueStripes';
+  } else if (downloadState === 'downloading') {
+    btnText = state.translate('downloadProgressButton', { progress });
+    btnClass = 'btn--blueStripes';
+  } else {
+    btnText = state.translate('downloadButtonLabel');
+  }
+
   return html`
-    <button class="btn btn--download"
-      onclick=${download}>${state.translate('downloadButtonLabel')}
+    <button class="btn btn--download ${btnClass}" 
+      onclick=${download}>
+        ${btnText}
     </button>`;
 
   function download(event) {
     event.preventDefault();
-    emit('download', state.fileInfo);
+    if (downloadState !== 'complete') {
+      emit('download', state.fileInfo);
+    }
   }
 };