tweaked title and illustration styles

app/ui/downloadCompleted.js

@@ -7,13 +7,13 @@ module.exports = function(state) {
       id="download-complete"
       class="flex flex-col items-center justify-center h-full w-full bg-white p-2"
     >
-      <h1 class="text-center font-bold my-4 text-2xl">
+      <h1 class="text-center font-bold my-2">
         ${state.translate('downloadFinish')}
       </h1>
-      <p class="pb-2 text-grey-darkest leading-normal">
+      <p class="text-grey-darkest leading-normal">
         ${state.translate('downloadFinishText')}
       </p>
-      <img src="${assets.get('completed.svg')}" class="max-w-sm" />
+      <img src="${assets.get('completed.svg')}" class="my-12 h-48" />
       <p class="mb-4">
         <a href="/" class="btn rounded-lg flex items-center mt-4" role="button"
           >${state.translate('sendYourFilesLink')}</a

app/ui/error.js

@@ -6,25 +6,22 @@ module.exports = function(state, emit) {
   return html`
     <main class="main">
       ${state.modal && modal(state, emit)}
-      <div
+      <section
-        class="flex flex-col items-center h-full w-full p-6 z-10 overflow-hidden md:rounded-lg md:shadow-big"
+        class="flex flex-col items-center justify-center h-full w-full p-6 z-10 overflow-hidden md:rounded-lg md:shadow-big"
       >
-        <h1 class="text-center font-bold my-4 text-2xl">
+        <h1 class="text-center font-bold my-2">
           ${state.translate('errorPageHeader')}
         </h1>
-        <p class="pb-2 max-w-md text-center text-grey-darkest leading-normal">
+        <p class="max-w-md text-center text-grey-darkest leading-normal">
           ${state.translate('uploadPageExplainer')}
         </p>
-        <img class="max-w-sm" src="${assets.get('error.svg')}" />
+        <img class="my-12 h-48" src="${assets.get('error.svg')}" />
-        <p class="mb-4">
+        <p class="">
-          <a
+          <a href="/" class="btn rounded-lg flex items-center" role="button"
-            href="/"
-            class="btn rounded-lg flex items-center mt-4"
-            role="button"
             >${state.translate('sendYourFilesLink')}</a
           >
         </p>
-      </div>
+      </section>
     </main>
   `;
 };

app/ui/legal.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 md:h-full"
       >
-        <h1 class="text-2xl text-center">${state.translate('legalHeader')}</h1>
+        <h1 class="text-center">${state.translate('legalHeader')}</h1>
         ${raw(
           replaceLinks(state.translate('legalNoticeTestPilot'), [
             'https://testpilot.firefox.com/terms',

app/ui/notFound.js

@@ -6,25 +6,22 @@ module.exports = function(state, emit) {
   return html`
     <main class="main">
       ${state.modal && modal(state, emit)}
-      <div
+      <section
-        class="flex flex-col items-center h-full w-full p-6 z-10 overflow-hidden md:rounded-lg md:shadow-big"
+        class="flex flex-col items-center justify-center h-full w-full p-6 z-10 overflow-hidden md:rounded-lg md:shadow-big"
       >
-        <h1 class="text-center font-bold my-4 text-2xl">
+        <h1 class="text-center font-bold my-2">
           ${state.translate('expiredPageHeaderUpdate')}
         </h1>
-        <p class="pb-2 max-w-md text-center text-grey-darkest leading-normal">
+        <p class="max-w-md text-center text-grey-darkest leading-normal">
           ${state.translate('downloadFinishText')}
         </p>
-        <img src="${assets.get('notFound.svg')}" class="max-w-sm" />
+        <img src="${assets.get('notFound.svg')}" class="my-12" />
-        <p class="mb-4">
+        <p class="">
-          <a
+          <a href="/" class="btn rounded-lg flex items-center" role="button"
-            href="/"
-            class="btn rounded-lg flex items-center mt-4"
-            role="button"
             >${state.translate('sendYourFilesLink')}</a
           >
         </p>
-      </div>
+      </section>
     </main>
   `;
 };

app/ui/unsupported.js

@@ -26,16 +26,16 @@ module.exports = function(state, emit) {
   return html`
     <main class="main">
       ${state.modal && modal(state, emit)}
-      <div
+      <section
         class="flex flex-col items-center justify-center text-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 md:h-full"
       >
         <h1 class="">${strings.header}</h1>
-        <p class=" mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>
+        <p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>
         ${why}
         <a href="${url}" class="btn rounded-lg mt-8 px-8">
           ${strings.button}
         </a>
-      </div>
+      </section>
     </main>
   `;
 };