a new approach for the ui

.stylelintrc

@@ -10,3 +10,4 @@ rules:
   declaration-colon-newline-after: null
   selector-list-comma-newline-after: null
   value-list-comma-newline-after: null
+  at-rule-no-unknown: null

app/archive.js

@@ -62,7 +62,10 @@ export default class Archive {
     return true;
   }
 
-  remove(index) {
-    this.files.splice(index, 1);
+  remove(file) {
+    const index = this.files.indexOf(file);
+    if (index > -1) {
+      this.files.splice(index, 1);
+    }
   }
 }

app/dragManager.js

@@ -3,16 +3,16 @@ export default function(state, emitter) {
     document.body.addEventListener('dragover', event => {
       if (state.route === '/') {
         event.preventDefault();
-        const files = document.querySelector('.uploadedFilesWrapper');
-        files.classList.add('uploadArea--noEvents');
+        // const files = document.querySelector('.uploadedFilesWrapper');
+        // files.classList.add('uploadArea--noEvents');
       }
     });
     document.body.addEventListener('drop', event => {
       if (state.route === '/' && !state.uploading) {
         event.preventDefault();
-        document
-          .querySelector('.uploadArea')
-          .classList.remove('uploadArea--dragging');
+        // document
+        //   .querySelector('.uploadArea')
+        //   .classList.remove('uploadArea--dragging');
 
         const files = Array.from(event.dataTransfer.files);
 

app/fileManager.js

@@ -66,8 +66,11 @@ export default function(state, emitter) {
     metrics.changedDownloadLimit(file);
   });
 
-  emitter.on('removeUpload', async ({ index }) => {
-    state.archive.remove(index);
+  emitter.on('removeUpload', file => {
+    state.archive.remove(file);
+    if (state.archive.numFiles === 0) {
+      state.archive = null;
+    }
     render();
   });
 
@@ -86,6 +89,7 @@ export default function(state, emitter) {
     } catch (e) {
       state.raven.captureException(e);
     }
+    render();
   });
 
   emitter.on('cancel', () => {
@@ -149,15 +153,26 @@ export default function(state, emitter) {
       if (password) {
         emitter.emit('password', { password, file: ownedFile });
       }
-
-      const cancelBtn = document.getElementById('cancel-upload');
-      if (cancelBtn) {
-        cancelBtn.hidden = 'hidden';
-      }
-      if (document.querySelector('.page')) {
-        await delay(1000);
-      }
-      emitter.emit('pushState', `/share/${ownedFile.id}`);
+      state.animation = () => {
+        const x = document.querySelector('.foo');
+        const y = x.previousElementSibling;
+        x.animate(
+          [
+            { transform: `translateY(-${y.getBoundingClientRect().height}px)` },
+            { transform: 'translateY(0)' }
+          ],
+          {
+            duration: 400,
+            easing: 'ease'
+          }
+        );
+        y.animate([{ opacity: 0 }, { opacity: 1 }], {
+          delay: 300,
+          duration: 100,
+          fill: 'both'
+        });
+      };
+      // emitter.emit('pushState', `/share/${ownedFile.id}`);
     } catch (err) {
       if (err.message === '0') {
         //cancelled. do nothing
@@ -176,6 +191,7 @@ export default function(state, emitter) {
       state.password = '';
       state.uploading = false;
       state.transfer = null;
+      render();
     }
   });
 

app/main.css

@@ -1,28 +1,81 @@
-@import './base.css';
-@import './pages/share/share.css';
-@import './pages/signin/signin.css';
-@import './pages/uploads/uploads.css';
-@import './pages/unsupported/unsupported.css';
-@import './templates/archiveTile/archiveTile.css';
-@import './templates/controlArea/controlArea.css';
-@import './templates/downloadButton/downloadButton.css';
-@import './templates/downloadPassword/downloadPassword.css';
-@import './templates/file/file.css';
-@import './templates/fileIcon/fileIcon.css';
-@import './templates/fileList/fileList.css';
-@import './templates/fileManager/fileManager.css';
-@import './templates/footer/footer.css';
-@import './templates/fxPromo/fxPromo.css';
-@import './templates/header/header.css';
-@import './templates/modal/modal.css';
-@import './templates/okDialog/okDialog.css';
-@import './templates/passwordInput/passwordInput.css';
-@import './templates/popup/popup.css';
-@import './templates/selectbox/selectbox.css';
-@import './templates/setPasswordSection/setPasswordSection.css';
-@import './templates/signupDialog/signupDialog.css';
-@import './templates/signupPromo/signupPromo.css';
-@import './templates/title/title.css';
-@import './templates/uploadedFile/uploadedFile.css';
-@import './templates/uploadedFileList/uploadedFileList.css';
-@import './templates/userAccount/userAccount.css';
+@import 'tailwindcss/preflight';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+progress {
+  @apply bg-grey-light;
+  @apply rounded-sm;
+  @apply w-full;
+  @apply h-1;
+}
+
+progress::-moz-progress-bar {
+  @apply bg-blue;
+  @apply rounded-sm;
+}
+
+progress::-webkit-progress-bar {
+  @apply bg-grey-light;
+  @apply rounded-sm;
+  @apply w-full;
+  @apply h-1;
+}
+
+progress::-webkit-progress-value {
+  @apply bg-blue;
+  @apply rounded-sm;
+}
+
+.main {
+  @apply bg-blue-lightest;
+
+  min-height: calc(100vh - 6rem);
+}
+
+.header-logo {
+  background-image: url('../assets/send_logo.svg');
+  background-position: left;
+  background-repeat: no-repeat;
+  background-size: 2rem;
+  padding-left: 2.5rem;
+  text-decoration: none;
+}
+
+.feedback-link {
+  background-color: #000;
+  background-image: url('../assets/feedback.svg');
+  background-position: 0.125rem 0.25rem;
+  background-repeat: no-repeat;
+  background-size: 1.125rem;
+  color: #fff;
+  display: block;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
+  text-indent: 0.125rem;
+  white-space: nowrap;
+}
+
+.bg-shades {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+@screen md {
+  .main {
+    @apply flex-1;
+    @apply self-center;
+    @apply bg-white;
+    @apply shadow-md;
+    @apply m-auto;
+
+    min-width: 30rem;
+    max-width: 60rem;
+    min-height: 30rem;
+    max-height: 38rem;
+  }
+}

app/main.js

@@ -34,6 +34,15 @@ import User from './user';
     window.appState = state;
     window.appEmit = emitter.emit.bind(emitter);
     let unsupportedReason = null;
+
+    emitter.on('render', () => {
+      if (state.animation) {
+        window.requestAnimationFrame(() => {
+          state.animation();
+          state.animation = null;
+        });
+      }
+    });
     if (
       // Firefox < 50
       /firefox/i.test(navigator.userAgent) &&

app/routes.js

@@ -0,0 +1,55 @@
+const choo = require('choo');
+const html = require('choo/html');
+const nanotiming = require('nanotiming');
+const download = require('./ui/download');
+const footer = require('./ui/footer');
+const fxPromo = require('./ui/fxPromo');
+const modal = require('./ui/modal');
+const header = require('./ui/header');
+
+nanotiming.disabled = true;
+
+function banner(state, emit) {
+  if (state.promo && !state.route.startsWith('/unsupported/')) {
+    return fxPromo(state, emit);
+  }
+}
+
+function body(main) {
+  return function(state, emit) {
+    const b = html`<body class="flex flex-col font-sans bg-white md:h-screen md:bg-grey-lightest">
+    ${state.modal && modal(state, emit)}
+    ${banner(state, emit)}
+    ${header(state, emit)}
+    ${main(state, emit)}
+    ${footer(state)}
+    </body>`;
+    if (state.layout) {
+      // server side only
+      return state.layout(state, b);
+    }
+    return b;
+  };
+}
+
+module.exports = function() {
+  const app = choo();
+  app.route('/', body(require('./ui/welcome')));
+  app.route('/download/:id', body(download));
+  app.route('/download/:id/:key', body(download));
+  app.route('/unsupported/:reason', body(require('./ui/unsupported')));
+  app.route('/legal', body(require('./ui/legal')));
+  app.route('/error', body(require('./ui/error')));
+  app.route('/blank', body(require('./ui/blank')));
+  app.route('/oauth', async function(state, emit) {
+    try {
+      await state.user.finishLogin(state.query.code, state.query.state);
+      emit('replaceState', '/');
+    } catch (e) {
+      emit('replaceState', '/error');
+      setTimeout(() => emit('render'));
+    }
+  });
+  app.route('*', body(require('./ui/notFound')));
+  return app;
+};