adjusted modal background and download preview

app/ui/archiveTile.js

@@ -447,7 +447,8 @@ module.exports.preview = function(state, emit) {
     archive.open = true;
   }
   return html`
-  <send-archive class="flex flex-col max-h-full bg-white rounded shadow-light p-4 w-full md:w-4/5">
+  <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">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@@ -458,6 +459,7 @@ module.exports.preview = function(state, emit) {
     <div class="h-full md:h-48 overflow-y-auto">
       ${archiveDetails(state.translate, archive)}
     </div>
+    </div>
     <button
       id="download-btn"
       class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline"

app/ui/download.js

@@ -135,8 +135,8 @@ module.exports = function(state, emit) {
         break;
       default:
         content = html`
-          <div class="flex flex-col w-full h-full items-center mt-8">
-            <h1 class="mb-4">${state.translate('downloadFileTitle')}</h1>
+          <div class="flex flex-col w-full h-full items-center mt-12">
+            <h1 class="">${state.translate('downloadFileTitle')}</h1>
             ${archiveTile.preview(state, emit)}
           </div>
         `;
@@ -147,9 +147,7 @@ module.exports = function(state, emit) {
   return html`
     <main class="main container">
       ${state.modal && modal(state, emit)}
-      <section
-        class="relative h-full w-full p-6 md:flex md:flex-row md:rounded-lg md:shadow-big"
-      >
+      <section class="relative h-full w-full p-6 md:rounded-lg md:shadow-big">
         ${content}
       </section>
     </main>

app/ui/modal.js

@@ -3,14 +3,11 @@ const html = require('choo/html');
 module.exports = function(state, emit) {
   return html`
     <send-modal
-      class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8"
+      class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:my-8"
       onclick="${close}"
     >
       <div class="h-full max-h-screen absolute pin-t flex items-center">
-        <div
-          class="shadow-cloud bg-white"
-          onclick="${e => e.stopPropagation()}"
-        >
+        <div class="" onclick="${e => e.stopPropagation()}">
           ${state.modal(state, emit, close)}
         </div>
       </div>

tailwind.js

@@ -472,6 +472,7 @@ module.exports = {
     '32': '8rem',
     '48': '12rem',
     '64': '16rem',
+    '128': '32rem',
     '1/2': '50%',
     '1/3': '33.33333%',
     '2/3': '66.66667%',