updated tailwindcss to 1.0

android/android.js

@@ -53,7 +53,7 @@ function body(main) {
 
     const menu = html`<a
         id="hamburger"
-        class="absolute pin-t pin-r z-50"
+        class="absolute top-0 right-0 z-50"
         href="#"
         onclick="${clickPreferences}"
       >

android/pages/home.js

@@ -42,11 +42,7 @@ module.exports = function(state, emit) {
     content =
       archives.length < 1
         ? intro(state)
-        : list(
-            archives,
-            'list-reset h-full overflow-y-auto w-full',
-            'mb-3 w-full'
-          );
+        : list(archives, 'h-full overflow-y-auto w-full', 'mb-3 w-full');
   }
 
   return html`
@@ -57,7 +53,7 @@ module.exports = function(state, emit) {
       >
         ${content}
       </section>
-      <div class="fixed pin-r pin-b z-20">
+      <div class="fixed right-0 bottom-0 z-20">
         ${button}
         <input
           id="file-upload"

app/main.css

@@ -1,4 +1,9 @@
-@tailwind preflight;
+@tailwind base;
+
+html {
+  line-height: 1.15;
+}
+
 @tailwind components;
 
 :not(input) {

app/ui/account.js

@@ -85,7 +85,7 @@ class Account extends Component {
         />
         <ul
           id="accountMenu"
-          class="invisible list-reset absolute pin-t pin-r mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
+          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
           onblur="${e => this.hideMenu(e)}"
         >
           <li class="p-2 text-grey-dark">${user.email}</li>

app/ui/archiveTile.js

@@ -120,7 +120,7 @@ function fileInfo(file, action) {
 function archiveInfo(archive, action) {
   return html`
     <p class="w-full flex items-center">
-      <img class="mr-3 flex-no-shrink" src="${assets.get('blue_file.svg')}"/>
+      <img class="mr-3 flex-shrink-0" src="${assets.get('blue_file.svg')}"/>
       <p class="flex-grow">
         <h1 class="text-base font-medium word-break-all">${archive.name}</h1>
         <div class="text-sm font-normal opacity-75 pt-1">${bytes(
@@ -155,7 +155,7 @@ function archiveDetails(translate, archive) {
             num: archive.manifest.files.length
           })}
         </summary>
-        ${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset')}
+        ${list(archive.manifest.files.map(f => fileInfo(f)))}
       </details>
     `;
   }
@@ -213,7 +213,7 @@ module.exports = function(state, emit, archive) {
         html`
           <input
             type="image"
-            class="self-start flex-no-shrink text-white hover:opacity-75 focus:outline"
+            class="self-start flex-shrink-0 text-white hover:opacity-75 focus:outline"
             alt="${state.translate('deleteButtonHover')}"
             title="${state.translate('deleteButtonHover')}"
             src="${assets.get('close-16.svg')}"
@@ -256,9 +256,7 @@ module.exports = function(state, emit, archive) {
       try {
         await navigator.share({
           title: state.translate('-send-brand'),
-          text: `Download "${
-            archive.name
-          }" with Firefox Send: simple, safe file sharing`,
+          text: `Download "${archive.name}" with Firefox Send: simple, safe file sharing`,
           //state.translate('shareMessage', { name }),
           url: archive.url
         });
@@ -278,11 +276,11 @@ module.exports.wip = function(state, emit) {
           .map(f =>
             fileInfo(f, remove(f, state.translate('deleteButtonHover')))
           ),
-        'flex-shrink bg-grey-lightest rounded-t list-reset overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen',
+        'flex-shrink bg-grey-lightest rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen',
         'bg-white px-2 my-2 shadow-light rounded'
       )}
       <div
-        class="flex-no-shrink flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-1 font-medium"
+        class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-1 font-medium"
       >
         <input
           id="file-upload"
@@ -315,7 +313,7 @@ module.exports.wip = function(state, emit) {
       ${expiryOptions(state, emit)} ${password(state, emit)}
       <button
         id="upload-btn"
-        class="btn rounded-lg flex-no-shrink focus:outline"
+        class="btn rounded-lg flex-shrink-0 focus:outline"
         title="${state.translate('uploadButton')}"
         onclick="${upload}"
       >
@@ -509,7 +507,7 @@ module.exports.preview = function(state, emit) {
       </div>
       <button
         id="download-btn"
-        class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline"
+        class="btn rounded-lg mt-4 w-full flex-shrink-0 focus:outline"
         title="${state.translate('downloadButtonLabel')}"
         onclick=${download}
       >

app/ui/copyDialog.js

@@ -7,7 +7,7 @@ module.exports = function(name, url) {
       <send-copy-dialog
         class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
       >
-        <h1 class="font-bold my-4">
+        <h1 class="text-3xl font-bold my-4">
           ${state.translate('notifyUploadEncryptDone')}
         </h1>
         <p class="font-normal leading-normal text-grey-darkest word-break-all">
@@ -22,7 +22,7 @@ module.exports = function(name, url) {
           readonly="true"
         />
         <button
-          class="btn rounded-lg w-full flex-no-shrink focus:outline"
+          class="btn rounded-lg w-full flex-shrink-0 focus:outline"
           onclick="${copy}"
           title="${state.translate('copyLinkButton')}"
         >

app/ui/download.js

@@ -22,7 +22,9 @@ function downloading(state, emit) {
     <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>
+      <h1 class="text-3xl font-bold mb-4">
+        ${state.translate('downloadingTitle')}
+      </h1>
       ${archiveTile.downloading(state, emit)}
     </div>
   `;
@@ -36,7 +38,9 @@ function preview(state, emit) {
     <div
       class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
     >
-      <h1 class="mb-4">${state.translate('downloadTitle')}</h1>
+      <h1 class="text-3xl font-bold mb-4">
+        ${state.translate('downloadTitle')}
+      </h1>
       <p class="w-full text-grey-darkest text-center leading-normal">
         ${state.translate('downloadDescription')}
       </p>

app/ui/downloadCompleted.js

@@ -7,7 +7,7 @@ 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-2">
+      <h1 class="text-center text-3xl font-bold my-2">
         ${state.translate('downloadFinish')}
       </h1>
       <img src="${assets.get('completed.svg')}" class="my-12 h-48" />

app/ui/downloadPassword.js

@@ -8,7 +8,9 @@ module.exports = function(state, emit) {
     <div
       class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto"
     >
-      <h1 class="mb-4">${state.translate('downloadTitle')}</h1>
+      <h1 class="text-3xl font-bold mb-4">
+        ${state.translate('downloadTitle')}
+      </h1>
       <p class="w-full mb-4 text-center text-grey-darkest leading-normal">
         ${state.translate('downloadDescription')}
       </p>

app/ui/error.js

@@ -9,7 +9,7 @@ module.exports = function(state, emit) {
       <section
         class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
       >
-        <h1 class="text-center font-bold my-2">
+        <h1 class="text-center text-3xl font-bold my-2">
           ${state.translate('errorPageHeader')}
         </h1>
         <img class="my-12 h-48" src="${assets.get('error.svg')}" />

app/ui/footer.js

@@ -28,7 +28,7 @@ class Footer extends Component {
           Mozilla
         </a>
         <ul
-          class="list-reset flex flex-col md:flex-row items-start md:items-center md:justify-end"
+          class="flex flex-col md:flex-row items-start md:items-center md:justify-end"
         >
           <li class="m-2">
             <a href="https://www.mozilla.org/about/legal/terms/services/#send">

app/ui/home.js

@@ -20,11 +20,7 @@ module.exports = function(state, emit) {
   const right =
     archives.length === 0
       ? intro(state)
-      : list(
-          archives,
-          'list-reset p-2 h-full overflow-y-auto w-full',
-          'mb-4 w-full'
-        );
+      : list(archives, 'p-2 h-full overflow-y-auto w-full', 'mb-4 w-full');
 
   return html`
     <main class="main">

app/ui/intro.js

@@ -7,7 +7,7 @@ module.exports = function intro(state) {
       class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full"
     >
       <div class="mt-12 flex flex-col h-full">
-        <h1 class="font-bold md:pb-2">
+        <h1 class="text-3xl font-bold md:pb-2">
           ${state.translate('introTitle')}
         </h1>
         <p class="max-w-sm leading-loose mt-6 md:mt-2 md:pr-14">

app/ui/legal.js

@@ -8,7 +8,9 @@ module.exports = function(state, emit) {
       <div
         class="flex flex-col items-center bg-white m-4 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-center">${state.translate('legalTitle')}</h1>
+        <h1 class="text-center text-3xl font-bold">
+          ${state.translate('legalTitle')}
+        </h1>
         <p class="mt-2">${state.translate('legalDateStamp')}</p>
         <div class="overflow-y-scroll py-8 px-12">
           <p class="leading-normal">

app/ui/modal.js

@@ -3,11 +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-white md:rounded-xl md:my-8"
+      class="absolute inset-0 flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8"
       onclick="${close}"
     >
       <div
-        class="h-full w-full max-h-screen absolute pin-t flex items-center justify-center"
+        class="h-full w-full max-h-screen absolute top-0 flex items-center justify-center"
       >
         <div class="w-full" onclick="${e => e.stopPropagation()}">
           ${state.modal(state, emit, close)}

app/ui/noStreams.js

@@ -8,7 +8,9 @@ module.exports = function(state, emit) {
     <div
       class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
     >
-      <h1 class="mb-4">${state.translate('downloadTitle')}</h1>
+      <h1 class="mb-4 text-3xl font-bold">${state.translate(
+        'downloadTitle'
+      )}</h1>
       <p
         class="w-full p-2 border border-yellow-light rounded md:w-4/5 text-orange-dark bg-yellow-lighter text-center leading-normal"
       >
@@ -17,7 +19,7 @@ module.exports = function(state, emit) {
       <form class="md:w-128" onsubmit=${submit}>
         <fieldset class="border rounded p-4 my-4" onchange=${optionChanged}>
           <div class="flex items-center mb-2">
-            <img class="mr-3 flex-no-shrink" src="${assets.get(
+            <img class="mr-3 flex-shrink-0" src="${assets.get(
               'blue_file.svg'
             )}"/>
             <p class="flex-grow">
@@ -49,7 +51,7 @@ module.exports = function(state, emit) {
           </div>
         </fieldset>
         <input
-            class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center"
+            class="btn rounded-lg w-full flex flex-shrink-0 items-center justify-center"
             value="${state.translate('copyLinkButton')}"
             title="${state.translate('copyLinkButton')}"
             type="submit" />

app/ui/notFound.js

@@ -9,7 +9,7 @@ module.exports = function(state, emit) {
       <section
         class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
       >
-        <h1 class="text-center font-bold my-2">
+        <h1 class="text-center text-3xl font-bold my-2">
           ${state.translate('expiredTitle')}
         </h1>
         <img src="${assets.get('notFound.svg')}" class="my-12" />

app/ui/okDialog.js

@@ -4,9 +4,11 @@ module.exports = function(message) {
   return function(state, emit, close) {
     return html`
       <send-ok-dialog class="flex flex-col max-w-sm p-4 m-auto">
-        <h2 class="text-center m-8 leading-normal">${message}</h2>
+        <h2 class="text-center text-xl font-bold m-8 leading-normal">
+          ${message}
+        </h2>
         <button
-          class="btn rounded-lg w-full flex-no-shrink"
+          class="btn rounded-lg w-full flex-shrink-0"
           onclick="${close}"
           title="${state.translate('okButton')}"
         >

app/ui/shareDialog.js

@@ -6,7 +6,7 @@ module.exports = function(name, url) {
       <send-share-dialog
         class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
       >
-        <h1 class="font-bold my-4">
+        <h1 class="text-3xl font-bold my-4">
           ${state.translate('notifyUploadEncryptDone')}
         </h1>
         <p class="font-normal leading-normal text-grey-darkest word-break-all">
@@ -21,7 +21,7 @@ module.exports = function(name, url) {
           readonly="true"
         />
         <button
-          class="btn rounded-lg w-full flex-no-shrink focus:outline"
+          class="btn rounded-lg w-full flex-shrink-0 focus:outline"
           onclick="${share}"
           title="${state.translate('shareLinkButton')}"
         >

app/ui/signupDialog.js

@@ -14,9 +14,9 @@ module.exports = function(trigger) {
       >
         <img src="${assets.get('master-logo.svg')}" class="h-16 mt-1 mb-4" />
         <section
-          class="flex flex-col flex-no-shrink self-center lg:mx-6 lg:max-w-xs"
+          class="flex flex-col flex-shrink-0 self-center lg:mx-6 lg:max-w-xs"
         >
-          <h1 class="font-bold text-center lg:text-left">
+          <h1 class="text-3xl font-bold text-center lg:text-left">
             ${state.translate('accountBenefitTitle')}
           </h1>
           <ul
@@ -46,7 +46,7 @@ module.exports = function(trigger) {
               placeholder=${state.translate('emailPlaceholder')}
             />
             <input
-              class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center"
+              class="btn rounded-lg w-full flex flex-shrink-0 items-center justify-center"
               value="${state.translate('signInOnlyButton')}"
               title="${state.translate('signInOnlyButton')}"
               id="email-submit"

app/ui/surveyDialog.js

@@ -13,15 +13,15 @@ module.exports = function() {
       <send-survey-dialog
         class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
       >
-        <h1 class="font-bold my-4">
+        <h1 class="text-3xl font-bold my-4">
           Tell us what you think.
         </h1>
         <p class="font-normal leading-normal text-grey-darkest px-4">
           Love Firefox Send? Take a quick survey to let us know how we can make
           it better.
         </p>
         <a
-          class="btn rounded-lg w-full flex-no-shrink focus:outline my-5"
+          class="btn rounded-lg w-full flex-shrink-0 focus:outline my-5"
           onclick="${() => emit('closeModal')}"
           title="Give feedback"
           href="${surveyUrl}"

app/ui/unsupported.js

@@ -29,7 +29,7 @@ module.exports = function(state, emit) {
       <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>
+        <h1 class="text-3xl font-bold">${strings.header}</h1>
         <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">