updated styles

app/ui/archiveTile.js

@@ -108,8 +108,8 @@ function fileInfo(file, action) {
     <send-file class="flex flex-row items-center p-3 w-full">
       <img class="h-8" src="${assets.get('blue_file.svg')}"/>
       <p class="ml-4 w-full">
-        <h1 class="text-sm font-medium word-break-all">${file.name}</h1>
+        <h1 class="text-base font-medium word-break-all">${file.name}</h1>
-        <div class="text-xs font-normal opacity-75 pt-1">${bytes(
+        <div class="text-sm font-normal opacity-75 pt-1">${bytes(
           file.size
         )}</div>
         <div class="hidden">${file.type}</div>
@@ -203,12 +203,12 @@ module.exports = function(state, emit, archive) {
         title="${state.translate('deleteButtonHover')}"
         src="${assets.get('close-16.svg')}"
         onclick=${del}/>
-      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
+      <h1 class="text-base font-medium word-break-all">${archive.name}</h1>
-      <div class="text-xs font-normal opacity-75 pt-1">${bytes(
+      <div class="text-sm font-normal opacity-75 pt-1">${bytes(
         archive.size
       )}</div>
     </p>
-    <div class="text-xs text-grey-dark w-full mt-2 mb-2">
+    <div class="text-sm opacity-75 w-full mt-2 mb-2">
       ${expiryInfo(state.translate, archive)}
     </div>
     ${archiveDetails(state.translate, archive)}
@@ -388,11 +388,17 @@ module.exports.empty = function(state, emit) {
   const upsell = state.user.loggedIn
     ? ''
     : html`
-        <p class="center font-medium text-xs text-grey-dark mt-4 mb-2">
+        <button
+          class="center font-medium text-sm text-blue-dark hover:text-blue-darker focus:text-blue-darker mt-4 mb-2"
+          onclick="${event => {
+            event.stopPropagation();
+            emit('signup-cta');
+          }}"
+        >
           ${state.translate('signInSizeBump', {
             size: bytes(state.LIMITS.MAX_FILE_SIZE, 0)
           })}
-        </p>
+        </button>
       `;
   return html`
     <send-upload-area
@@ -462,19 +468,25 @@ module.exports.preview = function(state, emit) {
   if (archive.open === undefined) {
     archive.open = true;
   }
+  const single = archive.manifest.files.length === 1;
+  const details = single
+    ? ''
+    : html`
+        <div class="mt-4 h-full md:h-48 overflow-y-auto">
+          ${archiveDetails(state.translate, archive)}
+        </div>
+      `;
   return html`
   <send-archive class="flex flex-col max-h-full bg-white p-4 w-full md:w-128">
     <div class="border rounded py-3 px-6">
-    <p class="w-full mb-4">
+      <p class="w-full">
-      <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
+        <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
-      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
+        <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
-      <div class="text-xs font-normal opacity-75 pt-1">${bytes(
+        <div class="text-xs font-normal opacity-75 pt-1">${bytes(
-        archive.size
+          archive.size
-      )}</div>
+        )}</div>
-    </p>
+      </p>
-    <div class="h-full md:h-48 overflow-y-auto">
+      ${details}
-      ${archiveDetails(state.translate, archive)}
-    </div>
     </div>
     <button
       id="download-btn"
@@ -497,7 +509,7 @@ module.exports.downloading = function(state) {
   const progress = state.transfer.progressRatio;
   const progressPercent = percent(progress);
   return html`
-  <send-archive class="flex flex-col bg-white rounded shadow-light p-4 w-full md:w-4/5">
+  <send-archive class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128">
     <p class="w-full mb-4">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>

app/ui/copyDialog.js

@@ -10,7 +10,7 @@ module.exports = function(name, url) {
         <h1 class="font-bold my-4">
           ${state.translate('notifyUploadEncryptDone')}
         </h1>
-        <p class="font-normal leading-normal text-grey-darker word-break-all">
+        <p class="font-normal leading-normal text-grey-darkest word-break-all">
           ${state.translate('copyUrlFormLabel')} <br />
           ${name}
         </p>

app/ui/download.js

@@ -111,7 +111,9 @@ module.exports = function(state, emit) {
       case 'downloading':
       case 'decrypting':
         content = html`
-          <div class="flex flex-col w-full h-full items-center mt-8">
+          <div
+            class="flex flex-col w-full h-full items-center md:justify-center md:-mt-8"
+          >
             <h1 class="mb-4">${state.translate('downloadingTitle')}</h1>
             ${archiveTile.downloading(state, emit)}
           </div>
@@ -126,7 +128,9 @@ module.exports = function(state, emit) {
             <h1 class="text-center font-bold my-4 text-2xl">
               ${state.translate('downloadFinish')}
             </h1>
-            <p class="pb-2">${state.translate('downloadFinishText')}</p>
+            <p class="pb-2 text-grey-darkest leading-normal">
+              ${state.translate('downloadFinishText')}
+            </p>
             <p class="mb-4">
               <a
                 href="/"
@@ -142,7 +146,9 @@ module.exports = function(state, emit) {
         content = html`
           <div class="flex flex-col w-full h-full items-center justify-center">
             <h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
-            <p class="w-full md:w-4/5 font-light text-center">
+            <p
+              class="w-full md:w-4/5 font-light text-grey-darkest text-center leading-normal"
+            >
               ${state.translate('downloadMessage')}
             </p>
             ${archiveTile.preview(state, emit)}

app/ui/notFound.js

@@ -9,7 +9,7 @@ module.exports = function(state, emit) {
       <div
         class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full"
       >
-        <h1 class="text-pink-dark text-2xl text-center">
+        <h1 class="text-2xl text-center">
           ${state.translate('expiredPageHeaderUpdate')}
         </h1>
         <img
@@ -17,7 +17,9 @@ module.exports = function(state, emit) {
           src="${assets.get('illustration_expired.svg')}"
           id="expired-img"
         />
-        <p class="pb-2">${state.translate('downloadFinishText')}</p>
+        <p class="pb-2 text-grey-darkest">
+          ${state.translate('downloadFinishText')}
+        </p>
         <p class="mb-4">
           <a
             href="/"

tailwind.js

@@ -46,7 +46,7 @@ const colors = {
   transparent: 'transparent',
 
   black: '#22292f',
-  'grey-darkest': '#3d4852',
+  'grey-darkest': '#4a4a4f',
   'grey-darker': '#606f7b',
   'grey-dark': '#8795a1',
   grey: '#B1B1B3',