refactored styles to extract btn

app/ui/archiveTile.js

@@ -20,7 +20,7 @@ function password(state) {
   const MAX_LENGTH = 32;
 
   return html`
-    <div class="my-2 px-4-device">
+    <div class="my-2 px-4 md:px-0">
       <div class="checkbox inline-block mr-3">
         <input
           id="add-password"
@@ -228,7 +228,7 @@ module.exports.wip = function(state, emit) {
       ${expiryOptions(state, emit)} ${password(state, emit)}
       <button
         id="upload-btn"
-        class="rounded-device bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 flex flex-no-shrink items-center justify-center font-semibold"
+        class="btn md:rounded flex-no-shrink"
         title="${state.translate('uploadFilesButton')}"
         onclick="${upload}"
       >
@@ -349,7 +349,7 @@ module.exports.empty = function(state, emit) {
       <label
         for="file-upload"
         role="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 mt-4 flex flex-no-shrink items-center justify-center font-semibold"
+        class="btn rounded flex items-center mt-4"
         title="${state.translate('addFilesButton')}"
       >
         ${state.translate('addFilesButton')}
@@ -382,7 +382,7 @@ module.exports.preview = function(state, emit) {
     ${archiveDetails(state.translate, archive)}
     <button
       id="download-btn"
-      class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white mt-4 py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
+      class="btn rounded mt-4 w-full flex-no-shrink"
       title="${state.translate('downloadButtonLabel')}"
       onclick=${download}>
       ${state.translate('downloadButtonLabel')}

app/ui/copyDialog.js

@@ -18,10 +18,7 @@ module.exports = function(name, url) {
           value="${url}"
           readonly="true"
         />
-        <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"
-          onclick="${copy}"
-        >
+        <button class="btn rounded w-full flex-no-shrink" onclick="${copy}">
           ${state.translate('copyUrlFormButton')}
         </button>
         <a

app/ui/expiryOptions.js

@@ -7,7 +7,7 @@ const signupDialog = require('./signupDialog');
 
 module.exports = function(state, emit) {
   const el = html`
-    <div class="px-4-device">
+    <div class="px-4 md:px-0">
       ${
         raw(
           state.translate('frontPageExpireInfo', {

app/ui/header.js

@@ -21,14 +21,14 @@ class Header extends Component {
       browserName() === 'android-app'
         ? html`
             <a class="header-logo">
-              <h1 class="text-white md:text-black font-normal">
+              <h1 class="text-2xl text-white md:text-black font-normal">
                 Firefox <b>Send</b>
               </h1>
             </a>
           `
         : html`
             <a class="header-logo" href="/">
-              <h1 class="text-white md:text-black font-normal">
+              <h1 class="text-2xl text-white md:text-black font-normal">
                 Firefox <b>Send</b>
               </h1>
             </a>

app/ui/okDialog.js

@@ -5,10 +5,7 @@ module.exports = function(message) {
     return html`
       <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"
-          onclick="${close}"
-        >
+        <button class="btn rounded w-full flex-no-shrink" onclick="${close}">
           ${state.translate('okButton')}
         </button>
       </send-ok-dialog>

app/ui/signupDialog.js

@@ -32,7 +32,7 @@ module.exports = function() {
           id="email-submit"
           type="submit"/>
       </form>
-      <label 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" for="email-submit">
+      <label class="btn rounded w-full flex flex-no-shrink items-center justify-center" for="email-submit">
         ${state.translate('signInMenuOption')}
       </label>
       <button