updated modal

app/ui/archiveList.js

@@ -34,7 +34,7 @@ module.exports = function(state, emit) {
     archives.push(intro(state));
   }
   return html`
-  <section class="relative h-full w-full px-6 md:flex md:flex-row">
+  <section class="h-full w-full px-6 md:flex md:flex-row">
     <div class="pt-4 md:pb-4 md:mr-6 md:w-1/2">${wip}</div>
     ${list(
       archives,

app/ui/archiveTile.js

@@ -83,7 +83,7 @@ module.exports = function(state, emit, archive) {
 
 module.exports.wip = function(state, emit) {
   return html`
-  <article class="relative h-full flex flex-col bg-white border border-grey-light p-2 z-20">
+  <article class="h-full flex flex-col bg-white border border-grey-light p-2 z-20">
     ${list(
       state.archive.files.map(f => fileInfo(f, remove(f))),
       'list-reset h-full overflow-y-scroll'
@@ -153,7 +153,7 @@ module.exports.uploading = function(state, emit) {
   return html`
   <article
     id="${archive.id}"
-    class="relative z-20 flex flex-col items-start border border-grey-light bg-white p-3">
+    class="z-20 flex flex-col items-start border border-grey-light bg-white p-3">
     <p class="w-full">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-base font-semibold">${archive.name}</h1>
@@ -184,7 +184,7 @@ module.exports.uploading = function(state, emit) {
 
 module.exports.empty = function(state, emit) {
   return html`
-  <article class="flex flex-col items-center justify-center border border-dashed border-blue-light p-8 h-full">
+  <article class="flex flex-col items-center justify-center border border-dashed border-blue-light p-16 h-full">
     <div class="p-1">${state.translate('uploadDropDragMessage')}</div>
     <input
       id="file-upload"
@@ -211,7 +211,7 @@ module.exports.empty = function(state, emit) {
 module.exports.preview = function(state, emit) {
   const archive = state.fileInfo;
   return html`
-  <article class="relative flex flex-col bg-white border border-grey-light p-2 z-20">
+  <article class="flex flex-col bg-white border border-grey-light p-2 z-20">
     <p class="w-full mb-4">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-base font-semibold">${archive.name}</h1>
@@ -239,7 +239,7 @@ module.exports.downloading = function(state, emit) {
   const progress = state.transfer.progressRatio;
   const progressPercent = percent(progress);
   return html`
-  <article class="relative flex flex-col bg-white border border-grey-light p-2 z-20">
+  <article class="flex flex-col bg-white border border-grey-light p-2 z-20">
     <p class="w-full mb-4">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-base font-semibold">${archive.name}</h1>

app/ui/copyDialog.js

@@ -1,22 +1,22 @@
 const html = require('choo/html');
-const assets = require('../../common/assets');
 const { copyToClipboard } = require('../utils');
 
-module.exports = function(url) {
+module.exports = function(name, url) {
   return function(state, emit, close) {
     return html`
-    <div class="flex flex-col p-4">
-    <input
-      type="image"
-      class="self-end text-white"
-      alt="Close"
-      src="${assets.get('close-16.svg')}"
-      onclick=${close}/>
-      <h1 class="font-normal mt-2">${state.translate('notifyUploadDone')}</h1>
+    <div class="flex flex-col items-center text-center p-4 max-w-md">
+      <h1 class="font-normal my-4">${state.translate('notifyUploadDone')}</h1>
+      <p class="font-light text-grey-darker">${state.translate(
+        'copyUrlFormLabelWithName',
+        { filename: name }
+      )}</p>
       <input type="text" class="w-full my-4 border rounded leading-loose" value=${url} readonly="true"/>
       <button class="border rounded bg-blue text-white leading-loose w-full" onclick=${copy}>
         ${state.translate('copyUrlFormButton')}
       </button>
+      <a class="text-blue my-2 cursor-pointer" onclick=${close}>${state.translate(
+      'okButton'
+    )}</a>
     </div>`;
 
     function copy(event) {

app/ui/header.js

@@ -3,13 +3,17 @@ const account = require('./account');
 
 module.exports = function(state, emit) {
   const header = html`
-  <header class="flex-none flex flex-row items-center justify-between bg-white w-full px-4 h-12 md:shadow-md">
+  <header class="relative flex-none flex flex-row items-center justify-between bg-white w-full px-4 h-12 md:shadow-md">
     <a
       class="header-logo"
       href="/">
       <h1 class="text-black font-normal">Firefox <b>Send</b></h1>
     </a>
     ${account(state, emit)}
+    <div class="invisible absolute pin-t pin-l mt-12 w-full flex flex-col items-center pointer-events-none">
+      <div class="border rounded bg-grey-darkest text-white mt-2 p-2">Your upload has finished.<button class="border border-blue rounded-sm bg-blue text-white inline-block p-1 ml-2">Copy Link</button><button class="text-white inline-block p-1 ml-2">ⓧ</button></div>
+      ${state.toast ? state.toast() : ''}
+    </div>
   </header>`;
   // HACK
   // We only want to render this once because we

app/ui/modal.js

@@ -2,14 +2,17 @@ const html = require('choo/html');
 
 module.exports = function(state, emit) {
   return html`
-  <div class="fixed pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}>
-    <div class="rounded max-w-md bg-white m-1" onclick=${e =>
-      e.stopPropagation()}>
+  <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}>
+    <div class="border-modal bg-white" onclick=${e => e.stopPropagation()}>
       ${state.modal(state, emit, close)}
     </div>
   </div>`;
 
   function close(event) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
     state.modal = null;
     emit('render');
   }

app/ui/welcome.js

@@ -1,6 +1,10 @@
 const html = require('choo/html');
 const archiveList = require('./archiveList');
+const modal = require('./modal');
 
 module.exports = function(state, emit) {
-  return html`<main class="main container">${archiveList(state, emit)}</main>`;
+  return html`<main class="main container relative">
+  ${state.modal && modal(state, emit)}
+  ${archiveList(state, emit)}
+  </main>`;
 };