use custom elements instead of adding css classes for selectors

app/ui/account.js

@@ -62,18 +62,18 @@ class Account extends Component {
     const translate = this.state.translate;
     if (!this.local.loggedIn) {
       return html`
-        <div>
+        <send-account>
           <button
             class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue"
             onclick="${e => this.login(e)}"
           >
             ${translate('signInMenuOption')}
           </button>
-        </div>
+        </send-account>
       `;
     }
     return html`
-      <div class="relative h-8">
+      <send-account class="relative h-8">
         <input
           type="image"
           alt="${user.email}"
@@ -97,7 +97,7 @@ class Account extends Component {
             </a>
           </li>
         </ul>
-      </div>
+      </send-account>
     `;
   }
 }

app/ui/archiveTile.js

@@ -96,7 +96,7 @@ function password(state) {
 
 function fileInfo(file, action) {
   return html`
-    <article class="flex flex-row items-center p-3 w-full">
+    <send-file class="flex flex-row items-center p-3 w-full">
       <img class="" src="${assets.get('blue_file.svg')}"/>
       <p class="ml-4 w-full">
         <h1 class="text-sm font-medium word-break-all">${file.name}</h1>
@@ -106,7 +106,7 @@ function fileInfo(file, action) {
         <div class="hidden">${file.type}</div>
       </p>
       ${action}
-    </article>`;
+    </send-file>`;
 }
 
 function archiveDetails(translate, archive) {
@@ -141,7 +141,7 @@ function archiveDetails(translate, archive) {
 
 module.exports = function(state, emit, archive) {
   return html`
-  <article
+  <send-archive
     id="archive-${archive.id}"
     class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
     <p class="w-full">
@@ -168,7 +168,7 @@ module.exports = function(state, emit, archive) {
       <img src="${assets.get('copy-16.svg')}" class="mr-2"/>
       ${state.translate('copyUrlHover')}
     </button>
-  </article>`;
+  </send-archive>`;
 
   function copy(event) {
     event.stopPropagation();
@@ -189,7 +189,10 @@ module.exports = function(state, emit, archive) {
 
 module.exports.wip = function(state, emit) {
   return html`
-    <article class="flex flex-col bg-white z-20 md:h-full w-full" id="wip">
+    <send-upload-area
+      class="flex flex-col bg-white z-20 md:h-full w-full"
+      id="wip"
+    >
       ${
         list(
           Array.from(state.archive.files)
@@ -231,7 +234,7 @@ module.exports.wip = function(state, emit) {
       >
         ${state.translate('uploadFilesButton')}
       </button>
-    </article>
+    </send-upload-area>
   `;
 
   function upload(event) {
@@ -281,7 +284,7 @@ module.exports.uploading = function(state, emit) {
   const progressPercent = percent(progress);
   const archive = state.archive;
   return html`
-  <article
+  <send-upload-area
     id="${archive.id}"
     class="z-20 flex flex-col items-start border border-grey-light bg-white p-4 w-full">
     <p class="w-full">
@@ -305,7 +308,7 @@ module.exports.uploading = function(state, emit) {
       onclick=${cancel}>
       ${state.translate('uploadingPageCancel')}
     </button>
-  </article>`;
+  </send-upload-area>`;
 
   function cancel(event) {
     event.stopPropagation();
@@ -316,7 +319,7 @@ module.exports.uploading = function(state, emit) {
 
 module.exports.empty = function(state, emit) {
   return html`
-    <article
+    <send-upload-area
       class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full"
       onclick="${
         e => {
@@ -351,7 +354,7 @@ module.exports.empty = function(state, emit) {
       >
         ${state.translate('addFilesButton')}
       </label>
-    </article>
+    </send-upload-area>
   `;
 
   function add(event) {
@@ -368,7 +371,7 @@ module.exports.preview = function(state, emit) {
     archive.open = true;
   }
   return html`
-    <article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20 w-full">
+    <send-archive class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20 w-full">
       <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>
@@ -384,7 +387,7 @@ module.exports.preview = function(state, emit) {
       onclick=${download}>
       ${state.translate('downloadButtonLabel')}
     </button>
-  </article>`;
+  </send-archive>`;
 
   function download(event) {
     event.preventDefault();
@@ -398,7 +401,7 @@ module.exports.downloading = function(state, emit) {
   const progress = state.transfer.progressRatio;
   const progressPercent = percent(progress);
   return html`
-  <article class="flex flex-col bg-white border border-grey-light p-4 z-20 w-full">
+  <send-archive class="flex flex-col bg-white border border-grey-light p-4 z-20 w-full">
     <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>
@@ -414,7 +417,7 @@ module.exports.downloading = function(state, emit) {
       onclick=${cancel}>
       ${state.translate('downloadCancel')}
     </button>
-  </article>`;
+  </send-archive>`;
 
   function cancel(event) {
     event.preventDefault();

app/ui/copyDialog.js

@@ -4,7 +4,9 @@ const { copyToClipboard } = require('../utils');
 module.exports = function(name, url) {
   return function(state, emit, close) {
     return html`
-      <div class="flex flex-col items-center text-center p-4 max-w-sm">
+      <send-copy-dialog
+        class="flex flex-col items-center text-center p-4 max-w-sm"
+      >
         <h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
         <p class="font-normal leading-normal text-grey-darker word-break-all">
           ${state.translate('copyUrlFormLabelWithName', { filename: name })}
@@ -25,7 +27,7 @@ module.exports = function(name, url) {
         <a class="text-blue my-4 font-medium cursor-pointer" onclick="${close}"
           >${state.translate('okButton')}</a
         >
-      </div>
+      </send-copy-dialog>
     `;
 
     function copy(event) {

app/ui/intro.js

@@ -3,7 +3,7 @@ const assets = require('../../common/assets');
 
 module.exports = function intro(state) {
   return html`
-  <article class="flex flex-col items-center justify-center bg-white border border-grey-light md:border-none px-6 text-center md:py-0 py-6 md:mb-0 mb-6 h-full">
+  <send-intro class="flex flex-col items-center justify-center bg-white border border-grey-light md:border-none px-6 text-center md:py-0 py-6 md:mb-0 mb-6 h-full">
     <div class="flex flex-col items-center justify-between h-full py-8">
       <p class="text-center">
         <div class="font-semibold leading-normal">${state.translate(
@@ -18,5 +18,5 @@ module.exports = function intro(state) {
         'uploadPageExplainer'
       )}</p>
     </div>
-  </article>`;
+  </send-intro>`;
 };

app/ui/modal.js

@@ -2,7 +2,7 @@ const html = require('choo/html');
 
 module.exports = function(state, emit) {
   return html`
-    <div
+    <send-modal
       class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8"
       onclick="${close}"
     >
@@ -14,7 +14,7 @@ module.exports = function(state, emit) {
           ${state.modal(state, emit, close)}
         </div>
       </div>
-    </div>
+    </send-modal>
   `;
 
   function close(event) {

app/ui/okDialog.js

@@ -3,7 +3,7 @@ const html = require('choo/html');
 module.exports = function(message) {
   return function(state, emit, close) {
     return html`
-      <div class="flex flex-col max-w-xs p-4">
+      <send-ok-dialog class="flex flex-col max-w-xs p-4">
         <div class="text-center m-8 leading-normal">${message}</div>
         <button
           class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
@@ -11,7 +11,7 @@ module.exports = function(message) {
         >
           ${state.translate('okButton')}
         </button>
-      </div>
+      </send-ok-dialog>
     `;
   };
 };

app/ui/promo.js

@@ -13,7 +13,7 @@ class Promo extends Component {
 
   createElement() {
     return html`
-      <div
+      <send-promo
         class="w-full flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light leading-tight text-grey-darkest px-4 py-3"
       >
         <div class="flex items-center mx-auto">
@@ -31,7 +31,7 @@ class Promo extends Component {
             >
           </span>
         </div>
-      </div>
+      </send-promo>
     `;
   }
 }

app/ui/signupDialog.js

@@ -8,7 +8,7 @@ module.exports = function() {
       document.getElementById('email-input').focus();
     });
     return html`
-    <div class="flex flex-col p-4">
+    <send-signup-dialog class="flex flex-col p-4">
       <p class="p-8">
         ${state.translate('accountBenefitTitle')}
         <ul class="my-2 leading-normal">
@@ -40,7 +40,7 @@ module.exports = function() {
         title="${state.translate('deletePopupCancel')}"
         onclick=${close}>${state.translate('deletePopupCancel')}
       </button>
-    </div>`;
+    </send-signup-dialog>`;
 
     function emailish(str) {
       if (!str) {

test/integration/download-tests.js

@@ -36,7 +36,6 @@ describe('Firefox Send', function() {
   });
 
   it('should update the download count on home page after 1 download', function() {
-    const expectedExpiresAfterText = 'Expires after 1 download';
     browser.chooseFile(
       homePage.uploadInput,
       `${testFilesPath}/${testFiles[0]}`
@@ -51,10 +50,10 @@ describe('Firefox Send', function() {
     downloadPage.download();
     browser.waitForExist(downloadPage.downloadComplete);
     browser.back();
-    browser.waitForExist(`#archive-${downloadPage.fileId}`);
+    browser.waitForExist('send-archive');
     assert.equal(
-      browser.getText(`#archive-${downloadPage.fileId} > div`).substring(0, 24),
-      expectedExpiresAfterText
+      browser.getText('send-archive > div').substring(0, 24),
+      'Expires after 1 download'
     );
   });
 });