From 47d75d822023649d6ffdcd642252a63ee3103edf Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Thu, 21 Feb 2019 16:43:15 -0800
Subject: [PATCH] adjusted modal background and download preview

---
 app/ui/archiveTile.js | 4 +++-
 app/ui/download.js    | 8 +++-----
 app/ui/modal.js       | 7 ++-----
 tailwind.js           | 1 +
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
index d61ed86a..56eff232 100644
--- a/app/ui/archiveTile.js
+++ b/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"
diff --git a/app/ui/download.js b/app/ui/download.js
index 825c3023..d60679b5 100644
--- a/app/ui/download.js
+++ b/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>
diff --git a/app/ui/modal.js b/app/ui/modal.js
index df10ae77..99d558b3 100644
--- a/app/ui/modal.js
+++ b/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>
diff --git a/tailwind.js b/tailwind.js
index 0965908b..8af23c04 100644
--- a/tailwind.js
+++ b/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%',