Merge pull request #1102 from mozilla/btn-style

refactored styles to extract btn

app/main.css

@@ -1,90 +1,34 @@
 @tailwind preflight;
 @tailwind components;
-@tailwind utilities;
+
+:not(input) {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 
 a {
   color: inherit;
   text-decoration: none;
 }
 
-progress {
+.btn {
-  @apply bg-grey-light;
-  @apply rounded-sm;
-  @apply w-full;
-  @apply h-1;
-}
-
-progress::-moz-progress-bar {
   @apply bg-blue;
-  @apply rounded-sm;
+  @apply text-white;
+  @apply font-semibold;
+  @apply cursor-pointer;
+  @apply py-2;
+  @apply px-6;
+  @apply h-12;
 }
 
-progress::-webkit-progress-bar {
+.btn:hover {
-  @apply bg-grey-light;
+  @apply bg-blue-dark;
-  @apply rounded-sm;
-  @apply w-full;
-  @apply h-1;
 }
 
-progress::-webkit-progress-value {
+.btn:focus {
-  @apply bg-blue;
+  @apply bg-blue-dark;
-  @apply rounded-sm;
-}
-
-.word-break-all {
-  word-break: break-all;
-}
-
-.main {
-  display: flex;
-  max-width: 64rem;
-  width: 100%;
-  height: 100%;
-}
-
-.main > section {
-  @apply bg-white;
-}
-
-.header-logo {
-  background-image: url('../assets/send_logo_white.svg');
-  background-position: left;
-  background-repeat: no-repeat;
-  background-size: 1.8rem;
-  padding-left: 2.4rem;
-  text-decoration: none;
-}
-
-.header-logo h1 {
-  font-size: 1.5rem;
-}
-
-.mozilla-logo {
-  background-image: url('../assets/mozilla-logo.svg');
-  background-repeat: no-repeat;
-  background-size: 100px, 32px;
-  overflow: hidden;
-  text-indent: 120%;
-  white-space: nowrap;
-  display: inline-block;
-  height: 32px;
-  width: 100px;
-  flex-shrink: 0;
-}
-
-.feedback-link {
-  background-color: #000;
-  background-image: url('../assets/feedback.svg');
-  background-position: 0.125rem 0.25rem;
-  background-repeat: no-repeat;
-  background-size: 1.125rem;
-  color: #fff;
-  display: block;
-  font-size: 0.75rem;
-  line-height: 0.75rem;
-  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
-  text-indent: 0.125rem;
-  white-space: nowrap;
 }
 
 .checkbox {
@@ -140,53 +84,73 @@ progress::-webkit-progress-value {
   cursor: auto;
 }
 
+.feedback-link {
+  background-color: #000;
+  background-image: url('../assets/feedback.svg');
+  background-position: 0.125rem 0.25rem;
+  background-repeat: no-repeat;
+  background-size: 1.125rem;
+  color: #fff;
+  display: block;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
+  text-indent: 0.125rem;
+  white-space: nowrap;
+}
+
+.header-logo {
+  background-image: url('../assets/send_logo_white.svg');
+  background-position: left;
+  background-repeat: no-repeat;
+  background-size: 1.8rem;
+  padding-left: 2.4rem;
+  text-decoration: none;
+}
+
+.main {
+  display: flex;
+  max-width: 64rem;
+  width: 100%;
+  height: 100%;
+}
+
+.main > section {
+  @apply bg-white;
+}
+
+.mozilla-logo {
+  background-image: url('../assets/mozilla-logo.svg');
+  background-repeat: no-repeat;
+  background-size: 100px, 32px;
+  overflow: hidden;
+  text-indent: 120%;
+  white-space: nowrap;
+  display: inline-block;
+  height: 32px;
+  width: 100px;
+  flex-shrink: 0;
+}
+
 #password-msg::after {
   content: '\200b';
 }
 
-@screen md {
+progress {
-  .main {
+  @apply bg-grey-light;
-    @apply flex-1;
+  @apply rounded-sm;
-    @apply self-center;
+  @apply w-full;
-    @apply items-center;
+  @apply h-1;
-    @apply m-auto;
-    @apply py-8;
-
-    min-height: 33rem;
-    max-height: 40rem;
-    width: calc(100% - 3rem);
-  }
-
-  .header-logo {
-    background-image: url('../assets/send_logo.svg');
-  }
-
-  .main > section {
-    @apply shadow-md;
-  }
 }
 
-.rounded-device {
+progress::-webkit-progress-bar {
-  border-radius: 0.25rem;
+  @apply bg-grey-light;
+  @apply rounded-sm;
+  @apply w-full;
+  @apply h-1;
 }
 
-.px-4-device {
+progress::-webkit-progress-value {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-@media screen and (max-device-width: 576px) {
-  .rounded-device {
-    border-radius: 0;
-  }
-
-  .px-4-device {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
-
-progress[value]::-webkit-progress-value {
   /* stylelint-disable */
   background-image: -webkit-linear-gradient(
       -45deg,
@@ -206,7 +170,7 @@ progress[value]::-webkit-progress-value {
   -webkit-animation: animate-stripes 1s linear infinite;
 }
 
-progress[value]::-moz-progress-bar {
+progress::-moz-progress-bar {
   /* stylelint-disable */
   background-image: -moz-linear-gradient(
       135deg,
@@ -238,9 +202,26 @@ progress[value]::-moz-progress-bar {
   }
 }
 
-:not(input) {
+@screen md {
-  -webkit-user-select: none;
+  .header-logo {
-  -moz-user-select: none;
+    background-image: url('../assets/send_logo.svg');
-  -ms-user-select: none;
+  }
-  user-select: none;
+
+  .main {
+    @apply flex-1;
+    @apply self-center;
+    @apply items-center;
+    @apply m-auto;
+    @apply py-8;
+
+    min-height: 33rem;
+    max-height: 40rem;
+    width: calc(100% - 3rem);
+  }
+
+  .main > section {
+    @apply shadow-md;
+  }
 }
+
+@tailwind utilities;

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
+        <button class="btn rounded w-full flex-no-shrink" onclick="${copy}">
-          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}"
-        >
           ${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
+        <button class="btn rounded w-full flex-no-shrink" onclick="${close}">
-          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}"
-        >
           ${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